|
| |
| TUTORIEL FLASH |
 |
|
|
| A la découverte de MXML |
| Combinaison de langage XML, d'ActionScript et de nombreux autres composants, l'architecture Flex produit des applications Flash à la volée. Première approche.
(28/09/2005) |
  |
Le langage MXML (pour Macromedia
Flex Markup Language) est la réponse de l'éditeur du Flash aux
langages de création d'interface via XML, comme le XUL de Mozilla,
le futur XAML de Microsoft ou l'actuel OpenLaszlo de Laszlo
Systems.
Tout comme ces congénères, MXML permet de produire une
interface graphique (donc une application) à partir de balises
XML spécifiques, au moyen d'un outil intermédiaire.
MXML créé donc des applications Flash via le serveur Flex de
Macromedia, là où XUL crée des applications multiplates-formes
via XPFE, et XAML des applications Windows via Avalon
(le moteur de rendu de Longhorn/Vista).
Chaque langage répond donc aux spécifications de la plate-forme
pour laquelle il est conçu, et MXML est donc un nouveau langage
à reconnaître dans le monde des interfaces XML. S'il a l'avantage,
par rapport à XAML, d'exister dès maintenant, il souffre cependant
de la nécessité de posséder un serveur cher, Flex. Le prochain outil de
développement de Macromedia, baptisé Zorn, devrait cependant
autoriser des applications Flash qui n'ont plus besoin
du serveur pour tourner.
Le
langage
Reste donc à aborder le langage lui-même. Celui-ci, comme son
nom l'indique, est destiné à fonctionner avec l'architecture
Flex. Flex est avant tout un serveur de présentation programmé
en Java : il envoie à la demande des présentations Flash, selon
le code qui lui est fourni. Ce code fait usage de plusieurs
technologies : le langage de présentation MXML, le langage de
programmation ActionScript 2, et une large bibliothèque de composants
exploitables par MXML et AS2. Au travers de Flex, l'application
Flash pourra accéder à des bases de données, des services Web,
des objets Java...
MXML propose donc une série de balises pour construire l'interface
utilisateur. En cela, MXML peut se rapprocher de XHTML, chaque
balise provoquant un affichage précis et connu dans l'application
finale. Un fichier MXML se reconnaît par son extension .mxml.
L'exemple classique du Hello World permet de comprendre la structure
de base d'un document MXML. Cet exemple créé une présentation
Flash avec un simple texte affiché.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
>
<mx:Panel title="Petit programme">
<mx:Label text="Bonjour toute la
Terre !" fontSize="42" />
</mx:Panel>
</mx:Application>
La balise <mx:Application>
est la base de tout document MXML. Les balises de ce langage
sont définies par l'espace de nom http://www.macromedia.com/2003/mxml,
obligatoire évidemment.
<mx:Panel>, de son côté,
définit le "panneau" où s'affiche le contenu. Celui-ci peut
comprendre, comme ici, un titre, mais également diverses indications
permettant de préciser sa forme, son placement ou son interaction
avec le reste de l'application. Il n'est pas obligatoire, et
est utilisé dans les grosses applications pour regrouper des
éléments en un "module" réutilisable.
 |
Forum |
|
|
Réagissez
dans les forums
de JDN Développeurs
|
<mx:Label>, enfin, décrit
une simple ligne non modifiable par le programme, pouvant utiliser
du code HTML si besoin est.
Lancer ce code MXML aura donc le même effet visuellement que
de créer un Label dans Flash
MX 2004 et y taper du texte.
Le jeu de base des composants MXML couvre ainsi nombre de domaines,
certains liés à l'interface (formulaires, boutons, champs, menus,
listes), d'autres à la mise en page pure ou au regroupement
d'éléments... Toutes ces balises MXML sont ensuite compilées
en un fichier ActionScript 2, qui lancera les bons appels auprès
du serveur Flex.
ActionScript reste donc le fondement du fonctionnement d'une application
Flex/MXML, et peut être intégré directement au sein des balises
de composants, à la manière de JavaScript pour les éléments
HTML :
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:TextInput id="source" width="100"/>
<mx:Button label="Copier" click="destination.text=source.text"/>
<mx:TextInput id="destination" width="100"/>
</mx:Application>
Dans cette petite application, un clic sur le bouton copiera
le contenu du champ source vers
le champ destination, tel qu'indiqué
par le contenu de l'attribut click.
Une petite centaine de composants sont ainsi disponibles, pour
tous les usages, chacun avec sa balise MXML appropriée. Cela
va des fonctionnalités classiques, comme <mx:TextArea>,
<mx:Image> ou <mx:CheckBox>,
jusqu'aux fonctionnalités avancées, comme <mx:CreditCardValidator>,
<mx:WebService> ou <mx:MediaDisplay>. |
|
|
|
