Flex - Guide rapide

Qu'est-ce que Flex?

Flex est un puissant framework d'applications open source qui vous permet de créer des applications traditionnelles pour navigateur, mobile et bureau en utilisant le même modèle de programmation, outil et base de code.

Flex fournit le SDK FLEX comprenant la bibliothèque de classes Flex (classes ActionScript), les compilateurs Flex, le débogueur, les langages de programmation MXML et ActionScript, et d'autres utilitaires pour créer des applications Internet riches expressives et interactives (RIA)

Flex prend en charge l'interface utilisateur (UI) ou la fonctionnalité côté client d'une application Web. La fonctionnalité côté serveur dépend des composants côté serveur écrits dans un langage de script traditionnel (Java / PHP, etc.)

Une application basée sur Flex réellement livrée sous forme de fichier SWF et elle ressemble étroitement à la partie HTML / JavaScript d'une application Web traditionnelle.

L'application Flex est déployée en tant que fichier (s) SWF plus un wrapper HTML, le (s) fichier (s) CSS et tout fichier de script côté serveur (c'est-à-dire Java, .CFM, .PHP, etc.) sur le serveur. Comme les applications Web traditionnelles.

Ces ressources sont transmises d'un serveur au navigateur du client à l'aide du mode de requête / réponse HTTP habituel et de Flash Player qui exécute l'application dans un navigateur.

Avantages de Flex

  • Les applications Flex sont généralement basées sur Flash Player et peuvent accéder aux fonctionnalités de l'appareil telles que le GPS, l'appareil photo, la base de données locale et l'accéléromètre graphique.

  • Les applications Flex peuvent fonctionner sur les appareils Android, BlackBerry Tablet OS et iOS.

  • Les applications Flex peuvent fonctionner aussi bien sur les navigateurs que sur le bureau.

  • Les applications Flex sont indépendantes de la plateforme. L'interface utilisateur peut être native de la plate-forme ou être identique sur chaque plate-forme.

  • Les applications Flex peuvent interagir avec le serveur avec toutes les principales technologies côté serveur telles que Java, Spring, Hibernate, PHP, Ruby, .NET, Adobe ColdFusion et SAP en utilisant les normes de l'industrie telles que REST, SOAP, JSON, JMS et AMF.

  • Flex Applications assure une expérience utilisateur riche grâce à une interaction intuitive avec l'application et à la présentation des informations dans une interface visuellement plus riche.

  • L'application Flex est une application à page unique où les états peuvent passer d'un état à un autre sans avoir à récupérer une nouvelle page du serveur ou à actualiser le navigateur.

  • L'application Flex réduit considérablement la charge sur le serveur, car il n'est nécessaire de renvoyer l'application qu'une seule fois, plutôt qu'une nouvelle page à chaque fois que l'utilisateur change de vue.

Inconvénients de Flex

  • Les applications Flex sont des applications à un seul thread, mais Flex fournit un modèle de programmation asynchrone pour atténuer ce problème.

  • Flex est basé sur ActionScript et XML. L'apprentissage de ces deux éléments est indispensable pour travailler dans Flex.

Ce didacticiel vous explique comment préparer un environnement de développement pour démarrer votre travail avec Adobe Flex Framework. Ce didacticiel vous apprendra également comment configurer JDK et Adobe Flash Builder sur votre ordinateur avant de configurer Flex Framework.

Exigence du système

FLEX nécessite JDK 1.4 ou supérieur, donc la toute première exigence est d'avoir JDK installé sur votre machine.

JDK 1.4 Ou supérieur.
Mémoire Aucune exigence minimale.
Espace disque Aucune exigence minimale.
Système opérateur Aucune exigence minimale.

Suivez les étapes indiquées pour configurer votre environnement pour commencer le développement d'applications Flex.

Étape 1 - Vérifiez l'installation de Java sur votre machine

Ouvrez maintenant la console et exécutez ce qui suit java commander.

OS Tâche Commander
les fenêtres Ouvrez la console de commande c: \> java -version
Linux Ouvrir le terminal de commande $ java -version
Mac Terminal ouvert machine: ~ joseph $ java -version

Vérifions la sortie pour tous les systèmes d'exploitation -

OS Sortie générée
les fenêtres

version java "1.6.0_21"

Environnement d'exécution Java (TM) SE (build 1.6.0_21-b07)

VM client Java HotSpot (TM) (build 17.0-b17, mode mixte, partage)

Linux

version java "1.6.0_21"

Environnement d'exécution Java (TM) SE (build 1.6.0_21-b07)

VM client Java HotSpot (TM) (build 17.0-b17, mode mixte, partage)

Mac

version java "1.6.0_21"

Environnement d'exécution Java (TM) SE (build 1.6.0_21-b07)

VM serveur 64 bits Java HotSpot (TM) (build 17.0-b17, mode mixte, partage)

Étape 2 - Configuration du kit de développement Java (JDK)

Si vous n'avez pas installé Java, vous pouvez installer le kit de développement de logiciels Java (SDK) à partir du site Java d'Oracle Java SE Downloads . Vous trouverez des instructions pour installer JDK dans les fichiers téléchargés, puis suivez les instructions données pour installer et configurer la configuration. Enfin, définissez les variables d'environnement PATH et JAVA_HOME pour faire référence au répertoire qui contient java et javac, généralement rép_install_java / bin et rép_install_java respectivement.

Met le JAVA_HOMEvariable d'environnement pour pointer vers l'emplacement du répertoire de base où Java est installé sur votre machine. Par exemple -

OS Production
les fenêtres Définissez la variable d'environnement JAVA_HOME sur C: \ Program Files \ Java \ jdk1.6.0_21
Linux export JAVA_HOME = / usr / local / java-current
Mac export JAVA_HOME = / Bibliothèque / Java / Accueil

Ajoutez l'emplacement du compilateur Java au chemin système.

OS Production
les fenêtres Ajoutez la chaîne;% JAVA_HOME% \ bin à la fin de la variable système, Path.
Linux export PATH =$PATH:$JAVA_HOME / bin /
Mac non requis

Étape 3 - Configuration d'Adobe Flash Builder 4.5

Tous les exemples de ce didacticiel ont été écrits à l'aide de la version d'évaluation d'Adobe Flash Builder 4.5 Profession IDE. Par conséquent, nous vous suggérons d'installer la dernière version d'Adobe Flash Builder sur votre ordinateur. Vérifiez également la compatibilité du système d'exploitation.

Pour installer l'IDE Adobe Flash Builder, téléchargez les derniers binaires Adobe Flash Builder à partir de https://www.adobe.com/in/products/flash-builder.html. Une fois que vous avez téléchargé l'installation, décompressez la distribution binaire dans un emplacement pratique. Par exemple, dans C: \ flash-builder sous Windows, ou / usr / local / flash-builder sous Linux / Unix et définissez enfin la variable PATH de manière appropriée.

Flash Builder démarre, lorsque vous exécutez les commandes suivantes sur la machine Windows, ou lorsque vous pouvez simplement double-cliquer sur FlashBuilder.exe

