Archives du mot-clé currentState

AIR Mobile – Application TweetDeck (4) – Création de la barre du haut (header)

Dans le dernier tutorial, on a créé la barre de navigation qui se trouve en bas de l’application:

AIR Mobile – Application TweetDeck (3) – Ajout de la barre de navigation

Dans cette partie, on va créer la barre qui se trouve en haut. Celle-ci est composé de plusieurs éléments:

  • Un texte central qui indique sur quelle colonne on se trouve (Home, Mentions, …). Lorsque l’on fait défiler les tweets, le texte change et affiche l’heure du tweet affiché en haut de la lise. Lorsque la colonne sur laquelle on est a des updates, le texte est affiché en jaune.
  • Des « pastilles » qui ont 2 états:
    • Un état « gris » qui indique qu’il n’y a pas de nouveaux tweets dans cette colonne
    • Un état « jaune » qui indique que l’utilisateur a de nouveaux tweets à lire

Les pastilles représentent les colonnes qui ne sont pas affichées actuellement à l’écran. Ainsi, s’il on a la première colonne affichée et qu’il reste encore 3 colonnes à droite, 3 pastilles seront présentes à droite de la barre de header. Ces pastilles bougent lorsque l’on navigue entre les listes.

Pour l’instant, on va créer le composant et les pastilles. On verra après pour la « logique métier » et leur déplacement.

Création du composant ColumnHeaderIndicator

On va créer un nouveau composant MXML dans le package « comps » qui va s’appeler ColumnHeaderIndicator, basé sur Group:

Comme pour le composant BottomBar, on va commencer par ajouter un dégradé:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
  <s:Rect width="100%" height="100%">
    <s:fill>
      <s:LinearGradient rotation="90">
        <s:GradientEntry color="0x292C29" ratio="0" />
        <s:GradientEntry color="0x525152" ratio="0.2" />
        <s:GradientEntry color="0x313831" ratio="0.8" />
        <s:GradientEntry color="0x212021" ratio="1" />
      </s:LinearGradient>
    </s:fill>
    <s:stroke>
      <s:SolidColorStroke color="0" weight="2" />
    </s:stroke>
  </s:Rect>
</s:Group>

Et on remplace notre composant dans TweetDeckHomeView:

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
        actionBarVisible="false" xmlns:comps="comps.*">
  <s:layout>
    <s:VerticalLayout gap="0" />
  </s:layout>
  <comps:ColumnHeaderIndicator width="100%" height="40" />
  <s:Rect width="100%" height="100%">
    <s:fill>
      <s:SolidColor color="0xFF0FF0" />
    </s:fill>
  </s:Rect>
  <comps:BottomBar width="100%" height="80" />
</s:View>

On teste:

Niveau composant, notre barre va se composer de 2 groupes de pastilles, un à gauche et un à droite. Au milieu, on aura un texte. On aura en fait 2 textes légèrement superposés qui nous permettront de donner un effet d’ombre.

Lire la suite

Flex 4 – Différences entre Flex 3 et Flex 4 (4-Nouvelle syntaxe des States)

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

Flex 4 introduit une nouvelle syntaxe MXML pour les States. Celle-ci est plus « inline », permettant de faire des modifications sur les States en fonction du contexte. Voici les grandes différences de la syntaxe Flex 4 par rapport à Flex 3:

  • Seuls des states sont définis sans le tableau « states »
  • Dans la nouvelle syntaxe des states, vous ne pouvez pas utiliser AddChild ni RemoveChild. A la place, vous devez définissez si un composant fait partie d’un state en utilisant les attributs includeIn et excludeFrom.

Dans l’exemple Flex 3 suivant, les States sont utilisées pour inclure un Button et supprimer un TextInput, seulement quand le « currentState » du document est « submitState ». Cette approche peut être très lourde avec des states complexes:

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:AddChild relativeTo="{loginForm}" >
           <mx:Button label="submit" bottom="10" right="10"/>
        </mx:AddChild>
        <mx:RemoveChild target="{firstTextInput}"/>
    </mx:State>
</mx:states>

<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />

Voici le même exemple en Flex 4 en utilisant includeIn et excludeFrom:

<s:states>
    <s:State name="submitState" />
</s:states>
<s:TextInput id="firstTextInput" excludeFrom="submitState" />
<s:Group id="loginForm" >
    <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/>
</s:Group>

Les tags SetProperty, SetStyle et SetEventHandler ont été remplacés par la nouvelle syntaxe par point, qui vous permet de préciser un attribut MXML avec un identifiant de State.

Dans le code Flex 3 suivant, le code définit une propriété, un style et un event pour un Button dans l’état submitState:

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="submit" />
        <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>
        <mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/>
    </mx:State>
    <mx:State name="clearState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="clear" />
        <mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" />
    </mx:State>
</mx:states>

<mx:Button id="submitButton" />

Voici à quoi ressemble le même code dans Flex 4:

<s:states>
    <s:State name="submitState" />
    <s:State name="clearState" />
