“Flex on en entend souvent parler, ça à l’air pas mal mais malheureusement je l’ai jamais pratiqué”. Voilà la phrase qui trainait dans un coin de ma tête jusqu’à que j’assiste à une session donnée gratuitement par Baao, en partenariat avec Adobe, en plein coeur de Paris. Cette formation accélérée d’une seule journée a permis de donner un aperçu des possibilités de l’outil, qui fait partie du trio de tête des frameworks RIA.

Le but de cet article est de faire un point sur ce qu’est Flex aujourd’hui, avec ses avantages, ses limites et ses ambitions futures avec la sortie imminente de Flex 4.

Flex  ?

Revenons tout d’abord sur ce qu’est Flex.  Ce dernier est un framework permettant de réaliser des applications internet riches (RIA) en Flash, basé sur du MXML et de l’ActionScript 3.0. pour permettre de réaliser des fichiers SWF exécutables dans un navigateur web et facilement interfaçable avec des services exposés en php, .Net ou Java par exemple.
Le SDK de Flex contient une panoplie d’éléments graphiques prédéfinis et un ensemble de fonctionnalités bien pratiques : drag’n drop, service web, différents effets …
A coté de ça, vous avez AIR (pour Adobe Integrated Runtime) qui permet de lancer des applications Flex sans navigateur web, avec un panel de fonctionnalités supplémentaires : file access system, network detection, notifications, local database, application update, drag n drop …

Flex SDK en est à sa version 3.0 (la version 4 arrive fin mars) et, comme le SDK de AIR, il est gratuit.

FlexBuilder ?

En parlant de Flex, on est souvent obligé de parler de FlexBuilder qui se trouve être la solution Adobe pour développer des applications Flex.
FlexBuilder est une solution existante sous forme “standalone” ou sous forme de plugin eclipse, intégrant un designer graphique, l’auto complétion et différents facilités, comme des wizards bien pratiques pour débuter un projet.
Il existe 2 déclinaisons de FlexBuilder, la version “standard” et la version “pro”.  Cette dernière contenant un palanquée d’éléments supplémentaires tels que :  des graphiques avancés, des Datagrid avancées également, des outils de test, un profiler …

Si le SDK de Flex est gratuit, FlexBuilder lui est payant. Voici ses prix pour la version 3 :

• FlexBuilder standard : 175 euros / 69 euros par mise à jour (pour passer de la version 2 à 3 par exemple)
• FlexBuilder Pro : 519 euros / 229 euros par mise à jour

Aperçu des possibilités de Flex

Bon le cadre est posé, passons au coté pratique.
Une fois lancé et en s’amusant un peu avec les boutons, FlexBuilder ressemble un peu à ceci :

Flex Builder et son environnement ne déstabilise pas trop les utilisateurs d’Eclipse. On remarque un éditeur graphique WYSWYG bien pratique, surtout pour commencer.
Le premier tutoriel porte sur une application développée très rapidement pour lier une webcam avec un petit player intégré dans  votre browser.
L’éditeur est finalement peu voir pas utilisé durant notre TP, le fichier MXML représentant le design est directement manipulé avec une auto-complétion qui rend la chose facile. L’aspect graphique est géré un peu à la façon Swing : des layouts existent, des canvas mais aussi des “VBox” ou “HBox” qui sont des layouts prédéfinis verticaux ou horizontaux. On s’y retrouve vite.
En quelques minutes montre en main, les images de notre webcam apparaissent magiquement dans notre browser comme promis.

La seconde étape consiste à faire un lecteur vidéo de A à Z. Différentes notions sont ici abordées comme la récupération des interactions de l’utilisateur (en gros des événements), les aspects graphiques de padding / panel ou le binding qui permet de lier des composants dynamiquement entre eux (par exemple, le temps de lecture d’une vidéo affiché à l’écran est “bindé” avec un timer. Cela permet de remettre à jour l’indicateur dynamiquement). La logique de l’interaction est codée en ActionScript 3.0 qui se révèle être un langage simple et intuitif mais malheureusement il n’a pas encore le “bagage” technique de librairies que peuvent avoir C++ ou Java par exemple.

La aussi, la construction du projet est relativement simple et intuitive. Au bout de quelques dizaine de minutes, j’arrive à faire mon lecteur vidéo tout à fait acceptable affichant l’introduction vidéo d’Apple. Nous avons construit de A à Z notre petit lecteur en passant par différentes étapes et problématiques de construction. Plusieurs notions ont été abordées lors de cette construction comme des aspects de factorisation de code, les nomenclatures graphiques propres à Flex, les bonnes pratiques générales de construction projet ou l’utilisation de librairies (pour formatter et rendre plus lisible l’indicateur de temps notamment).
Mais j’imagine que vous bouillez d’envie de voir un screenshot, le voici donc :

