Les fondamentaux de Flex

Les fondamentaux de Flex
Nous disposons désormais d'un projet Flex, nommé fondamentaux, et nous avons découvert
l'interface de Flash Builder, dont les fonctionnalités plus avancées seront découverts au fur et à
mesure des notions abordées dans ce tutoriel.
Mais le fichier fondamentaux.mxml ne contient que le code inséré par Flash Builder lors de la
création du projet :
<?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="955" minHeight="600">
<fx:Declarations>
<!-- Placer ici les éléments non visuels (services et objets de valeur, par exemple). -->
</fx:Declarations>
</s:Application>
Nous étudierons plus tard dans ce tutoriel les balises <fx:Declarations>. Pour l'instant, elles ne
nous seront pas utiles et nous pouvons les supprimer :
<?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="955" minHeight="600">
Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - [email protected]
Les fondamentaux de Flex
</s:Application>
Composants graphiques
Pour réaliser notre application, il nous faut insérer des composants graphiques pour afficher
du texte, des formulaires, des boutons, des tableaux, des graphiques, etc.
Un composant est représenté par une balise MXML. Le fichier fondamentaux.mxml sera donc
peu à peu rempli de balises MXML représentant les composants que nous voulons intégrer.
Pour afficher du texte, par exemple, nous utiliserons le composant label, dont la propriété text
contiendra le texte à afficher :
<s:Label text="Hello World !" />
Les propriétés d'un composant peuvent être spécifiées en tant qu'attribut comme ci-dessus pour
la propriété "text", ou en tant que balise imbriquée comme ceci :
<s:Label>
<s:text>Hello World!</s:text>
</s:Label>
La balise Application, abordée précédemment, représente le point d'entrée de l'application.
Elle est également le conteneur par défaut de tous les composants. Un conteneur est un
composant MXML qui délimite une zone rectangulaire dans laquelle sont inclus des
composants ou d'autres conteneurs.
Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - [email protected]
Les fondamentaux de Flex
Une application Flex est en réalité composée de conteneurs imbriqués les uns dans les autres,
et la balise Application constitue toujours le conteneur de plus haut niveau. Ainsi, tout
composant doit être placé entre les balises Application, ou entre les balises d'un autre
composant lui-même placé entre les balises Application.
Application HelloWorld
Pour débuter notre apprentissage pratique de Flex, nous allons commencer par un programme
simple, chargé d'afficher le texte "Hello World". Ce type de programme est couramment utilisé
lors de l'apprentissage d'un langage informatique quelconque, et a ainsi été baptisé HelloWorld.
Pour que l'application affiche le texte "Hello World!", complétons le fichier fondamentaux.mxml
en ajoutant un composant de type Label :
<?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="955" minHeight="600"
>
<!-- Commentaire : Le composant Label affiche le texte de la propriété "text" -->
<s:Label text="Hello World!"/>
Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - [email protected]
Les fondamentaux de Flex
</s:Application>
Lancement de l'application
Voyons maintenant le résultat et lançons l'application à l'aide du bouton raccourci dans Flash
Builder :
Dans votre navigateur Internet, une nouvelle page s'ouvre alors pour charger le fichier html
Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - [email protected]
Les fondamentaux de Flex
généré au moment de la compilation.
Son url est de la forme :
file:///chemin-vers-workspace/nom-projet/bin-debug/nom-fichier-application.html
Dans notre exemple, cela correspond à l'url :
file:///C:/Mistra/Flex/workspace/fondamentaux/bin-debug/fondamentaux.html
Sur cette page HTML, le texte Hello World ! est bien affiché, comme illustré ci-dessous. Notez
que la capture d'écran montre le navigateur Chrome, mais que le chargement de la page donne
le même résultat sur n'importe quel autre navigateur.
Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - [email protected]
Les fondamentaux de Flex
Notez que dans le code MXML, nous avons seulement indiqué que nous voulions ajouter un
label. Nous n'avons pas spécifié la taille ni la disposition de ce label sur la page. Par défaut, le
label a donc été placé en haut à gauche.
Nous savons maintenant comment afficher du texte et lancer l'application pour tester le code
MXML écrit. Découvrons maintenant quelques autres composants graphiques en réalisant notre
première interface.
Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - [email protected]
Les fondamentaux de Flex
.
Mistra Formation - 19 rue Béranger 75003 Paris - Métro République - 01 82 52 25 25 - [email protected]
Powered by TCPDF (www.tcpdf.org)