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

28nov/1013

Programmation Flex 4 publié chez Eyrolles – Ma première publication!

Je vous annonce un heureux évènement de 1.26kg qui se prénomme "Programmation Flex 4 – Applications Internet riches avec ActionScript 3, Spark et Flash Builder" chez Eyrolles :) . J'ai participé à l'écriture de ce livre en tant que relecteur technique dont l'auteur principal est Aurélien Vannieuwenhuyze.

Voici le lien vers l'article chez Decitre:

Programmation Flex 4 – Applications Internet riches avec Actionscript 3, Spark et Flash Builder

En plus de la relecture technique, j'ai écrit certains chapitres comme "Créer des applications modulaires" ou sur le skinning de composant Spark et un chapitre bonus sur l'intégration et le contrôle de Google Maps dans une application Flex. Ces contenus ont été écrits au mois de Juin, ce qui avait ralenti un peu l'activité de flex-tutorial à l'époque, pour laisser du temps à ce projet.

9782212127256

Le sommaire

Voici les différents thèmes abordés dans le livre, chacun étant accompagné d'exemples de code:

  • Pourquoi choisir Flex 4 ?
  • A la découverte du framework Flex 4
  • Développer avec le kit Flex SDK
  • Le premier outil de développement : FlashDevelop 3.1.1
  • Développer des applications à l'aide de Flash Builder 4
  • Spark, Halo, FXG, passerelles entre les composants et le design de l'interface
  • Réaliser le design des interfaces
  • Le dynamisme applicatif avec les états, les transitions et les effets
  • La 3D avec PaperVision 3D
  • Créer un lecteur RSS avec Flash Catalyst
  • Créer des composants personnalisés
  • Gérer les données
  • Accéder aux services de la couche métier
  • Flex et PHP via Zend_AMF
  • BlazeDS ouverture open source vers le monde Java et la communication d'applications
  • Flex et .NET
  • Créer des applications modulaires
  • Interagir avec le conteneur web
  • Internationalisation des applications
  • Déboguer une application
  • Analyser les performances et optimiser l'application
  • Les tests unitaires avec Flex Unit
  • Adobe Air 2
  • Création d'un catalogue e-commerce : un catalogue interactif
  • Module d'administration avec Adobe Air
  • Mise en place du catalogue interactif
  • Gestion d'un panier d'achat et déploiement de e-catalogue
  • Google Maps dans un application Flex
  • Annexe 1 – Les composants de contrôle
  • Annexe 2 – Flex, BlazeDS 4, Tomcat 7, Eclipse Helios et le framwork Spring 3.0

Si vous débutez avec Flex 4, cet ouvrage vous donnera les billes pour avancer rapidement. Tout ne peut bien sûr pas être abordé (le livre fait déjà plus de 600 pages) mais l'essentiel est là. Certains lecteurs de flex-tutorial en ont déjà fait l'acquisition :P

Enfin, merci à Aurélien Vannieuwenhuyze pour m'avoir permis de participer à ce beau projet :)

10nov/100

Flex Roadmap – Le futur du SDK Flex (post-Hero)

Pendant Adobe MAX 2010 se sont déroulées de très nombreuses sessions parmi lesquelles, une session dirigée par Deepa Subramaniam (Senior Product Manager for the Flex SDK). Durant cette session d'environ une heure, elle a présenté le futur du Flex SDK.

Cette session est vraiment très très très intéressante. Si vous êtes développeur Flex /AIR, vous devez absolument la regarder, de nombreuses pistes sont dévoilées.

Les sessions peuvent maintenant être visualisées sur le site d'Adobe MAX 2010. Voici donc la vidéo de la présentation "Flex Roadmap":

Comme je l'ai dit plus haut, je vous conseille très vivement de regarder cette vidéo en entier, on y apprend beaucoup. Pour ceux qui n'ont pas envie, voici un petit résumé.

Le futur du SDK Flex

Avant tout chose, il faut préciser que ce qui est dit lors de cette présentation (et répété ici) ne sera pas forcement implémenté. On parle d'objectifs à long terme qui pourront être modifié (ou supprimés) au cours du temps.

Voici donc les points forts de la présentation (selon moi).