%C:\flash-builder\FlashBuilder.exe

Flash Builder peut être démarré en exécutant les commandes suivantes sur une machine Unix (Solaris, Linux, etc.) -

$/usr/local/flash-builder/FlashBuilder

La version d'évaluation d'Adobe Flash Builder peut être utilisée pendant 60 jours. Acceptez simplement les termes et conditions et ignorez les étapes d'enregistrement initial pour continuer avec l'IDE. Pour notre compréhension, nous utilisons la version d'essai à des fins d'enseignement.

Après un démarrage réussi, si tout va bien, il devrait afficher le résultat suivant -

Adobe Flash Builder est pré-configuré avec les SDK FLEX. Nous utilisons FLEX SDK 4.5 dans nos exemples fournis avec Adobe Flash Builder 4.5.

Étape 4 - Configurer Apache Tomcat

Vous pouvez télécharger la dernière version de Tomcat sur https://tomcat.apache.org/. Une fois que vous avez téléchargé l'installation, décompressez la distribution binaire dans un emplacement pratique. Par exemple, dans C: \ apache-tomcat-6.0.33 sous Windows, ou /usr/local/apache-tomcat-6.0.33 sous Linux / Unix et définissez la variable d'environnement CATALINA_HOME pointant vers les emplacements d'installation.

Tomcat peut être démarré en exécutant les commandes suivantes sur la machine Windows, ou vous pouvez simplement double-cliquer sur startup.bat

%CATALINA_HOME%\bin\startup.bat 
or 
C:\apache-tomcat-6.0.33\bin\startup.bat

Tomcat peut être démarré en exécutant les commandes suivantes sur une machine UNIX (Solaris, Linux, etc.) -

$CATALINA_HOME/bin/startup.sh 
Or 
/usr/local/apache-tomcat-6.0.33/bin/startup.sh

Après un démarrage réussi, les applications Web par défaut incluses avec Tomcat seront disponibles en visitant http://localhost:8080/. Si tout va bien, il devrait afficher le résultat suivant -

Vous trouverez de plus amples informations sur la configuration et l'exécution de Tomcat dans la documentation incluse ici, ainsi que sur le site Web de Tomcat: http://tomcat.apache.org

Tomcat peut être arrêté en exécutant les commandes suivantes sur la machine Windows -

%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdown

Tomcat peut être arrêté en exécutant les commandes suivantes sur une machine UNIX (Solaris, Linux, etc.) -

$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh

Avant de commencer à créer une application "HelloWorld" réelle à l' aide de Flash Builder, voyons quelles sont les parties réelles d'une application Flex -

Une application Flex comprend les quatre parties importantes suivantes, dont la dernière partie est facultative mais les trois premières parties sont obligatoires.

  • Bibliothèques Flex Framework
  • Code côté client
  • Ressources publiques (HTML / JS / CSS)
  • Code côté serveur

Les exemples d'emplacements de différentes parties d'une application Flex typique comme HelloWord seront comme indiqué ci-dessous -

Nom Emplacement
Racine du projet Bonjour le monde/
Bibliothèques Flex Framework Construire le chemin
Ressources publiques modèle-html
Code côté client table table-bordée / com / tutorialspoint / client
Code côté serveur table table-bordée / com / tutorialspoint / server

Processus de création d'application

Pour commencer, l'application Flex nécessite des bibliothèques de framework Flex. Plus tard, Flash Builder ajoute automatiquement les bibliothèques au chemin de création.

Lorsque nous construisons notre code à l'aide de Flash Builder, Flash Builder effectuera les tâches suivantes -

  • Compile le code source dans le fichier HelloWorld.swf.

  • Compile un HelloWorld.html (un fichier wrapper pour le fichier swf) à partir d'un fichier index.template.html stocké dans le dossier html-template

  • Copie les fichiers HelloWorld.swf et HelloWorld.html dans le dossier cible, bin-debug.

  • Copie swfobject.js, un code JavaScript chargé de charger dynamiquement le fichier swf dans HelloWorld.html dans le dossier cible, bin-debug

  • Copie les bibliothèques de framework sous forme de fichier swf nommé frameworks_xxx.swf dans le dossier cible, bin-debug

  • Copie d'autres modules flex (fichiers .swf tels que sparkskins_xxx.swf, textLayout_xxx.swf) dans le dossier cible.

Processus de lancement de l'application

  • Ouvrez le fichier HelloWorld.html disponible dans le dossier \ HelloWorld \ bin-debug dans n'importe quel navigateur Web.

  • HelloWorld.swf se chargera automatiquement et l'application démarrera.

Bibliothèques Flex Framework

Voici un bref détail sur quelques bibliothèques de framework importantes. Veuillez noter que les bibliothèques Flex sont désignées par la notation .swc

Sr.Non Nœuds et description
1

playerglobal.swc

Cette bibliothèque est spécifique à FlashPlayer installé sur votre machine et contient des méthodes natives prises en charge par Flash Player.

2

textlayout.swc

Cette bibliothèque prend en charge les fonctionnalités liées à la mise en page du texte.

3

framework.swc

Il s'agit de la bibliothèque de framework flex qui contient les fonctionnalités principales de Flex.

4

mx.swc

Cette bibliothèque stocke les définitions des contrôles d'interface utilisateur mx.

5

charts.swc

Cette bibliothèque prend en charge les commandes graphiques.

6

spark.swc

Cette bibliothèque stocke les définitions des contrôles de l'interface utilisateur Spark.

sept

sparkskins.swc

Cette bibliothèque prend en charge le skinning des contrôles de l'interface utilisateur Spark.

Code côté client

Le code d'application Flex peut être écrit MXML aussi bien que ActionScript.

Sr.Non Type et description
1

MXML

MXML est un langage de balisage XML que nous utiliserons pour mettre en page les composants de l'interface utilisateur. MXML est compilé dans ActionScript pendant le processus de construction.

2

ActionScript

ActionScript est un langage de programmation procédurale orienté objet et est basé sur le projet de spécification de langage ECMAScript (ECMA-262) édition 4.

Dans Flex, nous pouvons mélanger ActionScript et MXML, pour faire ce qui suit -

  • Mise en page des composants de l'interface utilisateur à l'aide de balises MXML

  • Utilisez MXML pour définir de manière déclarative les aspects non visuels d'une application, tels que l'accès aux sources de données sur le serveur

  • Utilisez MXML pour créer des liaisons de données entre les composants de l'interface utilisateur et les sources de données sur le serveur.

  • Utilisez ActionScript pour définir des écouteurs d'événements dans les attributs d'événements MXML.

  • Ajoutez des blocs de script à l'aide de marque.

  • Incluez des fichiers ActionScript externes.

  • Importez des classes ActionScript.

  • Créez des composants ActionScript.

Ressources publiques

Il s'agit de fichiers d'aide référencés par l'application Flex, tels que la page HTML hôte, le CSS ou les images situées sous le dossier html-template. Il contient les fichiers suivants -

