Les fondamentaux de Flex

Demander un devis
Je souhaite télécharger le programme ou imprimer le programme
  • Imprimer
tutoriel_vers_formation_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">
 
</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.

 

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!"/>
 
</s:Application>

 

Lancement de l'application

 

Voyons maintenant le résultat et lançons l'application à l'aide du bouton raccourci dans Flash Builder :

fondamentaux_flex

 

Dans votre navigateur Internet, une nouvelle page s'ouvre alors pour charger le fichier html 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.

fondamentaux_flex_2

 

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.

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.