Flex - Applications

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 se compose des 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 le fichier swf dynamiquement 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 charge automatiquement et l'application démarre.

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 contrôles 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 il est possible de 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 chapitre suivant, nous utiliserons tous les concepts mentionnés ci-dessus pour créer un HelloWorld application utilisant Flash Builder.