Sr.Non Nom et description du fichier
1

index.template.html

Page HTML hôte, avec des espaces réservés. Flash Builder utilise ce modèle pour créer la page réelle HelloWorld.html avec le fichier HelloWorld.swf.

2

playerProductInstall.swf

Il s'agit d'un utilitaire flash pour installer Flash Player en mode express.

3

swfobject.js

C'est le JavaScript responsable de vérifier la version de Flash Player installée et de charger HelloWorld.swf dans la page HelloWorld.html.

4

html-template/history

Ce dossier contient des ressources pour la gestion de l'historique de l'application.

HelloWorld.mxml

Il s'agit du code MXML / AS (ActionScript) réel écrit implémentant la logique métier de l'application et que le compilateur Flex traduit en fichier SWF qui sera exécuté par Flash Player dans le navigateur.

Un exemple de classe HelloWorld Entry sera comme suit -

<?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>

Le tableau suivant donne la description de toutes les balises utilisées dans le script de code ci-dessus.

Sr.Non Nœud et description
1

Application

Définit le conteneur d'application qui est toujours la balise racine d'une application Flex.

2

Script

Contient la logique métier en langage ActionScript.

3

VGroup

Définit un conteneur de regroupement vertical qui peut contenir des contrôles Flex UI de manière verticale.

4

Label

Représente un contrôle Label, un composant d'interface utilisateur très simple qui affiche du texte.

5

Button

Représente un contrôle Button, sur lequel vous pouvez cliquer pour effectuer une action.

Code côté serveur

Il s'agit de la partie côté serveur de votre application et elle est très facultative. Si vous n'effectuez aucun traitement backend dans votre application, vous n'avez pas besoin de cette partie, mais s'il y a un traitement nécessaire au backend et que votre application client interagit avec le serveur, vous devrez développer ces composants.

Dans le prochain chapitre, nous utiliserons tous les concepts mentionnés ci-dessus pour créer un HelloWorld application utilisant Flash Builder.

Nous utiliserons Flash Builder 4.5 pour créer des applications Flex. Commençons par un simpleHelloWorld application.

Étape 1 - Créer un projet

La première étape consiste à créer un projet Flex simple à l'aide de l'EDI Flash Builder. Lancer l'assistant de projet à l'aide de l'optionFile > New > Flex Project. Maintenant, nommez votre projet HelloWorld en utilisant la fenêtre de l'assistant comme suit -

Sélectionnez le type d'application Web (runs in Adobe Flash Player). Cependant, si cela n'est pas sélectionné, laissez les autres valeurs par défaut telles quelles et cliquez sur le bouton Terminer. Une fois votre projet créé avec succès, vous aurez le contenu suivant dans votre explorateur de projet -

Voici une brève description de tous les dossiers importants -

Dossier Emplacement
table bordée de table

Fichiers de code source (mxml / as classes).

Nous avons créé une structure de dossiers com / tutorialspoint / client contenant les classes Java spécifiques côté client responsables de l'affichage de l'interface utilisateur du client.

bin-debug

Il s'agit de la partie sortie, elle représente l'application Web déployable réelle.

Le dossier Historique contient des fichiers de support pour la gestion de l'historique de l'application Flex.

framework_xxx.swf, les fichiers de framework flex doivent être utilisés par l'application flex.

HelloWorld.html, fichier HTML wrapper / host pour l'application flex.

HelloWorld.swf, notre application basée sur flex.

playerProductInstall.swf, programme d'installation express de Flash Player.

spark_xxx.swf, bibliothèque pour la prise en charge des composants Spark.

swfobject.js, JavaScript chargé de charger HelloWorld.swf dans HelloWorld.html. Il vérifie la version de Flash Player et transmet le paramètre d'initialisation au fichier HelloWorld.swf.

textLayout_xxx.swf, bibliothèque pour la prise en charge des composants texte.

modèle-html

Cela représente l'application Web configurable. Flash Builder compile les fichiers du dossier html-template vers le dossier bin-debug.

Le dossier Historique contient des fichiers de support pour la gestion de l'historique de l'application Flex.

index.template.html, fichier HTML wrapper / host pour l'application flex ayant des espaces réservés pour la configuration spécifique de Flash Builder. Obtient compilé dans HelloWorld.html dans le dossier bin-debug pendant la génération.

playerProductInstall.swf, le programme d'installation express de flash player est copié dans le dossier bin-debug lors de la construction.

swfobject.js, JavaScript chargé de charger HelloWorld.swf dans HelloWorld.html. Il vérifie la version de Flash Player et transmet le paramètre d'initialisation au fichier HelloWorld.swf est copié dans le dossier bindebug pendant la construction.

Étape 2 - Créer un fichier CSS externe

Créer un fichier CSS styles.css pour la page HTML Wrapper dans html-template dossier.

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;
}

Étape 3 - Modifier le modèle de page HTML de wrapper

Modifier le modèle de page HTML du wrapper index.template.html dans htmltemplatedossier. Flash Builder créera un modèle de page HTML Wrapper par défaut html-template / index.template.html , qui sera compilé dans HelloWorld.html.

Ce fichier contient des espaces réservés que Flash Builder remplace pendant le processus de compilation. Par exemple, la version de Flash Player, le nom de l'application, etc.

Modifions ce fichier pour afficher des messages personnalisés au cas où le plugin flash ne serait pas installé.

<!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>

Étape 4 - Créer un fichier CSS interne

Créer un fichier CSS Style.css pour HelloWorld.mxml dans table tablebordered/com/tutorialspointdossier. Flex fournit des styles css similaires pour ses contrôles d'interface utilisateur car il existe des styles css pour les contrôles d'interface utilisateur 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;
}

Étape 5 - Modifier la classe de niveau d'entrée

Flash Builder crée une table de fichier mxml par défaut tablebordered / com.tutorialspoint / HelloWorld.mxml , qui contient le conteneur de balise racine <application> pour l'application. Modifions ce fichier pour afficher "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>

Vous pouvez créer plus de fichiers mxml ou actionscript dans le même répertoire source pour définir de nouvelles applications ou pour définir des routines d'assistance.

Étape 6 - Créer une application

Flash Builder a Build Automaticallypar défaut coché. Vérifiez simplement leProblemsVoir s'il y a une erreur. Une fois que vous avez terminé les modifications, vous ne verrez aucune erreur.

Étape 7 - Exécutez l'application

Cliquez maintenant sur le

menu Exécuter l'application et sélectionnezHelloWorld application pour exécuter l'application.

Si tout va bien, vous devez voir apparaître le navigateur, l'application en marche et en cours d'exécution. Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

Parce que vous exécutez votre application dans Flash Player, il faudra alors installer le plugin Flash Player pour votre navigateur. Suivez simplement les instructions à l'écran pour installer le plugin. Si vous avez déjà configuré le plugin Flash Player pour votre navigateur, vous devriez pouvoir voir la sortie suivante -

Toutes nos félicitations! Vous avez implémenté votre première application en utilisantFlex.

