Programmation FLEX 3 - Librairie Eyrolles · 2008-12-16 · où mxmlc fait appel au compilateur...

A u r é l i e n V a n n i e u w e n h u y z e

A v e c l a c o n t r i b u t i o n d e R o m a i n P o u c l e t

ProgrammationFLEX 3

Applications Internet riches

avec Flash ActionScript 3, MXML et Flex Builder

12387_PageTitre_Flex3 20/11/08 14:30

© Groupe Eyrolles, 2009,

ISBN : 978-2-212-12387-6

3Développer

avec le kit Flex SDK

Un peu à la manière de Java et son SDK (Software Development Kit), le kit de dévelop-pement Flex SDK offre un ensemble de fonctionnalités permettant de réaliser gratuite-ment des applications à l’aide du framework Flex. Ce kit comprend des compilateurs, undébogueur ainsi que les bibliothèques de composants du framework permettant de créerdes applications.

Depuis la version 3 de Flex, la volonté d’Adobe est de rendre le SDK disponible souslicence MPL (Mozilla Public License). Selon l’éditeur, le passage à l’Open Source permettraune augmentation de l’utilisation de son produit. En effet, le SDK pourra être intégré ausein de divers IDE (Integrated Development Environment) et les entreprises à philosophieOpen Source pourront opter pour l’utilisation de Flex. Enfin, comme chacun le sait, lesproduits libres sont souvent supportés par une communauté active, ce qui permet deles faire évoluer et d’offrir un support très réactif. Ceci assure ainsi à Flex une placeprédominante par rapport à ses concurrents, notamment le géant Microsoft et son produitSilverLight, dont le choix stratégique viserait à imiter Adobe.

Licence MPL

Contrairement à la licence GPL (General Public License), qui oblige à fournir les sources de l’ensembled’un programme, la MPL permet de ne pas divulguer certaines parties du programme. Ainsi, l’entrepriseéditrice peut ne communiquer que certaines parties du code de son logiciel et garder secrètes les partiesqu’elle juge sensibles.

=Flex3 FM.book 7 Lundi, 17. novembre 2008 4:32 16

Comprendre Flex 3PARTIE I

28

PrérequisAvant d’aller plus loin, il convient de vérifier la présence des éléments indispensables aubon fonctionnement du SDK.

Du point de vue matériel, vous devez disposer au minimum de 512 Mo de RAM et de200 Mo d’espace disque.

Pour l’aspect logiciel, il est impératif que Java soit installé et correctement configuré survotre machine, bien que le Runtime de Java (JRE, Java Runtime Environment) suffise pourexécuter Flex SDK.

Dans cet ouvrage, nous utiliserons la version 6 du JDK (Java SE6), qui peut être téléchargéesur le site web de Sun Microsystems à l’adresse suivante : http://java.sun.com/ (rubriqueDownloads>Java SE). Une fois l’archive téléchargée, procédez à son installation en suivantles indications de l’assistant.

Vous pouvez éventuellement configurer la variable d’environnement PATH de votresystème en y ajoutant le chemin du répertoire bin de Java. Ceci vous permettra d’appelerles programmes Java (java.exe, javac.exe, etc.) à partir de n’importe quel répertoire devotre système.

Voici la marche à suivre pour modifier la variable PATH :

1. Cliquez sur Démarrer et sélectionnez Panneau de configuration>Système.

2. Dans la fenêtre qui apparaît alors à l’écran, cliquez sur l’onglet Avancé puis sur lebouton Variables d’environnement.

3. Dans la zone Variables système, sélectionnez la variable PATH et cliquez sur le boutonModifier.

4. À la suite des valeurs déjà présentes, ajoutez le chemin du répertoire bin de Java (pardéfaut, C:\Program Files\Java\jdk1.6.0_<version>\bin) précédé d’un point-virgule.

5. Validez la saisie et fermer l’ensemble des fenêtres précédemment ouvertes.

JRE et JDK (Java Developpement Kit)

