Dans cet article, nous allons voir comment creer un client riche avec Flex, au dessus d’une application RESTful developpee avec Ruby on Rails .

Depuis quelques annees deja, je m’interesse fortement a Flex, et pense serieusement que cela peut etre une bonne alternative aux Applets ou encore a Ajax (pour faire des UI encore PLUS riches).

Flash s’est surtout fait connaitre par les nombreux jeux et animations en ligne, et a connu un nouveau souffle ces dernieres annees grace a son support multimedia beaucoup plus avance que Java (mp3, video, support de la webcam par le plugin): pour s’en rendre compte, il suffit de voir les YouTube, DailyMotion (pour la video) ou tous les sites de musique (Last.fm, Pandora), Google Analytics (Charting), Google Maps StreetViewer (3D, photographie).

Avec Flex , Flash va pouvoir desormais rentrer dans le monde de l’entreprise.


Flex est un framework d’Adobe (ex-Macromedia) base sur la technologie Flash. Le developpement d’une application Flex s’effectue au moyen d’un langage *ML, le MXML (pour la composition de l’UI) , combine au langage de script ActionScript (evenements, effets), bien connu des ‘flashers’. Pour information, ActionScript et JavaScript sont issus de la meme souche, le ECMAscript. Le styling peut etre effectue avec du CSS.
Cote deploiement, les sources (MXML, ActionScript, CSS, images) seront compiles vers un binaire SWF, au moyen d’un compilateur (developpe en Java), desormais disponible gratuitement par le biais du Flex 2 SDK (la version 3 beta est disponible).

L’integration dans une page HTML peut se faire de plusieurs facons:

Integration de l’application precompilee (en SWF) grace aux tags OBJECT ou EMBED.

Utilisation de tagLibs (pour des JSPs), ou compilation a la volee des MXML possible dans une application J2EE (par l’utilisation de filtres..pour rappel, le compilateur Flash est full Java)

Adobe met a disposition des composants de Charting (payants), et toute application Flash peut etre combinee a des produits serveurs tels que Adobe Flash Media Server pour les streaming de videos notamment, ou des applications “Temps Reel”.
Cote IDE, Adobe a mis a disposition un plugin Eclipse (payant), ex-FlexBuilder (c’etait initialement une application identique a Dreamweaver), qui integre notamment un Layouter, permettant la composition de l’interface par drag and drop des elements graphiques . Sans ce plugin, il reste possible de developper le client (les sources MXML, ActionScript etant de l’ASCII) avec des editeurs classiques (JEdit, UEdit, TextMate)

Pourquoi Flex?

Bien que cote Ajax, il existe aujourd’hui des frameworks eprouves tels que Prototype ( utilise conjointement a script.aculo.us pour les effets) qui nous facilitent grandement la tache (il suffit de voir quelle facilite on a pour ajaxifier une application web avec RoR, incluant ces 2 librairies..surtout grace a RJS ceci dit au passage), Flex a l’enorme avantage de venir avec une grande bibliotheque de composants graphiques ‘classiques’ et d’effets prets a l’emploi.

Face a Swing, repute ‘tedious’ au developpement, Flex peut s’averer plus rapide , une fois l’apprentissage de MXML et d’ActionScript effectue. De plus, Flex associe a Apollo (renomme AIR) permet de developper et deployer localement des applications riches pour desktop (RDA).
Initialement, Flex est prevu pour fonctionner par defaut au dessus d’une application J2EE, en s’integrant avec le Business Layer grace a la gateway AMF (ActionScript Message Format) . C’est toujours le mode privilegie par Adobe, pour palier a d’eventuels problemes de performances.

Pour resumer AMF : serialization d’un Objet Java (Business Delegate) cote serveur vers ActionScript avant envoi sur le reseau, et binding de l’objet dans l’UI a la reception..mecanisme inverse au post d’un objet AS depuis l’UI.

Flex supporte egalement les WebServices SOAP (avec son tag SOAPService) et les services RESTful avec HTTPService. Dans ces deux modes, ce ne sont pas des objets serialises en ActionScript qui transitent sur le reseau , mais des enveloppes XML.

Ainsi on comprend facilement, que dans ces derniers cas (SOAP/REST), on peut utiliser n’importe quelle techno cote serveur (Java, PHP, RoR…).

Pour l’exemple, nous nous focaliserons sur le tag HTTPService depuis l’interface faite avec Flex , et communiquerons avec une application cote serveur developpee avec RoR, en mode REST.

Pourquoi RoR?

