IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Les fondamentaux de Flex 3 - Utiliser des composants de base

Cet article est la traduction de deux billets : ActionScript 3 vs Flex 3: Buttons et ActionScript 3 vs Flex 3: Labels. Retrouvez toutes les traductions de BuildInternet disponibles sur buildinternet.developpez.com.

Dans cet article, l'auteur nous expose les différentes méthodes permettant d'utiliser des composants de base (label, bouton) dans une interface Flex : via le langage ActionScript 3 ou bien via le langage de description MXML.

2 commentaires Donner une note à l´article (4.5)

Article lu   fois.

Les trois auteurs et traducteur

Site personnel

Profil ProSite personnel

Traducteur : Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Flex ne peut pas tout faire seul. Bien qu'il soit possible de construire une application RIA uniquement en ActionScript 3 ou en MXML, il faut quelques fois utiliser les deux langages pour obtenir un meilleur résultat. Maîtriser les deux méthodes de codage vous permettra de réaliser une de vos meilleures applications riches jusqu'ici. Cet article présente dans les grandes lignes les bases de la création d'un label et d'un bouton avec le langage ActionScript 3 puis en MXML.

II. Créer un label

II-A. Créer un label en ActionScript

Le code suivant permet de créer un label avec une taille de police à 24px en utilisant uniquement ActionScript en Flex. Chaque ligne a été commentée pour faciliter la lecture et la compréhension du code :

 
Sélectionnez
//Chargement de la classe Label de Flex
import mx.controls.Label;
//Déclaration d'un nouveau label
private var asLabel:Label = new Label();

private function initLabel():void {
//Assignation du texte au label
asLabel.text = "Construit en ActionScript";
//Modification de la taille pour la mettre en 24px
asLabel.setStyle("fontSize", 24);
//Ajout de l'instance
addChild(asLabel);
}

Pour ceux d'entre vous qui ont des connaissances en Flash, vous noterez que nous chargeons une classe différente pour le composant Label. En effet Flex utilise le mx.controls.Label au lieu du fl.controls.Label. Vous pourrez remarquer quelques problèmes de compatibilité de cette modification. Il faut donc faire attention au passage Flash vers Flex qui requiert un peu de travail.

II-B. Créer un label en MXML

Bien évidemment, la version MXML est bien plus compacte à écrire :

 
Sélectionnez
<mx:Label text="Construit en MXML" fontSize="24"/>

III. Créer un bouton

III-A. Créer un bouton en ActionScript

Il faut d'abord commencer par charger le package mx.controls.Button. En cas d'oubli, vous serez averti par un message d'erreur disant que la classe "Button" n'est pas reconnue. D'abord, vous noterez que pour créer un bouton ActionScript, il est nécessaire de le déclarer comme une variable avant de l'ajouter à ce stade via la méthode addChild().

 
Sélectionnez
import mx.controls.Button;

private var asButton:Button = new Button();

private function initButton():void {
asButton.x = 100;
asButton.y = 100;
asButton.id="actionscriptButton";
asButton.label = "Bouton en ActionScript 3";
addChild(asButton);
}

Trop de code ne veut pas forcément dire inefficacité. Plus vous vous familiariserez avec MXML et ActionScript, mieux vous comprendrez comment ActionScript est capable de fournir un contrôle plus complexe lorsqu'il est utilisé avec Flex. Il ne faut pas voir MXML comme le remplaçant d'ActionScript. Il est essentiellement un framework, tel que jQuery ou MooTools le sont pour le JavaScript.

III-B. Créer un bouton avec MXML

Le code suivant génère le même résultat que le précédent. Avec MXML, vous noterez que tout a été condensé en un tag. Avec MXML, chaque attribut du tag bouton contient la même information définie en ActionScript dans l'exemple précédent.

Notez bien que pour pouvoir utiliser le composant Button, il vous faudra importer le namespace : xmlns:mx="http://www.adobe.com/2006/mxml".

 
Sélectionnez
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Button id="flexButton" x="100" y="100" label="Bouton en MXML"/> 
</mx:Application>

Dans ces différents exemples, il est clair que le langage MXML facilite beaucoup le développement. Mais il est cependant important de savoir maîtriser les deux langages afin de passer de l'un à l'autre sans trop de difficulté. Et ainsi pouvoir exploiter au mieux les avantages des deux langages.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+