Ce tutoriel vous expliquera comment créer une application war fichier et comment le déployer dans la racine du serveur Web Apache Tomcat.

Si vous avez compris cet exemple simple, vous pourrez également déployer une application Flex complexe en suivant les mêmes étapes.

Suivez les étapes suivantes pour créer une application Flex -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un packagecom. tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Suivez les étapes ci-dessous pour créer une version finale d'une application Flex, puis déployez-la sur le serveur tomcat -

La première étape consiste à créer une version de version à l'aide de l'IDE de Flash Builder. Lancer l'assistant de création de version à l'aide de l'optionFile > Export > Flash Builder > Release Build.

Sélectionnez le projet comme HelloWorld à l'aide de la fenêtre de l'assistant comme suit

Laissez les autres valeurs par défaut telles quelles et cliquez sur le bouton Terminer. À présent, Flash Builder crée un dossier de version bin contenant la version de version du projet.

Maintenant que notre version de version est prête, suivons les étapes suivantes pour déployer une application Flex -

Étape La description
1 Compressez le contenu du dossier bin-release de l'application sous la forme du fichier HelloWorld.war et déployez-le dans Apache Tomcat Webserver.
2 Lancez votre application Web en utilisant l'URL appropriée, comme expliqué ci-dessous à la dernière étape.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

Créer un fichier WAR

Maintenant, notre application fonctionne correctement et nous sommes prêts à l'exporter sous forme de fichier war. Suivez les étapes suivantes -

  • Accédez au répertoire bin-release de votre projet C: \ workspace \ HelloWorld \ binrelease

  • Sélectionnez tous les fichiers et dossiers disponibles dans le répertoire bin-release.

  • Compressez tous les fichiers et dossiers sélectionnés dans un fichier appelé HelloWorld.zip .

  • Renommez HelloWorld.zip en HelloWorld.war.

Déployer le fichier WAR

Arrêtez le serveur tomcat.

  • Copiez le fichier HelloWorld.war dans le répertoire d'installation de tomcat> dossier webapps.

  • Démarrez le serveur tomcat.

  • Regardez dans le répertoire webapps, il devrait y avoir un dossier HelloWorld créé.

  • HelloWorld.war est maintenant déployé avec succès dans la racine du serveur Web Tomcat.

Lancer l'application

Entrez une URL dans le navigateur Web -

http: // localhost: 8080 / HelloWorld / HelloWorld.html pour lancer l'application.

Le nom du serveur (localhost) et le port (8080) peuvent varier selon votre configuration tomcat.

Cycle de vie de l'application Flex

Bien que vous puissiez créer des applications Flex sans comprendre les phases du cycle de vie d'une application, il est bon de connaître le mécanisme de base; l'ordre dans lequel les choses se produisent. Il vous aidera à configurer des fonctionnalités telles que le chargement d'autres applications Flex au moment de l'exécution et à gérer le processus de chargement et de déchargement des bibliothèques de classes et des actifs au moment de l'exécution.

Une bonne compréhension du cycle de vie des applications Flex vous permettra de créer de meilleures applications et de les optimiser car vous saurez où exécuter le code de manière optimale. Par exemple, si vous devez vous assurer que du code s'exécute pendant un préchargement, vous devez savoir où placer le code pour cet événement.

Lorsque nous chargeons une application flex dans un navigateur, les événements suivants se produisent pendant le cycle de vie de l'application flex.

Voici un bref détail sur les différents événements du cycle de vie Flex.

Sr.Non Description de l'évenement
1

preInitialize: mx.core.UIComponent.preinitialize

Type d'événement: mx.events.FlexEvent.PREINITIALIZE

Cet événement est distribué au début de la séquence d'initialisation du composant. Le composant est dans un état très brut lorsque cet événement est distribué. De nombreux composants, tels que le contrôle Button, créent des composants enfants internes pour implémenter des fonctionnalités. Par exemple, le contrôle Button crée un composant TextField d'interface utilisateur interne pour représenter le texte de son étiquette.

Lorsque Flex distribue l'événement de pré-initialisation, les enfants, y compris tous les enfants internes, d'un composant n'ont pas encore été créés.

2

initialiser: mx.core.UIComponent.initialize

Type d'événement: mx.events.FlexEvent.INITIALIZE

Cet événement est distribué après la phase de pré-initialisation. Le framework Flex initialise la structure interne de ce composant pendant cette phase. Cet événement se déclenche automatiquement lorsque le composant est ajouté à un parent.

Vous n'avez pas besoin d'appeler initialize () en général.

3

creationComplete: mx.core.UIComponent.creationComplete

Type d'événement: mx.events.FlexEvent.CREATION_COMPLETE

Cet événement est distribué lorsque le composant a terminé sa construction, le traitement des propriétés, la mesure, la mise en page et le dessin.

À ce stade, en fonction de sa propriété visible, le composant n'est pas visible même s'il a été dessiné.

4

applicationComplete: spark.components.Application.applicationComplete

Type d'événement: mx.events.FlexEvent.APPLICATION_COMPLETE

Distribué après l'initialisation de l'application, traité par le LayoutManager et attaché à la liste d'affichage.

Il s'agit du dernier événement du cycle de vie de création de l'application et signifie que l'application a été complètement chargée.

Exemple de cycle de vie Flex

Laissez-nous suivre les étapes pour comprendre le cycle de vie des tests d'une application Flex en créant une application de test -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un packagecom. tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

Flex prend en charge l'utilisation de la syntaxe et des styles CSS à appliquer à ses contrôles d'interface utilisateur de la même manière que le CSS aux composants HTML.

Méthode n ° 1: utilisation d'un fichier de feuille de style externe

Vous pouvez vous référer à une feuille de style disponible dans le chemin de classe de l'application. Par exemple, considérez le fichier Style.css danscom/tutorialspoint/client folder où se trouve également le fichier 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;
}

Ensuite, le fichier css peut être référencé en suivant l'extrait de code

<fx:Style source = "/com/tutorialspoint/client/Style.css" />

Attribuer des styles au composant d'interface utilisateur à l'aide de la propriété styleName

<s:BorderContainer width = "500" height = "500" id = "mainContainer" 
   styleName = "container"> 
   ...
</s:BorderContainer>

Méthode n ° 2: utilisation des styles dans le composant conteneur de l'interface utilisateur

Vous pouvez définir des styles dans le composant conteneur de l'interface utilisateur à l'aide de la balise <fx: Style>

Sélecteur de niveau de 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>

Attribuez des styles au composant d'interface utilisateur à l'aide de la propriété styleName.

<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />

Sélecteur de niveau d'identifiant

Composant d'interface utilisateur de style à l'aide du sélecteur d'identifiant.

<fx:Style> 
   /* id level selector  */ 
   #msgLabel { 
      color: gray; 
   } 
</fx:Style>

<s:Label id = "msgLabel" text = "This is a normal message" />

Sélecteur de niveau de type

Style un type de composant d'interface utilisateur dans un GO.

