Un « Hello World! » en Flex

Le monde du Web est en constante évolution. De nouveaux langages naissent, d’autres meurt. Si bien que les développeurs sont sans cesse obligés de se mettre à la page. Il s’agit d’un caractère des plus motivants de ce métier : l’apprentissage perpétuel. Éternellement, nous apprenons de nouvelles technologies, nous conduisant parfois à d’agréables découvertes.

Aujourd’hui, j’ai décidé de me mettre à Flex, ce langage créé par Adobe permettant de réaliser librement (donc sans licence propriétaire hors de prix) des applications Flash. Cette technologie repose en grande partie sur un langage très proche du XML, le MXML, ainsi que sur le très célèbre ActionScript. Oui, vous avez bien lu : librement. En effet, la version 3 de Flex (la plus récente) est sous licence Mozilla Public License. On est bien loin du format excessivement propriétaire qu’était Flash il y a quelques années. :)

Et, comme un classique de la programmation, nous allons commencer par un… attention, attachez-vous bien… par un « Hello World! ». Incroyable, n’est-il pas ? :p

1. Installation des outils

Première étape avant de se lancer dans le développement, télécharger le SDK (Software Development Kit) de Flex. Celui-ci est gratuit (je n’aime pas payer des licences hors de prix… et pirater, c’est le mal ! :p), et contient les compilateurs qui vous permettront de transformer notre MXML et notre ActionScript en un joli fichier SWF.

On télécharge donc le Flex SDK. Pendant le téléchargement de ces 120 Mo (quand même !), on vous propose de fureter gaiement sur le DevNet Flex, un site regorgeant de tutoriaux en tous genre. Seul bémol que j’ai trouvé : tous ceux-ci sont basés sur Flex Builder, un IDE proposé par Adobe, mais qui est payant, même si une version d’évaluation de 30 jours est offerte. Bref, cela n’est pas une solution pérenne.

En cherchant un peu, on tombe sur FlashDevelop, un IDE qui lui est gratuit, et qui prend en charge les langages (entre autres) ActionScript 3 et MXML. Parfait ! D’autant plus que pour commencer, nous n’avons pas besoin de fonctionnalités extrêmement avancées. On télécharge donc cet IDE. L’installation ne nécessite pas de réglages particuliers.

Une fois tout cela installé, nous sommes presque prêt à développer. Il nous faut juste configurer FlashDevelop. Ce que nous allons faire immédiatement.

2. Configuration de FlashDevelop

Tout d’abord, il faut indiquer au compilateur où nous avons placé notre SDK. Pour ce faire : Tools > Program Settings…. Puis, dans AS3Context, remplissez le champ Flex SDK Location avec le chemin du dossier du SDK.

Et c’est tout. Notre IDE est à présent configuré. Pas trop difficile, si ? ;)

3. Bonjour Flex !

Créons donc un nouveau projet. Surprise, cela se passe dans Project > New project…. On sélectionne alors Flex 3 Project. Après lui avoir attribué un nom (étant très original, mon choix s’est porté vers HelloFlex) et un emplacement, on vous demande le nom de l’auteur. Oui, votre nom sera associé à un projet d’une telle ampleur. Une certaine fierté devrait déjà vous étreindre à ce stage… ou pas. ^^

Le projet étant créé, vous pouvez voir une arborescence de base sur la droite de l’application. On peut y repérer plusieurs fichiers. Ceux contenus dans bin vous permettent de tester l’application très facilement. En regardant le fichier HTML, on s’aperçoit qu’il affiche, par l’intermédiaire d’un script Javascript swfobject.js notre application Flex, à savoir notre fichier SWF généré.

Mais le fichier le plus intéressant dans notre cas est le fichier src/Main.mxml. C’est en effet lui que nous modifierons pour construire notre application. En l’ouvrant, on peut constater tout d’abord que ce fichier est bel et bien développé sur un langage reposant sur XML.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
</mx:Application>

On reconnaît à la ligne 1 le prologue nécessaire à tout fichier XML. L’encodage utilisé ici est l’UTF-8. Je vous conseille très vivement d’utiliser tout le temps cet encodage, qui est pérenne et réellement international (les caractères chinois sont possible avec cet encodage, et pas avec l’ISO-8859-1(5) standard).

Puis, vient une première balise Application, qui contiendra notre application Flex. On y déclare un attribut : le namespace MXML. On peut notamment remarquer l’utilisation du raccourci mx pour faire référence à cet espace de nom. Toute balise MXML commencera donc par mx:.

Notre application étant un simple « Hello World! », nous n’allons avoir besoin que d’un simple label (comprendre une zone de texte statique). Le composant éponyme existe. Notre code devient donc :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Label text="Hello Flex!" />
</mx:Application>

On remarque ainsi que l’attribut pour le contenu de notre label est l’attribut text.

A présent, essayons de compiler notre fichier MXML, et de regarder le résultat. Pour ce faire, la touche F5 suffit (sinon, Project > Test movie…).

Cela fonctionne, mais pourrait être plus optimisé. En effet, nous avons un texte minuscule dans une fenêtre ridiculement grande. Pas très optimisé tout cela. Nous pouvons commencer par réduire la taille de notre application, grâce aux attributs width et height de la balise Application.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="100">
	<mx:Label text="Hello Flex!" />
</mx:Application>

Voilà qui est mieux. Et en plus, cela rentre à présent dans la largeur de ce blog. D’où l’exemple sous vos yeux :

Pour agrandir le texte, il est également possible de jouer avec les différents attributs de police. Par exemple :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="200" height="100">
	<mx:Label text="Hello Flex!" fontSize="24" color="#FFFFFF" fontFamily="Comic sans MS" />
</mx:Application>

On obtient ainsi le résultat suivant :

Comme vous avez pu le constater à travers cet exemple, Flex est un langage de programmation reposant sur une syntaxe simplissime (merci le XML) permettant de générer librement et gratuitement des applications Flash. Nous sommes d’accord, vous n’allez pas révolutionner le monde avec une telle application. Toutefois, la qualité (et surtout l’utilité) de nos applications iront crescendo. Il faut juste patienter la rédaction des futurs billets de ce blog. :)

Dans le prochain billet traitant de Flex, nous verrons comment mettre un peu d’interactivité dans nos programmes, en gérant les événements.