Archives pour la catégorie Button

AIR Mobile – Les composants et le thème Mobile Flex 4.5

L’avantage de pouvoir utiliser les composants Flex par rapport à une application pure AS3 est de simplifier le développement en vous donnant toute une bibliothèque de composants prêts à l’emploi. Certains composants sont de nouveaux composants, d’autres ont simplement une autre « Skin » optimisée pour le rendu mobile (plus gros, système de cache, etc.). Bien sûr, vous pouvez toujours faire vos propres composants mais on va voir ceux qui sortent directement du four. Dans ce billet, on va découvrir ces composants et leurs looks pour vous donner une idée.

Notez que les itemRenderer seront couverts dans un autre billet sur flex-tutorial.

Bouton

Ce n’est pas un nouveau composant, seulement le composant s:Button avec un look différent lorsque vous l’utilisez dans un projet de type Mobile:

buttons

Notez que le composant Spark Button a retrouvé sa propriété « icon » vous permettant d’ajouter un icône directement avec la Skin de base (il fallait faire sa propre Skin auparavant).

Lire la suite

Flex 4 – Création d’une Skin de bouton Flex 4

Pour introduire le skinning dans Flex 4, on va partir d’un des composants les plus simple: le composant Button. Alors certains me diront que c’est complètement bateau de faire un Button mais l’important est pour l’instant de comprendre les concepts. Une fois la skin de bouton réalisée, vous verrez que l’on peut faire une skin de Slider sans problème.

Flex SDK est Open Source, profitez-en!

On ne le répètera jamais assez, le framework Flex 4 est totalement Open Source. Ce qui signifie que vous avez accès au code de toutes les classes du framework. Seules les classes vraiment bas niveau de Flash Player (appartenant à playerglobal.swc) ne sont pas disponibles mais de toutes manières, dans la plupart des situations, vous aurez seulement besoin du code de « haut niveau ».

Certains bloggeurs critiquent la qualité du code du framework Flex (notamment le composant AdvancedDataGrid qui est particulièrement décrié) mais de manière globale, le code est bon, bien meilleur que le code de certains composants que l’on peut trouver sur le net. Le code doit suivre les conventions d’écriture Adobe. Après avoir analysé le code de quelques classes, vous ne serez pas perdus. Vous pouvez beaucoup apprendre en regardant le code de Flex, n’hésitez pas à vous plonger dedans!

Les Skin sont un bon exemple de code qu’il faut analyser attentivement. Si vous vous demandez par exemple à quoi ressemble la skin d’un Button, vous pouvez aller voir à quoi ressemble la Skin de base d’un Button. Cherchez simplement dans le code ou dans la doc, le nom de la Skin de base et ouvrez cette classe. Et voilà, vous avez un exemple sous les yeux!

On se lance tout doucement…