<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)" />

Style Flex avec exemple CSS

Suivons les étapes pour vérifier le style CSS d'une application Flex en créant une application de test -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Modifiez Style.css, HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier CSS modifié 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;
}

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, cela produira le résultat suivant: [ Essayez-le en ligne ]

Qu'est-ce que le skinning?

  • Le skinning dans Flex est un processus de personnalisation complète de l'aspect et de la convivialité d'un composant d'interface utilisateur.

  • Un skin peut définir du texte, une image, des filtres, des transitions et des états d'un composant.

  • Un skin peut être créé en tant que composant mxml ou ActionScript distinct.

  • En utilisant le skin, nous pouvons contrôler tous les aspects visuels d'un composant d'interface utilisateur.

  • Le processus de définition de la peau est le même pour tous les composants de l'interface utilisateur.

Étape 1 - Créer un skin

Lancez l'assistant Créer un skin MXML à l'aide de l'option File > New > MXML Skin.

Entrez le package comme com.tutorialspoint.skin, nom comme GradientBackgroundSkin et choisissez le composant hôte comme contrôle Flex BorderContainer existantspark.component.BorderContainer.

Vous avez maintenant créé un habillage pour un BorderContainer. Modifier le contenu du fichier skin mxmlsrc/com.tutorialspoint/skin/GradientBackgroundSkin.mxml.

Mettez à jour le calque de remplissage comme suit -

<!-- 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>

Étape 2: appliquer la peau

Vous pouvez appliquer la peau sur un composant de deux manières:

Appliquer la peau dans un script MXML (statiquement)

Appliquer GradientBackgroundSkin vers un BorderContainer avec un identifiant mainContainer en utilisant son skinClass attribut.

<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">

Appliquer le skin dans ActionScript (dynamiquement)

Appliquer GradientBackgroundSkin vers un BorderContainer avec un identifiant mainContainer en utilisant son skinClass propriété.

protected function gradientBackground_clickHandler(event:MouseEvent):void {
   mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}

Style Flex avec exemple de peau

Suivons les étapes suivantes pour voir le skinning en action dans une application Flex en créant une application de test -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Créez un skin GradientBackgroundSkin.mxml sous un package com.tutorialspoint.skin comme expliqué ci-dessus. Gardez le reste des fichiers inchangé.
3 Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
4 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier 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>

Voici le contenu du HelloWorld.mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

Qu'est-ce que la liaison de données?

La liaison de données est un processus dans lequel les données d'un objet sont liées à un autre objet. Il nécessite une propriété source, une propriété de destination et un événement déclencheur qui indique quand copier les données de la source vers la destination.

Flex propose trois méthodes de liaison de données comme ci-dessous

  • Syntaxe des accolades dans le script MXML ({})
  • Balise <fx: binding> en MXML
  • BindingUtils dans ActionScript

Liaison de données - Utilisation d'accolades dans MXML

L'exemple suivant montre comment utiliser des accolades pour spécifier la liaison de données d'une source à la destination.

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />

Liaison de données - Utilisation de la balise <fx: Binding> dans MXML

L'exemple suivant montre comment utiliser balise pour spécifier la liaison de données d'une source à une destination.

<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />

Liaison de données - Utilisation de BindingUtils dans ActionScript

L'exemple suivant montre comment utiliser BindingUtils pour spécifier la liaison de données d'une source à la destination.

<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)" />

Exemple de liaison de données Flex

Suivez les étapes ci-dessous pour voir le skinning en action dans une application Flex en créant une application de test -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier HelloWorld.mxml modifié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
   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 &lt;fx:Binding&gt;)" 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

Chaque interface utilisateur prend en compte les trois aspects principaux suivants -

  • UI Elements- Ce sont les principaux éléments visuels que l'utilisateur voit et avec lesquels il interagit. Flex fournit une énorme liste d'éléments largement utilisés et courants, allant de basiques à complexes, que nous aborderons dans ce didacticiel.

  • Layouts- Ils définissent comment les éléments de l'interface utilisateur doivent être organisés à l'écran et fournissent un aspect final à l'interface utilisateur graphique (GUI). Cette partie sera traitée dans le chapitre Mise en page.

  • Behavior- Ces événements se produisent lorsque l'utilisateur interagit avec des éléments de l'interface utilisateur. Cette partie sera traitée dans le chapitre Gestion des événements.

Éléments de l'interface utilisateur flexible

La bibliothèque Flex UI fournit des classes dans une hiérarchie de classes bien définie pour créer des interfaces utilisateur Web complexes. Toutes les classes de cette hiérarchie de composants ont été dérivées de laEventDispatcher classe de base comme indiqué ci-dessous -

Chaque contrôle de l'interface utilisateur de base hérite des propriétés de la classe UI Component qui à son tour hérite des propriétés d'EventDispatcher et d'autres classes de niveau supérieur.

Sr.Non Contrôle et description
1 Classe EventDispatcher Flex

La classe EventDispatcher est la classe de base pour toutes les classes qui peuvent distribuer des événements. La classe EventDispatcher permet à tout objet de la liste d'affichage d'être une cible d'événement et, en tant que tel, d'utiliser les méthodes de l'interface IEventDispatcher.

2 Flex UIComponent

La classe UIComponent est la classe de base pour tous les composants visuels, à la fois interactifs et non interactifs.

Commandes de base

Voici les quelques commandes de base importantes -

Sr.Non Commandes et description
1 Étiquette

L'étiquette est un UIComponent de bas niveau qui peut restituer une ou plusieurs lignes de texte au format uniforme.

2 Texte

Le contrôle Texte vous permet d'afficher du contenu HTML ainsi que du texte normal dans votre application.

3 Image

Le contrôle Image vous permet d'importer des fichiers JPEG, PNG, GIF et SWF au moment de l'exécution.

4 LinkButton

Le contrôle LinkButton est un contrôle Button sans bordure dont le contenu est mis en surbrillance lorsqu'un utilisateur déplace la souris dessus.

Les contrôles de formulaire permettent aux utilisateurs d'entrer des données et leur fournissent une capacité d'interaction avec l'application. Chaque interface utilisateur de formulaire contrôle et hérite des propriétés de la classe UIComponent qui à son tour hérite des propriétés d'EventDispatcher et d'autres classes de niveau supérieur.

Sr.Non Contrôle et description
1 Classe EventDispatcher Flex

La classe EventDispatcher est la classe de base pour toutes les classes qui peuvent distribuer des événements. La classe EventDispatcher permet à tout objet de la liste d'affichage d'être une cible d'événement et, en tant que tel, d'utiliser les méthodes de l'interface IEventDispatcher.

2 Flex UIComponent

La classe UIComponent est la classe de base pour tous les composants visuels, à la fois interactifs et non interactifs.

Contrôles de formulaire

Voici quelques contrôles de formulaire importants -

Sr.Non Contrôle et description
1 Bouton

Le composant Button est un bouton rectangulaire couramment utilisé.

2 Bouton à bascule

