Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

6mar/1011

Master Class Advanced Flex @ Bruxelles, Retour en images

La semaine dernière a eu lieu la Master Class Advanced Flex à Bruxelles, un séminaire donné par l'équipe de Farata Systems. Vous l'aviez peut-être deviné, j'étais présent pour ce séminaire. Autant être clair, si vous n'y étiez pas, vous avez raté une des conférences les plus intéressantes (en France et ses alentours en tout cas).

J'ai eu l'occasion de rencontrer quelques uns (6 je crois) des lecteurs de flex-tutorial.fr à cette occasion (certains que je connaissais seulement par GTalk), c'était vraiment intéressant d'échanger en direct :D . Un bonjour à eux

Le Hilton, c'est classe

Le séminaire s'est passé sur 2 jours, au Hilton de Bruxelles. Pour planter le décor, les 2 jours se sont passés au 27e étage du Hilton, dans une salle de réunion panoramique avec sûrement une des meilleures vue sur tout Bruxelles. Rien que pour cela, cela valait le coup. Étaient présentes, une trentaine de personne, ce qui a permis de pouvoir communiquer facilement et de poser des questions. Quelques photos sont disponibles à la fin de cet article.

Le premier soir, l'équipe de Farata Systems a invité tous les participants à prendre une tournée de binche au bar du Hilton, un geste très sympa. Rajoutez à cela le buffet à volonté le midi (et c'est pas celui du Flunch) avec de très bons vins compris dans le prix(400 euros), ce séminaire était une aubaine :) .

Assez parlé du contexte, parlons maintenant du contenu.

Les présentateurs de chez Farata Systems

Ils étaient 3 pour animer ce séminaire, chacun spécialiste dans sa "branche" (compilation et optimisation, développement et aspect humains, …): Victor Rasputnis, Yakov Fain et Anatole Tartakovsky. Trois américains d'origine d'Europe de l'Est avec un accent anglais plutôt sympa ^^.

Ils sont tous consultant/développeur, venant du monde Java avec des bonnes années d'expérience derrière eux. Ils ont notamment écrit plusieurs livres spécialisés, notamment:

On a eu affaire à de vrais pros, qui ont développé des projets de grande envergure depuis des années. Ils ont tourné et modifié Flex et l'ActionScript dans tous les sens et connaissent tout sur le bout de doigts.

Ce qu'on a pu voir en 2 jours

2 jours, cela peut paraître long sur Flex mais ce fut en fait trop court pour pouvoir tout aborder. Le programme de ce séminaire était très chargé et on a pas eu le temps de tout aborder. De nombreux points sont déjà abordés dans leur blog mais il est toujours plus intéressant de les voir expliqués en live.

Voir le blog Flex de Farata Systems

Voici les points abordés qui m'ont le plus intéressé:

16jan/108

Master Class Advanced Flex à Bruxelles (1-2 Mars 2010)

Si vous suivez les RSS Adobe, vous avez peut-être entendu parler de l'entreprise américaine Farata Systems, notamment par son blog. Si vous n'êtes jamais tombé sur ce blog, je vous conseille très fortement d'en lire les articles, ils sont pointus et intéressants à la fois:

http://flexblog.faratasystems.com/

De nombreux articles de ce blog parlent de problèmes rencontrés dans des projets réels qu'ils réalisent. Ce n'est pas seulement du blabla sur les fonctionnalités de telle et telle technologie mais bien des problèmes auxquels vous pouvez être confrontés. Farata Systems propose aussi des formations Flex qui avaient lieu jusque là aux US. Mais exceptionnellement, les formateurs de chez Farata Systems viennent faire une session en Europe, à Bruxelles. Pour information, ils ne feront vraisemblablement pas d'autres session en Europe en 2010, c'est donc bien une occasion à ne pas rater.

Ce séminaire (Master Class Advanced Flex) est comme son nom l'indique, réservé aux personnes ayant déjà de bonnes bases sur Flex et les autres technologies qui tournent autour de Flex. Il se tiendra à Bruxelles le 1 et 2 Mars dans les locaux de l'hôtel Hilton (la classe). Bien sûr, ce séminaire sera donné en anglais.

Voici le programme de ce séminaire:

DAY 1

Adobe Flex Architecture

  • Architecture of Flash Player VM
  • Flash Player processing cycle
  • Data binding and MVC under the hood

Flex UI components:

  • Overview of  Spark components
  • Life cycle of custom components (use of callLater, commitProperties, updateDisplayList)

Selected Design Patterns in Flex

  • Application as  Singleton
  • Proxy for intercepting data changes
  • Mediator in custom UI components
  • Advanced DTO
  • AsyncToken in Remoting
  • Class Factory in a DataGrid

Linking Flex Libraries: when to use merged, external, and RSL

  • Tricks with libraries to make them self-initialized
  • Linking Flex Framework as RSL
  • Perceived performance improvement via pre-loaders and smarted RSL loading

Accessing Enterprise Server Tier

