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

23fév/101

OpenPlug: Déploiement d'une application sur un portable Android (sous Windows XP et 7)

Tout d'abord, je vais réviser un peu mon avis sur OpenPlug d'hier. Il faut en fait s'y intéresser un peu plus et apprendre à s'en servir, j'ai sûrement fait une review un peu rapide ;) . Après avoir regardé dans les grandes lignes, les autres "framework" permettant de créer des applications mobiles natives multi-plateforme (pas sur un base Flex, mais sur une base HTML/JS/CSS), je me suis aperçu qu'il existait 3 grandes options:

  • Appcelerator: Cela semble mature, avec un bon packaging, un très beau site internet, sous licence MIT. Compatible seulement avec Android et iPhone
  • PhoneGap: Moins impressionnant, sous licence MIT, sens le projet qui va couler. Compatible avec Android, iPhone et BlackBerry
  • Rhomobile: L'alternative commerciale. Supporte iPhone, BlackBerry, Windows Mobile, Symbian, Android. Avec en bonus, des outils de synchronisation et autres (payants).

Bref, du bon et du moins bon et il reste que je n'ai pas envie de faire du JavaScript en attendant Flex Slider ou FP 10.1 sur Android. OpenPlug mérite donc que je m'y intéresse de plus près, ce que je vais faire.

Déploiement d'une application Android

On revient à ce tutorial qui va vous expliquer en détail comment déployer une application Android (.APK) sur votre téléphone. C'est ce que j'ai du faire pour pouvoir transférer l'application générée par OpenPlug vers mon HTC Magic G2. Comme je l'ai fait à cheval entre mon taff (Windows XP) et chez moi (Windows 7 64 bits), vous aurez même la résolution de quelques problèmes qui n'arrivent que sur certains OS.

Vu que j'ai passé quelques heures à chercher le pourquoi du comment sur de nombreux forums / docs, je pense que cela va vous sauver du temps si vous tentez de faire la même chose.

Création de l'application Android avec Elips

Pour créer votre première application avec Elips (OpenPlug), inscrivez-vous sur leur site, allez dans la section développeur et téléchargez l'installeur. L'installation se passe très normalement, rien à expliquer à ce niveau là. Ensuite, suivez le tutorial pour le développement d'une application sous Windows Mobile (arrêtez-vous avant le déploiement du .cab quand même).

Avant de pouvoir compiler votre application en natif (.apk), il va vous falloir une clé développeur Android (obligatoire pour la compilation). C'est un peu comme les certificats que l'on génère pour les applications Air, vous pouvez en créer un pour vos besoins de développement.

Génération d'une clé Android privée (keystore)

Pour générer votre clé, vous allez avoir besoin d'un utilitaire nommée "keytool". Celui-ci se trouve dans le SDK Android que vous pouvez télécharger ici:

Télécharger le SDK Android