Il peut être intéressant d’installer le Java Developpement Kit (JDK) si vous souhaitez par la suite développervos propres applications Java. Sur ce point, nous verrons au chapitre 14 que Flex est capable d’interagiravec les applications développées dans ce langage. De plus, vous en aurez besoin pour mener à bien lesexemples mentionnés dans ce chapitre. Étant donné que le JRE est contenu dans le JDK, pourquoi s’enpriver ?

Important

Les instructions d’installation de logiciel ou de configuration d’environnement présentées dans cet ouvragesont essentiellement orientées vers le système d’exploitation Windows, car il s’agit de l’environnement leplus utilisé.

=Flex3 FM.book Page 28 Lundi, 17. novembre 2008 4:32 16

Développer avec le kit Flex SDKCHAPITRE 3

29

L’installation du JDK de Java est à présent terminée. Pour vérifier la bonne configurationde votre système, ouvrez l’invite de commandes MS-DOS et saisissez l’instructionsuivante :

java –version

Le résultat obtenu doit être semblable à celui de la figure 3-1.

Vous aurez également besoin du Flash Player 9 d’Adobe, grâce auquel vous pourrezexécuter les applications Flex. Son installation s’effectue en ligne à partir du site webd’Adobe : http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash.

Vous disposez à présent de tous les outils nécessaires pour utiliser le kit Flex SDKcorrectement. Passons maintenant à son installation.

Installation du kit Flex SDKPour commencer, téléchargez le kit Flex SDK sur le site d’Adobe à l’adresse suivante :http://www.adobe.com/products/flex/flexdownloads/.

Une fois le téléchargement terminé, décompressez l’archive obtenue dans un répertoirede votre choix. Nous avons ici choisi le répertoire C:\flex_sdk que nous nommerons

Figure 3-1

Vérification de la bonne configuration de Java

Mise en garde quant au choix du Flash Player