LCDS vs. BlazeDS

  • Flex Communication Protocols RTMP and AMF
  • Polling vs. Long polling vs. streaming
  • Basics of  creating custom adapters for BlazeDS/LCDS
  • Model-driven development with LCDS 3.0

Flex Messaging:

  • Flex Client – Flex Client messaging
  • Flex Client – external JMS messaging
  • Server Push to Flex Clients with BlazeDS
  • RPC Services
  • HTTPService
  • WebService
  • Flex Remoting

DataManagement Services

  • Data Synchronization with LCDS
  • Data Synchronization with BlazeDS
  • Remoting with DataCollection object
  • Monitoring AMF network traffic
  • Free Belgium beer for all attendees (5-7PM).
1nov/090

Flex RSL – Utilisation de RSL standards

Les applications Adobe Flex modulaires, qui utilisent des librairies ré-utilisables sont les meilleurs candidates à l'utilisation des RSL. Dans cet article, on va voir comment utiliser ces RSLs dans la pratique.

Il y a quatre étapes à suivre quand on veut utiliser les RSL:

  • Créer une librairie de composants / classes
  • Compiler l'application Flex pour qu'elle utilise la librairie de composant
  • Optimiser le RSL, si besoin est
  • Déployer l'application et le RSL

Création d'une librairie de composants

La première étape consiste à créer une librairie ré-utilisable et d'en faire un package pour qu'elle puisse être facilement redistribuée. Flex Builder 3  permet de créer facilement ces projets librairie. A partir de ce projet, le compilateur Flex va compiler un fichier SWC. Un fichier SWC est une archive qui contient des composants Flex et d'autres éléments (images, font, …). Si vous décompressez cette archive, vous trouverez deux fichiers:

  • Un fichier SWF, souvent appelé library.swf
  • Un fichier XML "manifest" appelé catalog.xml, qui contient la liste des composants inclus dans la librairie.

Pour commencer la création d'une librairie Flex, créez un nouveau projet de type Flex Library Project et pas Flex Project:

flex-library-1

Une librairie SWC peut être compilée de plusieurs manières, soit en ligne de commande avec le compilateur "compc", soit par Flex Builder. Dans notre cas, on va laisser Flex Builder faire le travail.

30oct/0910

Flex Modules – TypeError: Error #1034: Echec de la contrainte de type : conversion de mx.managers::PopUpManagerImpl@18658d01 en mx.managers.IPopUpManager impossible [Résolu]

Voici un bug Flex que vous allez sûrement rencontrer si votre application comporte plusieurs modules à la fois. Ce n'est pas vraiment un bug en soi, c'est simplement un comportement du Framework Flex qu'il faut connaître pour éviter les surprises.

Le bug en question

Ce bug se produit de nombreuses manières différentes, mais toujours quand vous allez utiliser plusieurs modules dans une même application. Après des actions qui peuvent pourtant sembler banales, vous allez obtenir une RTE (RunTime Error) assez étrange du style:

TypeError: Error #1034: Echec de la contrainte de type : conversion de mx.managers::PopUpManagerImpl@18658d01 en mx.managers.IPopUpManager impossible.
 at mx.managers::PopUpManager$/get impl()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\PopUpManager.as:68]
 at mx.managers::PopUpManager$/addPopUp()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\managers\PopUpManager.as:169]
 at mx.controls::ComboBox/getDropdown()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\ComboBox.as:1459]
 at mx.controls::ComboBox/displayDropdown()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\ComboBox.as:1552]
 at mx.controls::ComboBox/downArrowButton_buttonDownHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\ComboBox.as:1801]
 at flash.events::EventDispatcher/dispatchEventFunction()
 at flash.events::EventDispatcher/dispatchEvent()
 at mx.core::UIComponent/dispatchEvent()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9298]
 at mx.controls::Button/http://www.adobe.com/2006/flex/mx/internal::buttonPressed()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\Button.as:2504]
 at mx.controls::Button/mouseDownHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\Button.as:2750]
 at flash.events::EventDispatcher/dispatchEventFunction()
 at flash.events::EventDispatcher/dispatchEvent()
 at mx.core::UIComponent/dispatchEvent()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\core\UIComponent.as:9298]
 at mx.controls::ComboBase/textInput_mouseEventHandler()[C:\autobuild\3.2.0\frameworks\projects\framework\src\mx\controls\ComboBase.as:1388]

Cette erreur de conversion (Coercion) se reproduit facilement sur le PopUpManager ou sur le DragManager mais peut aussi se produire avec vos propres classes. Vous obtiendrez des messages qui pourront vous sembler étranges. Par exemple:

TypeError: Error #1034: Type Coercion failed: cannot convert MyClass@5d73ce1 to MyClass.

Une conversion de type entre un type MyClass et le même type MyClass qui ne fonctionne pas, il y a de quoi se poser des questions. Ce bug a été maintes fois reporté sur la Bug Base d'Adobe (SDK-16474, SDK-14384, …) mais peut facilement être corrigé.

Un exemple d'application qui pose problème

29oct/093