Une Skin Flex 4 comporte exactement les mêmes composants que vous utiliseriez dans une application. Ils se situent simplement dans un fichier séparé que vous pouvez utiliser dans votre application.
Pour avoir un aperçu de la Skin que nous allons créer, nous pouvons donc travailler tout d’abord dans un projet Flex que l’on va créer.
On va commencer par un bouton le plus simple possible, c’est-à-dire un rectangle arrondi avec un label au dessus. Pour le rectangle arrondi, on va prendre la primitive Spark « Rect » et pour le label, un composant « Label » Spark.
Flex 4 utilise une nouvelle architecture, d’un point de vue interne aux composants. Celle-ci est basée sur les Element et plus les Children afin de séparer les composants purement graphiques (Element, comme les primitives Spark Rect / Ellipse / Path) et les composants visuels (tous les composants dérivant de UIComponent. Pour pouvoir être dessinées, les Element comme Rect doivent appartenir à un objet de type « Group » qui va se charger de gérer le rendu des primitives Spark. En effet, de base, une primitive n’est qu’une définition d’un objet graphique, elle ne comporte pas de code de dessin. C’est le Group dans lequel elle est qui va s’en charger.

Pour plus d’informations sur ce nouveau mode de fonctionnement, veuillez consulter ces articles:

Flex 4 – (4) Structure des composants Flex 4 et comparaison avec Flex 3

Flex 4 – (5) Utilisation de Group pour le rendu des IVisualElement

Voici donc le code permettant de réaliser notre esquisse de bouton :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark">
  <s:Group verticalCenter="0" horizontalCenter="0">
    <s:Rect id="rect" radiusX="4" radiusY="4" top="0"
            right="0" bottom="0" left="0">
      <s:fill>
        <s:SolidColor color="0x0099FF" />
      </s:fill>
      <s:stroke>
        <s:SolidColorStroke color="0x222222" weight="2"/>
      </s:stroke>
    </s:Rect>

    <s:Label text="Bouton" color="0x222222"
             textAlign="center" verticalAlign="middle"
             horizontalCenter="0" verticalCenter="1"
             left="12" right="12" top="6" bottom="6"
             />
  </s:Group>
</s:Application>

Et voici le résultat lors du lancement de l’application :

spark-1

Pour l’instant, le rendu n’est pas interactif, nous avons juste habillé la scène. On va donc prendre ce que l’on vient de faire et le transformer en Skin Flex 4 pour pouvoir l’associer à un Button.
Pour créer une nouvelle Skin, créez un nouveau composant MXML nommé « MyButtonSkin » dans Flash Builder, ayant comme « Based on : », la classe Skin.
Copiez ensuite la primitive Rect et le composant Label et ajouter une définition de States. Cette définition nous sera utile par la suite :

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

  <s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
  </s:states>

  <s:Rect id="rect" radiusX="4" radiusY="4" top="0"
          right="0" bottom="0" left="0">
    <s:fill>
      <s:SolidColor color="0x0099FF" />
    </s:fill>
    <s:stroke>
      <s:SolidColorStroke color="0x222222" weight="2"/>
    </s:stroke>
  </s:Rect>

  <s:Label text="Bouton" color="0x222222"
           textAlign="center" verticalAlign="middle"
           horizontalCenter="0" verticalCenter="1"
           left="12" right="12" top="6" bottom="6"
           />
</s:Skin>

Maintenant que votre Skin est créée, il faut l’associer à un composant Button. Pour cela, on va utiliser la propriété de style « skinClass » présente sur tous les objets héritant de SkinnableComponent (la grande majorité des  composants visuels Flex 4). A cette propriété, on va simplement lier notre classe « MyButtonSkin » :

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark">
  <s:Button horizontalCenter="0" verticalCenter="0" skinClass="{MyButtonSkin}"/>
</s:Application>

On obtient alors exactement le même résultat qu’avec notre esquisse, sauf que l’on a bien un composant bouton, qui répond au clic par exemple. Cependant, le bouton ne parait pas interactif, il aura toujours le même rendu statique. Si vous changez le label du bouton, celui-ci n’aura aucun effet puisque le texte, par exemple, est écrit en dur.
Pour résoudre ces problématiques, on va utiliser les mécanismes de Skinning de Flex 4 ainsi que les States.

Flex 4 – (4) Structure des composants Flex 4 et comparaison avec Flex 3

La hiérarchie interne des composants Flex a légèrement changé. Parfois, certains noms ont changé, et parfois, on va exposer ce qui vous était auparavant caché.

Le cas des composants

Prenons par exemple, l’instanciation d’un bouton en Flex:

<s:Button />

Lorsque vous instanciez un bouton, plus d’un objet sera crée. Voici schématiquement ce qui sera crée d’un point de vue Layout:

Slide3

Note: Dans ce schéma, TextBox est en fait Label.

Un fichier Skin sera instancié et mis dans la liste d’affichage du Button. Voici à quoi ressemble la skin d’un Button Flex 4:

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"  minWidth="23" minHeight="23">

    <fx:Metadata>
    	[HostComponent("mx.components.Button")]
    </fx:Metadata>

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <!-- background -->
    <s:Rect left="0" right="0" top="0" bottom="0"
    	  width="70" height="23"
    	  radiusX="2" radiusY="2">
        <s:stroke>
            <s:SolidColorStroke color="0x5380D0" color.disabled="0xA9C0E8" />
        </s:stroke>
        <s:fill>
            <s:SolidColor color="0xFFFFFF" color.over="0xEBF4FF" color.down="0xDEEBFF" />
        </s:fill>
    </s:Rect>

    <!-- label -->
    <s:Label id="labelDisplay" />

</s:Skin>

Même si dans votre code MXML, on dirait que votre composant est tout en bas de la hiérarchie, à travers sa skin, d’autres composants enfants seront créés. Pour accéder à ces éléments, vous pouvez utiliser la propriété « skin« , présente sur tous les composants de type SkinnableComponent (Flex 4).

A travers la propriété « skin », vous aurez accès à l’instance de ButtonSkin, qui vous permettra d’accéder au Rectangle et au Label. Pour accéder au Label, vous pourriez faire:

myButton.skin.getElementAt(2) ou myButton.skin.labelDisplay

Vous pouvez accéder directement au Label par « labelDisplay » car c’est une « skin part ». On reviendra plus en détail sur les « skin part » dans un prochain tutorial de ce fil rouge.

Le cas des conteneurs

Principalement, les mêmes règles s’appliquent aux conteneurs, qui sont appelés dérivent de SkinnableContainers en Flex 4.

Les SkinnableContainers sont des conteneurs qui ont nativement des enfants, mais ils sont aussi (par héritage), des SkinnableComponent, ayant une skin, et ont donc aussi des enfants par cette skin.

Prenons un exemple sur un Panel:

<s:Panel>
    <s:Button />
    <s:Label />
    <s:CheckBox />
</s:Panel>

Ce panel  trois enfants: un bouton, un label et une checkbox. Pour y accéder, vous pouvez utiliser l’API définie sur SkinnableContainer.
Lire la suite

Flex Tips – Afficher simplement l’icon d’un Button

Le composant Flex Button permet d’afficher simplement un icône grâce à la propriété de style « icon ». Vous pouvez faire pointer cette propriété vers un fichier image (gif, png, …) comme ceci:

<mx:Button id="b1"
 label="Click Me"
 icon="@Embed('/assets/icons/icon.png')"/>

Vous aurez donc un bouton avec le label « Click Me » et un icône à gauche de base. Supposons maintenant que dans votre interface Flex, vous ayez besoin d’un petit bouton, sans label, mais avec simplement un pictogramme. Vous pouvez créer une mx:Image avec quelques propriétés pour la faire ressembler à un bouton mais ce n’est pas très pratique et vous pourriez avoir besoin des comportements spécifiques de la classe Button.

Si vous supprimer le label (voir exemple plus bas), vous aurez toujours votre bouton avec son look habituel, ce qui est gênant. Pour supprimer cette skin et avoir un Button très propre avec simplement l’icône, il vous suffit de fixer la propriété de style « skin » à null avec un simple Data Binding:

<mx:Button id="b3"
 label=""
 skin="{null}"
 icon="@Embed('/assets/information.png')"/>

A ce moment-là, vous n’aurez toujours pas un vrai comportement bouton puisque le curseur main a disparu. Pour le faire apparaître, il suffit de fixer les propriété buttonMode et useHandCursor à true:

<mx:Button id="b4"
 label=""
 skin="{null}"
 useHandCursor="true"
 buttonMode="true"
 icon="@Embed('/assets/information.png')"/>

Application Exemple

Flex Source Code Download: Télécharger le code source complet de l’application

This movie requires Flash Player 11

Lire la suite

Flex Tips – Valider automatiquement un Formulaire Flex (mx:Form) avec la touche Entrée

Voici le premier tutorial/article sur les Flex Tips, ces petits trucs que vous ne connaissez pas forcement et qui peuvent grandement vous faciliter la vie. Le framework Flex est très riche en fonctionnalités (on ne va pas s’en plaindre) et il est difficile de tout connaître. Ces Flex Tips sont des petits trucs que j’ai découvert au fur et à mesure de mon apprentissage de Flex, et je suis sûr qu’ils vous sauveront souvent pas mal de temps et de lignes de code.

Le premier porte sur la validation des formulaires Flex. La plupart du temps, quand vous avez un formulaire Flex,  vous avez un certain nombre de champs, des combobox etc. Et la plupart du temps, quelques boutons (Valider, Annuler, Reset, …). Quand un utilisateur complète un formulaire HTML (login par exemple), il a l’habitude de valider en faisant Entrée car le HTML permet de faire cette validation de <form> de manière automatique. Avec Flex en revanche, pas de comportement par défaut. Si vous voulez répondre aux évènements clavier, vous devrez le coder vous-même. Cela permet bien sûr plus de fonctionnalités et de personnalisation car vous pouvez valider votre formulaire de manière quelconque.

Si vous voulez valider un formulaire avec la touche Entrée (pratique  pour un login par exemple), il va vous falloir ajouter un event listener global, traiter chaque évènement clavier et si la touche Entrée est détectée, exécuter la même action que l’appui sur le bouton. Cela est un peu laborieux, d’autant plus que si vous changez la fonction handler de l’évènement « click » du bouton, il faut aller modifier votre code dans le keyUpListener.

Heureusement, le composant <mx:Form> de Flex contient une propriété « defaultButton » qui va vous sauver de toutes ces lignes de code. La propriété « defaultButton » prend un id de composant (Button) en valeur. Une fois cette propriété fixée, vous n’avez plus rien à faire, la validation du formulaire se fera automatiquement sur pression de la touche Entrée. Vous remarquerez aussi que dès que le formulaire a le focus, le bouton par défaut est mis en valeur (emphasized).

Voici un exemple pour vous montrer sa facilité d’utilisation:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
		]]>
	</mx:Script>
	<mx:Form defaultButton="{validButton}">
		<mx:FormHeading label="Identification (Appuyer sur Entrée pour valider)"/>
		<mx:FormItem label="Login">
			<mx:TextInput text="monlogin"/>
		</mx:FormItem>
		<mx:FormItem label="Password">
			<mx:TextInput text="monmdp"/>
		</mx:FormItem>
		<mx:FormItem direction="horizontal">
			<mx:Button id="validButton" label="Valider" click="Alert.show('Formulaire identification validé !')"/>
			<mx:Button id="cancelButton" label="Annuler"/>
		</mx:FormItem>
	</mx:Form>
</mx:Application>

Flex Source Code Download: Télécharger le code source complet de l’application

This movie requires Flash Player 11