Sol@rweb weblog

Et voici un premier billet depuis bien longtemps avec la découverte d'une application récente de chez Adobe nommée "Flex".

C'est en écoutant les commentaires élogieux de mes collègue du côté flash de la communauté mediabox que j'ai compris que c'était une technologie importante, utilisant le langage Actionscript troisième du nom, plus strict, plus beau, plus puissant et mieux structuré il fallait absolument le tester !

Qu'est-ce que flex ?

Flex est une technologie alliant un format XML propriétaire nommé le MXML pour décrire les éléments, les composants, etc. Mais aussi l'actionscript afin de pouvoir développer des évenements à côté.

C'est donc assez proche du XUL de ce côté-ci qui utilise lui aussi un format XML propriétaire et du javascript pour la gestion des évenements.

Le framework de Flex est 2 est complètement gratuit et l'on peut donc utiliser cette technologie "à la main" mais Adobe a sorti avec cette nouvelle version un outil nommé "Flex Builder" basé sur eclipse et qui offre un très grand confort d'utilisation de la même manière qu'un visual studio du côté de Microsoft.

On pourra dire malheureusement, mais c'est assez compréhensible, Flex Builder n'est pas gratuit et il faudra débourser minimum 537 euros pour acquérir cette première version en anglais.

Un dernier point assez important à noter tout de même est que pour lire les application développée en flex 2 il faut disposer du flash player 9.

Cliquez sur l'image pour voir une capture

Découverte du langage

Application sans actionscript

Pour bien commencer j'ai suivi une première leçon qui consiste à réaliser une petite interface pour lire un flux RSS.

Extremement simple, il y a juste une utilisation de quelques composants et même pas d'actionscript puisqu'un objet défini dans le MXML permet d'automatiser cette requete.

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send();">
	<mx:HTTPService 
	    id="feedRequest" 
	    url="http://www.wtg-fansubs.com/flux-20-dernieres-sorties.rss"
	    useProxy="false"/>
	<mx:Panel x="10" y="10" width="400" height="400" layout="absolute" title="{feedRequest.lastResult.rss.channel.title}" id="pnl_main">
		<mx:DataGrid x="39" y="50" id="dgr_rss" dataProvider="{feedRequest.lastResult.rss.channel.item}" width="302">
			<mx:columns>
				<mx:DataGridColumn headerText="Posts" dataField="title"/>
				<mx:DataGridColumn headerText="Date" dataField="pubDate"/>
			</mx:columns>
		</mx:DataGrid>
		<mx:TextArea x="39" y="209" width="302" height="45" id="txt_desc" editable="false" htmlText="{dgr_rss.selectedItem.description}" />
		<mx:LinkButton x="39" y="258" label="Lecture !" id="btn_read" click="navigateToURL(new URLRequest(dgr_rss.selectedItem.link));" />
	</mx:Panel>
</mx:Application>

Ci-dessus on remarque l'utilisation du HTTPService qui va récupérer les données du flux sur l'évenement : creationComplete="feedRequest.send();"

L'affichage est ensuite simplifié en utilisant seulement ce type de données : {feedRequest.lastResult.rss.channel.title}

Utilisation de l'actionscript

Après ce tutoriel je me suis même demandé comment utiliser l'actionscript, heureusement la suite s'avérait plus intéressante, me basant sur une idée donnée dans les leçons je me suis donc lancé à tatons dans la création d'un convertisseur monétaire qui nécessite un évenement développé à la main.

La première chose à faire est donc de lier un fichier actionscript à notre application et pas à écrire le code dans le XML comme ils le font dans les leçons...

On utilise alors :

<mx:Script source="monfichier.as" />

La solution la plus adaptée pour joindre un évenement a un bouton est d'utiliser un ecouteur grâce à une partie MXML : creationComplete="createListener();"

On défini alors l'évenement sur notre bouton :

<mx:Button x="205" y="20" label="Convertir" width="68" id="btn_convert" />

public function createListener():void
{
    btn_convert.addEventListener(MouseEvent.CLICK, convert);
}

On peut finir par la création de notre petite fonction de convertion :

public function convert(e:Event):void
{
	var val:Number;
	var euro:Number = 6.55957;
	
	if (txt_toConvert.text == "")
	{
		Alert.show("Vous devez entrer une valeur");
	} else {
		val = parseInt(txt_toConvert.text);
		if (cmb_devises.selectedItem.data == "F")
		{
			txt_res.text = Math.round(val/euro).toString()+" €";
		} else if (cmb_devises.selectedItem.data == "E") {
			txt_res.text = Math.round(val*euro).toString()+" FF";
		}
	}
}

Conclusion

Flex semble offrir un outil très puissant pour le développement d'application avec une interface web. Au même niveau que le XUL on pourra imaginer de nombreuses utilisations mais flex builder parait être un atout important pour cette technologie.

Vous pouvez consulter mon test dans mon labo et regarder un exemple d'utilisation chez adobe sans oublier qu'il vous faut absolument le flash player 9 !