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 :
//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 :
<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().
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".
<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.