Flex - Applicazioni

Prima di iniziare a creare una vera applicazione "HelloWorld" utilizzando Flash Builder, vediamo quali sono le parti effettive di un'applicazione Flex:

Un'applicazione Flex è costituita dalle seguenti quattro parti importanti, di cui l'ultima parte è facoltativa ma le prime tre parti sono obbligatorie.

  • Librerie Flex Framework
  • Codice lato client
  • Risorse pubbliche (HTML / JS / CSS)
  • Codice lato server

Le posizioni di esempio di parti diverse di una tipica applicazione Flex come HelloWord saranno come mostrato di seguito:

Nome Posizione
Radice del progetto Ciao mondo/
Librerie Flex Framework Crea percorso
Risorse pubbliche html-template
Codice lato client tabella con bordo tabella / com / tutorialspoint / client
Codice lato server tabella con bordo tabella / com / tutorialspoint / server

Processo di compilazione dell'applicazione

Per cominciare, l'applicazione Flex richiede le librerie del framework Flex. Successivamente, Flash Builder aggiunge automaticamente le librerie al percorso di creazione.

Quando creiamo il nostro codice utilizzando Flash Builder, Flash Builder eseguirà le seguenti attività:

  • Compila il codice sorgente nel file HelloWorld.swf.

  • Compila un HelloWorld.html (un file wrapper per il file swf) da un file index.template.html memorizzato nella cartella html-template

  • Copia i file HelloWorld.swf e HelloWorld.html nella cartella di destinazione, bin-debug.

  • Copia swfobject.js, un codice JavaScript responsabile del caricamento dinamico del file swf in HelloWorld.html nella cartella di destinazione, bin-debug

  • Copia le librerie del framework sotto forma di file swf denominato frameworks_xxx.swf nella cartella di destinazione, bin-debug

  • Copia altri moduli flex (file .swf come sparkskins_xxx.swf, textLayout_xxx.swf) nella cartella di destinazione.

Processo di avvio dell'applicazione

  • Apri il file HelloWorld.html disponibile nella cartella \ HelloWorld \ bin-debug in qualsiasi browser web.

  • HelloWorld.swf verrà caricato automaticamente e l'applicazione inizierà a funzionare.

Librerie Flex Framework

Di seguito è riportato un breve dettaglio su alcune importanti librerie di framework. Si noti che le librerie Flex sono indicate utilizzando la notazione .swc

Suor n Nodi e descrizione
1

playerglobal.swc

Questa libreria è specifica per FlashPlayer installato sulla macchina e contiene metodi nativi supportati da Flash Player.
2

textlayout.swc

Questa libreria supporta le funzionalità relative al layout del testo.
3

framework.swc

Questa è la libreria del framework flessibile che contiene le caratteristiche principali di Flex.
4

mx.swc

Questa libreria memorizza le definizioni dei controlli dell'interfaccia utente mx.
5

charts.swc

Questa libreria supporta i controlli grafici.
6

spark.swc

Questa libreria archivia le definizioni dei controlli dell'interfaccia utente Spark.
7

sparkskins.swc

Questa libreria supporta lo skinning dei controlli dell'interfaccia utente di Spark.

Codice lato client

È possibile scrivere il codice dell'applicazione Flex MXML così come ActionScript.

Suor n Tipo e descrizione
1

MXML

MXML è un linguaggio di markup XML che utilizzeremo per disporre i componenti dell'interfaccia utente. MXML viene compilato in ActionScript durante il processo di compilazione.
2

ActionScript

ActionScript è un linguaggio di programmazione procedurale orientato agli oggetti e si basa sulla bozza delle specifiche del linguaggio ECMAScript (ECMA-262) edizione 4.

In Flex, possiamo combinare ActionScript e MXML, per fare quanto segue:

  • Disegna i componenti dell'interfaccia utente utilizzando tag MXML

  • Utilizzare MXML per definire in modo dichiarativo aspetti non visivi di un'applicazione, come l'accesso alle origini dati sul server

  • Utilizzare MXML per creare associazioni di dati tra i componenti dell'interfaccia utente e le origini dati sul server.

  • Utilizza ActionScript per definire listener di eventi all'interno degli attributi di evento MXML.

  • Aggiungi blocchi di script utilizzando il etichetta.

  • Includi file ActionScript esterni.

  • Importa classi ActionScript.

  • Crea componenti ActionScript.

Risorse pubbliche

Questi sono file della guida a cui fa riferimento l'applicazione Flex, come la pagina HTML dell'host, CSS o immagini che si trovano nella cartella del modello html. Contiene i seguenti file:

Suor n Nome file e descrizione
1

index.template.html

Pagina HTML host, con segnaposto. Flash Builder utilizza questo modello per creare la pagina HelloWorld.html con il file HelloWorld.swf.
2

playerProductInstall.swf

Questa è un'utilità flash per installare Flash Player in modalità rapida.
3

swfobject.js

Questo è il JavaScript responsabile per controllare la versione di Flash Player installata e per caricare HelloWorld.swf nella pagina HelloWorld.html.
4

html-template/history

Questa cartella contiene le risorse per la gestione della cronologia dell'applicazione.

HelloWorld.mxml

Questo è il codice MXML / AS (ActionScript) effettivo scritto implementando la logica di business dell'applicazione e che il compilatore Flex traduce in file SWF che verrà eseguito da Flash Player nel browser.

Un esempio di classe HelloWorld Entry sarà il seguente:

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:VGroup horizontalAlign = "center" width = "100%" height = "100%" 
      paddingTop = "100" gap = "50">
      <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" />
      <s:Button label = "Click Me!" id = "btnClickMe" 
         click = "btnClickMe_clickHandler(event)" />
   </s:VGroup>	
</s:Application>

La tabella seguente fornisce la descrizione di tutti i tag utilizzati nello script di codice precedente.

Suor n Nodo e descrizione
1

Application

Definisce il contenitore dell'applicazione che è sempre il tag radice di un'applicazione Flex.
2

Script

Contiene la logica aziendale nel linguaggio ActionScript.
3

VGroup

Definisce un contenitore di raggruppamento verticale che può contenere controlli UI flessibili in modo verticale.
4

Label

Rappresenta un controllo Label, un componente dell'interfaccia utente molto semplice che visualizza il testo.
5

Button

Rappresenta un controllo Button, su cui è possibile fare clic per eseguire un'azione.

Codice lato server

Questa è la parte lato server della tua applicazione ed è molto facoltativa. Se non si esegue alcuna elaborazione di backend all'interno dell'applicazione, non è necessaria questa parte, ma se è necessaria un'elaborazione nel backend e l'applicazione lato client interagisce con il server, sarà necessario sviluppare questi componenti.

Nel prossimo capitolo utilizzeremo tutti i concetti sopra menzionati per creare un file HelloWorld applicazione utilizzando Flash Builder.