Voici ensuite les grandes étapes à suivre:

  • Télécharger le SDK Android
  • Dézipper dans un répertoire (à la racine du C: par exemple)
  • Ajouter une variable au PATH (variables d'environnement Windows): (C:\android-sdk-windows\tools)

addToPathAndroidSDK

  • OK, OK, Appliquer, on ferme tout
  • Ouvrir un invité de commande (Démarrer > Exécuter > cmd)
  • Taper "keytool", une liste de commande devrait apparaitre. Si oui, l'installation et la configuration du SDK Android sont OK, sinon revenir en arrière.

keytool-cmd

  • Générer un clé . Pour cela, voici les arguments essentiels de la commande:
    • -keystore: Nom de votre fichier .keystore qui va contenir votre clé
    • -alias: Nom par lequel vous allez référencer votre fichier

Vous aurez donc quelque chose comme:

keytool -genkey -v -keystore flextut-key.keystore -alias flextut -keyalg RSA -validity 10000

  • Le mot de passe de votre clé vous sera demandé. Choisissez un mot de passe difficile (plus de 6 caractère obligatoirement). Pour la suite, le mot de passe sera "flextutorial"

keytool-cmd-2

  • Tapez deux fois le mot de passe souhaité (il ne sera pas affiché à l'écran par sécurité, tapez sur Entrée pour valider)
  • D'autres informations vous seront demandées pour compléter l'opération (nom / prénom, organisation, location, …)
  • Quand on vous demandera de confirmer ces dernières instructions, tapez "oui"
  • Appuyez sur Entrée quand on vous redemandera votre mot de passe
  • La console devrait normalement indiquer [Stockage de flextut-key.keystore]

keytool-cmd-3

Votre clé (un fichier .keystore) sera conservée dans votre répertoire utilisateur (C:\Users\fab par exemple sous Windows 7). Vous en avez fini avec la génération de la clé.

Compilation de votre application Flex pour Android

Grâce à votre clé (fichier .keystore), vous pouvez maintenant créer tranquillement vos application pour Android. Pour la compilation, vous pouvez suivre le tutorial d'OpenPlug. C'est assez simple, il faut aller dans les propriétés du projet, dans Elips3 > Targeted Devices. Sélectionnez "Generic Android" et cliquez sur "Edit By Platform". Dans la fenêtre qui s'ouvre, remplissez les 4 paramètres concernant la clé que vous avez généré (son chemin, son alias, son mot de passe (deux fois)):

properties_android

Vous pouvez ensuite lancer le packaging. Si tout se passe bien, vous devriez avoir un fichier .apk. Pour l'emplacement de ce fichier, regardez ce qui est écrit dans la console, elle vous indique le chemin.

Remplis sous: OpenPlug Lire la suite
23fév/105

La grosse déception du jour: OpenPlug

Si vous cherchez à créer une application pour plate-formes mobiles, vous êtes sûrement tombé à un moment sur OpenPlug. Dans sa présentation, OpenPlug fait une annonce plutôt accrocheuse: Développez vos applications mobiles comme vous développez vos applications Web. Vu que l'arrivée du Framework Flex Slider (pour mobiles) et de Flash Player 10.1 sur toutes les plate-formes se fait encore attendre, je me suis dit que OpenPlug serait ma solution pour mes dev mobiles.

OpenPlug est pour l'instant en version 3, beta3 (gratuite), ce n'est pas une version finale.

Sur le papier, on écrit du Flex comme dans la vie de tous les jours et on peut compiler en natif, des applications pour iPhone, Android et Windows Mobile (entre autres). Après plusieurs semaines, j'ai enfin pris le temps de tester la bête. Disposant d'un portable sous Android (HTC Magic), je pouvais donc tester sur l'émulateur et en vrai, parfait.

OpenPlug est une "Suite" logicielle comprenant un plug-in pour Flex Builder, divers compilateurs, simulateurs et autres utilitaires. L'installation se passe sans trop de problèmes et on nous demande d'utiliser le Framework "Elips", un framework crée par OpenPlug basé sur une Flex 3.2 d'après ce que j'ai vu sur leurs forums. Parfait, je compilais jusque-là avec Flex 3.2, tout devrais marcher impec.

Ma première application avec OpenPlug

Je crée une application (type Air) en compilant avec leur framework, balance un <mx:Label> comme dans leur application de démonstration. Launch, ouverture du simulateur (qui m'a rappelé le temps où j'avais tenté de faire un peu de J2ME). Une fenêtre s'ouvre avec l'image du portable simulé puis une autre contenant l'application Air et magie, elles font une sorte de fusion qui fait que notre application apparaît dans la fenêtre du téléphone.

Mon Label est bien là, parfait, je vais créer une ComboBox pour voir si elle est interprétée comme les ComboBox HTML (celles du navigateur HTML sous Android s'ouvrent avec une liste plein écran, lisible et scrollable). Alors, j'ouvre un tag, tape "mx:Com" puis Ctrl+Espace pour activer l'auto-complétion et là … rien (enfin si, mx:Component :P ). Retour en arrière, je reviens sur "mx:", Ctrl + Espace. Surprise, voici ce qui apparait:

openplug-1Bon, admettons, pas de ComboBox (et pas de DataGrid, certains l'auront remarqué au passage). Mais on a le composant de type mx:List, faisons le test avec un dataProvider contenant quelques objets String. Launch et voilà le résultat dans le simulateur:

openplug-2

Et oui, ce bout de truc au milieu, c'est ma List (les deux "boutons" ont l'air d'être mes boutons de scroll, pour le Batman en bas, je ne sais pas).  Pour ne pas m'arrêter bêtement là, je RTFM (Read The Fucking Manual) que l'on peut trouver sur la partie développeur du site d'OpenPlug. Dans la catégorie API Reference, on a l'équivalent de la Livedocs pour le framework OpenPlug. Bon déjà, c'est dans une sorte de frame, pas très pratique pour la navigation.

Je trouve un package intéressant, le package "openplug.elips.controls" contenant de composants Alert, GroupList, List, HTML, NavigationButtonBar. Je teste avec GroupList et List, même résultat, j'abandonne (j'ai testé avec le fonctionnement classique des composants Flex instanciés en MXML, peut-être faut-il faire autrement). Le <mx:Button> marche correctement, lui, c'est bon signe.

Un déploiement laborieux

Tampis, je tente mon application avec mon Button et mon Label pour voir comment ça rend sur mon Android. Pour le déploiement, ce n'est pas si simple, les explications sont souvent "allez voir ce qui se dit sur le site du SDK d'Android". Après quelques heures pour se battre avec les drivers / erreurs, j'arrive enfin à envoyer mon application (fichier .apk) sur mon mobile.

Je vais écrire un tutorial détaillé sur toutes les manipulations à faire (sous Windows XP et 7) pour ceux qui veulent tester leur application OpenPlug sous Android.

L'application apparaît bien dans mon menu d'application Android. Le lancement est plutôt long (pour une application avec un bouton et un label), environ 15-20 secondes. Au moment où je n'y crois plus, l'application apparait. J'ai bien mon label et mon bouton qui réagit au "click" (au "touch" dans mon cas). Petite victoire en quelques heures, voici un début de résultat.

Utilisation de librairies / code existant

Puisque ce n'est pas pour faire des micro-démos que je teste OpenPlug, je décide d'utiliser ma librairie cartographique que j'ai codé chez Business Geografic (une sorte d'API Google Maps pour le serveur d'application utilisé chez BG) et de la lier à mon projet. La liaison en elle-même se passe plutôt bien, on dirait que cela fonctionne. Je lance le débugger, BIM, erreur d'exécution. Apparemment, la propriété "rawChildren" sur la classe Container que j'utilisais n'est pas présente dans le Framework Flex version Elips. Tampis, je fais un simple addChild() pour voir ce qui se passe.

Ouverture du simulateur et là, grande joie, ma carte WMS apparaît avec les différentes tuiles qui la composent. Bien sûr, la navigation ne fonctionne pas puisque tout est basé sur les interactions souris et pas des interactions "touch". Tampis, je veux voir le résultat sur mon portable ! Maintenant que j'ai tout bien configuré les drivers et autres, je me dit que je ne vais pas y passer la nuit, ça va marcher direct. Je lance la compilation du packaging APK, au bout de 1.5 secondes, ça plante, la compilation n'arrive pas à trouver certaines classes de ma librairie (celles qui l'instancie en MXML avec utilisation du namespace de la librairie).