Skinner un bouton avec Flex 4 : Mise à jour

Vous avez sûrement déjà vu passer l’information : Depuis vendredi , le préfixe Fx des composants Spark a été définitivement supprimé.
Ainsi, pour distinguer aujourd’hui un bouton Halo (Flex 2/3) d’un bouton Spark (Flex 4), on spécifie son namespace. Ca tombe bien , les namespaces sont fait pour ça à la base, non?

Pour créer une application Flex avec le SDK 4, on dispose maintenant de 4 namespaces :

  • MXML 2006 (URI: http://www.adobe.com/2006/mxml) : Il s’agit namespace qu’il faut utiliser si l’on veut créer une application qui utilise uniquement des composants Flex 3.
  • MXML 2009 (URI: http://ns.adobe.com/mxml/2009) : C’est le namespace qui contient les tags de Flex 3 et les nouveaux introduits dans Flex 4. Attention cependant, ce namespace n’intègre ni les composants Halo ni les composants Spark. Pour une application Flex 4, suivant que l’on utilise les composants Halo ou Spark (ou les 2 en même temps) , il va falloir ajouter leur namespace correspondant.
  • Spark (URI: library://ns.adobe.com/flex/spark) : Namespace contenant uniquement les composants Spark.
  • Halo (URI: library://ns.adobe.com/flex/halo) : Namespace contenant uniquement les composants Halo.

La suppression du préfixe Fx a aussi entraîné la réorganisation des packages : un nouveaux package spark, qui se situe au même niveau que le package mx a fait son apparition. Il faut noter aussi qu’aucun changement n’a été introduit au niveau des packages des composants Halo ainsi qu’à la définition du namespace MXML 2006. La conséquence étant une compilation d’un projet Flex 3 avec le SDK 4 sans modification préalable (ouf!)

J’ai donc modifié l’article Skinner un bouton avec Flex 4 en conséquent. En plus des changements concernant les namespaces, certains éléments ont vu leur nom changer. Par exemple, le remplacement de TextBox (qui affiche le texte du bouton) par SimpleText ou encore BitmapGraphic par BitmapImage.
La liste des changements peut-être trouvée ici

Panoramique Papervision : Mise à jour mineure

Juste un petit message pour vous informer que les articles :

Réaliser une visionneuse de panorama VR en AS3
Création de hotspots dans un panorama

ont été mis à jour par rapport à la version actuelle de Papervision (2.0 Great White).
Ces articles datant de 2007 utilisaient la version 0.72. Il était donc vraiment temps d’effectuer ces modifications !

Enfin, si vous souhaitez un tutoriel particulier sur Papervision, n’hésitez pas à laisser un commentaire.

Skinner un bouton avec Flex 4

La version alpha de Flex 4 étant disponible depuis un petit moment maintenant, il était temps de dépoussiérer (et finaliser) cet article qui traine dans mes brouillons Wordpress depuis un bon moment.
Il s’agit d’un exemple assez simple d’un bouton skinné avec la version 4 du SDK Flex. L’idée est de commencer à déblayer ce nouveau terrain de jeu et de voir quels sont les changements apportés par cette nouvelle mouture. Bien évidemment, cet article n’a pas pour but d’énumérer exhaustivement tous ces changements, mais plutôt de donner un feedback par rapport à cette phase de skinning.
Lire le reste de l’article…

filterFunction et itemsChangedEffect

Depuis la beta 2 de Flex 3, il est possible d’appliquer des effets visuels sur les itemRenderer d’une List ou d’une TileList lorsque ces éléments sont ajoutés, déplacés ou supprimés de la collection à laquelle ils appartiennent.
Si vous ne voyez pas de quoi je parle, un exemple est présent sur ce blog : ICI

Lire le reste de l’article…

Mise à jour de 3 articles

Juste un petit message pour signaler que j’ai profité de la sortie de la beta 3 de AIR pour mettre à jour la série d’articles que j’avais écrit sur l’API de Drag & Drop :

Lire le reste de l’article…

Flex 3 : Enhanced Constraints

Un petit moment s'est passé depuis mon dernier article. La reprise des cours, les projets qui tombent sur le dos et parfois le manque de motivation sont responsables de ce passage à vide. Mais rassurez-vous, ce blog n'est pas mort et j'espère le mettre à jour plus souvent dans les semaines qui viennent.

J'ai eu l'idée de faire cet article à cause d'un projet sur lequel je travail avec mon pote nono. Il s'agit en fait d'un quizz interactif , animé par un présentateur grâce à une webcam (utilisation de Red5 pour le streaming et l'envoi/réception des questions/réponses), où les joueurs vont pouvoir répondre à des questions grâce à une WiiMote.
Nous voulions afficher les réponses possibles chez le joueur sous forme de croix :

Le Layout

Dans le même temps, nous voulions que l'application soit redimensionnable, sans perdre le layout d'origine.

La première idée fut de créer une Grid de 3x3 et de disposer les boutons à l'interieur. Mais au moment de la compilation, le compilateur indique que le composant Grid est 'deprecated' dans Flex 3 et qu'il faut utiliser à la place les propriétés constraintRows et constraintColumns.

Ne connaissant pas ces nouvelles propriétés, un tour dans la doc s'est alors imposé.

Ces propriétés permettent en fait de subdiviser en colonnes et rangées un composant qui utilise le positionnement absolu comme Canvas,Panel, Module ou encore Application. L'interêt de ce découpage? Cela permet de construire des layouts redimensionnable dans les containers qui utilisent le positionnement absolu, manipulation très difficile à réaliser dans Flex 2.

Pour créer ces subdivisions, on peut passer soit par le code, soit directement par la vue Design si on utilise Flex Builder.

Un example : Un canvas dispose de 2 colonnes. La première utilise 30% de l'espace. Le bouton 'btn' doit toujours de trouver 10 pixels à droite de la première colonne :

Actionscript:
  1. <mx:Canvas>
  2.     <mx:constraintColumns>
  3.         <mx:ConstraintColumn id="col1" width="30%"/>
  4.         <mx:ConstraintColumn id="col2"/>
  5.     </mx:constraintColumns>
  6.     <mx:Button id="btn" left="col1:10" />
  7. </mx:Canvas>

Si je reprends l'exemple des 4 boutons en croix, un découpage en 4 du Canvas est suffisant : 2 colonnes et 2 rangées qui font chacune 50% du total de l'espace. Le bouton A est alors centré horizontalement par rapport au canvas et centré verticalement dans la première rangée. Même raisonnement ensuite pour les 3 autres boutons :

Actionscript:
  1. <mx:Canvas width="100%" height="100%">
  2.     <mx:constraintRows>
  3.         <mx:ConstraintRow id="Canvas1_row1" height="50%"/>
  4.         <mx:ConstraintRow id="Canvas1_row2" height="50%"/>
  5.     </mx:constraintRows>
  6.     <mx:constraintColumns>
  7.         <mx:ConstraintColumn id="Canvas1_col1" width="50%"/>
  8.         <mx:ConstraintColumn id="Canvas1_col2" width="50%"/>
  9.     </mx:constraintColumns>
  10.     <mx:Button label="En attente des suggestions" id="repA" horizontalCenter="0" verticalCenter="Canvas1_row1:0"/>
  11.     <mx:Button label="En attente des suggestions" id="repB" verticalCenter="0" horizontalCenter="Canvas1_col1:0"/>
  12.     <mx:Button label="En attente des suggestions" id="repC" horizontalCenter="Canvas1_col2:0" verticalCenter="0"/>
  13.     <mx:Button label="En attente des suggestions" id="repD" horizontalCenter="0" verticalCenter="Canvas1_row2:0"/>
  14.    
  15. </mx:Canvas>

Il est souvent plus facile de créer ces découpages directement dans la vue Design. Une règle horizontale et une verticale se place alors automatiquement au-dessus du container autorisant ces 'Enhanced Constraints'. Il suffit alors de placer la souris sur ces règles et de cliquer pour que le code soit automatiquement généré.

Nouvelle section ‘Ressources’

Alors que je prépare un nouvel article sur la dernière version de Papervision , j'en profite pour ajouter une section 'Ressources' dans laquelle vous trouverez divers liens qui vous seront peut-être utiles.

Cette section évoluera bien sûr au fur et à mesure des dernières nouveautés.

Si vous en avez à faire partager (mis à part les gros classiques) , laissez les en commentaire :)

Bases de données locales dans AIR

Une des fonctionnalités qui est apparue entre la release alpha et beta de AIR est l'intégration des bases de données en mode local.
Ce billet introduit cette nouveauté en plusieurs points : A quel type de SGBD a-t-on à faire? Quels utilisations peuvent en ressortir et quels changements peut-on anticiper sur les prochaines releases?


Lire le reste de l'article...

Composants réutilisables dans Flex : Les Templates

Un des grands atouts de Flex provient du fait que son architecture autorise la réutilisabilité (si si, ça existe) des composants.
Un moyen de créer des composants réutilisables est de les définir sous forme de templates.
Il faut voir ces composants comme une coque très flexible dans le sens où ces composants définissent leur propre layout mais laissent au développeur le choix des éléments qui les composent.
Ca veut peut-être rien dire à la première lecture mais ça devrait le devenir, enfin je l'espère, d'ici la fin du billet.


Lire le reste de l'article...

L’API ‘Drag And Drop’ de AIR (3ème Partie)

Cet article a été mis à jour le 13 décembre 2007 afin de respecter les changements qui ont été apportés à la Beta 3 de AIR.

Cette série d'articles touche à sa dernière partie. Celle-ci porte sur les types d'actions d'un Drag&Drop et sur le rendu différé

Lire le reste de l'article...