RoR a acquis ses lettres de noblesse ces derniers 18 mois: d’abord vu comme un joujou, il continue sa montee en puissance, et est en phase d’etre incontournable ces prochains mois. Son createur a ete elu le meilleur Hacker de l’annee 2006, et Rails a recu un Jolt Award dans la categorie meilleur framework web de l’annee 2006.

RoR change la facon de developper des applications web. La puissance de Ruby (langage de script type dynamiquement, oriente objet, concis et expressif), associee a un framework concu intelligemment (a partir d’une application commerciale, Basecamp, chez 37signals), nous permet desormais de developper des applications web (2.0) avec une productivite accrue, pour moins d’efforts (on se concentre beaucoup plus sur la partie metier que remettre en place des briques techniques, deja presentes) et avec un plaisir immediat.

Meme si avant lui , le pattern MVC (vieux de 20 ans) a ete utilise par d’autres frameworks tels que WebObjects (papa de tous les frameworks web), Struts , JSF , le sentiment general est toujours (encore aujourd’hui) : “c’est trop complique”. Avec RoR, tout devient presque naturel, intuitif, et simplifie au maximum, a condition de respecter les conventions…comme tout framework, en sortir complique egalement les choses.
On verra dans cet exemple, qu’on s’appuiera sur une application RESTful (ces facilites sont presentes depuis la version 1.2) : celle ci pourra a la fois etre utilisee depuis notre client riche (Flash) ou un navigateur web classique en client leger (HTML).

REST (Representational State Transfer)

REST n’est pas un format ni un protocole, mais une architecture; l’architecture originale du Web. Les principes de base sont les suivants :

l’URI est suffisante pour acceder aux ressources.

HTTP fournit les 4 operations de base du CRUD (POST pour CREATE, GET pour READ, PUT pour UPDATE, DELETE pour DELETE).

Chaque operation est auto-suffisante.

Utilisation des standards HTML et XML.

Ce qu’il faut savoir est que tous nos navigateurs supportent les 2 verbes HTTP seulement : GET et POST. En fait il y en a beaucoup plus .

Comme vu precedemment, avec 4 verbes HTTP on se mappe sur un CRUD (persistence en base).

RoR va effectuer ce mapping (notamment grace a un mapping ‘magique’, associant verbes, formats, headers de requetes).

On verra lors de l’exemple, que RoR nous apporte sur un plateau la gestion de deux formats HTML et XML.

Pre-requis: Installer Ruby+RoR+mySQL

Sur Mac, Ruby est pre-installe (en version 1.8.2). Neanmoins, beaucoup de plugins RoR desormais necessitent une version 1.8.4 ou superieure. Je vous conseille donc de passer vers une version 1.8.5.

Cette derniere sera installee dans /usr/local et n’ecrasera pas la version pre-installee.

Pour cela suivez mes explications publiees sur JurassicGeek.

Sur Windows, je vous conseille InstantRails, qui contient toute la stack Ruby, RoR, mySQL.

Enfin, sur Linux (Ubuntu que j’affectionne) , j’avais prepare il y a quelques mois un environnement de developpement sur une image VMWare de Ubuntu..et j’en avais fait un document. Et aussi RailsOnUbuntu
Installer Flex 2 SDK

Downloader le Flex 2 SDK.

Creer un repertoire /opt/flex2_sdk et dezipper l’archive a l’interieur.

Le repertoire doit contenir les repertoires : bin, asdoc, frameworks, lib player, resources et
samples. (ajouter le repertoire bin dans votre variable d’environnement PATH)
Le Flash Player (Debugger version) se situe dans /opt/flex2_sdk/player/debug. Il n’existe que
pour Mac et Windows. Installer la version qui vous convient sur le poste client.
Test :
Compiler tous les samples .
$ /opt/flex2_sdk/samples/build-samples.sh
Detail de l’application :

L’application sera un simple systeme permettant de saisir des bouquins, avec leurs auteurs, ainsi qu’une ‘review’ et un commentaire.

Commencons par creer notre application RoR :

Dans un terminal lancer la commande :

rails flexdemo

Creer un scaffold (resource) pour notre application REST : on passera le model (classe mappant la table du meme nom au pluriel via l’ORM ActiveRecord), suivi des attributs (qui seront ajoutes au script de creation de la table associee):

cd flexdemo
script/generate scaffold_resource Review title:string text:text score:integer author:string

On retrouvera dans les repertoires de notre application :

la classe model Review : app/models/review.rb

le controleur : app/controllers/reviews_controller.rb