Enrichissement de la librairie de composants Spark

Ce n'est pas nouveau et c'est plutôt un objectif aussi court terme, de nouveaux composants Spark vont arriver pour compléter les composants qui existaient en Flex 3 (Halo). Dans Hero, on a déjà accès à Spark Form, Spark Image et Spark DataGrid qui est toujours un peu en chantier. De nouveaux composants seront développés pour encore plus de possibilités out-of-the-box.

Utilisation des APIs de globalization de Flash Player 10.1

Flash Player 10.1 embarque de nouvelles APIs de "globalization" qui permettent de connaître la "locale" (le langage /pays) du poste client. Les composants seront ainsi automatiquement adaptés à la locale de l'utilisateur (Validator, Formatter, …)

27août/101

Hero – Le premier build de Flex 4.5 dévoilé

J'en parlais il y a quelques semaines, la prochaine version du SDK Flex (Flex 4.5) sera nommée Hero. Celle-ci comportera notamment des composants pour plate-formes mobiles bien pratiques. Pour plus d'informations, lire ce billet:

Hero – Le prochain Flex SDK (4.5) avec composants pour mobiles

Et aujourd'hui, la Product Manager de Flex, Deepa Subramaniam a annoncé sur son blog, le premier build public de ce SDK:

Exciting Developments with Hero

Ce build (4.5.0.17077) peut être téléchargé sur le site Open Source @ Adobe:

Télécharger le dernier build de Hero Flex 4.5

Ce build est le premier, il est donc incomplet et sûrement buggé. Pas de composants mobiles dans cette version (pour l'instant!), voici les fonctionnalités implémentées:

Je suis allé jeter un coup d'oeil sur les documentations (encore incomplètes elles aussi) et les composants Image et DataGrid sont vraiment cool!

Notamment la possibilité de donner une SkinPart à une image pour l'affichage du preloading de l'image. Plus besoin de faire une nouvelle classe qui va hériter de Image pour cela. Notez aussi que ce composant Image intègre directement une mise en cache des éléments chargés. Ici aussi, on aura plus besoin de SuperImage et autres.

Le composant Spark DataGrid est lui, le remplaçant de la DataGrid mais aussi, à terme, de l'AdvancedDataGrid. Lisez les specifications, les modifications apportées ont du sens :) .

Pour l'instant, ils ont trouvé le set de couleurs le plus moche pour les couleurs de rollover / selection de base :P :

hero-1

Remplis sous: Non classé 1 commentaire
30mai/102

Flex 4 – (3) Différence entre éléments graphiques et éléments visuels (IVisualElement et DisplayObject)

On commence ici à mettre les mains dans Flex 4 :) . Avant de se lancer dans du développement Flex 4, il est primordial de comprendre ce qui a changé par rapport à Flex 3 pour faciliter la migration. Si vous n'avez jamais utilisé Flex 3 et que vous vous lancez dans Flex 4, il est indispensable de comprendre ce qui se passe derrière votre code.

On va commencer par un point pas si facile à comprendre mais qui est la base du DOM (Document Object Model) de Flex 4. Sans avoir compris ce point, vous aurez du mal à comprendre pourquoi il est plus facile de créer des skins et des composants avec Flex 4 qu'avec Flex 3.

Dans cet article, on va donc parler du DOM Tree alias Display List qui est en fait l'organisation hiérarchique de vos éléments. C'est un point primordial car pour retrouver vos composants, il va falloir savoir comment ils sont organisés.

Plusieurs articles en anglais peuvent vous aider à comprendre ce nouveau modèle DOM:

Pour vous faciliter la vie, je vais essaie d'expliquer au mieux, même si c'est parfois laborieux, accrochez-vous ;)

Elements et Children

Avec Flex 3, tous les enfants d'un conteneur étaient des "children". Pour parcourir tous les composants d'un conteneur, pas de souci, il suffit d'utiliser les méthodes getChildren() ou getChildAt(idx:int). Pour ajouter un composant, il suffisait d'appeler la méthode addChild(do:DisplayObject) sur le conteneur pour lui ajouter un compoant.

Avec Flex 4, vous pourrez voir que vous avez une nouvelle méthode: addElement(element:IVisualElement).

