Flex - Guida rapida
Cos'è Flex?
Flex è un potente framework applicativo open source che consente di creare applicazioni tradizionali per browser, dispositivi mobili e desktop utilizzando lo stesso modello di programmazione, strumento e base di codice.
Flex fornisce FLEX SDK composto dalla libreria di classi Flex (classi ActionScript), i compilatori Flex, il debugger, i linguaggi di programmazione MXML e ActionScript e altre utilità per creare applicazioni RIA (Rich Internet) espressive e interattive
Flex si occupa dell'interfaccia utente (UI) o della funzionalità lato client di un'applicazione web. La funzionalità lato server dipende dai componenti lato server scritti in un linguaggio di scripting tradizionale (Java / PHP ecc.)
Un'applicazione basata su Flex effettivamente fornita come file SWF e somiglia molto alla parte HTML / JavaScript di un'applicazione web tradizionale.
L'applicazione Flex viene distribuita come file SWF più un wrapper HTML, i file CSS e qualsiasi file di script lato server (ad esempio Java, .CFM, .PHP, ecc.) Sul server. Come le applicazioni web tradizionali.
Queste risorse vengono fornite da un server al browser del client utilizzando la consueta modalità di richiesta / risposta HTTP e Flash Player che esegue l'applicazione in un browser.
Vantaggi di Flex
Le applicazioni Flex sono generalmente basate su Flash Player che può accedere alle funzionalità del dispositivo come GPS, fotocamera, database locale, accelerometro grafico.
Le applicazioni Flex possono essere eseguite su dispositivi Android, BlackBerry Tablet OS e iOS.
Le applicazioni Flex possono essere eseguite sia sui browser che sul desktop.
Le applicazioni Flex sono indipendenti dalla piattaforma. L'interfaccia utente può essere nativa per la piattaforma o può essere modificata su ogni piattaforma.
Le applicazioni Flex possono interagire con il server con tutte le principali tecnologie lato server come Java, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion e SAP utilizzando standard di settore come REST, SOAP, JSON, JMS e AMF.
Flex Applications assicura una ricca esperienza utente attraverso l'interazione intuitiva con l'applicazione e la presentazione delle informazioni in un'interfaccia visivamente più ricca.
L'applicazione Flex è un'applicazione a pagina singola in cui gli stati possono passare da uno stato all'altro senza dover recuperare una nuova pagina dal server o aggiornare il browser.
L'applicazione Flex riduce notevolmente il carico sul server perché è necessario restituire l'applicazione una sola volta, anziché una nuova pagina ogni volta che l'utente cambia visualizzazione.
Svantaggi di Flex
Le applicazioni Flex sono applicazioni a thread singolo, ma Flex fornisce un modello di programmazione asincrono per mitigare questo problema.
Flex è basato su ActionScript e XML. Imparare queste due cose è fondamentale per lavorare in Flex.
Questo tutorial ti guiderà su come preparare un ambiente di sviluppo per iniziare a lavorare con Adobe Flex Framework. Questo tutorial ti insegnerà anche come configurare JDK e Adobe Flash Builder sulla tua macchina prima di configurare Flex Framework.
Requisito del sistema
FLEX richiede JDK 1.4 o versioni successive, quindi il primo requisito è avere JDK installato nella macchina.
| JDK | 1.4 O superiore. |
|---|---|
| Memoria | Nessun requisito minimo. |
| Spazio sul disco | Nessun requisito minimo. |
| Sistema operativo | Nessun requisito minimo. |
Segui i passaggi indicati per configurare il tuo ambiente per iniziare con lo sviluppo dell'applicazione Flex.
Passaggio 1: verifica l'installazione di Java sulla macchina
Ora apri la console ed esegui quanto segue java comando.
| OS | Compito | Comando |
|---|---|---|
| finestre | Apri la Console di comando | c: \> java -version |
| Linux | Apri Terminale di comando | $ java -version |
| Mac | Apri Terminale | macchina: ~ joseph $ java -version |
Verifichiamo l'output per tutti i sistemi operativi -
| OS | Output generato |
|---|---|
| finestre | versione java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) VM client Java HotSpot (TM) (build 17.0-b17, modalità mista, condivisione) |
| Linux | versione java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) VM client Java HotSpot (TM) (build 17.0-b17, modalità mista, condivisione) |
| Mac | versione java "1.6.0_21" Java (TM) SE Runtime Environment (build 1.6.0_21-b07) VM server Java HotSpot (TM) a 64 bit (build 17.0-b17, modalità mista, condivisione) |
Passaggio 2: configurazione del Java Development Kit (JDK)
Se non è installato Java, è possibile installare Java Software Development Kit (SDK) dal sito Java di Oracle Download di Java SE . Troverai le istruzioni per l'installazione di JDK nei file scaricati, quindi segui le istruzioni fornite per installare e configurare il setup. Infine, impostare le variabili di ambiente PATH e JAVA_HOME in modo che facciano riferimento alla directory che contiene java e javac, tipicamente java_install_dir / bin e java_install_dir rispettivamente.
Impostare il JAVA_HOMEvariabile di ambiente in modo che punti alla posizione della directory di base in cui Java è installato sulla macchina. Ad esempio:
| OS | Produzione |
|---|---|
| finestre | Imposta la variabile d'ambiente JAVA_HOME su C: \ Program Files \ Java \ jdk1.6.0_21 |
| Linux | export JAVA_HOME = / usr / local / java-current |
| Mac | export JAVA_HOME = / Library / Java / Home |
Aggiungi la posizione del compilatore Java al percorso di sistema.
| OS | Produzione |
|---|---|
| finestre | Aggiungi la stringa;% JAVA_HOME% \ bin alla fine della variabile di sistema, Path. |
| Linux | export PATH =$PATH:$JAVA_HOME / bin / |
| Mac | non richiesto |
Passaggio 3: configurazione di Adobe Flash Builder 4.5
Tutti gli esempi in questo tutorial sono stati scritti utilizzando Adobe Flash Builder 4.5 Professional IDE Trial Version. Quindi, ti suggerisco di avere l'ultima versione di Adobe Flash Builder installata sul tuo computer. Inoltre, controlla la compatibilità del sistema operativo.
Per installare Adobe Flash Builder IDE, scarica gli ultimi binari di Adobe Flash Builder da https://www.adobe.com/in/products/flash-builder.html. Dopo aver scaricato l'installazione, decomprimere la distribuzione binaria in una posizione comoda. Ad esempio, in C: \ flash-builder su Windows o / usr / local / flash-builder su Linux / Unix e infine impostare la variabile PATH in modo appropriato.
Flash Builder si avvierà, quando esegui i seguenti comandi su una macchina Windows, o quando puoi semplicemente fare doppio clic su FlashBuilder.exe
%C:\flash-builder\FlashBuilder.exeFlash Builder può essere avviato eseguendo i seguenti comandi su una macchina Unix (Solaris, Linux, ecc.) -
$/usr/local/flash-builder/FlashBuilderLa versione di prova di Adobe Flash Builder può essere utilizzata per 60 giorni. Accetta i termini e le condizioni e salta i passaggi di registrazione iniziali per continuare con l'IDE. Per la nostra comprensione, stiamo usando la versione di prova a scopo didattico.
Dopo un avvio riuscito, se tutto va bene, dovrebbe visualizzare il seguente risultato:
Adobe Flash Builder viene fornito preconfigurato con FLEX SDK. Usiamo FLEX SDK 4.5 nei nostri esempi forniti in bundle con Adobe Flash Builder 4.5.
Passaggio 4: configurazione di Apache Tomcat
Puoi scaricare l'ultima versione di Tomcat da https://tomcat.apache.org/. Dopo aver scaricato l'installazione, decomprimere la distribuzione binaria in una posizione comoda. Ad esempio, in C: \ apache-tomcat-6.0.33 su Windows o /usr/local/apache-tomcat-6.0.33 su Linux / Unix e impostare la variabile di ambiente CATALINA_HOME che punta alle posizioni di installazione.
Tomcat può essere avviato eseguendo i seguenti comandi sulla macchina Windows, oppure puoi semplicemente fare doppio clic su startup.bat
%CATALINA_HOME%\bin\startup.bat
or
C:\apache-tomcat-6.0.33\bin\startup.batTomcat può essere avviato eseguendo i seguenti comandi su una macchina UNIX (Solaris, Linux, ecc.) -
$CATALINA_HOME/bin/startup.sh
Or
/usr/local/apache-tomcat-6.0.33/bin/startup.shDopo un avvio riuscito, le applicazioni Web predefinite incluse con Tomcat saranno disponibili visitando http://localhost:8080/. Se tutto va bene, dovrebbe visualizzare il seguente risultato:
Ulteriori informazioni sulla configurazione e l'esecuzione di Tomcat sono disponibili nella documentazione inclusa qui, nonché sul sito Web di Tomcat: http://tomcat.apache.org
Tomcat può essere arrestato eseguendo i seguenti comandi sulla macchina Windows:
%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdownTomcat può essere arrestato eseguendo i seguenti comandi su una macchina UNIX (Solaris, Linux, ecc.) -
$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.shPrima 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
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.
Useremo Flash Builder 4.5 per creare applicazioni Flex. Cominciamo con un sempliceHelloWorld applicazione.
Passaggio 1: creazione del progetto
Il primo passo è creare un semplice progetto Flex utilizzando l'IDE di Flash Builder. Avvia la procedura guidata del progetto utilizzando l'opzioneFile > New > Flex Project. Ora nomina il tuo progetto come HelloWorld usando la finestra della procedura guidata come segue:
Seleziona il tipo di applicazione Web (runs in Adobe Flash Player). Tuttavia, se non è selezionato, lasciare gli altri valori predefiniti come tali e fare clic sul pulsante Fine. Una volta che il tuo progetto è stato creato con successo, avrai il seguente contenuto nel tuo Project Explorer:
Ecco una breve descrizione di tutte le cartelle importanti:
| Cartella | Posizione |
|---|---|
| tavolo bordato da tavolo | File di codice sorgente (mxml / as classes). Abbiamo creato la struttura di cartelle com / tutorialspoint / client contenente le classi java specifiche del lato client responsabili della visualizzazione dell'interfaccia utente del client. |
| bin-debug | Questa è la parte di output, rappresenta l'effettiva applicazione web distribuibile. La cartella Cronologia contiene i file di supporto per la gestione della cronologia dell'applicazione Flex. framework_xxx.swf, i file del framework flex dovrebbero essere usati dall'applicazione flex. HelloWorld.html, file HTML wrapper / host per l'applicazione flessibile. HelloWorld.swf, la nostra applicazione basata su flessibilità. playerProductInstall.swf, programma di installazione rapido di Flash Player. spark_xxx.swf, libreria per il supporto dei componenti spark. swfobject.js, JavaScript responsabile del caricamento di HelloWorld.swf in HelloWorld.html. Controlla la versione di Flash Player e passa il parametro di inizializzazione al file HelloWorld.swf. textLayout_xxx.swf, libreria per il supporto dei componenti di testo. |
| html-template | Questo rappresenta l'applicazione web configurabile. Flash Builder compila i file dal modello html alla cartella bin-debug. La cartella Cronologia contiene i file di supporto per la gestione della cronologia dell'applicazione Flex. index.template.html, file HTML wrapper / host per applicazioni flessibili con segnaposto per la configurazione specifica di Flash Builder. Viene compilato in HelloWorld.html nella cartella bin-debug durante la compilazione. playerProductInstall.swf, il programma di installazione di Flash Player Express viene copiato nella cartella bin-debug durante la compilazione. swfobject.js, JavaScript responsabile del caricamento di HelloWorld.swf in HelloWorld.html. Controlla la versione di Flash Player e passa il parametro di inizializzazione al file HelloWorld.swf che viene copiato nella cartella bindebug durante la compilazione. |
Passaggio 2: creare un file CSS esterno
Crea un file CSS styles.css per la pagina HTML wrapper in html-template cartella.
html, body {
height:100%;
}
body {
margin:0;
padding:0;
overflow:auto;
text-align:center;
}
object:focus {
outline:none;
}
#flashContent {
display:none;
}
.pluginHeader {
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#9b1204;
text-decoration:none;
font-weight:bold;
}
.pluginInstallText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}
.pluginText {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
line-height:18px;
font-style:normal;
}Passaggio 3: modificare il modello di pagina HTML del wrapper
Modifica il modello di pagina HTML del wrapper index.template.html in htmltemplatecartella. Flash Builder creerà un modello di pagina HTML wrapper predefinito html-template / index.template.html , che verrà compilato in HelloWorld.html.
Questo file contiene segnaposto che Flash Builder sostituisce durante il processo di compilazione. Ad esempio, versione di Flash Player, nome dell'applicazione, ecc.
Modifichiamo questo file per visualizzare messaggi personalizzati nel caso in cui il plug-in Flash non sia installato.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">
<head>
<title>${title}</title>
<meta name = "google" value = "notranslate" />
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<link rel = "stylesheet" href = "styles.css" type = "text/css"></link>
<link rel = "stylesheet" type = "text/css" href = "history/history.css" />
<script type = "text/javascript" table table-bordered = "history/history.js">
</script>
<script type = "text/javascript" table table-bordered = "swfobject.js"></script>
<script type = "text/javascript">
// For version detection, set to min. required Flash Player version,
//or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "${version_major}.${version_minor}.${version_revision}"; // To use express install, set to playerProductInstall.swf, //otherwise the empty string. var xiSwfUrlStr = "${expressInstallSwf}";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "${bgcolor}"; params.allowscriptaccess = "sameDomain"; params.allowfullscreen = "true"; var attributes = {}; attributes.id = "${application}";
attributes.name = "${application}"; attributes.align = "middle"; swfobject.embedSWF ( "${swf}.swf", "flashContent",
"${width}", "${height}",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case
//it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body>
<div id = "flashContent">
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</div>
<noscript>
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width = "${width}" height = "${height}" id = "${application}"> <param name = "movie" value = "${swf}.swf" />
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" /> <param name = "allowScriptAccess" value = "sameDomain" /> <param name = "allowFullScreen" value = "true" /> <!--[if !IE]>--> <object type = "application/x-shockwave-flash" data = "${swf}.swf"
width = "${width}" height = "${height}">
<param name = "quality" value = "high" />
<param name = "bgcolor" value = "${bgcolor}" />
<param name = "allowScriptAccess" value = "sameDomain" />
<param name = "allowFullScreen" value = "true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2"
border = "0">
<tr>
<td class = "pluginHeader">Flash Player Required</td>
</tr>
<tr>
<td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td>
</tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</tr>
</table>
</p>
</p>
<!--<![endif]-->
<p style = "margin:100px;">
<table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
<tr><td class = "pluginHeader">Flash Player Required</td></tr>
<tr><td class = "pluginText">The Adobe Flash Player version
10.2.0 or greater is required.</td></tr>
<tr>
<td class = "pluginInstallText" align = "left">
<table border = "0" width = "100%">
<tr class = "pluginInstallText" >
<td>Click here to download and install Adobe Flash
Player:</td>
<td> </td>
<td align = "right">
<script type = "text/javascript">
var pageHost
= ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a target = '_blank'"
+" href = 'http://get.adobe.com/flashplayer/'><"
+"img style = 'border-style: none' table table-bordered = '"
+pageHost
+"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
+" alt = 'Get Adobe Flash player' /></a>" );
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
</body>
</html>Passaggio 4: creare un file CSS interno
Crea un file CSS Style.css per HelloWorld.mxml in table tablebordered/com/tutorialspointcartella. Flex fornisce stili CSS simili per i suoi controlli dell'interfaccia utente in quanto esistono stili CSS per i controlli dell'interfaccia utente HTML.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading {
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Passaggio 5: modifica della classe di ingresso
Flash Builder creerà una tabella di file mxml predefinita tablebordered / com.tutorialspoint / HelloWorld.mxml , che ha il contenitore del tag root <application> per l'applicazione. Modifichiamo questo file per visualizzare "Hello, World!" -
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>È possibile creare più file mxml o actionscript nella stessa directory di origine per definire nuove applicazioni o per definire routine di supporto.
Passaggio 6: creazione dell'applicazione
Flash Builder ha Build Automaticallyper impostazione predefinita selezionata. Basta controllare il fileProblemsVisualizza se c'è qualche errore. Una volta terminate le modifiche, non vedrai alcun errore.
Passaggio 7: eseguire l'applicazione
Ora fai clic sul
Se tutto va bene, devi vedere il popup del browser, l'applicazione attiva e in esecuzione. Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]
Poiché, stai eseguendo la tua applicazione in Flash Player, sarà necessario installare il plug-in Flash Player per il tuo browser. Segui semplicemente le istruzioni sullo schermo per installare il plugin. Se hai già il plug-in Flash Player impostato per il tuo browser, dovresti essere in grado di vedere il seguente output:
Congratulazioni! Hai implementato la tua prima applicazione utilizzandoFlex.
Questo tutorial ti spiegherà come creare un'applicazione war e come distribuirlo nella root del server Web Apache Tomcat.
Se hai compreso questo semplice esempio, sarai anche in grado di distribuire un'applicazione Flex complessa seguendo gli stessi passaggi.
Seguiamo i seguenti passaggi per creare un'applicazione Flex:
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un packagecom. tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file. |
| 3 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Seguire i passaggi indicati di seguito per creare una build di rilascio di un'applicazione Flex e quindi distribuirla sul server Tomcat -
Il primo passo è creare una build di rilascio utilizzando l'IDE di Flash Builder. Avvia la procedura guidata di compilazione del rilascio utilizzando l'opzioneFile > Export > Flash Builder > Release Build.
Seleziona il progetto come HelloWorld utilizzando la finestra della procedura guidata come segue
Lascia gli altri valori predefiniti come tali e fai clic sul pulsante Fine. Ora, Flash Builder creerà una cartella bin-release contenente la build di rilascio del progetto.
Ora la nostra build di rilascio è pronta, seguiamo i seguenti passaggi per distribuire un'applicazione Flex:
| Passo | Descrizione |
|---|---|
| 1 | Comprimi il contenuto della cartella bin-release dell'applicazione sotto forma di file HelloWorld.war e distribuiscilo nel server Web Apache Tomcat. |
| 2 | Avvia la tua applicazione web utilizzando l'URL appropriato come spiegato di seguito nell'ultimo passaggio. |
Di seguito è riportato il contenuto del file mxml modificato table table-bordered/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, allora produrrà il seguente risultato: [ Provalo online ]
Crea file WAR
Ora la nostra applicazione funziona bene e siamo pronti per esportarla come file war. Segui i seguenti passaggi:
Vai nella directory bin-release del tuo progetto C: \ workspace \ HelloWorld \ binrelease
Seleziona tutti i file e le cartelle disponibili nella directory bin-release.
Comprimi tutti i file e le cartelle selezionati in un file chiamato HelloWorld.zip .
Rinomina HelloWorld.zip in HelloWorld.war.
Distribuisci file WAR
Arresta il server Tomcat.
Copia il file HelloWorld.war nella directory di installazione di tomcat> cartella webapps.
Avvia il server Tomcat.
Guarda nella directory webapps, dovrebbe esserci una cartella che HelloWorld è stata creata.
Ora HelloWorld.war viene distribuito con successo nella root del server Web Tomcat.
Esegui applicazione
Immettere un URL nel browser Web -
http: // localhost: 8080 / HelloWorld / HelloWorld.html per avviare l'applicazione.
Il nome del server (localhost) e la porta (8080) possono variare in base alla configurazione di Tomcat.
Ciclo di vita dell'applicazione Flex
Sebbene sia possibile creare applicazioni Flex senza comprendere le fasi del ciclo di vita di un'applicazione, è bene conoscere il meccanismo di base; l'ordine in cui accadono le cose. Ti aiuterà a configurare funzionalità come il caricamento di altre applicazioni Flex in fase di esecuzione e a gestire il processo di caricamento e scaricamento di librerie di classi e risorse in fase di esecuzione.
Una buona comprensione del ciclo di vita dell'applicazione Flex ti consentirà di creare applicazioni migliori e ottimizzarle perché saprai dove eseguire il codice in modo ottimale. Ad esempio, se è necessario assicurarsi che parte del codice venga eseguito durante un preloader, è necessario sapere dove posizionare il codice per quell'evento.
Quando carichiamo un'applicazione flessibile in un browser, si verificano i seguenti eventi durante il ciclo di vita dell'applicazione flessibile.
Di seguito è riportato un breve dettaglio sui diversi eventi del ciclo di vita Flex.
| Suor n | Descrizione dell'evento |
|---|---|
| 1 | preInitialize: mx.core.UIComponent.preinitialize Tipo di evento: mx.events.FlexEvent.PREINITIALIZE Questo evento viene inviato all'inizio della sequenza di inizializzazione del componente. Il componente è in uno stato molto grezzo quando viene inviato questo evento. Molti componenti, come il controllo Button, creano componenti figlio interni per implementare la funzionalità. Ad esempio, il controllo Button crea un componente TextField dell'interfaccia utente interna per rappresentare il testo dell'etichetta. Quando Flex invia l'evento pre-inizializzazione, i figli, inclusi tutti i figli interni, di un componente non sono stati ancora creati. |
| 2 | inizializzare: mx.core.UIComponent.initialize Tipo di evento: mx.events.FlexEvent.INITIALIZE Questo evento viene inviato dopo la fase di pre-inizializzazione. Il framework Flex inizializza la struttura interna di questo componente durante questa fase. Questo evento si attiva automaticamente quando il componente viene aggiunto a un genitore. Non è necessario chiamare in generale initialize (). |
| 3 | creationComplete: mx.core.UIComponent.creationComplete Tipo di evento: mx.events.FlexEvent.CREATION_COMPLETE Questo evento viene inviato quando il componente ha terminato la costruzione, l'elaborazione della proprietà, la misurazione, il layout e il disegno. A questo punto, a seconda della sua proprietà visibile, il componente non è visibile anche se è stato disegnato. |
| 4 | applicationComplete: spark.components.Application.applicationComplete Tipo di evento: mx.events.FlexEvent.APPLICATION_COMPLETE Inviato dopo che l'applicazione è stata inizializzata, elaborata dal LayoutManager e allegata all'elenco di visualizzazione. Questo è l'ultimo evento del ciclo di vita della creazione dell'applicazione e significa che l'applicazione è stata caricata completamente. |
Esempio di ciclo di vita flessibile
Seguiamo i passaggi per comprendere il ciclo di vita del test di un'applicazione Flex creando un'applicazione di test -
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un packagecom. tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file. |
| 3 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Di seguito è riportato il contenuto del file mxml modificato src/com.tutorialspoint/HelloWorld.mxml.
<?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 = "reportEvent(event)"
preinitialize = "reportEvent(event)"
creationComplete = "reportEvent(event)"
applicationComplete = "reportEvent(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
[Bindable]
private var report:String = "";
private function reportEvent(event:FlexEvent):void {
report += "\n" + (event.type + " event occured at: "
+ getTimer() + " ms" + "\n");
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label textAlign = "center" width="100%" id = "lblHeader"
fontSize = "40" color = "0x777777" styleName = "heading"
text = "Life Cycle Events Demonstration" />
<s:TextArea id = "reportText" text = "{report}" editable = "false"
width = "300" height = "200">
</s:TextArea>
</s:VGroup>
</s:BorderContainer>
</s:Application>Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]
Flex supporta l'uso della sintassi e degli stili CSS da applicare ai controlli dell'interfaccia utente allo stesso modo dei componenti CSS in HTML.
Metodo n. 1: utilizzo di un file foglio di stile esterno
È possibile fare riferimento a un foglio di stile disponibile nel percorso classi dell'applicazione. Ad esempio, considera il file Style.css incom/tutorialspoint/client folder dove si trova anche il file HelloWorld.mxml.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
...
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Quindi è possibile fare riferimento al file css seguendo lo snippet di codice
<fx:Style source = "/com/tutorialspoint/client/Style.css" />Assegna stili al componente UI utilizzando la proprietà styleName
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
...
</s:BorderContainer>Metodo n. 2: utilizzo degli stili all'interno del componente contenitore dell'interfaccia utente
È possibile definire gli stili all'interno del componente contenitore dell'interfaccia utente utilizzando il tag <fx: Style>
Selettore del livello di classe
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class level selector */
.errorLabel {
color: red;
}
</fx:Style>Assegna stili al componente UI utilizzando la proprietà styleName.
<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />Selettore del livello di identità
Componente dell'interfaccia utente di stile utilizzando il selettore di ID.
<fx:Style>
/* id level selector */
#msgLabel {
color: gray;
}
</fx:Style>
<s:Label id = "msgLabel" text = "This is a normal message" />Selettore di livello di tipo
Crea un tipo di componente dell'interfaccia utente in un unico passaggio.
<fx:Style>
/* style applied on all buttons */
s|Button {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />Stile flessibile con esempio CSS
Seguiamo i passaggi per verificare lo stile CSS di un'applicazione Flex creando un'applicazione di test -
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Modifica Style.css, HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file. |
| 3 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Di seguito è riportato il contenuto del file CSS modificato src/com.tutorialspoint/Style.css.
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.heading
{
fontFamily: Arial, Helvetica, sans-serif;
fontSize: 17px;
color: #9b1204;
textDecoration:none;
fontWeight:normal;
}
.button {
fontWeight: bold;
}
.container {
cornerRadius :10;
horizontalCenter :0;
borderColor: #777777;
verticalCenter:0;
backgroundColor: #efefef;
}Di seguito è riportato il contenuto del file mxml modificato src/com.tutorialspoint/HelloWorld.mxml.
<?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)">
<!--Add reference to style sheet -->
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<!--Using styles within mxml file -->
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
/* class level selector */
.errorLabel {
color: red;
}
/* id level selector */
#msgLabel {
color: gray;
}
/* style applied on all buttons */
s|Button {
fontSize: 15;
color: #9933FF;
}
</fx:Style>
<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 = "CSS Demonstrating Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label width = "100%" id = "lblHeader" fontSize = "40"
color = "0x777777" styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
<s:Label id = "errorMsg"
text = "This is an error message" styleName = "errorLabel" />
<s:Label id = "msgLabel" text = "This is a normal message" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, questo produrrà il seguente risultato: [ Prova online ]
Cos'è lo skinning?
Lo skinning in Flex è un processo di personalizzazione completa dell'aspetto di un componente dell'interfaccia utente.
Una skin può definire testo, immagine, filtri, transizioni e stati di un componente.
È possibile creare uno skin come componente mxml o ActionScript separato.
Usando la skin, possiamo controllare tutti gli aspetti visivi di un componente dell'interfaccia utente.
Il processo di definizione della skin è lo stesso per tutti i componenti dell'interfaccia utente.
Passaggio 1: creare una skin
Avvia la procedura guidata Crea skin MXML utilizzando l'opzione File > New > MXML Skin.
Inserisci Pacchetto come com.tutorialspoint.skin, nome come GradientBackgroundSkin e scegli il componente host come controllo BorderContainer flessibile esistentespark.component.BorderContainer.
Ora hai creato uno skin per BorderContainer. Modifica il contenuto del file skin mxmlsrc/com.tutorialspoint/skin/GradientBackgroundSkin.mxml.
Aggiorna il livello di riempimento come segue:
<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
<s:fill>
<s:LinearGradient rotation = "90">
<s:GradientEntry color = "0x888888" ratio = "0.2" />
<s:GradientEntry color = "0x111111" ratio = "1" />
</s:LinearGradient>
</s:fill>
</s:Rect>Passaggio 2: applicare la pelle
Puoi applicare la pelle su un componente in due modi:
Applica skin nello script MXML (staticamente)
Applicare GradientBackgroundSkin a un BorderContainer con id mainContainer usando il suo skinClass attributo.
<s:BorderContainer width = "560" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle"
skinClass = "com.tutorialspoint.skin.GradientBackgroundSkin">Applicare skin in ActionScript (dinamicamente)
Applicare GradientBackgroundSkin a un BorderContainer con id mainContainer usando il suo skinClass proprietà.
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}Stile flessibile con esempio di pelle
Seguiamo i seguenti passaggi per vedere lo skinning in azione in un'applicazione Flex creando un'applicazione di test:
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Crea skin GradientBackgroundSkin.mxml in un pacchetto com.tutorialspoint.skin come spiegato sopra. Mantieni invariato il resto dei file. |
| 3 | Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file. |
| 4 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Di seguito è riportato il contenuto del file GradientBackgroundSkin.mxml src/com/tutorialspoint/skin/GradientBackg roundSkin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s = "library://ns.adobe.com/flex/spark"
xmlns:mx = "library://ns.adobe.com/flex/mx">
<!-- host component -->
<fx:Metadata>
[HostComponent("spark.components.BorderContainer")]
</fx:Metadata>
<!-- states -->
<s:states>
<s:State name = "disabled" />
<s:State name = "disabled" />
<s:State name = "normal" />
</s:states>
<!-- SkinParts
name = contentGroup, type = spark.components.Group, required = false
-->
<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
<s:fill>
<s:LinearGradient rotation = "90">
<s:GradientEntry color = "0x111111" ratio = "0.2" />
<s:GradientEntry color = "0x888888" ratio = "1" />
</s:LinearGradient>
</s:fill>
</s:Rect>
<!-- must specify this for the host component -->
<s:Group id = "contentGroup" left = "0" right = "0" top = "0" bottom = "0" />
</s:Skin>Di seguito è riportato il contenuto del HelloWorld.mxml modificato filesrc/com/tutorialspoint/client/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import com.tutorialspoint.skin.GradientBackgroundSkin;
import mx.controls.Alert;
import mx.events.FlexEvent;
import spark.skins.spark.BorderContainerSkin;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
Alert.show("Hello World!");
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
protected function gradientBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", GradientBackgroundSkin );
}
protected function standardBackground_clickHandler(event:MouseEvent):void {
mainContainer.setStyle("skinClass", BorderContainerSkin );
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id = "selectorGroup" />
</fx:Declarations>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
skinClass = "spark.skins.spark.BorderContainerSkin"
horizontalCenter = "0" verticalCenter = "0" cornerRadius = "10">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "green"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" />
<s:RadioButton color = "gray" fontWeight = "bold"
group = "{selectorGroup}" label = "Standard Background"
click = "standardBackground_clickHandler(event)" selected = "true" />
<s:RadioButton color = "gray" fontWeight = "bold"
group = "{selectorGroup}" label = "Gradient Background"
click = "gradientBackground_clickHandler(event)" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]
Cos'è il data binding?
Il Data Binding è un processo in cui i dati di un oggetto sono legati a un altro oggetto. Richiede una proprietà di origine, una proprietà di destinazione e un evento di attivazione che indica quando copiare i dati dall'origine alla destinazione.
Flex offre tre modi per eseguire l'associazione dati come di seguito
- Sintassi delle parentesi graffe nello script MXML ({})
- tag <fx: binding> in MXML
- BindingUtils in ActionScript
Associazione dati: utilizzo di parentesi graffe in MXML
L'esempio seguente mostra come utilizzare le parentesi graffe per specificare l'associazione dati di un'origine alla destinazione.
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />Associazione dati: utilizzo del tag <fx: Binding> in MXML
L'esempio seguente mostra come utilizzare
<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />Associazione dati: utilizzo di BindingUtils in ActionScript
L'esempio seguente mostra come utilizzare BindingUtils per specificare l'associazione dati di un'origine alla destinazione.
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.events.FlexEvent;
protected function txtInput2_preinitializeHandler(event:FlexEvent):void {
BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
}
]]>
</fx:Script>
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2"
preinitialize = "txtInput2_preinitializeHandler(event)" />Esempio di associazione dati Flex
Seguiamo i passaggi indicati di seguito per vedere lo skinning in azione in un'applicazione Flex creando un'applicazione di test:
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file. |
| 3 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Di seguito è riportato il contenuto del file HelloWorld.mxml modificatosrc/com/tutorialspoint/client/HelloWorld.mxml.
<?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">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.events.FlexEvent;
protected function txtInput6_preinitializeHandler(event:FlexEvent):void {
BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
}
]]>
</fx:Script>
<fx:Binding source = "txtInput3.text" destination = "txtInput4.text" />
<s:BorderContainer width = "500" height = "550" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Data Binding Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel title = "Example #1 (Using Curly Braces,\{\})" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput1" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #2 (Using <fx:Binding>)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput3" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:Label id = "txtInput4" />
</s:HGroup>
</s:Panel>
<s:Panel title = "Example #3 (Using BindingUtils)" width = "400"
height = "100" >
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "Type here: " width = "100" paddingTop = "6" />
<s:TextInput id = "txtInput5" />
</s:HGroup>
<s:HGroup >
<s:Label text = "Copied text: " width = "100" paddingTop = "6" />
<s:TextInput enabled = "false" id = "txtInput6"
preinitialize = "txtInput6_preinitializeHandler(event)" />
</s:HGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]
Ogni interfaccia utente considera i seguenti tre aspetti principali:
UI Elements- Questi sono gli elementi visivi fondamentali che l'utente alla fine vede e con cui interagisce. Flex fornisce un enorme elenco di elementi comuni e ampiamente utilizzati che variano da quelli di base a quelli complessi che tratteremo in questo tutorial.
Layouts- Definiscono come gli elementi dell'interfaccia utente dovrebbero essere organizzati sullo schermo e forniscono un aspetto finale alla GUI (Graphical User Interface). Questa parte sarà trattata nel capitolo Layout.
Behavior- Questi eventi si verificano quando l'utente interagisce con gli elementi dell'interfaccia utente. Questa parte sarà trattata nel capitolo Gestione degli eventi.
Elementi dell'interfaccia utente flessibili
La libreria Flex UI fornisce classi in una gerarchia di classi ben definita per creare interfacce utente complesse basate sul web. Tutte le classi in questa gerarchia di componenti sono state derivate daEventDispatcher classe base come mostrato di seguito -
Ogni controllo dell'interfaccia utente di base eredita le proprietà dalla classe del componente dell'interfaccia utente che a sua volta eredita le proprietà da EventDispatcher e altre classi di primo livello.
| Suor n | Controllo e descrizione |
|---|---|
| 1 | Classe EventDispatcher Flex La classe EventDispatcher è la classe base per tutte le classi che possono inviare eventi. La classe EventDispatcher consente a qualsiasi oggetto nell'elenco di visualizzazione di essere un obiettivo dell'evento e, in quanto tale, di utilizzare i metodi dell'interfaccia IEventDispatcher. |
| 2 | Flex UIComponent La classe UIComponent è la classe base per tutti i componenti visivi, sia interattivi che non interattivi. |
Controlli di base
Di seguito sono riportati i pochi controlli di base importanti :
| Suor n | Controlli e descrizione |
|---|---|
| 1 | Etichetta L'etichetta è un componente UIC di basso livello che può eseguire il rendering di una o più righe di testo formattato in modo uniforme. |
| 2 | Testo Il controllo Testo consente di visualizzare il contenuto HTML e il testo normale nell'applicazione. |
| 3 | Immagine Il controllo Immagine consente di importare file JPEG, PNG, GIF e SWF in fase di runtime. |
| 4 | LinkButton Il controllo LinkButton è un controllo Button senza bordi il cui contenuto viene evidenziato quando un utente sposta il mouse su di esso. |
I controlli del modulo consentono agli utenti di inserire dati e forniscono loro capacità di interazione con l'applicazione. Ogni interfaccia utente del modulo controlla ed eredita le proprietà dalla classe UIComponent che a sua volta eredita le proprietà da EventDispatcher e altre classi di primo livello.
| Suor n | Controllo e descrizione |
|---|---|
| 1 | Classe EventDispatcher Flex La classe EventDispatcher è la classe base per tutte le classi che possono inviare eventi. La classe EventDispatcher consente a qualsiasi oggetto nell'elenco di visualizzazione di essere un obiettivo dell'evento e, in quanto tale, di utilizzare i metodi dell'interfaccia IEventDispatcher. |
| 2 | Flex UIComponent La classe UIComponent è la classe base per tutti i componenti visivi, sia interattivi che non interattivi. |
Controlli del modulo
Di seguito sono riportati alcuni importanti controlli del modulo:
| Suor n | Controllo e descrizione |
|---|---|
| 1 | Pulsante Il componente Button è un pulsante rettangolare di uso comune. |
| 2 | Interruttore Il componente ToggleButton definisce un pulsante di attivazione / disattivazione. |
| 3 | CheckBox Il componente CheckBox è costituito da un'etichetta opzionale e da una piccola casella che può contenere o meno un segno di spunta. |
| 4 | Color Picker Il controllo ColorPicker fornisce a un utente un modo per scegliere un colore da un elenco di campioni. |
| 5 | Combo box Il controllo ComboBox è una classe figlio del controllo DropDownListBase. |
| 6 | DateChooser Il controllo DateChooser Visualizza il nome di un mese, l'anno e una griglia dei giorni del mese, con colonne etichettate per il giorno della settimana. |
| 7 | RadioButton Il componente RadioButton consente all'utente di effettuare un'unica scelta all'interno di un insieme di scelte che si escludono a vicenda. |
| 8 | TextArea TextArea è un controllo di immissione di testo che consente agli utenti di immettere e modificare più righe di testo formattato. |
| 9 | L'immissione di testo TextInput è un controllo di immissione di testo che consente agli utenti di immettere e modificare una singola riga di testo con formattazione uniforme. |
| 10 | Menu `A tendina Il controllo DropDownList contiene un elenco a discesa da cui l'utente può selezionare un singolo valore. |
| 11 | NumericStepper Il controllo NumericStepper consente di selezionare un numero da un insieme ordinato. |
I controlli complessi forniscono agli utenti funzionalità avanzate per gestire grandi quantità di dati in modo più semplice e forniscono loro capacità di interazione con l'applicazione. Ogni controllo dell'interfaccia utente complessa eredita le proprietà dalla classe UIComponent che a sua volta eredita le proprietà da EventDispatcher e altre classi di primo livello.
| Suor n | Controllo e descrizione |
|---|---|
| 1 | Classe EventDispatcher Flex La classe EventDispatcher è la classe base per tutte le classi che possono inviare eventi. La classe EventDispatcher consente a qualsiasi oggetto nell'elenco di visualizzazione di essere un obiettivo dell'evento e, in quanto tale, di utilizzare i metodi dell'interfaccia IEventDispatcher. |
| 2 | Flex UIComponent La classe UIComponent è la classe base per tutti i componenti visivi, sia interattivi che non interattivi. |
Controlli complessi
Di seguito sono riportati i pochi controlli complessi importanti:
| Suor n | Controllo e descrizione |
|---|---|
| 1 | DataGrid Il controllo DataGrid visualizza una riga di intestazioni di colonna sopra una griglia scorrevole. |
| 2 | AdvancedDataGrid AdvancedDataGrid aggiunge alcune funzionalità aggiuntive al controllo DataGrid standard per aggiungere funzionalità di visualizzazione dei dati. |
| 3 | Menù Il controllo Menu crea un menu a comparsa di scelte selezionabili individualmente. |
| 4 | Barra di avanzamento Il controllo ProgressBar fornisce una rappresentazione visiva dell'avanzamento di un'attività nel tempo. |
| 5 | RichTextEditor Il controllo RichTextEditor consente agli utenti di immettere e formattare il testo. |
| 6 | TileList Il controllo TileList Il controllo TileList visualizza una serie di elementi disposti in tessere. |
| 7 | Albero Il controllo Tree consente a un utente di visualizzare i dati gerarchici disposti come un albero espandibile. |
| 8 | Lettore video Il controllo VideoPlayer è un lettore video personalizzabile che supporta download progressivo, streaming multi-bitrate e video in streaming. |
| 9 | Fisarmonica Un controllo Accordian ha una raccolta di contenitori MX figlio o contenitori Spark NavigatorContent, ma solo uno di essi alla volta è visibile. |
| 10 | TabNavigator Il controllo TabNavigator include un contenitore TabBar per spostarsi tra i suoi contenitori figlio. |
| 11 | ToggleButtonBar Il controllo ToggleButtonBar definisce un gruppo di pulsanti orizzontale o verticale che mantengono lo stato selezionato o deselezionato. |
I controlli del pannello di layout consentono agli utenti di organizzare i controlli dell'interfaccia utente nella pagina. Ogni controllo Layout eredita le proprietà dalla classe UIComponent che a sua volta eredita le proprietà da EventDispatcher e altre classi di primo livello.
| Suor n | Controllo e descrizione |
|---|---|
| 1 | Classe EventDispatcher Flex La classe EventDispatcher è la classe base per tutte le classi che possono inviare eventi. La classe EventDispatcher consente a qualsiasi oggetto nell'elenco di visualizzazione di essere un obiettivo dell'evento e, in quanto tale, di utilizzare i metodi dell'interfaccia IEventDispatcher. |
| 2 | Flex UIComponent La classe UIComponent è la classe base per tutti i componenti visivi, sia interattivi che non interattivi. |
Pannelli di layout
Di seguito sono riportati alcuni importanti pannelli di layout:
| Suor n | Pannello e descrizione |
|---|---|
| 1 | BorderContainer La classe BorderContainer fornisce un set di stili CSS che controllano l'aspetto del bordo e il riempimento dello sfondo del contenitore. |
| 2 | Modulo Il contenitore Modulo fornisce il controllo sul layout di un modulo, contrassegna i campi del modulo come obbligatori o facoltativi, gestisce i messaggi di errore e associa i dati del modulo al modello dati Flex per eseguire il controllo e la convalida dei dati. |
| 3 | VGroup Il contenitore VGroup è un contenitore di gruppo che utilizza la classe VerticalLayout. |
| 4 | HGroup Il contenitore HGroup è un contenitore di gruppo che utilizza la classe HorizontalLayout. |
| 5 | Pannello La classe Panel è un contenitore che include una barra del titolo, una didascalia, un bordo e un'area di contenuto per i suoi figli. |
| 6 | SkinnableContainer La classe SkinnableContainer è la classe base per i contenitori personalizzabili che forniscono contenuto visivo. |
| 7 | TabBar La TabBar mostra una serie di schede identiche. |
| 8 | TitleWindow La TitleWindow estende il pannello per includere un pulsante di chiusura e un'area di spostamento. |
Possiamo aggiungere un comportamento all'applicazione flessibile utilizzando il concetto di Effetti. Ad esempio, quando una casella di testo viene messa a fuoco, possiamo rendere il suo testo più audace e le sue dimensioni leggermente più grandi.
Ogni effetto eredita le proprietà dalla classe Effect che a sua volta eredita le proprietà da EventDispatcher e altre classi di primo livello.
| Suor n | Effetto e descrizione |
|---|---|
| 1 | Classe effetto flessibile La classe Effect è una classe base astratta che definisce la funzionalità di base di tutti gli effetti Flex. Questa classe definisce la classe factory di base per tutti gli effetti. |
Effetti di base
Di seguito sono riportati i pochi importanti effetti visivi di base:
| Suor n | Effetto e descrizione |
|---|---|
| 1 | Dissolvenza L'effetto Dissolvenza anima la proprietà alfa di un componente. |
| 2 | WipeLeft La classe WipeLeft definisce un effetto di cancellazione a sinistra. |
| 3 | WipeRight La classe WipeRight definisce un effetto di cancellazione a destra. |
| 4 | Move3D La classe Move3D sposta un oggetto di destinazione nelle dimensioni x, yez. |
| 5 | Scale3D La classe Scale3D scala un oggetto target in tre dimensioni attorno al centro di trasformazione. |
| 6 | Rotate3D La classe Rotate3D ruota un oggetto di destinazione in tre dimensioni attorno agli assi x, y o z. |
| 7 | Animare Questo effetto Animate anima un insieme arbitrario di proprietà tra i valori. Specificare le proprietà e i valori da animare impostando la proprietà motionPaths. |
Flex utilizza il concetto di evento per passare i dati da un oggetto a un altro a seconda dello stato o dell'interazione dell'utente all'interno dell'applicazione.
ActionScript ha un generico Eventclasse che definisce gran parte delle funzionalità necessarie per lavorare con gli eventi. Ogni volta che si verifica un evento all'interno di un'applicazione Flex, vengono creati tre tipi di oggetti dalla gerarchia della classe Event.
Event ha le seguenti tre proprietà chiave
| Suor n | Proprietà e descrizione |
|---|---|
| 1 | Type Il typeafferma che tipo di evento è appena accaduto. Può essere clic, inizializzazione, passaggio del mouse, modifica, ecc. I valori effettivi saranno rappresentati da costanti come MouseEvent.CLICK. |
| 2 | Target Il target la proprietà di Event è un riferimento dell'oggetto al componente che ha generato l'evento.Se fai clic su un pulsante con un ID di clickMeButton, il target di quell'evento clic sarà clickMeButton |
| 3 | CurrentTarget Il currentTargetproprietà varia la gerarchia del contenitore. Si occupa principalmente del flusso degli eventi. |
Fasi del flusso di eventi
Un evento passa attraverso tre fasi alla ricerca di gestori di eventi.
| Suor n | Fase e descrizione |
|---|---|
| 1 | Capture Nella fase di cattura, il programma inizierà a cercare gestori di eventi dal genitore esterno (o superiore) a quello più interno. La fase di cattura si ferma al genitore dell'oggetto che ha attivato l'evento. |
| 2 | Target Nella fase di destinazione, il componente che ha attivato l'evento viene controllato per un gestore di eventi. |
| 3 | Bubble La fase Bubble è inversa della fase di cattura, lavorando a ritroso attraverso la struttura, dal genitore del componente di destinazione in su. |
Considera il seguente codice dell'applicazione:
<?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" >
<s:Panel>
<s:Button id = "clickMeButton" label = "Click Me!" click = "doAction( );" />
</s:Panel>
</s:Application>Quando l'utente fa clic sul pulsante, fa clic anche sul pannello e sull'applicazione.
L'evento passa attraverso tre fasi alla ricerca di assegnazioni di gestori di eventi.
Seguiamo i passaggi seguenti per testare la consegna di eventi in un'applicazione Flex:
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file. |
| 3 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Di seguito è riportato il contenuto del file mxml modificato src/com.tutorialspoint/HelloWorld.mxml.
<?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">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
protected function reportEvent(event:MouseEvent):void {
var target:String = event.target.id;
var currentTarget:String = event.target.id;
var eventPhase: String;
if(event.target is Button) {
var button:Button = event.target as Button;
target = button.label + " Button";
} else if(event.target is HGroup) {
var hGroup:HGroup = event.target as HGroup;
target = hGroup.id + " HGroup";
} else if(event.target is Panel) {
var panel:Panel = event.target as Panel;
target = panel.id + " Panel";
}
if(event.currentTarget is Button) {
var button1:Button = event.currentTarget as Button;
currentTarget = button1.label + " Button";
} else if(event.currentTarget is HGroup) {
var hGroup1:HGroup = event.currentTarget as HGroup;
currentTarget = hGroup1.id + " HGroup";
} else if(event.currentTarget is Panel) {
var panel1:Panel = event.currentTarget as Panel;
currentTarget = panel1.id + " Panel";
}
var eventPhaseInt:uint = event.eventPhase;
if(eventPhaseInt == EventPhase.AT_TARGET) {
eventPhase = "Target";
} else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
eventPhase = "Bubbling";
} else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
eventPhase = "Capturing";
}
reports.text += " Target: " + target + "\n currentTarget: " +
currentTarget + "\n Phase: " + eventPhase + "\n----------\n";
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Event Handling Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Main Parent"
click = "reportEvent(event)" width = "500"
height = "100" includeInLayout = "true" visible = "true">
<s:layout>
<s:VerticalLayout gap = "10" verticalAlign = "middle"
horizontalAlign = "center" />
</s:layout>
<s:HGroup id = "mainHGroup" click = "reportEvent(event)">
<s:Button label = "Click Me" click = "reportEvent(event)" />
</s:HGroup>
</s:Panel>
<s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
<mx:Text id = "reports" />
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]
Flex offre due modi per creare componenti personalizzati.
- Utilizzo di ActionScript
- Utilizzando MXML
Utilizzo di ActionScript
È possibile creare un componente estendendo il componente esistente. Per creare un componente utilizzando Flash Builder, fare clic suFile > New > ActionScript Class.
Immettere i dettagli come mostrato di seguito -
Flash Builder creerà il seguente file CustomButton.as.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
}
}
}Utilizzando MXML
È possibile creare un componente estendendo il componente esistente. Per creare un componente utilizzando Flash Builder, fare clic suFile > New > MXML Component.
Immettere i dettagli come mostrato di seguito.
Flash Builder creerà il seguente file CustomLogin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
</s:Group>Seguiamo i seguenti passaggi per testare i controlli personalizzati in un'applicazione Flex:
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file. |
| 3 | Crea il componente CustomLogin.mxml e CustomButton.as come spiegato sopra. Modificare questi file come spiegato di seguito. Mantieni invariato il resto dei file. |
| 4 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Di seguito è riportato il contenuto del file mxml modificato src/com.tutorialspoint/client/CustomLogin.mxml.
<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
<s:Form>
<s:FormItem label = "UserName:">
<s:TextInput width = "200" />
</s:FormItem>
<s:FormItem label = "Password:">
<s:TextInput width = "200" displayAsPassword = "true" />
</s:FormItem>
<s:FormItem>
<s:Button label = "Login" />
</s:FormItem>
</s:Form>
</s:Group>Di seguito è riportato il contenuto del file mxml modificato src/com.tutorialspoint/client/CustomButton.as.
package com.tutorialspoint.client {
import spark.components.Button;
public class CustomButton extends Button {
public function CustomButton() {
super();
this.setStyle("color","green");
this.label = "Submit";
}
}
}Di seguito è riportato il contenuto del file mxml modificato src/com.tutorialspoint/client/HelloWorld.mxml.
<?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"
xmlns:client = "com.tutorialspoint.client.*"
initialize = "application_initializeHandler(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
protected function application_initializeHandler(event:FlexEvent):void {
//create a new custom button
var customButton: CustomButton = new CustomButton();
asPanel.addElement(customButton);
}
]]>
</fx:Script>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "Custom Controls Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel title = "Using MXML Component" width = "400" height = "200">
<client:CustomLogin>
</client:CustomLogin>
</s:Panel>
<s:Panel title = "Using AS Component" width = "400" height = "100">
<s:VGroup id = "asPanel" width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
</s:VGroup>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]
Flex fornisce servizi RPC per fornire dati lato server al lato client. Flex fornisce una discreta quantità di controllo sui dati lato server.
Utilizzando i servizi Flex RPC, possiamo definire le azioni dell'utente da eseguire sul lato server.
Flex RPC Sservices può essere integrato con qualsiasi tecnologia lato server.
Uno dei servizi Flex RPC fornisce il supporto integrato per i dati binari compressi da trasferire in rete ed è piuttosto veloce.
Flex fornisce i seguenti tre tipi di servizi RPC
| Suor n | Servizio e descrizione RPC |
|---|---|
| 1 | HttpService Il tag <mx: HTTPService> viene utilizzato per rappresentare un oggetto HTTPService in un file MXML. Quando si effettua una chiamata al metodo send () dell'oggetto HTTPService, viene eseguita una richiesta HTTP all'URL specificato e viene restituita una risposta HTTP. È inoltre possibile utilizzare i metodi HTTP HEAD, OPTIONS, TRACE e DELETE. |
| 2 | WebService <Mx: WebService> viene utilizzato per ottenere l'accesso alle operazioni dei servizi Web conformi a SOAP. |
| 3 | RemoteObject Il tag <mx: RemoteObject> viene utilizzato per rappresentare un oggetto HTTPService in un file MXML. Questo tag consente di accedere ai metodi degli oggetti Java utilizzando la codifica Action Message Format (AMF). |
Discuteremo in dettaglio il servizio HTTP. Useremo un file sorgente XML posizionato sul server e vi accediamo dal lato client tramite il servizio HTTP.
Items.xml
<items>
<item name = "Book" description = "History of France"></item>
<item name = "Pen" description = "Parker Pen"></item>
<item name = "Pencil" description = "Stationary"></item>
<items>Dichiarazione HTTPService
Ora dichiara un servizio HTTPS e passagli l'URL del file sopra
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>Chiamata RPC
Effettua una chiamata al metodo itemRequest.send () e associa i valori dall'oggetto lastResult del servizio web itemRequest al componente Flex UI.
...
itemRequest.send();
...
<mx:DataGrid id = "dgItems" height = "80%" width = "75%"
dataProvider = "{itemRequest.lastResult.items.item}">
<mx:columns>
<mx:DataGridColumn headerText = "Name" dataField = "name" />
<mx:DataGridColumn headerText = "Description" dataField = "description" />
</mx:columns>
</mx:DataGrid>Esempio di chiamata di servizio RPC
Ora, seguiamo i passaggi per testare i servizi RPC in un'applicazione Flex -
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file. |
| 3 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Di seguito è riportato il contenuto del file mxml modificato src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500" creationComplete = "init(event)">
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
protected function init(event:FlexEvent):void {
itemRequest.send();
}
]]>
</fx:Script>
<fx:Declarations>
<mx:HTTPService id = "itemRequest"
url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>
<s:BorderContainer width = "630" height = "480" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "10"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" text = "RPC Service Demonstration"
fontSize = "40" color = "0x777777" styleName = "heading" />
<s:Panel id = "parentPanel" title = "Using RPC Services"
width = "500" height = "200" >
<s:layout>
<s:VerticalLayout gap = "10"
verticalAlign = "middle" horizontalAlign = "center" />
</s:layout>
<mx:DataGrid id = "dgItems" height = "80%" width = "75%"
dataProvider = "{itemRequest.lastResult.items.item}">
<mx:columns>
<mx:DataGridColumn headerText = "Name" dataField = "name" />
<mx:DataGridColumn headerText = "Description"
dataField = "description" />
</mx:columns>
</mx:DataGrid>
</s:Panel>
</s:VGroup>
</s:BorderContainer>
</s:Application>Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]
Flash Builder 4 ha un eccellente supporto integrato per l'integrazione di FlexUnit in Flex Development Cycle.
Crea una classe di test case
È possibile creare una classe di test case utilizzando la procedura guidata Crea classe di test di Flash Builder. L'esecuzione di casi di test è un gioco da ragazzi con Flash Builder, come vedrai in questo articolo.
Per creare una classe di test case utilizzando Flash Builder, fare clic su File > New > Test Case Class. Immettere i dettagli come mostrato di seguito.
Flash Builder creerà il seguente TestClass1.as un file.
package com.tutorialspoint.client {
public class TestClass1 {
[Before]
public function setUp():void {}
[After]
public function tearDown():void {}
[BeforeClass]
public static function setUpBeforeClass():void {}
[AfterClass]
public static function tearDownAfterClass():void {}
}
}Esempio di integrazione di FlexUnit
Ora, seguiamo i passaggi per testare l'integrazione FlexUnit in un'applicazione Flex -
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file. |
| 3 | Creare TestClass1.as test case come descritto sopra e modificare TestClass1.as come spiegato di seguito. |
| 4 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Di seguito è riportato il contenuto del file modificato come src/com.tutorialspoint/client/TestClass1.as.
package com.tutorialspoint.client {
import org.flexunit.asserts.assertEquals;
public class TestClass1 {
private var counter: int = 1;
[Before]
public function setUp():void {
//this code will run before every test case execution
}
[After]
public function tearDown():void {
//this code will run after every test case execution
}
[BeforeClass]
public static function setUpBeforeClass():void {
//this code will run once when test cases start execution
}
[AfterClass]
public static function tearDownAfterClass():void {
//this code will run once when test cases ends execution
}
[Test]
public function testCounter():void {
assertEquals(counter, 1);
}
}
}Di seguito è riportato il contenuto del file mxml modificato src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500">
</s:Application>Una volta che sei pronto con tutte le modifiche apportate, compiliamo in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione .
Esecuzione di casi di test
Ora fai clic con il pulsante destro del mouse su TestClass1 in Esplora pacchetti e seleziona Run As > FlexUnit Tests. Vedrai il seguente output nella finestra di test di Flash Builder.
Flash Builder mostra anche i risultati dei test nel browser.
Flex offre un'eccellente capacità di debug del codice flessibile e Flash Builder 4 ha un eccellente debugger integrato e supporto per la prospettiva di debug.
Durante la modalità di debug, Flex Application viene eseguita sulla versione di Flash Player Debugger incorporata in Flash Builder 4 che supporta la funzionalità di debug.
Così gli sviluppatori ottengono una configurazione di debug semplice e integrata in Flash Builder
In questo articolo, dimostreremo l'utilizzo del debug del codice Flex Client utilizzando Flash Builder. Faremo le seguenti attività
- Imposta i punti di interruzione nel codice e visualizzali in Breakpoint Explorer.
- Scorri il codice riga per riga durante il debug.
- Visualizza i valori della variabile.
- Esamina i valori di tutte le variabili.
- Controlla il valore di un'espressione.
- Visualizza lo stack frame per i thread sospesi.
Esempio di debug
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file. |
| 3 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Di seguito è riportato il contenuto del file mxml modificato src/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<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:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<s:Button label = "Click Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)" styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Una volta che sei pronto con tutte le modifiche apportate, compiliamo in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione .
Passaggio 1: posizionare i punti di interruzione
Posizionare un punto di interruzione nella prima riga dell'applicazione Initialize Handler di HelloWorld.mxml
Passaggio 2: eseguire il debug dell'applicazione
Ora fai clic sul
Se tutto va bene, l'applicazione verrà avviata nel browser e vedrai i seguenti log di debug nella console di Flash Builder.
[SWF] \HelloWorld\bin-debug\HelloWorld.swf
- 181,509 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\1
- 763,122 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\2
- 1,221,837 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\3
- 1,136,788 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\4
- 2,019,570 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\5
- 318,334 bytes after decompressionNon appena l'applicazione viene avviata, vedrai il focus sul punto di interruzione di Flash Builder poiché abbiamo posizionato il punto di interruzione sulla prima riga del metodo gestore application_initialize.
Puoi vedere lo stacktrace per i thread sospesi.
Puoi vedere i valori per le espressioni.
È possibile visualizzare l'elenco dei punti di interruzione inseriti.
Ora continua a premere F6 fino a raggiungere l'ultima riga del metodo application_initializeHandler (). Come riferimento per i tasti funzione, F6 ispeziona il codice riga per riga, F5 entra ulteriormente e F8 riprenderà l'applicazione. Ora puoi vedere l'elenco dei valori di tutte le variabili del metodo application_initializeHandler ().
Ora puoi vedere che il codice flessibile può essere sottoposto a debug nello stesso modo in cui è possibile eseguire il debug di un'applicazione Java. Posiziona punti di interruzione su qualsiasi linea e gioca con le funzionalità di debug di flex.
Flex offre due modi per internazionalizzare un'applicazione Flex. Dimostreremo l'uso dell'Internazionalizzazione in fase di compilazione che è più comunemente usata tra i progetti.
| Suor n | Tecnica e descrizione |
|---|---|
| 1 | Compile Time Internationalization Questa tecnica è la più diffusa e richiede un sovraccarico minimo in fase di esecuzione; è una tecnica molto efficiente per tradurre stringhe sia costanti che parametrizzate; più semplice da implementare. L'internazionalizzazione in fase di compilazione utilizza i file delle proprietà standard per memorizzare le stringhe tradotte e i messaggi parametrizzati e questi file delle proprietà vengono compilati direttamente nell'applicazione. |
| 2 | Run Time Internationalization Questa tecnica è molto flessibile ma più lenta dell'internazionalizzazione delle stringhe statiche. È necessario compilare i file delle proprietà di localizzazione separatamente, lasciarli esterni all'applicazione e caricarli in fase di esecuzione. |
Flusso di lavoro per l'internazionalizzazione di un'applicazione Flex
Passaggio 1: creare la struttura delle cartelle
Crea una cartella delle impostazioni locali nella cartella src del progetto Flex, che sarà la directory principale di tutti i file delle proprietà per le impostazioni locali supportate dall'applicazione. All'interno della cartella delle impostazioni locali, creare le sottocartelle, una per ciascuna delle impostazioni locali dell'applicazione da supportare. La convenzione per denominare una locale è
{language}_{country code}Ad esempio, en_US rappresenta l'inglese degli Stati Uniti. La locale de_DE rappresenta il tedesco. L'applicazione di esempio supporterà due lingue comuni: inglese e tedesco.
Passaggio 2: creare file delle proprietà
Crea un file delle proprietà contenente i messaggi da utilizzare nell'applicazione. Abbiamo creato un fileHelloWorldMessages.properties file sotto src > locale > en_US cartella nel nostro esempio.
enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}Crea file delle proprietà contenenti valori tradotti specifici per le impostazioni internazionali. Abbiamo creato un fileHelloWorldMessages.properties file sotto src > locale > de_DEcartella nel nostro esempio. Questo file contiene traduzioni in lingua tedesca. _de specifica la lingua tedesca e supporteremo la lingua tedesca nella nostra applicazione.
Se stai creando un file delle proprietà utilizzando Flash Builder, modifica la codifica del file in UTF-8. Seleziona il file e fai clic con il pulsante destro del mouse per aprire la finestra delle proprietà. Seleziona Codifica file di testo come Other UTF-8. Applica e salva la modifica.
enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}Passaggio 3: specificare le opzioni del compilatore
Fare clic con il pulsante destro del mouse sul progetto e selezionare Proprietà.
Seleziona Flex Compiler e aggiungi quanto segue alle impostazioni Additional Compiler Arguments -
-locale en_US de_DEFare clic con il pulsante destro del mouse sul progetto e selezionare Proprietà.
Seleziona Flex Build Path e aggiungi quanto segue alle impostazioni Source Path -
src\locale\{locale}Esempio di internalizzazione
Ora seguiamo i seguenti passaggi per testare la tecnica di internalizzazione in un'applicazione Flex:
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file. |
| 3 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Di seguito è riportato il contenuto del file mxml modificato src/com.tutorialspoint/HelloWorld.mxml.
<?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"
minWidth = "500" minHeight = "500">
<fx:Metadata>
[ResourceBundle("HelloWorldMessages")]
</fx:Metadata>
<fx:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
[Bindable]
private var locales:Array = [{label:"English", locale:"en_US"},
{label:"German", locale:"de_DE"}];
private function comboChangeHandler():void {
resourceManager.localeChain = [localeComboBox.selectedItem.locale];
}
protected function clickMe_clickHandler(event:MouseEvent):void {
var name:String = txtName.text;
var inputArray:Array = new Array();
inputArray.push(name);
Alert.show(resourceManager.getString('HelloWorldMessages'
,'greeting',inputArray));
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center" verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40"
color = "0x777777"
text = "{resourceManager.getString('HelloWorldMessages','applicationTitle')}"
styleName = "heading" width = "90%" height = "150" />
<s:Panel width = "300" height = "150">
<s:layout>
<s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
</s:layout>
<s:HGroup >
<s:Label text = "{resourceManager.getString('HelloWorldMessages','enterName')}"
paddingTop = "2" />
<s:TextInput id = "txtName" />
</s:HGroup>
<s:Button
label = "{resourceManager.getString('HelloWorldMessages','clickMe')}"
click = "clickMe_clickHandler(event)" right = "10" />
</s:Panel>
<mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
change = "comboChangeHandler()" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]
Cambia la lingua utilizzando il menu a discesa della lingua e guarda il risultato.
Flex offre una classe speciale FlexPrintJob per stampare oggetti flessibili.
FlexPrintJob può essere utilizzato per stampare uno o più oggetti Flex, come un contenitore Form o VBox.
FlexPrintJob stampa l'oggetto e tutti gli oggetti che contiene.
Gli oggetti possono essere tutti o parte dell'interfaccia visualizzata.
Gli oggetti possono essere componenti che formattano i dati specificamente per la stampa.
La classe FlexPrintJob consente di ridimensionare l'output per adattarlo alla pagina.
La classe FlexPrintJob utilizza automaticamente più pagine per stampare un oggetto che non si adatta a una singola pagina.
La classe FlexPrintJob fa sì che il sistema operativo visualizzi una finestra di dialogo Stampa. Non è possibile stampare senza un'azione da parte dell'utente.
Prepara e invia un lavoro di stampa
Si stampa l'output preparando e inviando un lavoro di stampa. Creiamo un'istanza della classe FlexPrintJob
var printJob:FlexPrintJob = new FlexPrintJob();Avvia il lavoro di stampa
printJob.start();Flex farà sì che il sistema operativo visualizzi una finestra di dialogo Stampa. Aggiungere uno o più oggetti al lavoro di stampa e specificare come ridimensionarli
printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);Ogni oggetto inizia su una nuova pagina. Invia il lavoro di stampa alla stampante
printJob.send();Esempio di stampa
| Passo | Descrizione |
|---|---|
| 1 | Crea un progetto con un nome HelloWorld sotto un pacchetto com.tutorialspoint.client come spiegato nel capitolo Flex - Crea applicazione . |
| 2 | Modifica HelloWorld.mxml come spiegato di seguito. Mantieni invariato il resto dei file. |
| 3 | Compilare ed eseguire l'applicazione per assicurarsi che la logica aziendale funzioni secondo i requisiti. |
Di seguito è riportato il contenuto del file mxml modificato src/com.tutorialspoint/HelloWorld.mxml.
<?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:Style source = "/com/tutorialspoint/client/Style.css" />
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.printing.FlexPrintJob;
import mx.printing.FlexPrintJobScaleType;
protected function btnClickMe_clickHandler(event:MouseEvent):void {
// Create an instance of the FlexPrintJob class.
var printJob:FlexPrintJob = new FlexPrintJob();
// Start the print job.
if (printJob.start() != true) return;
// Add the object to print. Do not scale it.
printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);
// Send the job to the printer.
printJob.send();
}
protected function application_initializeHandler(event:FlexEvent):void {
lblHeader.text = "My Hello World Application";
}
]]>
</fx:Script>
<s:BorderContainer width = "500" height = "500" id = "mainContainer"
styleName = "container">
<s:VGroup width = "100%" height = "100%" gap = "50"
horizontalAlign = "center"
verticalAlign = "middle">
<s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
styleName = "heading" />
<mx:DataGrid id = "myDataGrid" width = "300">
<mx:dataProvider>
<fx:Object Product = "Flex" Code = "1000" />
<fx:Object Product = "GWT" Code = "2000" />
<fx:Object Product = "JAVA" Code = "3000" />
<fx:Object Product = "JUnit" Code = "4000" />
</mx:dataProvider>
</mx:DataGrid>
<s:Button label = "Print Me!" id = "btnClickMe"
click = "btnClickMe_clickHandler(event)"
styleName = "button" />
</s:VGroup>
</s:BorderContainer>
</s:Application>Una volta che sei pronto con tutte le modifiche apportate, compiliamo ed eseguiamo l'applicazione in modalità normale come abbiamo fatto nel capitolo Flex - Crea applicazione . Se tutto va bene con la tua applicazione, produrrà il seguente risultato: [ Provalo online ]
Fare clic sul pulsante stampami e si può vedere la stampa della griglia dati mostrata di seguito.