Le composant ToggleButton définit un bouton bascule.

3 CheckBox

Le composant CheckBox se compose d'une étiquette facultative et d'une petite case qui peut contenir une coche ou non.

4 Pipette à couleurs

Le contrôle ColorPicker permet à un utilisateur de choisir une couleur dans une liste d'échantillons.

5 Boîte combo

Le contrôle ComboBox est une classe enfant du contrôle DropDownListBase.

6 DateChooser

Le contrôle DateChooser affiche le nom d'un mois, l'année et une grille des jours du mois, avec des colonnes étiquetées pour le jour de la semaine.

sept Bouton radio

Le composant RadioButton permet à l'utilisateur de faire un seul choix dans un ensemble de choix mutuellement exclusifs.

8 TextArea

TextArea est un contrôle de saisie de texte qui permet aux utilisateurs d'entrer et de modifier plusieurs lignes de texte formaté.

9 Saisie de texte

TextInput est un contrôle de saisie de texte qui permet aux utilisateurs d'entrer et de modifier une seule ligne de texte au format uniforme.

dix La liste déroulante

Le contrôle DropDownList contient une liste déroulante dans laquelle l'utilisateur peut sélectionner une valeur unique.

11 NumericStepper

Le contrôle NumericStepper vous permet de sélectionner un nombre dans un ensemble ordonné.

Les contrôles complexes fournissent aux utilisateurs des capacités avancées pour traiter plus facilement une grande quantité de données et leur offrent une capacité d'interaction avec l'application. Chaque contrôle d'interface utilisateur complexe hérite des propriétés de la classe UIComponent qui à son tour hérite des propriétés d'EventDispatcher et d'autres classes de niveau supérieur.

Sr.Non Contrôle et description
1 Classe EventDispatcher Flex

La classe EventDispatcher est la classe de base pour toutes les classes qui peuvent distribuer des événements. La classe EventDispatcher permet à tout objet de la liste d'affichage d'être une cible d'événement et, en tant que tel, d'utiliser les méthodes de l'interface IEventDispatcher.

2 Flex UIComponent

La classe UIComponent est la classe de base pour tous les composants visuels, à la fois interactifs et non interactifs.

Contrôles complexes

Voici les quelques contrôles complexes importants -

Sr.Non Contrôle et description
1 Grille de données

Le contrôle DataGrid affiche une ligne d'en-têtes de colonne au-dessus d'une grille défilante.

2 AdvancedDataGrid

AdvancedDataGrid ajoute quelques fonctionnalités supplémentaires au contrôle DataGrid standard pour ajouter des fonctionnalités de visualisation de données.

3 Menu

Le contrôle Menu crée un menu contextuel de choix sélectionnables individuellement.

4 Barre de progression

Le contrôle ProgressBar fournit une représentation visuelle de la progression d'une tâche au fil du temps.

5 RichTextEditor

Le contrôle RichTextEditor permet aux utilisateurs d'entrer et de mettre en forme du texte.

6 TileList

Le contrôle TileList Le contrôle TileList affiche un certain nombre d'éléments disposés en mosaïques.

sept Arbre

Le contrôle Tree permet à un utilisateur d'afficher des données hiérarchiques organisées sous la forme d'une arborescence extensible.

8 Lecteur vidéo

Le contrôle VideoPlayer est un lecteur vidéo skinnable qui prend en charge le téléchargement progressif, le streaming multi-débit et le streaming vidéo.

9 Accordian

Un contrôle Accordian possède une collection de conteneurs MX enfants ou de conteneurs Spark NavigatorContent, mais un seul d'entre eux à la fois est visible.

dix TabNavigator

Le contrôle TabNavigator comprend un conteneur TabBar pour naviguer entre ses conteneurs enfants.

11 ToggleButtonBar

Le contrôle ToggleButtonBar définit un groupe horizontal ou vertical de boutons qui conservent leur état sélectionné ou désélectionné.

Les commandes du panneau de disposition permettent aux utilisateurs d'organiser les commandes de l'interface utilisateur sur la page. Chaque contrôle Layout hérite des propriétés de la classe UIComponent qui à son tour hérite des propriétés d'EventDispatcher et d'autres classes de niveau supérieur.

Sr.Non Contrôle et description
1 Classe EventDispatcher Flex

La classe EventDispatcher est la classe de base pour toutes les classes qui peuvent distribuer des événements. La classe EventDispatcher permet à tout objet de la liste d'affichage d'être une cible d'événement et, en tant que tel, d'utiliser les méthodes de l'interface IEventDispatcher.

2 Flex UIComponent

La classe UIComponent est la classe de base pour tous les composants visuels, à la fois interactifs et non interactifs.

Panneaux de disposition

Voici quelques panneaux de disposition importants -

Sr.Non Panneau et description
1 BorderContainer

La classe BorderContainer fournit un ensemble de styles CSS qui contrôlent l'apparence de la bordure et du remplissage d'arrière-plan du conteneur.

2 Forme

Le conteneur Form permet de contrôler la mise en page d'un formulaire, marque les champs de formulaire comme obligatoires ou facultatifs, gère les messages d'erreur et lie les données du formulaire au modèle de données Flex pour effectuer la vérification et la validation des données.

3 VGroup

Le conteneur VGroup est un conteneur Group qui utilise la classe VerticalLayout.

4 Groupe H

Le conteneur HGroup est un conteneur Group qui utilise la classe HorizontalLayout.

5 Panneau

La classe Panel est un conteneur qui comprend une barre de titre, une légende, une bordure et une zone de contenu pour ses enfants.

6 Récipient Skinnable

La classe SkinnableContainer est la classe de base des conteneurs habillables qui fournissent un contenu visuel.

sept Barre d'onglets

La TabBar affiche un ensemble d'onglets identiques.

8 TitreWindow

Le TitleWindow étend le panneau pour inclure un bouton de fermeture et une zone de déplacement.

Nous pouvons ajouter un comportement à l'application flexible en utilisant le concept d'effets. Par exemple, lorsqu'une zone de texte obtient le focus, nous pouvons rendre son texte plus audacieux et augmenter légèrement sa taille.

Chaque effet hérite des propriétés de la classe Effect qui à son tour hérite des propriétés d'EventDispatcher et d'autres classes de niveau supérieur.

Sr.Non Effet et description
1 Classe d'effet Flex

La classe Effect est une classe de base abstraite qui définit les fonctionnalités de base de tous les effets Flex. Cette classe définit la classe d'usine de base pour tous les effets.

Effets de base

Voici les quelques effets visuels de base importants -

Sr.Non Effet et description
1 Fondu

L'effet Fondu anime la propriété alpha d'un composant.

2 WipeLeft

La classe WipeLeft définit un effet de balayage à gauche.

3 WipeRight

La classe WipeRight définit un effet d'effacement vers la droite.

4 Move3D

La classe Move3D déplace un objet cible dans les dimensions x, y et z.

5 Scale3D

La classe Scale3D met à l'échelle un objet cible en trois dimensions autour du centre de transformation.