Magnifique, non ?

Pour des applications peut être plus abouties, je vous conseille de faire un tour sur https://flex.org/showcase

La suite du TP, s’est axée sur différentes évolutions de notre lecteur (plusieurs vidéos en parallèles, lecture selon une liste interactive récupérée depuis un XML … ) mais aussi sur les autres possibilité de Flex (les avantages de AIR, BlazeDS, CATALYST, les frameworks existant ou l’hébergement d’applications Flex).

La prochaine version

La version 4 de Flex builder devrait arriver fin Mars :  le produit va changer de nom et devenir “Flash builder”.
Flex restera un framework open source et gratuit mais flash builder sera un produit payant permettant de construire facilement des applications Flex. Cette prochaine version contiendra également un flashplayer 10.1 optimisé (notamment pour les téléphones portables, enfin sauf l’iphone 😉 ) et permettra également le multi-touch.

Les prochaines versions vont également s’axer sur le peer to peer pour alléger les serveurs. En gros, Adobe proposera différentes solutions pour que deux ordinateurs puissent se localiser entre eux (en gros échanger leurs IPs) et dialoguer ensemble sans passer par un serveur central. L’idée est séduisante et déjà possible. Imaginez l’avantage que pourraient trouver des sites comme Youtube, Dailymotion ou les sites de chat vidéo.

Mais attendons déjà la fin du mois pour voir la version 4 de la bête.

Les questions

D’une nature curieuse et incroyablement téméraire, je me suis aventuré à quelques questions pendant la formation, résumées ici :

“L’actionScript est un langage un peu jeune qui n’a pas autant de librairies que pourrait avoir un langage plus mûr comme Java par exemple. Existe-il un compilateur Java qui permettrait de générer des librairies ActionScript ?”

Réponse de Y.Chevalier : Non. Il existe un compilateur C/C++ permettant de générer ce genre de librairies (des SWC) qui est soutenu par Adobe. En revanche, rien n’est prévu pour les autres langages, y compris Java.

“Quels sont les formats vidéos supportés par Flex?”

Réponse de Y.Chevalier : Principalement le MP4 ou plus largement, les vidéos encodées avec le codec H.264. Exit donc, les AVI ou WMV.

Pour info : Vous trouverez ici une liste exhaustive des formats supportés

“Qu’en est il du référencement Google pour des applications Flash ?”

Réponse de Y.Chevalier : C’est toujours flou. Plusieurs pistes sont envisagées comme :

• les URL explicites (l’URL contient des mots clés et ce, pour chaque “vue” du SWF)
• La génération de pages statiques en HTML classique pour faire correspondre une vue (encore une fois) avec une page HTML et ses meta données.
• Pour finir, la piste la plus probable : L’introspection dans chaque vue SWF qui contiendrait des meta data selon un format connu par les moteurs de recherche

Conclusion

Pratique, multi plateforme, rapide à prendre en main et joli au final, Flex a de quoi séduire en très peu de temps …
Il peut s’interfacer avec à peu près tout (Java, php, C++, .Net …) ce qui constitue à mon sens, un avantage autant qu’un inconvénient. Un avantage, car il peut s’utiliser sur beaucoup d’applications quelque soit leur langage mais également un inconvénient car le fait d’être obligé de passer par de l’actionscript rajoute un degré de complexité (et donc de possibilité d’erreurs ou de baisse de performance) évident. De plus, l’actionscript n’a pas encore la maturité d’un Java ou C++. Toutefois, plusieurs outils existent, comme BlazeDS, permettent de faire le lien justement entre ces différents langages (ici Java) et la plateforme Flex.

Un point également à surveiller sur Flex est CATALYST qui devrait sortir aux alentours de juin. Ce dernier permettra de lier des templates Illustrator (outil de dessin vectoriel Adode) à des applications Flex. En gros, ce dernier va permettre de faire correspondre des images vectorielles avec des composants Flash. Du coup, la frontière entre graphistes et développeurs pourrait être franchie assez aisément et ce qui consisterait un avantage certain, sur un problème vieux comme le monde de l’informatique.
Je n’ai vraiment pas abordé tous les sujets qui tournent autour de Flex mais j’espère au vous avoir appris au moins une petite chose ou deux sur cet outil, qui ne demande qu’à être généralisé sur nos postes !

Quelques liens

Le site officiel de Flex : https://www.adobe.com/fr/products/flex/
Les tontons flexeurs : https://groups.adobe.com/groups/193bcaff5f/summary
Un benchmark sur la serialisation / deserialisation de l’AMF3 : https://www.jamesward.com/
Exemple d’application hébergée et mutualisée : https://baao.com/back/
Pour les styles : https://scalenine.com/gallery/