BlackBerry met à disposition des développeurs plusieurs outils pour créer des applications PlayBook dans différents langages. Dans ce tutoriel nous allons créer une application utilisant Flex et AIR, deux outils d’Adobe. En 1h30, nous créerons une application récupérant des informations depuis un fichier XML, créera une base de données, avec une barre de recherche, une navigation entre différentes vues et l’utilisation d’actions (tel, mailto, goto …).
Sommaire
- Description du projet
- Avant de commencer
- Installation de Flash Builder 4.6
- Installation du Tablet SDK pour Adobe AIR
- Fichiers du projet
- Configuration
- Création de l’application
- Projet Flex Mobile
- Un peu de code
- Test
- Amélioration de la liste
- Item Renderer
- Navigation entre les views
- Création d’une nouvelle vue
- Ouvrir la nouvelle vue
- Créer une barre d’action
- Ajout d’actions
- Implémentation de la recherche – SQLite
- Conclusion
- Téléchargement
Description du projet
Cette application n’est pas d’une grande utilité, mais comme expliqué plus haut, elle permettra de voir rapidement quelques fonctionnements essentiels de Flex / AIR.
L’application « Pharmacies » permet de lister les pharmacies de France, d’effectuer une recherche selon le nom, l’adresse, le code postal et la ville. Il permet aussi de voir le détail de chaque pharmacie et d’associer des actions aux différents renseignements.
Le fichier XML ne contient que 3500 pharmacies (sur les 23000 recensées) afin de ne pas trop ralentir la création de la base de données qui prend déjà plusieurs minutes.
Avant de commencer
Avant de programmer, il faut d’abord installer quelques outils :
- Flash Builder 4.6
- Le BlackBerry® Tablet OS SDK pour Adobe® AIR®
- Télécharger les fichiers du projet en fin d’article
Il faut respecter l’ordre d’installation pour les deux premiers éléments de la liste.
Installation de Flash Builder 4.6
- Télécharger Flash Builder 4.6 ou plus récent ici : https://www.adobe.com/cfusion/tdrc/index.cfm?product=flash_builder. Pour le télécharger, il faut un ID Adobe, créez un compte si vous n’en avez pas.
- Installer Flash Builder en mode administrateur, sinon vous ne pourrez pas l’utiliser.
- À moins que vous ayez une licence, utilisez le mode essai (60 jours).
- Télécharger le SDK ici : https://bdsc.webapps.blackberry.com/air/download/sdk
- Lorsque l’on vous demande oui ou non à propos de l’intégration de Flash Builder, sélectionnez oui.
- Continuer puis terminer l’installation.
Installation du Tablet SDK pour Adobe AIR
Intégration de Adobe Flash Builder
Si vous n’avez pas de PlayBook, vous pouvez aussi installer le simulateur.
Fichiers du projet
Récupérez l’archive .zip, elle vous permettra de voir le code final.
Configuration
Lors du lancement de Flash Builder, vous pourrez configurer votre tablette ou votre simulateur via un assistant (il s’affiche automatiquement au premier lancement). Suivez les étapes et sélectionnez les options correspondantes à votre cas. Voici quelques images correspondant à ma configuration :
Certificat de développeur
Configuration de l’appareil
Token
Création de l’application
Projet Flex Mobile
Nous allons créer un nouveau projet Flex Mobile. Il a l’avantage de créer une application compatible pour les 3 principales plateformes : iOS, Android et PlayBook.
Projet Flex Mobile
- Fichier > Nouveau > Projet Flex Mobile
- Spécifiez un nom à votre projet (Pharmacies) et gardez les autres valeurs par défaut, cliquez ensuite sur suivant
- Ici nous allons choisir seulement la plateforme BlackBerry Tablet OS et changer le nom de la vue initiale en Home. Laissez les autres options relatives à la résolution, par défaut. Cliquez sur Terminer.
Paramètres Mobiles
4. Enfin, copiez le dossier assets de l’archive dans le dossier src de votre projet.
Un peu de code
La première vue de votre application, autrement dit le premier écran qui s’affiche (après le splashscreen que l’on apprendra à définir plus tard) s’appelle PharmaciesHomeView.
<?xml version="1.0" encoding="utf-8"?>
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:components="spark.components.*"
title="Home"
creationComplete="srv.send()">
<fx:Declarations>
<s:HTTPService id="srv" url="assets/pharmacies.xml"/>
</fx:Declarations>
<s:List id="list" top="0" bottom="0" left="0" right="0"
dataProvider="{srv.lastResult.list.pharmacie}"
labelField="nom"/>
</components:View>
Que fait ce code ?
Lors de la fin du chargement de la page, nous affichons toute la liste (ligne 6). Ensuite, nous créons un objet HTTPService pour récupérer le fichier xml (ligne 8). Enfin, nous créons une liste qui affichera sur chaque ligne le nom (labelField). Nous donnons à cette liste les objets qu’elle doit prendre via le fournisseur de données dataProvider (ligne 11). En fait c’est le dernier résultat de notre fichier xml, qui correspond à une pharmacie.
Test
Nous allons maintenant tester notre application soit sur l’ordinateur soit sur la PlayBook. Cliquez sur le premier bouton (debug) pour lancer votre application en mode debug et ainsi pouvoir afficher des informations dans la console. Ou alors cliquez sur le deuxième pour lancer l’application normalement.
Lancement de l’application
Pour le premier lancement, vous allez devoir configurer pour sélectionner soit la PlayBook soit l’ordinateur. Je vous conseille de faire deux configurations, en effet l’ordinateur est plus rapide pour déployer l’application, mais il ne permet pas de faire apparaitre tous les problèmes éventuels liés à la tablette.
Configuration déboguer
Sur cette image, j’ai déjà plusieurs configurations pour plusieurs projets. Lorsque vous avez fini, cliquez sur déboguer ou exécuter.
Vous devriez obtenir ceci :
Screenshot Pharmacies
Amélioration de la liste
Maintenant que vous avez réalisé votre première application, nous allons ajouter une petite amélioration liée au monde du mobile.
Item Renderer
Cela permet de définir comment afficher chaque élément d’une liste. Les éléments Spark Item Renderer sont optimisés pour les applications mobiles.
Nous allons remplacer le code de la liste par celui-ci :
<s:List id="list" top="0" bottom="0" left="0" right="0"
dataProvider="{srv.lastResult.list.pharmacie}">
<s:itemRenderer>
<fx:Component>
<components:IconItemRenderer
label="{data.nom} {data.ville}"
messageField="cp"/>
</fx:Component>
</s:itemRenderer>
</s:List>
Dans le label nous affichons sur une même ligne le nom et la ville, puis le messageField on indique le code postal. Je n’ai pas trouvé comment afficher plusieurs éléments dans le messageField.
Navigation entre les views
Création d’une nouvelle vue
Faites un clic droit sur le package views dans votre projet puis allez dans Nouveau > Composant MXML :
Nouvelle view
Puis éditez le code pour obtenir ceci :
<?xml version="1.0" encoding="utf-8"?>
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:components="spark.components.*"
title="Détails de la pharmacie">
<s:HGroup verticalAlign="middle" gap="12">
<s:VGroup>
<s:Label text="{data.nom}"/>
<s:Label text="{data.adresse}"/>
<s:Label text="{data.ville}"/>
<s:Label text="{data.cp}"/>
</s:VGroup>
</s:HGroup>
</components:View>
Ouvrir la nouvelle vue
Dans le fichier PharmacieHomeView, nous allons rajouter une ligne dans la liste pour ouvrir la vue détaillée lorsque l’on clique sur un élément de la liste :
<s:List id="list" top="0" bottom="0" left="0" right="0"
dataProvider="{srv.lastResult.list.pharmacie}"
change="navigator.pushView(PharmacieDetails, list.selectedItem)">
<s:itemRenderer>
<fx:Component>
<components:IconItemRenderer
label="{data.nom} {data.ville}"
messageField="cp"/>
</fx:Component>
</s:itemRenderer>
</s:List>
Vous devriez obtenir ceci :
Screenshot détails pharmacie
Je vous l’accorde, c’est un peu moche, alors pour changer la mise en page, vous pouvez vous inspirer du code suivant :
<s:VGroup paddingLeft="20" paddingTop="20">
<s:Label color="#0E781F" fontSize="24" fontWeight="bold" text="{data.nom}"/>
<s:Label color="#E12B2B" text="{data.adresse}" textDecoration="underline"/>
<s:Label color="#E12B2B" text="{data.cp} {data.ville}" textDecoration="underline"/>
</s:VGroup>
Les couleurs ont été choisies au hasard !
Nouvelles couleurs
Créer une barre d’action
Quand vous êtes dans la vue détaillée, vous ne pouvez pas revenir en arrière. Nous allons donc ajouter une barre d’action en haut, avec un bouton home pour revenir en arrière et une barre de recherche.
Bouton Home
Dans le fichier Pharmacies.mxml, ajoutez le code suivant après les déclarations :
<s:navigationContent>
<s:Button icon="@Embed('assets/home.png')"
click="navigator.popToFirstView()"/>
</s:navigationContent>
Barre de recherche
Dans le fichier PharmaciesHomeView, entre les balises « déclarations » et « list », insérez le code suivant :
<components:navigationContent/>
<components:titleContent>
<s:TextInput id="key" width="100%" prompt="Rechercher une pharmacie à partir du nom, de l'adresse, de la ville ou du cp"/>
</components:titleContent>
<components:actionContent>
<s:Button icon="@Embed('assets/search.png')"
click="srv.send()"/>
</components:actionContent>
La ligne 1 permet de ne pas afficher le bouton Home, puisque nous sommes déjà sur la vue home !
Dans le champ de texte, j’ai rajouté un petit prompt, qui correspond à l’attribut hint chez Android, permettant d’afficher un message informatif dans le champ texte.
Bon, si vous avez suivi, quand vous allez cliquer sur le bouton pour rechercher, vous allez afficher toute la liste, peu importe ce que vous avez entré dans le champ de recherche ! Nous allons voir un peu plus loin comment implémenter la fonction de recherche.
Rendre persistants les résultats de la recherche
Quand vous êtes dans la vue détaillée et que vous cliquez sur le bouton Home, il serait intéressant de garder les résultats de la recherche. Pour cela, il suffit de garder ce résultat dans une variable. Modifiez le code du fichier PharmaciesHomeView.mxml comme suit :
<s:HTTPService id="srv" url="assets/pharmacies.xml" result="data=srv.lastResult.list.pharmacie"/>
Ainsi que la liste :
<s:List id="list" top="0" bottom="0" left="0" right="0"
dataProvider="{data}"
change="navigator.pushView(PharmacieDetails, list.selectedItem)">
<s:itemRenderer>
<fx:Component>
<components:IconItemRenderer
label="{data.nom} {data.ville}"
messageField="cp"/>
</fx:Component>
</s:itemRenderer>
</s:List>
Ajout d’actions
Nous créons cette application pour une PlayBook alors, il n’est pas très utile d’ajouter l’action appeler, mais peut-être que si elle est reliée à un BlackBerry, cette option existe. Nous allons aussi voir comment lancer automatiquement le navigateur.
Remplacez tout le code du fichier PharmacieDetails.mxml par celui-ci :
<?xml version="1.0" encoding="utf-8"?>
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:components="spark.components.*"
title="Détails de la pharmacie">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import spark.events.IndexChangeEvent;
[Bindable]
protected var actions:ArrayCollection;
[Embed("assets/fax.png")]
private var faxIcon:Class;
[Embed("assets/phone.png")]
private var phoneIcon:Class;
[Embed("assets/web.png")]
private var webIcon:Class;
override public function set data(value:Object):void {
super.data = value;
actions = new ArrayCollection();
if(data.tel) {
actions.addItem({
type: "tel",
name: "Appeler",
details: data.tel,
icon:phoneIcon});
}
if(data.fax) {
actions.addItem({type: "tel", name: "Fax",
details: data.fax, icon:faxIcon});
}
if(data.web) {
actions.addItem({type: "goto", name: "Visiter le site internet",
details: data.web, icon:webIcon});
}
}
protected function list_changeHandler(event:IndexChangeEvent):void {
var action:Object = list.selectedItem;
switch (action.type) {
case "tel":
navigateToURL(new URLRequest("tel:"+action.details));
break;
case "sms":
navigateToURL(new URLRequest("sms:"+action.details));
break;
case "goto":
navigateToURL(new URLRequest(action.details));
break;
}
}
]]>
</fx:Script>
<s:HGroup verticalAlign="middle" gap="12">
<!-- <s:Image source="assets/pics/{data.picture}"/> -->
<s:VGroup paddingLeft="20" paddingTop="20">
<s:Label color="#0E781F" fontSize="24" fontWeight="bold" text="{data.nom}"/>
<s:Label color="#E12B2B" text="{data.adresse}" textDecoration="underline"/>
<s:Label color="#E12B2B" text="{data.cp} {data.ville}" textDecoration="underline"/>
</s:VGroup>
</s:HGroup>
<s:List id="list" dataProvider="{actions}" color="#0E781F"
top="160" left="0" right="0" bottom="0"
change="list_changeHandler(event)">
<s:itemRenderer>
<fx:Component>
<components:IconItemRenderer
paddingTop="8" paddingBottom="8" verticalGap="6"
labelField="name"
messageField="details"
decorator="{data.icon}"/>
</fx:Component>
</s:itemRenderer>
</s:List>
</components:View>
Nous avons rajouté un peu de code entre les balises <fx:Script> <![CDATA[ …….. ]]></fx:Script>.
Ce ne sont que des if qui créent les actions lorsque le champ xml correspondant est défini. A chacune de ces actions nous lions une icône. Les actions sont regroupées au sein d’une liste.
Une action s’ajoute comme ceci :
actions.addItem({type: <strong>"goto"</strong>, name: <strong>"Visiter le site internet"</strong>, details:data.web, icon:webIcon});
Ici, le navigateur sera appelé grâce au mot-clé goto.
Implémentation de la recherche – SQLite
Il est possible d’utiliser l’objet HTTPService ou RemoteObject pour implémenter cette fonction de recherche. J’avoue qu’après pas mal galéré, j’ai abandonné ces options pour utiliser une base de données locale SQLite.
Premièrement, il faut ajouter le dossier model dans votre projet. Il contient la description de la base de données et le code ActionScript pour la créer. Je vous laisse le parcourir pour le comprendre. Il est possible de l’améliorer.
Puis, dans le fichier PharmaciesHomeView.mxml remplacez le HTTPService par :
<model:PharmacieDAO id="srv"/>
Assurez-vous d’avoir ajouté le namespace model :
<components:View xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:components="spark.components.*" xmlns:model="model.*" title="Home">
Enfin, modifiez l’action lors de l’appui sur le bouton de recherche par :
<s:Button icon="@Embed('assets/search.png')"
click="data=srv.findByName(key.text)"/>
Quand vous utilisez l’application, vous devriez obtenir ceci :
Résultat final
Résultat final : détails
Conclusion
Ce long tutoriel sur Flex / Air pour Playbook touche à sa fin ! Si vous aimez coder en XML, vous devriez vous amuser à créer des applications avec Flash Builder. Il existe aussi de nombreuses API, qui vous permettront en autres d’utiliser le GPS de la tablette, etc. Par contre, il sera un peu plus compliqué d’utiliser Google Maps puisque depuis la version 3 de l’API, celle-ci n’est faite que pour le JavaScript.
Si vous avez des questions ou des remarques, n’hésitez pas à utiliser les commentaires. Enfin, si vous avez aimé ce tuto, faites le tourner sur les réseaux sociaux ou par mail ! Merci 
Téléchargement
Récupérez les sources du projet Pharmacies : sources.zip.
Source BlackBerry : forum développeurs.
Articles similaires :
Votre PC rame, et vous ne pouvez plus rien faire avec ? Comment l’accé...
Démocratisées par l'iPhone, les applications mobiles font fureur ! Tou...
Suite à l’application disponible sur Facebook, Post-it® War Generator ...
BlackBerry met à disposition des développeurs plusieurs outils pour cr...
