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

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.
Den ganzen Beitrag lesen…

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

Den ganzen Beitrag lesen…

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 :

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 :

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 :

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é.

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.

Den ganzen Beitrag lesen...