Flex Modules – Décharger (Unload) correctement ses modules

Le principal intérêt des modules Flex est de découper votre application en plusieurs SWF pouvant être chargés et déchargés à la volée. Le fait de décharger (unload) permet de libérer la mémoire prise par le module une fois qu'il n'est plus utilisé. Cependant, même en faisant un unload() du module, il ne sera pas forcement libéré de la mémoire par le Garbage Collector. En effet, si des références vers ce module existent toujours, le module ne sera pas libéré. Parfois ces références sont évidentes mais parfois elles sont plus difficiles à trouver, surtout quand elles se trouvent au fin fond du framework Flex.

La Flex Team a publié un article pour récapituler les principales cause connues qui font qu'un module n'est pas libéré de la mémoire. Voici le détail.

Chargement de modules dans différents "applicationDomain"

Le fait de charger des modules depuis différents "applicationDomain" peut obliger Flex à référencer des classes dans ses Managers. Ces références peuvent causer la persistence du module en mémoire. Essayez de charger les modules avec l'applicationDomain par défaut (en utilisant les paramètres par défaut de la méthode load().

Fuites mémoire

Les "Memory leaks" peuvent créer des références vers votre module qui vont empêcher le Garbage Collector de libérer le Module Flex de la mémoire. Voici les causes principales:

Styles

Cela se produit même sans tag mx:Style dans votre MXML. Si votre module utilise un composant qui n'est pas utilisé par l'application principale, le module va enregistrer le style par défaut pour ce composant dans le StyleManager et coincer la première instance de votre module. Vous pouvez utiliser l'option du compilateur -compiler.keep-generated-actionscript pour voir quels styles le module et l'application principale utilisent. Vous pouvez aussi utiliser l'option -compiler.keep-all-type-selectors dans l'application principale pour forcer l'application principale à enregistrer les styles par défaut de chaque composant dans le fichier defaults.css. Les CSS chargés à l'exécution (StyleManager.loadStyleDeclarations) ne sont pas concernés par ce problème car ils sont chargés de manière différente.

Resources

Si votre module utilise des composants qui utilisent de ResourceBundles non-utilisés par l'application principale, ces Resource Bundles vont être enregistrés dans le ResourceManager et coincer la première instance du module. Vous pouvez utiliser l'option du compilateur -compiler.keep-generated-actionscript pour voir quels Resource Bundles le module et l'application mère utilisent. Vous pouvez forcer l'application principale à avoir ces Resource Bundles additionnels en ajoutant les metadata du Resource Bundle dans l'application principale.

Par exemple, vous ajouter le Resource Bundle "controls", vous devez ajouter à votre application:[ResourceBundle("controls")]. Si vous chargez vos Resource Bundles comme des modules, assurez-vous que les Resource Module ont bien fini leur chargement avant de charger le module Flex qui utilise le Resource Bundle.

ExternalInterface.addCallback

Les modules ne devraient pas utilier la méthode ExternalInterface.addCallback(). Cela enregistre la méthode dans le navigateur et il n'y a, à ce jour, aucun moyen de la supprimer. Il est recommandé de laisser l'application principale enregistrer une méthode qui va appeler une référence de fonction. Il suffit ensuite de remplacer cette référence par la méthode du module. Quand le module est déchargé, il suffit de mettre cette référence à null.

Timers et autres mécanismes de Timing

L'utilisation de Timer, setTimeout() et setInterval() peuvent causer des fuites mémoire. Les Timer doivent être arrêtés et avoir leurs listeners supprimés. setTimeout et setInterval doivent faire quant à elles appel à clearTimeout() et clearInterval() pour pouvoir être GCed correctement.

Listeners sur évènements depuis des objets à l'extérieur du module

Utilisez des références faibles (weak references) ou assurez vous d'avoir bien supprimé les event listener. Rappelez-vous que lorsque vous appelez A.addEventListener("foo", B.someMethod), "A" a une référence vers B, et pas l'inverse.

Focus

Si un des objets du module a le focus, le FocusManager aura toujours une référence vers le module. Il est conseillé de bouger le focus vers un autre objet à l'extérieur du module avant de le décharger.

RemoteObject

Si un module amène une nouvelle classe qui va faire partie d'une requête serveur, cette classe va être enregistrée par Flash Player et amener une référence vers le module. Liez les Data Classes à l'application principale lorsque c'est possible.

Images chargées

Si un module charge une image, cette image doit être déchargée sinon Flash Player va garder des buffers autour de cette image.

Autres éléments à connaitre

Une fois qu'ils n'y a plus de référence vers les objets d'un module, Flash Player peut encore garder un module en mémoire pendant un moment si certains des objets d'un module on eu le focus. Essayez de taper du texte ou de cliquez dans l'application pour éventuellement libérer des références vers le module.

Les versions Debug d'un module peuvent empêcher le module d'être libéré de la mémoire. Les version de debug contiennent des informations de debug qui peuvent être enregistrées par le debugger. Assurez-vous de tester avec des versions realease des modules et une application lue par un Flash Player classique.