Alors quelle est la différence entre un Element et un Child?

  • Un Element est un objet qui implémente IVisualElement
  • Un Child est un objet qui hérite de DisplayObject

Alors comment savoir si un composant est un Element ou un Child (ou les deux)?

Tout d'abord, la classe UIComponent hérite de DisplayObject, donc tous les UIComponent sont des DisplayObject et sont donc des Child.

La classe UIComponent implémente aussi IVisualElement donc tous les UIComponents sont considérés comme des Element.

ui_comp

Cependant, cela ne signifie pas que tous les DisplayObject sont des Element. En effet, c'est bien UIComponent qui implémente IVisualElement et pas DisplayObject:disp_obj
Peu de composants sont en fait seulement des Element et pas des Child. Principalement, on retrouve les primitives Spark telles que Rect, Ellipse et Path. Ces 3 classes héritent de FilledElement et donc de GraphicElement qui implémente IVisualElement.
Dans le language utilisé dans les docs, ces Element "purs" (Rect, Path, Bitmap) sont appelés "graphic element".  Les "visual element" comportent, eux, les composants (Flex 3/4) et les "graphic element". Comme l'un contient l'autre, il est rapide de se mélanger les pinceaux ;)

1sept/093

Flex 4 – Différences entre Flex 3 et Flex 4 (3-Nouveaux composants et container)

Traduction de l'article Differences between Flex 3 and Flex 4 beta de Joan Lafferty.

Flex 4 introduit de nouvelles classes de composants qui utilisent la nouvelle architecture Flex 4, qui va rentre le skinning et la personnalisation de composant plus simple. Voici un comparatif entre les composants Flex 3 Halo et leur équivalent Flex 4 Spark:

  • mx.controls.Button              ->  spark.components.Button
  • mx.controls.ButtonBar             ->  spark.components.ButtonBar
  • mx.controls.CheckBox             ->  spark.components.CheckBox
  • mx.controls.ComboBox             ->  spark.components.DropDownList (w/o editability)
  • mx.controls.HorizontalList         ->  spark.components.List (with a HorizontalLayout)
  • mx.controls.HRule                 ->  spark.primitives.Line
  • mx.controls.HScrollBar             ->  spark.components.HScrollBar
  • mx.controls.HSlider             ->  spark.components.HSlider
  • mx.controls.Image                 ->  spark.primitives.BitmapImage
  • mx.controls.LinkBar             ->  spark.components.ButtonBar (with a custom skin)
  • mx.controls.LinkButton             ->  spark.components.Button (with a custom skin)
  • mx.controls.List                 ->  spark.components.List
  • mx.controls.NumericStepper         ->  spark.components.NumericStepper
  • mx.controls.RadioButton         ->  spark.components.RadioButton
  • mx.controls.RadioButtonGroup     -> spark.components.RadioButtonGroup
  • mx.controls.TextArea             ->  spark.components.TextArea
  • mx.controls.TextInput             ->  spark.components.TextInput
  • mx.controls.TileList             ->  spark.components.List (with a TileLayout)
  • mx.controls.ToggleButtonBar     ->  spark.components.ButtonBar
  • mx.controls.VideoDisplay         ->  spark.components.VideoPlayer
  • mx.controls.VRule                 ->  spark.primitives.Line
  • mx.controls.VScrollBar             ->  spark.components.VScrollBar
  • mx.controls.VSlider             ->  spark.components.VSlider
  • mx.core.Application             ->  spark.components.Application
  • mx.core.Window                     ->  spark.components.Window
  • mx.core.WindowedApplication     ->  spark.components.WindowedApplication
  • mx.containers.Canvas             ->  spark.components.Group
  • mx.containers.HBox                 ->  spark.components.HGroup
  • mx.containers.Panel             ->  spark.components.Panel
  • mx.containers.Tile                 ->  spark.components.Group (with a TileLayout)
  • mx.containers.VBox                 ->  spark.components.VGroup

Adobe encourage l'utilisation des composants et des conteneurs Halo avec les composants Spark. Adobe continue de créer des composants sur la même base (UIComponent), il devrait donc y avoir interopérabilité totale entre Spark et Halo.

Remplis sous: Flex 4 Lire la suite