`` La veille techno du web » Introduction à Flex 4 FXG avec Flex Builder 3

Introduction à Flex 4 FXG avec Flex Builder 3

tannoy | 29 août 2008

Adobe met à disposition le SDK de Flex 4.

Durant le mois d’Août, l’équipe Flex d’Adobe a publié sur le site Open Source d’Adobe un grand nombre d’informations concernant la future version de Flex, nom de code Gumbo.

Une des nouveautés concernent le format graphique FXG.

Définition du format FXG

Le format FXG est un format, basé sur l’XML, de description d’éléments graphiques pour la plateforme Flash. Il supporte 3 types d’éléments graphiques fondamentaux :

  • Les formes
  • Les textes
  • Les images bitmap (GIF, JPEG et PNG)

Le modèle de rendu du format FXG est très proche du modèle de rendu du Flash Player 10 .

L’intérêt de FXG 1.0 est qu’il va facilité la conception visuelle d’applications Flex à partir des outils de la Creative Suite mais aussi à partir du futur logiciel nommé Thermo.

Utilisation de FXG avec Flex Builder 3 et le SDK Flex 4

Installation de Flash Player 10

Toutes les instructions d’installation du Flash Player 10 sont disponibles sur la page du Labs d’Adobe.

Téléchargement du Flex 4 SDK

Pour pouvoir utiliser le Flex 4 SDK, il faut le télécharger et ensuite le dézipper sur votre disque. Au moment de la rédaction de cet article, j’utilise la version 4.0.0.3021.

Ajout du SDK dans Flex Builder 3

Après avoir téléchargé et dézippé le SDK, on va l’ajouter aux SDKs de Flex Builder.

  1. Ouvrez la boîte de dialogue Preferences et sélectionnez Flex > Installed Flex SDKs
    image1.png
  2. Cliquez sur le bouton Add
    image2.png
  3. Entrez le chemin du SDK
  4. Entrez le nom du SDK dans le champ Flex SDK Name
  5. Cliquez sur Ok pour sauvegarder vos modifications
  6. Cliquez de nouveau sur Ok pour ajouter le SDK à la liste
Création d’un projet Flex

Nous allons maintenant créer un projet Flex en lui demandant de compiler avec le Flex 4 SDK.

Une fois le projet créé, nous allons modifier les propriétés de compilation.

  1. Ouvrez la boîte de dialogue Properties (Project > Properties)
    image3.png
  2. Cliquez sur la catégorie Flex Compiler et choisir Flex 4 pour l’option Use a specific SDK
    Précisez aussi la version requise de Flash Player sur 10.0.0
    image4.png
  3. Cliquez sur Ok pour sauvegarder les modifications
Ajout de code MXML et FXG

Pour les applications Flex 4, on utilisera 3 namespaces pour l’objet Application :

  •  xmlns= »http://ns.adobe.com/mxml/2009″
  • xmlns:mx= »library:adobe/flex/halo »
  • xmlns:gumbo= »library:adobe/flex/gumbo »

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns="http://ns.adobe.com/mxml/2009"
xmlns:mx="library:adobe/flex/halo"
xmlns:gumbo="library:adobe/flex/gumbo"
layout="absolute">
</mx:Application>

L’ajout du namespace « gumo » permet d’obtenir l’aide à la saisie dans Flex Builder 3.

image6.png

Nous allons ensuite utiliser le format FXG pour décrire un rectangle arrondi et un texte. Ces 2 éléments visuels seront groupés pour ne former qu’un seul.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns="http://ns.adobe.com/mxml/2009"
xmlns:mx="library:adobe/flex/halo"
xmlns:gumbo="library:adobe/flex/gumbo"
layout="vertical">

<gumbo:Group>
<gumbo:content>
<gumbo:Rect width="400" height="100" radiusX="30" radiusY="30">
<gumbo:fill>
<mx:SolidColor color="#FF0000" />
</gumbo:fill>
</gumbo:Rect>
<gumbo:TextGraphic fontFamily="Verdana" fontSize="14" color="#FFFFFF" horizontalCenter="0" verticalCenter="0">
<gumbo:content>Hello World !!!</gumbo:content>
</gumbo:TextGraphic>
</gumbo:content>
</gumbo:Group>
</mx:Application>

image7.png

Il ne vous reste plus qu’à explorer les spécifications FXG pour continuer vos expérimentations.

Catégories
Flash, Flex

« »