Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

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!

<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" />

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

<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" />

<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"/>