Comme nous l’avons vu au chapitre précédent, la version actuelle du Flash Player est la version 10.Cependant, il se peut que vous possédiez encore la version 9. Mettre à jour le Flash Player alors que vousavez déjà installé l’environnement de développement peut engendrer des disfonctionnements du FlexBuilder, notamment pour la fonctionnalité de débogage. Afin de réaliser l’ensemble des cas pratiques decet ouvrage dans les meilleurs conditions, nous vous conseillons de choisir l’une ou l’autre version et dene pas procéder encore à la mise à jour. Si pour une raison ou une autre, votre Flash Player est mis à jourpour la version 10, reportez-vous au chapitre 25, où nous expliquerons comment adapter votre projet à laversion 10. Enfin, nous attirons votre attention sur le fait que la version 10 du Flash Player étant récente,nous n’avons pas pu tester dessus l’ensemble des fonctionnalités de Flex 3. Par prudence, nous vousconseillons d’installer la version 9 (http://www.adobe.com/support/flashplayer/downloads.html),dans le cas où vous auriez déjà effectué la mise à jour de votre système.



30

root_flexsdk par convention. Le répertoire root_flexsdk contient désormais les dossiersprésentés et décrits dans le tableau 3-1.

L’installation est à présent terminée et le Flex SDK est opérationnel. Voyons à présent lecœur du SDK, dont les compilateurs sont les principaux éléments.

Les compilateursComme nous l’avons vu au chapitre précédent, une application Flex est composée defichiers MXML et ActionScript. Ces fichiers sont ensuite compilés, donnant naissance àun fichier SWF. Flex distingue deux types de compilations qui dépendent chacune d’uncompilateur spécifique : la compilation d’application et la compilation de composants.

mxmlc : le compilateur d’application

Le rôle principal du compilateur mxmlc est de créer un fichier de type SWF (ShockwaveFlash) à partir des fichiers ActionScript et MXML d’une application Flex (figure 3-2).

Ce compilateur s’exécute en ligne de commande à l’aide de l’exécutable mxmlc.exe situédans le dossier bin du répertoire root_flexsdk.

Tableau 3-1 Les différents dossiers du répertoire root_flexsdk

Nom du dossier Description

ant Contient un ensemble de tâches Ant permettant d’automatiser certaines opérations lors desphases de compilation et de déploiement.

asdoc Contient l’ensemble de la documentation de l’outil ASDoc permettant de créer la documenta-tion de votre application sous forme de pages HTML.

bin Contient un ensemble d’exécutables, tels que mxmlc.exe, compc.exe (voir sections suivantes)ou encore asdoc.exe.

frameworks Contient l’ensemble des classes, des fichiers de configuration et du code source du framework.

lib Contient l’ensemble des bibliothèques Java du framework.

runtimes Contient les exécutables permettant d’installer l’environnement Adobe AIR et le module dedébogage de Flash Player 10.

samples Contient des exemples d’applications.

templates Contient des templates de pages HTML contenant l’application Flex. Ceux-ci contiennentnotamment la fonctionnalité de détection du Flash Player. Ainsi, si vous utilisez un templateproposant cette fonctionnalité et que l’utilisateur ne possède pas le Flash Player, son téléchar-gement sera automatiquement proposé.



31

La syntaxe générale d’exécution de la compilation est la suivante :

mxmlc options fichier

où mxmlc fait appel au compilateur mxmlc.exe, options spécifie les options de compilation(date de création, nom du fichier SWF généré…) et fichier indique le fichier MXML àcompiler.

Le fichier MXML principal de l’application est spécifié en omettant les fichiers Action-Script associés à celle-ci. Cependant, les fichiers ActionScript liés à l’application ne sontpas oubliés lors de la compilation grâce aux liens spécifiés dans le fichier MXML principal.

Il est également important de noter que ce compilateur ne génère pas la page HTMLchargée de contenir le SWF créé. Elle devra être créée manuellement.

compc : le compilateur de composants

Flex offre la possibilité de créer des composants afin de les réutiliser dans plusieursapplications différentes. Un composant peut être assimilé à une application Flex dans lamesure où il est également composé d’un fichier MXML et de fichiers ActionScript.

La compilation de ces composants est réalisée à l’aide du compilateur compc dont lasyntaxe est décrite par l’exemple suivant :

compc -o composant.swc -root fichierMXML.mxml

où l’option –o permet de spécifier le nom du composant compilé et l’option –root indiquele nom du fichier MXML utilisé pour la compilation du composant. Cette simple ligne decode permet de générer un composant (composant.swc) à partir d’un fichier MXML.

Figure 3-2

Mécanisme de compilation mxmlc



32

Le fonctionnement du compilateur compc est identique à celui du compilateur mxmlc àla seule différence qu’il génère un fichier de type SWC (Shockwave Component) et nonSWF (figure 3-3).

Si nous récapitulons, voici ce que nous avons appris jusqu’à présent :

• Comment configurer un environnement pour exécuter le kit de développement FlexSDK et les applications Flex.

• Comment installer le kit Flex SDK.

• Quelques connaissances de base sur les différents compilateurs.

Cela peut paraître léger, mais nous allons voir qu’avec ces trois éléments seulement, noussommes en mesure de créer notre première application Flex.

Première application FlexNous vous proposons ici de développer le fameux programme cher à tout informaticienet informaticienne, à savoir l’incontournable Hello World ! dont le but est d’afficher unmessage de bienvenue à l’écran.

Conception graphique

Nombreux sont les projets prenant naissance à partir d’un dessin griffonné sur un coin detable. Notre projet n’a pas échappé à cette règle comme l’illustre la figure 3-4.

Figure 3-3

Mécanisme de compilation compc



33

Le principe de cette application est simple : un composant, nommé Panel contient unbouton qui, lorsqu’on clique dessus, affiche le message « Hello World ! ».

Création du projet

Au cours du chapitre précédent, nous avons abordé la notion d’arborescence des projetsFlex et nous avons vu que tout projet doit posséder un répertoire racine contenant unsous-répertoire src dans lequel seront enregistrées les sources de l’application.

Le kit Flex SDK propose différents exemples d’applications situés dans le dossiersamples. C’est dans ce dossier que nous allons placer la racine de notre projet, que l’onnommera HelloWorld. Dans la mesure où il s’agit du fichier racine de l’application, cerépertoire contiendra un sous-répertoire nommé src (figure 3-5).

Écriture du fichier MXML

Tout projet Flex comporte un fichier portant l’extension .mxml servant de base à l’applicationet permettant, entre autres choses, la description des interfaces graphiques.

Mais il ne suffit pas de créer des composants, il faut également définir leurs caractéristi-ques (nom, hauteur, largeur...) et leur positionnement. Les tableaux 3-2 et 3-3 présententles différentes caractéristiques des composants Panel et Button que nous allons créer.

Figure 3-4

Conception graphique

Figure 3-5

Arborescence du projet



34

Tableau 3-2 Les différentes caractéristiques du composant Panel

Caractéristique Description

Rôle Conteneur principal de l’application

Nom pn_principal

Titre (title) Hello World !

Largeur (width) 270 pixels

Hauteur (height) 150 pixels

Position sur l’axe des X 10 pixels

Position sur l’axe des Y 10 pixels

Disposition (layout) absolute (permet le positionnement des composants à l’aide de leurs coor-données x et y).

Tableau 3-3 Les différentes caractéristiques du composant Button

Caractéristique Description

Rôle Bouton déclenchant l’affichage du message.

Nom btn_message

Label Hello !!

Largeur (width) 120 pixels

horizontalCenter 0 (centre le bouton à l’intérieur du panel sur l’axe horizontal de celui-ci).

verticalCenter 0 (centre le bouton à l’intérieur du panel sur l’axe vertical de celui-ci).

Figure 3-6

Mise en place des composants


35

Nous allons à présent nous placer dans le répertoire src et créer un nouveau fichiernommé HelloWorld.mxml, dans lequel nous saisirons le code suivant à l’aide du Bloc-notesde Windows :

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Panel id="panneau" x="10" y="10" width="270" height="150" layout="absolute" ➥title="Hello World !!"><mx:Button id="bouton_action" label="Hello !!" width="120" horizontalCenter="0"➥verticalCenter="0"/></mx:Panel>

</mx:Application>

Les caractéristiques décrites aux tableaux 3-2 et 3-3 sont bien spécifiées pour chacun descomposants. Notre interface graphique est à présent terminée. Passons maintenant à lapartie ActionScript qui permettra d’afficher le message « Hello World !! ».

Écriture du fichier ActionScript

Tout d’abord, créez un nouveau fichier nommé HelloActionScript.as dans le répertoiresrc de l’application qui va contenir la procédure permettant d’afficher le message. Saisissezensuite le code suivant dans ce fichier :

import mx.controls.Alert;

public function afficherMessage():void{Alert.show("Hello World !!");}

Nous importons tout d’abord la bibliothèque nécessaire à l’utilisation de la classe Alert.Vient ensuite la création de la procédure afficherMessage() de type void étant donnéqu’aucune valeur de retour n’est attendue. Cette procédure fait appel à la méthode showde la classe Alert dont l’analyse syntaxique du code suffit à sa compréhension.

Liaison graphique et action

Nous possédons à présent un fichier MXML servant à la description de l’interfacegraphique et un fichier ActionScript permettant d’afficher le message « Hello World !! ».

L’étape suivante va consister à créer la liaison entre ces deux fichiers et à définir l’actionqui fera appel à la fonction afficherMessage(). Cette liaison s’effectue dans le fichierMXML à l’aide de la balise <mx:Script> pour laquelle il suffit de spécifier la source duscript à utiliser, c’est-à-dire le chemin relatif du fichier ActionScript :

<mx:Script source="HelloActionScript.as"></mx:Script>


36

Lors de la phase de conception graphique, nous avons décidé que le message doit s’afficherlorsque l’utilisateur clique sur l’unique bouton de l’interface. Cela se fera via la définitionde l’action sur click du bouton faisant appel à la fonction afficherMessage().

<mx:Button id="bouton_action" label="Hello !!" width="120" horizontalCenter="0"➥verticalCenter="0"click="afficherMessage()"/>

Pour plus de clarté, voici le script complet du fichier HelloWorld.mxml :


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script source="HelloActionScript.as"></mx:Script>

<mx:Panel id="panneau" x="10" y="10" width="270" height="150" layout="absolute" ➥title="Hello World !!"><mx:Button id="bouton_action" label="Hello !!" width="120" horizontalCenter="0" ➥verticalCenter="0" click="afficherMessage()"/></mx:Panel>

</mx:Application>

Compilation

Il nous faut à présent compiler notre application, ce qui aura pour effet de créer un fichierSWF pouvant être inséré dans une page HTML et diffusé sur Internet.

Pour cela, ouvrez, l’invite de commandes MSDOS et placez-vous dans le répertoireroot_flexsdk\bin avec la commande cd root_flexsdk\bin. Étant donné qu’il s’agit d’uneapplication, il convient d’utiliser le compilateur mxmlc. Voici donc la commande à saisirpour générer le fichier SWF de notre application :

mxmlc ../samples/HelloWorld/src/Helloworld.mxml

Placez-vous ensuite dans le répertoire src du projet, vous devriez à présent y trouver lefichier HelloWorld.swf issu de la compilation.

Que s’est-il passé ? Le compilateur mxmlc a analysé le fichier .mxml de l’application et aconstaté qu’il possédait un lien vers un fichier ActionScript. Il a donc pris en compte cefichier et a transformé le fichier MXML en un ensemble de classes ActionScript pourensuite les intégrer dans un fichier de type SWF.

À ce stade, nous pouvons déjà tester notre application à l’aide du Flash Player. Encliquant sur le bouton, vous devriez en effet voir apparaître le message « Hello World !! »(figures 3-7 et 3-8).



37

Figure 3-7

Exécution de l’application dans le Flash Player 9

Figure 3-8

Affichage du message « Hello World !! »



38

Nous disposons maintenant d’un fichier SWF complet et autonome. Nous entendons parlà que ce fichier n’a pas besoin des fichiers sources (MXML et ActionScript) pour sonexécution car ceux-ci ont été compilés et intégrés au fichier SWF. L’étape suivante vaconsister à intégrer ce fichier dans une page web afin de diffuser notre application surInternet.

Intégration dans une page web

Pour intégrer notre application dans une page web, que nous nommerons index.html,nous allons utiliser le langage HTML et ses balises <object> qui nous permettront de faireréférence au fichier SWF.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/1998/

➥REC-html40-19980424/strict.dtd">

<html>

<head>

<title>Hello World !</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

</head>

<body>

<p>

<object type="application/x-shockwave-flash" data="HelloWorld.swf"

➥width="100%" height="100%">

<param name="movie" value="HelloWorld.swf">

</object>

</p>

</body>

</html>

Cette insertion est des plus simples. Notez l’utilisation des propriétés width et heightpermettant de spécifier la taille de l’objet SWF par rapport à celle de la page HTML.Dans notre cas, l’application prendra la taille de la page HTML affichée dans le navigateur(figure 3-9).

Nous verrons dans la section « Création d’un script de compilation » qu’il est possible dedéfinir plusieurs options pour l’inclusion du fichier SWF, notamment la détection de laprésence du Flash Player sur le poste client, nécessaire à l’exécution de l’application(cette fonctionnalité n’est pas implémentée ici).



39

Déploiement

Si vous possédez un serveur web, il vous suffit de placer les fichiers HelloWorld.swf etindex.html dans l’un de ses répertoires, cela terminant par ailleurs la phase de déploiement.

Libre à vous ensuite de communiquer l’URL de votre application à l’ensemble de voscontacts. Dans la mesure où celle-ci ne permet pas de détecter la présence du FlashPlayer sur le poste client, n’oubliez pas de mentionner qu’il est nécessaire et doit êtreinstallé pour pouvoir exécuter votre application.

Automatisation de la compilation à l’aide de AntNous verrons au chapitre suivant que l’utilisation de Flex Builder facilite grandement ledéploiement d’une application Flex. Néanmoins, en fonction de votre budget, vous préfé-rerez peut-être le kit Flex SDK. Vous devrez alors procéder à une compilation manuelle,mais cette tâche est particulièrement fastidieuse (notamment lors des phases de test).

Nous vous proposons donc de voir comment automatiser les tâches de compilation àl’aide de Ant, outil développé par la Apache Software Foundation et communémentutilisé dans le déploiement des applications Java.

Figure 3-9

Application insérée dans une page HTML



40

Ant et Flex

Lors de l’analyse du répertoire principal de Flex, nous avons noté la présence d’undossier nommé ant. Ce répertoire contient la bibliothèque nécessaire à Ant pour pouvoircompiler et déployer des projets Flex. Cette bibliothèque est nommée flexTasks.jar et setrouve dans le répertoire lib du dossier ant. Elle contient trois tâches Ant qui permettentd’utiliser :

• le compilateur mxmlc ;

• le compilateur compc ;

• la tâche html-wrapper permettant de générer la page HTML intégrant le fichier .swfcréé lors de la compilation.

Voyons comment utiliser le couple Ant/flexTasks pour automatiser la compilation et ledéploiement d’une application Flex.

Installation de Ant

Commencez par télécharger Ant à partir de l’adresse suivante : http://ant.apache.org.Décompressez ensuite l’archive obtenue dans le répertoire de votre choix et configurezvotre système d’exploitation comme suit :

1. Créez une variable d’environnement nommée ANT_HOME pointant sur le répertoire ant(par exemple, c:\ant).

2. Modifiez la variable PATH en ajoutant le chemin du répertoire bin comme suit :

%ANT_HOME%\bin

3. Ouvrez ensuite l’invite de commandes MS-DOS et tapez la commande ant. Si l’environ-nement est correctement configuré, vous devriez voir apparaître ceci :

Buildfile: build.mxml does not exist !BuildFailed

Passons maintenant aux choses sérieuses !

Création d’un script de compilation

Avant tout, récapitulons : nous disposons d’un fichier MXML nommé HelloWorld.mxl situédans le répertoire root_flexsdk\samples\HelloWorld\src, ainsi que d’un fichier ActionScript

Ant

Projet de la Apache Software Foundation, Ant, signifie Another Neat Tool. Il est écrit en Java et a été déve-loppé par James Duncan Davidson en 2000. Ant permet d’automatiser la compilation et le déploiementdes projets. Il repose sur l’exécution de scripts de « build » au format XML comportant un projet et unensemble de tâches, organisées ou non, qui y sont liées.



41

nommé HelloActionScript.as. Notre objectif est de compiler et d’intégrer automatiquementle fichier SWF issu de la compilation dans une page HTML. Voyons comment procéder.

Nous avons choisi de placer les scripts de compilation Ant dans le répertoire root_flexsdk\ant. Comme nous l’avons vu, un script de compilation est un fichier XML contenant unesuite de tâches. La première étape va donc consister à créer ce fichier XML, que l’onnommera HelloWorld.xml. Nous devrons ensuite spécifier le projet Ant en lui affectant unnom.


<project name="Compilateur HelloWorld">

</project>

Une fois cela fait, nous devrons préciser le chemin du fichier flexTasks.jar. Si vous avezchoisi de placer le fichier de compilation dans le répertoire ant du Flex SDK, le fichierattendu se situe dans le répertoire suivant root_flexsdk\ant\lib :

<taskdef resource="flexTasks.tasks" classpath="c:/root_flexsdk/ant/lib/flexTasks.jar" />

Vous devrez ensuite paramétrer les variables qui seront utilisées lors de la compilation :

• FLEX_HOME : répertoire d’installation du kit Flex SDK (root_flexsdk) ;

• APPLICATION_HOME : répertoire du fichier à compiler (root_flexsdk/samples/HelloWorld/src).

<property name="FLEX_HOME" value="c:/root_flexsdk"/> <property name="APPLICATION_HOME" value="c:/root_flexsdk/samples/HelloWorld/src"/>

Vient ensuite la spécification de la tâche à réaliser. Une tâche (<target>) est définie par unnom qui sera invoqué lors de l’utilisation de Ant.

<target name="compilation">

</target>

Chaque tâche doit comporter un certain nombre d’instructions. La première que nousallons écrire est l’action de création du fichier SWF. Comme nous l’avons vu précédem-ment, pour compiler un fichier ActionScript ou MXML relatif à une application, nousdevons utiliser le compilateur mxmlc :

<echo message=">> Génération du fichier SWF" />

<mxmlc file="${APPLICATION_HOME}/HelloWorld.mxml"></mxmlc>

Ce script a pour résultat d’afficher un message « Génération du fichier SWF » et de réaliserla compilation de l’application en prenant les fichiers MXML et ActionScript situés dansle répertoire source spécifié dans la variable ${APPLICATION_HOME}.



42

Avant d’aller plus loin, testons notre script. Vérifiez d’abord que son contenu est indiqueà cela :


<project name="My App Builder"><taskdef resource="flexTasks.tasks" classpath="c:/root_flexsdk/ant/lib/flexTasks➥.jar" /> <property name="FLEX_HOME" value="c:/root_flexsdk"/> <property name="APPLICATION_HOME" value="c:/root_flexsdk/samples/HelloWorld/src"/>

<target name="compilation"> <echo message=">> Génération du fichier SWF" />

<mxmlc file="${APPLICATION_HOME}/HelloWorld.mxml"></mxmlc> </target>

</project>

Ensuite, ouvrez l’invite de commandes MS-DOS et placez-vous dans le répertoire conte-nant le fichier de build que nous venons de créer :

cd c:\root_flexsdk\ant

Pour exécuter le script, saisissez la commande suivante, faisant appel à la tâche decompilation :

ant -buildfile HelloWorld.xml compilation

Si tout s’est correctement déroulé lors de la compilation, le fichier SWF est créé dans lerépertoire de l’application Flex, root_flexsdk/samples/HelloWorld/src.

Passons maintenant à l’instruction qui permet de générer le fichier HTML contenant lefichier SWF. Cette action est possible grâce à la tâche html-wrapper qui fournit plusieurstemplates de génération. Le tableau 3-4 présente les différents arguments de la tâchehtml-wrapper.

Tableau 3-4 Les arguments de la tâche html-wrapper

Arguments Description

application Nom de l’application SWF.

bgcolor Couleur d’arrière-plan de la page HTML (blanc par défaut).

height Hauteur de l’application SWF (400 pixels par défaut).

width Largeur de l’application SWF (400 pixels par défaut).

output Chemin de génération de la page HTML.

swf Nom du fichier SWF à inclure (ne pas spécifier l’extension .swf du fichier).



43

Ajoutons donc une nouvelle action de génération de fichier HTML :

<target name="generationHTML" depends="compilation">

<echo message=">> Génération du fichier HTML" />

<html-wrapper swf = "HelloWorld" height = "100%" width = "100%" application = "HelloWorld" template = "express-installation" version-major = "9" version-minor = "0" version-revision = "0" output="${APPLICATION_HOME}" title = "Hello World !!"/>

</target>

Avant d’exécuter ce script, attardons-nous sur la notion de dépendance entre les différentestâches dans un fichier de compilation de Ant. En analysant l’exemple de code précédent,nous voyons que le terme depends a été ajouté à la tâche generationHTML. Cela signifiequ’elle ne pourra être exécutée que si la tâche compilation l’a été au préalable.

Arguments Description

template Trois types de templates sont disponibles :• client-side-detection : détecte la version du Flash Player installée sur le poste

client et propose son téléchargement le cas échéant.• express-installation : détecte si Flash Player est présent et propose son installation

en mode Express s’il n’est pas installé.• no-player-detection : ne vérifie pas la présence du Flash Player.

history Permet d’utiliser la fonction de DeepLinking, c’est-à-dire la navigation à l’aide des bou-tons Précédent et Suivant du navigateur (false par défaut).

title Titre de la page HTML (Flex application par défaut).

version-major Indique la version majeure du Flash Player à utiliser (version 9 par défaut). Cet argumentn’a de sens que si le type de template spécifié est client-side-detection ouexpress-installation.

version-minor Indique la version mineure du Flash Player à utiliser (version 0 par défaut). Cet argumentn’a de sens que si le type de template spécifié est client-side-detection ouexpress-installation.

version-revision Indique la version de mise à jour du Flash Player à utiliser (version 0 par défaut). Cetargument n’a de sens que si le type de template spécifié est client-side-detectionou express-installation.

Tableau 3-4 Les arguments de la tâche html-wrapper (suite)



44

Ajoutons également la propriété default au projet, qui permet de spécifier la premièretâche à réaliser lors de la compilation.

<project name="My App Builder" default="generationHTML">

On définit la première tâche comme étant celle réalisant la génération du fichier HTML.Ne pouvant s’exécuter avant la tâche de compilation, Ant va d’abord compiler le projetpuis terminer son travail par la génération de la page web. Lors de l’exécution du script Ant,il ne nous sera plus nécessaire de spécifier la tâche à exécuter étant donné que celle-ci estmaintenant précisée. La nouvelle commande de compilation est donc :

ant -buildfile HelloWorld.xml

Afin que tout ceci soit plus clair, voici le script de compilation dans sa totalité :


<project name="My App Builder" default="generationHTML"><taskdef resource="flexTasks.tasks" classpath="c:/root_flexsdk/ant/lib/flexTasks.jar" />

<property name="APPLICATION_HOME" value="c:/root_flexsdk/samples/HelloWorld/src"/>

<target name="compilation"> <echo message=">> Génération du fichier SWF" /> <mxmlc file="${APPLICATION_HOME}/HelloWorld.mxml"></mxmlc> </target>

<target name="generationHTML" depends="compilation"> <echo message=">> Génération du fichier HTML" /> <html-wrapper swf = "HelloWorld" height = "100%" width = "100%" application = "HelloWorld" template = "express-installation" version-major = "9" version-minor = "0" version-revision = "0" output="${APPLICATION_HOME}" title = "Hello World !!"/> </target>

</project>

Procédons à la compilation et rendons-nous ensuite dans le répertoire src de l’application.Nous notons alors la création des fichiers suivants :

• AC_OETags.js : il s’agit du fichier JavaScript vérifiant la version du Flash Playerinstallée en fonction des paramètres version-major, version-minor et version-revisionspécifiés dans la tâche html-wrapper.



45

• playerProductInstall.swf : application permettant l’installation du Flash Player requissi le client ne le possède pas.

• index.html : page HTML contenant le fichier SWF généré lors de la compilation.

Nous pourrions nous arrêter là, mais nous avons décidé de pousser l’automatisation jusqu’aubout en évitant la saisie de la commande ant dans la console MS-DOS. Pour ce faire,nous vous proposons de créer un script bat qui s’exécutera en double-cliquant dessus.

Nous vous invitons donc à créer un fichier nommé compilation.bat dans le répertoire src del’application et contenant les paramètres suivants (à adapter selon votre configuration) :

@ECHO OFFcls

echo ***************************************echo .::::: COMPILATION ANT :::::.echo ***************************************

ant -buildfile c:\root_flexsdk\ant\HelloWorld.xml

Double-cliquez ensuite dessus pour l’exécuter. Grâce à ce script exécutant la tâche antspécifiée auparavant, nous automatisons les tâches de déploiement et diminuons ainsi lenombre d’opérations à effectuer dans la console MS-DOS. Ceci réduit le temps requispour le déploiement et les tests d’exécution de l’application.

En résuméCe chapitre vous a permis de créer votre première application Flex. Certes, elle est trèssimple, mais elle nous a néanmoins permis de découvrir les principaux aspects de laréalisation d’une application. Nous avons également vu les différentes phases de dévelop-pement d’une application :

• la conception de l’interface graphique ;

• la création du fichier MXML dérivé de la conception ;

• le développement des traitements ActionScript ;

• la mise en relation entre les actions et l’interface graphique ;

• la compilation ;

• le déploiement.

De toutes ces phases, la plus compliquée est sans doute celle visant à concevoir l’interfacegraphique, car elle demande une grande part d’abstraction, notamment pour disposer lescomposants à l’aide de leurs coordonnées. Le rêve serait qu’un un outil WYSIWGregroupant toutes ces phases existe ! Eh bien ce rêve est devenu réalité grâce à Flex Builder,que nous vous invitons à découvrir grâce au chapitre suivant.


Programmation FLEX 3 - Librairie Eyrolles · 2008-12-16 · où mxmlc fait appel au compilateur...

Documents

Transcript of Programmation FLEX 3 - Librairie Eyrolles · 2008-12-16 · où mxmlc fait appel au compilateur...