les vues : app/views/*.rhtml

+ helpers de views, tests unitaires et fonctionnels.

Le controller contient toutes les 7 actions (index, list, show, edit, create, update, destroy) correspondant a un CRUD classique.

Le scaffold est surtout la pour creer une ebauche de votre application, et devra etre retravaille afin d’obtenir une version definitive prete a la production. Il est egalement la pour l’apprentissage. Donc si vous ne maitrisez pas encore RoR, generez un scaffold, et etudiez le code.

RoR positionne la configuration a votre base de donnees dans le fichier config/database.yml . Il prevoit par defaut les 3 environnements : development, test et production.

Creez votre base de developpement flexdemo_development (sur mySQL par defaut) , en ligne de commande ou via des outils tels que phpMyAdmin ou CocoaMySQL (sur Mac ;-) )

Creer ensuite le datamodel (la table reviews) via le script de migration (db/migrate/001_reviews.rb) en lancant la commande :

rake db:migrate

Premier bilan : 2 lignes de commandes necessaires a creer une application minimaliste, permettant neanmoins d’effectuer toutes les operations du CRUD.

Pour verifier , demarrer le serveur Web WebRICK (inclu dans Rails) : script/server

Ouvrir un navigateur web a l’adresse : http://localhost:3000/reviews

Creer quelques enregistrements.

Maintenant voyons ce que l’on obtient en allant a la page : http://localhost:3000/reviews.xml

Pour voir un seul enregistrement (le premier), aller a l’adresse : http://localhost:3000/reviews/1.xml

Enfin, faites un essai avec la commande curl en passant -H “Accept: text/xml” sur un GET de http://localhost:3000/reviews (notez qu’on ne precise pas l’extension .xml dans l’URL)

La magie de tous ces aiguillages vient d’une ligne figurant dans le fichier config/routes.rb

map.resources :reviews

Les actions de controller quant a elles supportent les deux modes (HTML & XML) grace a la section suivante :

respond_to do |format|
format.html # index.rhtml
format.xml { render :xml => @reviews.to_xml }
end

Maintenant , developpons notre client Flex.

Creer un fichier flexdemo.mxml dans le repertoire app/views/reviews. Le source restera dans ce repertoire, afin de ne pas etre downloade plus tard, alors que le binaire Flash genere sera deplace dans le repertoire public.

Ce client va etre simple : il permettra d’afficher la liste des bouquins dans un tableau, et comprendra un formulaire de saisie pour creer de nouveaux enregistrement en base.

Detail du code pour afficher la table : pour cela, la requete sera effectue (apres creation de l’interface) vers le serveur a l’adresse http://localhost:3000/reviews.xml via HTTPService.

Le debut du formulaire de creation sera comme suit : declaration du HTTPService suivi d’une Grille pour l es champs de formulaire.

Compilons dans un Terminal le mxml :

$ mxmlc flexdemo.mxml

Loading configuration file /Applications/flex_sdk_2/frameworks/flex-config.xml
/RailsProjects/flexdemo/app/views/reviews/flexdemo.swf (264911 bytes)

Deplacer flexdemo.swf dans le repertoire flexdemo/public .

Generer un controleur et sa vue dedies au lancement de l’application riche avec RoR:

script/generate controller richclient index

Ajouter le code suivant dans la vie app/views/richclient/index.rhtml

Pour test , lancer un navigateur a l’adresse : http://localhost:3000/richclient


Une fois l’insertion effectuee, on retrouve l’enregistrement dans le tableau:

Conclusion

Dans cet exemple simple, on aura vu comment generer une application RoR en mode RESTful (et surtout vous aurez remarque que pour plugguer le client Flex, on aura du coder beaucoup de lignes de Ruby ;-) )

Pour avoir decline le meme genre d’exemple par le passe avec Struts, c’est le jour et la nuit croyez moi.

Cote Flex, l’ecran vous permettra de voir comment afficher des enregistrements dans une table, et poster un formulaire.

Je ne veux pas me facher avec la communaute partisante d’Ajax (de laquelle je fais partie egalement), mais il faut simplement peser le pour et le contre par rapport a Flex. Dans tous les cas, pour Ajax, meme avec les frameworks, il y a un surcout dans le developpement par rapport a l’epoque “Web 1.0″.

Flex, bien que s’appuyant sur MXML et ActionScript (qu’il faut apprendre) a l’enorme avantage de venir avec toute sa palette de composants et d’effets prets a l’emploi.

Downloader le projet (.tgz) ici

Samples Flex & Rails par Adobe sur Google Code.

Ressources / Books :

RESTful Web Services

Programming Flex 2
Flexible Rails

Essential ActionScript 3.0

Agile Web Development with Rails 2nd edition (francaise)

Programming Ruby 2nd edition
The Ruby way 2nd edition