Archives du mot-clé States

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

AIR Mobile – Application Pokémon (31) – Affichage de la progression du téléchargement dans DataPreparationView

Depuis le dernier tutorial, on a une application qui a récupéré ses fonctionnalités mais qui est bien plus légère qu’avant. Si vous reprenez à ce niveau, vous pouvez télécharger le projet tout en bas du dernier tutorial Flex:

AIR Mobile – Application Pokémon (30) – Lecture des images et des mp3 depuis la carte SD

Ce qui fait tâche dans l’application, c’est maintenant cet écran de chargement où il est seulement écrit « Loading… » dans la barre du haut. On va au moins afficher la progression du téléchargement. Cela permettra à l’utilisateur d’estimer le temps qu’il lui reste à attendre.

Déterminer l’avancement de la tâche

Pour déterminer l’avancement du téléchargement, on va utiliser les évènements propagés par FZip. Ainsi, vous avez un ProgressEvent.PROGRESS qui est propagé régulièrement, exposant deux propriétés:

  • bytesLoaded : nombre de bytes téléchargés
  • bytesTotal : nombre de bytes total

Un petit ratio et on obtient notre total de téléchargement.

Dans la partie 28 de ce tutorial, on a déjà ajouté notre handler sur l’évènement ProgressEvent.PROGRESS:

AIR Mobile – Application Pokémon (28) – Téléchargement des images au premier lancement de l’application

Ajoutons donc le calcul de l’avancement:

  protected function onFZipProgress(event:ProgressEvent):void {
	var adv:Number = Math.round((event.bytesLoaded / event.bytesTotal) * 100);
  }

Ajouter une barre de progression

Dans le framework Flex « web », vous avez un composant ProgressBar qui vous permet d’afficher une barre de progression. Cependant, il n’est pas disponible quand vous faîtes un projet Mobile, celui-ci n’étant pas optimisé pour. Mais ce n’est pas grave, on va utiliser un peu notre jugeote.

Dans notre application, on a déjà un composant qui s’apparente plutôt bien à une progress bar, le composant qui affiche les statistiques de notre Pokemon que l’on a finalisé dans la partie 13 de ce fil rouge:

AIR Mobile – Application Pokémon (13) – Affichage des statistiques / Styling du composant

On va donc être « fainéant » et ré-utiliser ce composant pour créer notre barre de progression. Ajoutons notre composant PokemonStat dans notre vue DataPreparationView.mxml:

...
  <s:layout>
    <s:VerticalLayout paddingBottom="15" paddingLeft="15" paddingRight="15" paddingTop="15"
                      horizontalAlign="center" />
  </s:layout>
  <views:PokemonStat id="progressBar" title="Progress..." width="150" />
</s:View>

Et ajoutons le code de mise à jour de la valeur:

  protected function onFZipProgress(event:ProgressEvent):void {
	var adv:Number = Math.round((event.bytesLoaded / event.bytesTotal) * 100);
	progressBar.statValue = adv;
  }

Avant de tester, assurez vous de 2 choses:

  • Supprimez le fichier .nomedia ou commentez la partie qui fait le check de ce fichier onCComplete
  • Cochez la case « Clear application data on each launch » pour éviter de vous faire avoir avec la persistance.

Voici le rendu à 99%:

En plus, en utilisant notre composant, la couleur de la barre de téléchargement évolue, ça donne une effet plutôt sympa :) .

Par contre, une fois que vous avez déjà téléchargé le fichier ZIP, le cache va prendre le relai pour les prochaines tentatives. Le téléchargement ira donc beaucoup trop vite les fois suivantes pour que vous puissiez voir la progression. Si vous voulez tester le rendu de cette progression, testez sur device. Même un redémarrage de Flash Builder n’y fait rien. Sinon, vous pouvez aussi rajouter un paramètre « dummy » à la fin de l »url:

var requester:URLRequest = new URLRequest("http://www.flex-tutorial.fr/wp-content/uploads/pokemon-data.zip?v=1");

Habillage

C’est un peu light pour l’instant, on va rajouter quelques éléments:

  • un petit texte explicatif, avec un léger effet d’ombre portée (un contour offset en fait)
  • un background image répété
  • un dégradé par dessus pour donner un petit effet
  • suppression de la barre d’action en passant actionBarVisible à false

Notez que pour le background image, j’ai utilisé une image provenant de ce site:

http://www.premiumpixels.com/freebies/8-seamless-dark-metal-grid-patterns/

Voici l’image en question (resized à 100×100):

Et voici le résultat!


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 – Modifier la taille d’un item avec des Transition

Dans l’article précédent, j’ai montré comment utiliser des States dans un itemRenderer pour modifier son apparence. Comme pour tous les composants qui héritent UIComponent, vous pouvez utiliser des Transition entre vos State. On va ici s’intéresser à la manière par laquelle on pourrait avoir des item qui s’étendent (dont la hauteur est modifiée).

La question de l’expansion d’un item devient intéressante quand on sait que la liste doit être scrollée. Imaginez cette situation: vous avez une liste d’items ayant la même hauteur. Maintenant, vous étendez l’item 2. Jusque là tout va bien, l’item 2 est plus grand que les autres items visibles. Et c’est là le problème: les items visibles. Maintenant vous faîtes un scroll dans la liste. Souvenez-vous que les itemRenderers sont recyclés. Donc quand l’item 2 est hors de vue, son itemRenderer sera bougé en bas de la liste. Vous devez donc mettre à zéro sa taille. OK, jusque là cela fonctionne. Maintenant faire un scroll vers le haut pour ré-afficher l’item 2. Vous voudriez qu’il soit dans l’état étendu. Comme l’itemRenderer pourrait-il le savoir? Si vous avez lu les articles précédents, vous savez que cette information vient soit de la data, soit d’une source externe.

Créer un itemRenderer resizable pour cela est assez complexe et pas forcement utile. Il y a une meilleure manière de faire cela en utilisant une VBox et un Repeater. Seulement, le problème avec le Repeater est que chaque child sera crée. Si vous avez 1000 enregistrement et que vous utilisez un Repeater, vous aurez 1000 instances de votre itemRenderer.

Pour cet exemple, on va écrire un itemRenderer, que l’on va utiliser en tant qu’enfant d’une VBox. Les éléments de cette liste sont simples: le nom et l’auteur du livre. Mais cliquer sur l’itemRenderer va le faire s’étendre. Ceci se fait en 2 étapes:

  • L’itemRenderer a une état qui inclut les informations supplémentaires
  • L’itemRenderer utiliser une transition Resize pour donner une fluidité dans la contraction/expand de l’itemRenderer

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