</s:states>

<s:Button label.submitState="submit" textDecoration.submitState="underline"
   click.submitState="trace('done')" click.clearState="emptyDocument()"
   label.clearState="clear" textDecoration.clearState="none"/>

Un composant ne peut plus être dans un état undefined ou null. Par défaut, le premier state déclaré est le State initial du composant. La nouvelle syntaxe est disponible quand vous utiliser le namespace MXML 2009. Vous ne pouvez pas mélanger l’ancienne et la nouvelle syntaxe. L’ancienne syntaxe est uniquement disponible avec le namespace MXML 2006.

Lire la suite

Flex Item Renderer – Utiliser des States dans un itemRenderer

Cette fois-ci, l’article de Peter Ent porte sur la manière par laquelle vous pouvez changer l’apparence d’un itemRenderer facilement en utilisant des States. Si vous n’avez jamais utilisé les States en Flex, je vous conseille de lire les articles de cette page:

Flex States sur Flex Tutorial

Si vous avez déjà manipulé les states et les transitions Flex, vous savez  que cela peut facilement rendre votre application plus agréable. Vous le savez, les itemRenderer servent à afficher une donnée de manière non-classique afin de la présenter de la meilleure manière à votre utilisateur. Parfois, cette communication avec l’utilisateur est assez simple car elle consiste simplement à présenter un nom, mais elle peut parfois utiliser des couleurs ou même être interactive.

Les itemEditors sont de vrais composants interactifs (permettant de modifier la donnée) mais ce n’est pas la portée de cet article. On va ici voir comment un itemRenderer peut changer son apparence suivant la donnée ou une action de l’utilisateur.

Utiliser les States (mx:States)

Le tag <mx:State> est une très bonne manière de changer l’apparence d’un itemRenderer. Les States sont faciles à utiliser et quand ils sont combinés avec des transitions, peuvent donner une réelle expérience utilisateur.

Dans cet exemple, on va créer un nouveau itemRenderer MXML (que vous pouvez bien sûr faire en ActionScript) pour une List. Cet itemRenderer affiche une image, un titre, un auteur, une prix et un Button pour acheter le livre.
Lire la suite

Flex Transition: Programmer des Transitions en ActionScript (Move, Resize…), avec exemple AS3

Les transitions fonctionnent de la même manière en MXML qu’un ActionScript (AS3) car vous devez fixer les mêmes propriétés et ces propriétés auront le même effet que vous utilisiez du MXML ou de l’ActionScript.

Vous pouvez construire une nouvelle instance de mx.states.Transition en utilisant le constructeur:

var transition:Transition = new Transition();

Vous pouvez ensuite fixer les propriétés fromState et toState:

transition.toState = "*";
transition.fromState = "*";

Vous pouvez maintenant assigner un effet en utilisant la propriété effect:

var move:Move = new Move();
move.targets = [textInput1, textInput2];
transition.effect = move;

Enfin, il vous suffira d’ajouter simplement cette transition à la propriété transitions de l’application ou du composant:

transitions = [transition];

Il n’y a pas de vrais avantage à utiliser une transition en AS3 plutôt qu’en MXML. Le choix que vous devrez faire sera basé sur le type de document sur lequel vous voulez définir les états. Si vous ajoutez des transitions à un document MXML, vous devriez utiliser le MXML pour définir ces transitions et inversement.

L’exemple suivant montre comment reproduire l’exemple de création de transitions en MXML mais cette fois, les transitions sont écrites en Action Script.

Lire la suite

Flex Transition: Créer des Transitions en MXML (Move, Resize…), avec exemple

Toutes les applications et les composants ont une propriété states que vous pouvez utiliser pour définir les états à utiliser. De même, toutes les applications et les composants ont une propriété transitions qui est un tableau de toutes les transitions que vous voulez utiliser. Dans le MXML, vous pouvez définir la propriété transitions en utilisant directement dans le premier tag (root tag) d’une appli ou d’un composant:

<mx:transitions>
	<!-- les transitions entre états apparaitront ici-->
</mx:transitions>

Tous les éléments du tableau de transitions, doivent être des object Transition. En MXML, vous créez des instances de Transition en utilisant le tag <mx:Transition>. Tous les objets Transition doivent définir une propriété fromState et toState, et ces propriétés doivent correspondre aux états entre lesquels la transition doit être appliquée.

Par exemple ce code va créer une transition depuis un état appelé A à un état appelé B:

<mx:Transition fromState="A" toState="B"/>

Si vous voulez utiliser une transition depuis ou vers un état en particulier, vous pouvez utiliser l’astérisque comme joker (wild card), ce qui veut dire « tous les états ».

L’exemple suivant crée une transition entre tous les états et un état nommé B:

<mx:Transition fromState="*" toState="B"/>

Les objets Transitions doivent avoir une propriété effet qui détermine quel effet sera appliqué pendant le changement d’état. La propriété effet est la propriété par défaut lorsque vous créez un objet Transition en utilisant le MXML.

Lire la suite