Premiers composants

Demander un devis
Je souhaite télécharger le programme ou imprimer le programme
  • Imprimer
tutoriel_vers_formation_Flex

Notre première application consistera en un formulaire ressemblant à ceci :

premiers_composants

 

Réalisation du formulaire

 

Commençons par les champs de saisie et les boutons. Le conteneur général titré "Premier Formulaire" sera ajouté par la suite. Pour le formulaire, nous allons utiliser les composants suivants :

  • Label pour afficher les textes "Nom", "Mot de passe" et "Commentaires",
  • Button pour les deux boutons "Valider" et "RAZ",
  • TextInput pour la saisie de texte sur une seule ligne,
  • TextArea pour la saisie multi-lignes.

 

Tout comme nous avions inséré un label "Hello World!" au chapitre précédent, nous allons donc insérer les composants nécessaires au formulaire les uns à la suite des autres entre les balises Application du fichier fondamentaux.mxml:

<?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:Label text="Nom"/> 
       <s:TextInput id="nomSaisi"/> 
       <s:Label text="Mot de passe"/> 
       <s:TextInput id="passSaisi"/> 
   
       <s:Label text="Commentaire"/> 
       <s:TextArea id="commentaireSaisi"/> 
   
       <s:Button label="Valider"/> 
       <s:Button label="RAZ"/> 
 </s:Application>

 

Ajout d'un conteneur

 

Un conteneur délimite une zone rectangulaire dans laquelle sont inclus des composants ou d'autres conteneurs. Il existe de nombreux types de composants : boîtes simples, panneaux, accordéons, navigateurs à onglets, etc. Nous en étudierons les principaux au fil des chapitres à venir, et commencerons ici par le Panel.

Nous aurons alors l'architecture suivante : l'Application contient un Panel, qui contient les composants du formulaire (Label, Button, TextInput et TextArea) comme illustré ci-dessous.

premiers_composants_architecture

 

Au niveau du code, il nous faut seulement ajouter des balises <s:Panel> qui encadrent les balises précédemment écrites pour le formulaire. Afin d'afficher un titre en haut du Panel, nous utilisons la propriété title à la ligne 8 :

<?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:Panel title="Premier Formulaire">
            <s:Label text="Nom"/>
            <s:TextInput id="nomSaisi"/>
            <s:Label text="Mot de passe"/>
            <s:TextInput id="passSaisi"/>
 
            <s:Label text="Commentaire"/>
            <s:TextArea id="commentaireSaisi"/>
 
            <s:Button label="Valider"/>
            <s:Button label="RAZ"/>
      </s:Panel>
</s:Application>

 

 

Test de l'application

 

Exécutons le programme pour tester. Nous obtenons alors une page semblable à celle ci-dessous, qui ne correspond pas vraiment à ce que nous cherchons à obtenir...

premiers_composants_2

 

En effet, nous avons inséré les composants et le conteneur, mais n'avons pas spécifié leur disposition : ils ont donc tous été placés à l'emplacement par défaut, en haut à gauche, les uns au-dessus des autres!

 

tutoriel_precedent

tutoriel_suivant

.
X
 
 
 
 
 

You havecharacters left.