6 Rotate3D

La classe Rotate3D fait pivoter un objet cible en trois dimensions autour des axes x, y ou z.

sept Animer

Cet effet Animer anime un ensemble arbitraire de propriétés entre les valeurs. Spécifiez les propriétés et les valeurs à animer en définissant la propriété motionPaths.

Flex utilise le concept d'événement pour transmettre des données d'un objet à un autre en fonction de l'état ou de l'interaction de l'utilisateur au sein de l'application.

ActionScript a un générique Eventclasse qui définit une grande partie des fonctionnalités nécessaires pour travailler avec les événements. Chaque fois qu'un événement se produit dans une application Flex, trois types d'objets de la hiérarchie de classes Event sont créés.

L'événement a les trois propriétés clés suivantes

Sr.Non Propriété et description
1

Type

le typeindique le genre d'événement qui vient de se passer. Cela peut être un clic, une initialisation, un survol de la souris, un changement, etc. Les valeurs réelles seront représentées par des constantes comme MouseEvent.CLICK.

2

Target

le target propriété de Event est une référence d'objet au composant qui a généré l'événement.Si vous cliquez sur un Button avec un identifiant de clickMeButton, la cible de cet événement de clic sera clickMeButton

3

CurrentTarget

le currentTargetpropriété varie dans la hiérarchie des conteneurs. Il traite principalement des flux d'événements.

Phases du flux d'événements

Un événement passe par trois phases à la recherche de gestionnaires d'événements.

Sr.Non Phase et description
1

Capture

Dans la phase de capture, le programme commencera à rechercher des gestionnaires d'événements du parent extérieur (ou supérieur) au parent le plus interne. La phase de capture s'arrête au parent de l'objet qui a déclenché l'événement.

2

Target

Dans la phase cible, le composant qui a déclenché l'événement est vérifié pour un gestionnaire d'événements.

3

Bubble

La phase de bulle est l'inverse de la phase de capture, en remontant à travers la structure, depuis le parent du composant cible vers le haut.

Considérez le code d'application suivant -

<?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>

Lorsque l'utilisateur clique sur le bouton, il ou elle clique également sur le panneau et l'application.

L'événement passe par trois phases à la recherche des affectations de gestionnaires d'événements.

Suivez les étapes ci-dessous pour tester la gestion des événements dans une application Flex -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

Flex propose deux méthodes pour créer des composants personnalisés.

  • Utilisation d'ActionScript
  • Utilisation de MXML

Utilisation d'ActionScript

Vous pouvez créer un composant en étendant le composant existant. Pour créer un composant à l'aide de Flash Builder, cliquez surFile > New > ActionScript Class.

Entrez les détails comme indiqué ci-dessous -

Flash Builder crée le fichier CustomButton.as suivant.

package com.tutorialspoint.client {
   import spark.components.Button;

   public class CustomButton extends Button {
      public function CustomButton() {
         super();
      }
   }
}

Utilisation de MXML

Vous pouvez créer un composant en étendant le composant existant. Pour créer un composant à l'aide de Flash Builder, cliquez surFile > New > MXML Component.

Entrez les détails comme indiqué ci-dessous.

Flash Builder crée le fichier CustomLogin.mxml suivant.

<?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>

Suivez les étapes suivantes pour tester les contrôles personnalisés dans une application Flex -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Créez le composant CustomLogin.mxml et CustomButton.as comme expliqué ci-dessus. Modifiez ces fichiers comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
4 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Voici le contenu du fichier mxml modifié 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";
      }
   }
}

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

Flex fournit des services RPC pour fournir des données côté serveur au côté client. Flex fournit une bonne quantité de contrôle sur les données côté serveur.

  • En utilisant les services Flex RPC, nous pouvons définir des actions utilisateur à exécuter côté serveur.

  • Les services Flex RPC peuvent être intégrés à toutes les technologies côté serveur.

  • L'un des services Flex RPC fournit une prise en charge intégrée des données binaires compressées à transférer sur le fil et est assez rapide.

Flex fournit les trois types de services RPC suivants

Sr.Non Service RPC et description
1

HttpService

La balise <mx: HTTPService> est utilisée pour représenter un objet HTTPService dans un fichier MXML. Lorsque vous appelez la méthode send () de l'objet HTTPService, il effectue une requête HTTP vers l'URL spécifiée et une réponse HTTP est renvoyée. Vous pouvez également utiliser les méthodes HTTP HEAD, OPTIONS, TRACE et DELETE.

2

WebService

Le <mx: WebService> est utilisé pour accéder aux opérations des services Web compatibles SOAP.

3

RemoteObject

La balise <mx: RemoteObject> est utilisée pour représenter un objet HTTPService dans un fichier MXML. Cette balise vous donne accès aux méthodes des objets Java utilisant l'encodage AMF (Action Message Format).

Nous allons discuter du service HTTP en détail. Nous utiliserons un fichier source XML placé sur le serveur et y accéderons côté client via le service 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>

Déclaration HTTPService

Déclarez maintenant un HTTPService et transmettez-lui l'url du fichier ci-dessus

<fx:Declarations>
   <mx:HTTPService id = "itemRequest" 
   url = "http://www.tutorialspoint.com/flex/Items.xml" />
</fx:Declarations>

Appel RPC

Appelez la méthode itemRequest.send () et liez les valeurs de l'objet lastResult du service Web itemRequest au composant 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>

Exemple d'appel de service RPC

Maintenant, suivons les étapes pour tester les services RPC dans une application Flex -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

Flash Builder 4 dispose d'un excellent support intégré pour l'intégration FlexUnit dans le cycle de développement Flex.

Créer une classe de cas de test

Vous pouvez créer une classe de scénario de test à l'aide de l'assistant de création de classe de test de Flash Builder. L'exécution de cas de test est un jeu d'enfant avec Flash Builder, comme vous le verrez dans cet article.

Pour créer une classe de cas de test à l'aide de Flash Builder, cliquez sur File > New > Test Case Class. Entrez les détails comme indiqué ci-dessous.

Flash Builder crée le TestClass1. suivant sous forme de fichier.

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 {}	
   }
}

Exemple d'intégration FlexUnit

Maintenant, suivons les étapes pour tester l'intégration FlexUnit dans une application Flex -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Créez le scénario de test TestClass1.as comme décrit ci-dessus et modifiez TestClass1.as comme expliqué ci-dessous.
4 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier modifié 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);
      }
   }
}

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application .

Exécution de cas de test

Maintenant, faites un clic droit sur TestClass1 dans l'explorateur de packages et sélectionnez Run As > FlexUnit Tests. Vous verrez la sortie suivante dans la fenêtre de test de Flash Builder.

Flash Builder affiche également les résultats des tests dans le navigateur.

Flex offre une excellente capacité de débogage du code flex et Flash Builder 4 possède une excellente prise en charge intégrée du débogueur et de la perspective de débogage.

  • En mode débogage, Flex Application s'exécute sur la version Flash Player Debugger intégrée à Flash Builder 4 qui prend en charge la fonction de débogage.

  • Ainsi, les développeurs bénéficient d'une configuration de débogage simple et intégrée dans Flash Builder

Dans cet article, nous montrerons l'utilisation du débogage du code Flex Client à l'aide de Flash Builder. Nous effectuerons les tâches suivantes

  • Définissez des points d'arrêt dans le code et visualisez-les dans l'Explorateur de points d'arrêt.
  • Parcourez le code ligne par ligne pendant le débogage.
  • Afficher les valeurs de variable.
  • Inspectez les valeurs de toutes les variables.
  • Inspectez la valeur d'une expression.
  • Affichez le cadre de la pile pour les fils suspendus.

Exemple de débogage

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application .

Étape 1 - Placer des points d'arrêt

Placez un point d'arrêt sur la première ligne du gestionnaire d'initialisation de l'application de HelloWorld.mxml

Étape 2 - Déboguer l'application

Cliquez maintenant sur le

menu de l'application Déboguer et sélectionnezHelloWorld application pour déboguer l'application.

Si tout va bien, l'application se lancera dans le navigateur et vous verrez les journaux de débogage suivants dans la console 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 decompression

Dès que l'application est lancée, vous verrez le focus sur le point d'arrêt de Flash Builder car nous avons placé le point d'arrêt sur la première ligne de la méthode application_initialize Handler.

Vous pouvez voir le stacktrace des threads suspendus.

Vous pouvez voir les valeurs des expressions.

Vous pouvez voir la liste des points d'arrêt placés.

Continuez maintenant à appuyer sur F6 jusqu'à ce que vous atteigniez la dernière ligne de la méthode application_initializeHandler (). Comme référence pour les touches de fonction, F6 inspecte le code ligne par ligne, F5 avance plus loin et F8 reprend l'application. Vous pouvez maintenant voir la liste des valeurs de toutes les variables de la méthode application_initializeHandler ().

Vous pouvez maintenant voir que le code flex peut être débogué de la même manière qu'une application Java peut être déboguée. Placez des points d'arrêt sur n'importe quelle ligne et jouez avec les capacités de débogage de flex.

Flex fournit deux façons d'internationaliser une application Flex. Nous allons démontrer l'utilisation de l'internationalisation au moment de la compilation qui est la plus couramment utilisée parmi les projets.

Sr.Non Technique et description
1

Compile Time Internationalization

Cette technique est la plus répandue et nécessite très peu de frais généraux lors de l'exécution; est une technique très efficace pour traduire à la fois des chaînes constantes et paramétrées; la plus simple à implémenter. L'internationalisation au moment de la compilation utilise des fichiers de propriétés standard pour stocker les chaînes traduites et les messages paramétrés, et ces fichiers de propriétés sont compilés directement dans l'application.

2

Run Time Internationalization

Cette technique est très flexible mais plus lente que l'internationalisation de chaînes statiques. Vous devez compiler les fichiers de propriétés de localisation séparément, les laisser externes à l'application et les charger au moment de l'exécution.

Workflow d'internationalisation d'une application Flex

Étape 1 - Créer une structure de dossiers

Créez un dossier de paramètres régionaux sous le dossier src du projet Flex. Il s'agira du répertoire parent de tous les fichiers de propriétés des paramètres régionaux pris en charge par l'application. Dans le dossier des paramètres régionaux, créez des sous-dossiers, un pour chacun des paramètres régionaux de l'application à prendre en charge. La convention pour nommer un paramètre régional est

{language}_{country code}

Par exemple, en_US représente l'anglais des États-Unis. La locale de_DE représente l'allemand. L'exemple d'application prend en charge deux langues courantes: l'anglais et l'allemand.

Étape 2 - Créer des fichiers de propriétés

Créez un fichier de propriétés contenant les messages à utiliser dans l'application. Nous avons créé unHelloWorldMessages.properties fichier sous src > locale > en_US dossier dans notre exemple.

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

Créez des fichiers de propriétés contenant des valeurs traduites spécifiques aux paramètres régionaux. Nous avons créé unHelloWorldMessages.properties fichier sous src > locale > de_DEdossier dans notre exemple. Ce fichier contient des traductions en langue allemande. _de spécifie la langue allemande et nous allons prendre en charge la langue allemande dans notre application.

Si vous créez un fichier de propriétés à l'aide de Flash Builder, modifiez l'encodage du fichier en UTF-8.Sélectionnez le fichier, puis cliquez dessus avec le bouton droit de la souris pour ouvrir sa fenêtre de propriétés.Sélectionnez Encodage du fichier texte comme Other UTF-8. Appliquer et enregistrer la modification.

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

Étape 3 - Spécifiez les options du compilateur

  • Cliquez avec le bouton droit sur votre projet et sélectionnez Propriétés.

  • Sélectionnez Flex Compiler et ajoutez ce qui suit aux paramètres des arguments supplémentaires du compilateur -

-locale en_US de_DE
  • Cliquez avec le bouton droit sur votre projet et sélectionnez Propriétés.

  • Sélectionnez Flex Build Path et ajoutez ce qui suit aux paramètres du chemin source -

src\locale\{locale}

Exemple d'internalisation

Maintenant, suivons les étapes suivantes pour tester la technique d'internalisation dans une application Flex -

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

Changez la langue en utilisant la liste déroulante de langue et voyez le résultat.

Flex offre une classe spéciale FlexPrintJob pour imprimer des objets flex.

  • FlexPrintJob peut être utilisé pour imprimer un ou plusieurs objets Flex, tels qu'un conteneur Form ou VBox.

  • FlexPrintJob imprime l'objet et tous les objets qu'il contient.

  • Les objets peuvent être tout ou partie de l'interface affichée.

  • Les objets peuvent être des composants qui mettent en forme des données spécifiquement pour l'impression.

  • La classe FlexPrintJob vous permet de mettre à l'échelle la sortie pour l'adapter à la page.

  • La classe FlexPrintJob utilise automatiquement plusieurs pages pour imprimer un objet qui ne tient pas sur une seule page.

  • La classe FlexPrintJob oblige le système d'exploitation à afficher une boîte de dialogue Imprimer. Vous ne pouvez pas imprimer sans une action de l'utilisateur.

Préparer et envoyer un travail d'impression

Vous imprimez la sortie en préparant et en envoyant un travail d'impression. Créons une instance de la classe FlexPrintJob

var printJob:FlexPrintJob = new FlexPrintJob();

Démarrez le travail d'impression

printJob.start();

Flex provoquera l'affichage d'une boîte de dialogue d'impression par le système d'exploitation. Ajouter un ou plusieurs objets au travail d'impression et spécifier comment les mettre à l'échelle

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH);

Chaque objet commence sur une nouvelle page. Envoyez le travail d'impression à l'imprimante

printJob.send();

Exemple d'impression

Étape La description
1 Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2 Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3 Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié 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>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

Cliquez sur le bouton Imprimer et vous pouvez voir l'impression de la grille de données ci-dessous.