Adobe Flex Tutorial - Adobe Flex Tutorial

29août/102

AIR pour Android – Ajouter le plugin ADT (Android Developper Tools) à Flash Builder 4

Lorsque vous développez une application Android native, en Java donc, vous allez sûrement utiliser Eclipse. Pour vous aider dans votre développement, une extension Eclipse existe, nommée ADT (Android Developper Tools) pour vous simplifier le développement. Ainsi, vous pourrez vous affranchir des outils en ligne de commande tels que adb ou ddms.

Dans le tutorial Air pour Android précédent (Air Android – Package et installation d'une application en un clic dans Flash Builder 4), on a vu qu'il était aussi possible de package / lancer son application avec les External Tools d'Eclipse. ADT va plus loin et permet par exemple de consulter les processus lancés sur la machine virtuelle Android (Dalvik).

Comme précisé dans cet article de Elad Elrom(Add Android Development Tools (ADT) plugin to your Eclipse/FlashBuilder for AIR Android development), ADT est basé sur un Eclipse 3.3 alors que Flash Builder 4 est basé sur une 3.5, les manipulations sont donc un peu tordues.

Installation des ADT

Vous devez tout d'abord installer WST. Pour cela, rendez-vous dans Help > Install New Software > Add et ajoutez le repository Galileo – http://download.eclipse.org/releases/galileo/ (normalement, il devrait déjà être dans la liste si vous n'êtes pas en version standalone:

Une fois ajouté, attendez qu'il récupère la liste des packages disponibles. Sélectionnez Web, XML, and Java EE Development > WST Server Adapter:

Next, Next, Restart, Yes blablabla…

Maintenant, il faut installer les ADT. Pour cela, ajoutez le repository ADT – https://dl-ssl.google.com/android/eclipse/:

Next, Next, Restart, Yes blablabla…

Configuration d'ADT

Avant de vous lancer dans l'aventure, il faut configurer ADT pour qu'il pointe vers votre SDK. Pour cela, rendez-vous dans Help > Preferences > Android et renseignez le paramètre SDK Location:

Vous pouvez maintenant ouvrir de nouvelles vues Eclipse comme la vue Logcat qui affiche le log de la VM Dalvik. On verra que l'on peut aussi logger depuis notre application Air vers le logger Dalvik .

Pour ouvrir les nouvelles vues, rendez-vous dans Window > Other views… > Android:

Vous aurez par exemple accès à la vue File Explorer qui va vous permettre de voir simplement les fichiers présents sur votre mobile. Utile si votre application enregistre des photos ou des vidéos par exemple:

Remplis sous: Android, Flex Builder 2 Commentaires

28août/104

AIR pour Android – Package et installation d'une application en un clic dans Flash Builder 4

Dans le premier tutorial sur Air pou Android, j'ai présenté les techniques de développement permettant de transformer son application AIR (SWF en fait) en application Android native (APK):

Air Android – Créer une application Air pour Android (apk), le guide de A à Z

Mais bon, c'est assez laborieux de passer par une ligne de commande pour compiler son application en APK puis d'utiliser une autre ligne pour pouvoir le mettre sur son device.

Heureusement, cela peut être fait directement dans Flash Builder 4, en un clic (ou deux). Pour cela, il suffit d'utiliser les "External Tools" d'Eclipse (et de Flash Builder 4 par extension). Cela permet de lancer des lignes de commande paramétrées directement depuis l'interface.

Création de script External Tool: Packaging

Rendez-vous dans Flash Builder puis rendez-vous dans le menu Run > External Tools > External Tools Configuration ou bien plus rapidement, en utilisant l'icône associé:

Puis cliquez sur New… pour créer une nouvelle configuration :

Donnez lui un nom, par exemple "PagkageAndroid" puis pour la location, donnez le chemin du fichier "adt.bat" que vous trouverez dans le SDK Air 2.5 (en utilisant Browse File System. Par exemple, pour moi cela se trouve dans "C:\Program Files (x86)\Adobe\Adobe Flash Builder 4\sdks\3.5.0\bin\adt.bat".

Afin de réaliser une configuration générique pour tous vos projets, on va utiliser les variables Eclipse comme ${project.loc}. Cette variable va remplacer ${project.loc} par le chemin disque correspondant à l'application au moment du lancement. Comme "Working Directory", entrez donc "${project_loc}\bin-debug".

Viens ensuite le moment où il faut donner tous les paramètres d'exécution. Ce sont en fait les mêmes paramètres que vous passez en ligne de commande. Là aussi, vous pouvez utiliser les variables Eclipse pour rendre votre configuration vraiment générique:

-package
-target apk
-storetype pkcs12
-keystore
../cert/cert.p12
-storepass VOTRE_CERTIFICATE_PASSWORD
${project_name}.apk
${project_name}-app.xml
${project_name}.swf
/assets

N'oubliez pas de remplacer VOTRE_CERTIFICATE_PASSWORD par le mot de passe que vous avez donné au moment de la création de votre certificat. Si vous avez placé votre fichier de certificat (.p12) autre part, n'oubliez pas non plus de modifier le chemin d'accès vers celui-ci. Une fois que vous êtes prêt, cliquer sur Apply puis Run.

Voici ce que cela donne pour ma configuration:

Une fois que tout est prêt, vous pouvez lancer la configuration depuis le raccourci:

Une fois la configuration lancée, vous verrez que le processus se lance depuis la vue Console d'Eclipse. Si tout se déroule bien, vous devriez obtenir votre apk dans le répertoire bin-debug. Si vous ne le voyez pas, faîtes clic droit > Refresh sur le dossier bin-debug.

Script d'installation sur device

On va maintenant aller plus loin et faire un deuxième script permettant d'installer l'apk crée sur votre mobile (device).

Créez une nouvelle configuration et pointez la "Location" sur l'exécutable adb.exe qui fait partie du SDK Android. Comme Argument, on va utiliser à nouveau les variables Eclipse:

install
-r ${project_loc}/bin-debug/${project_name}.apk

Voici ma configuration:

N'oubliez pas à chaque fois, de bien sélectionner votre projet dans l'arbre du PackageExplorer avant de lancer vos scripts

Remplis sous: Adobe Air, Android, Debugging, Exemple, Flex Builder 4 Commentaires

14juil/102

Flex Tips – Debugger avec Firefox 3.6.6 et supérieur (protection anti-crash Flash)

Pour debugger mes applications Flex, j'utilise comme navigateur Firefox, bien pratique surtout grâce au plugin Firebug. Depuis la versions 3.6.6, Firefox sépare tous les plug-ins dans un processus séparé (plugin-container.exe sous Windows). De cette manière, si Flash plante, votre navigation peut continuer, vous aurez simplement un message "Flash crashed" à la place de l'animation et on vous proposera de redémarrer le plug-in Flash.

Très bonne nouvelle donc, puisque FF suit les traces de Chrome, qui avait fait de cette séparation, son "principal argument de vente".

Sauf que cette protection est uniquement utile pour un utilisateur final. En effet, quand on entre en debug dans Flash Builder, FF considère que l'application Flash ne répond plus et au bout de 45 secondes, il va tuer le processus, en tuant en même temps, notre session de debugging.

45 secondes pour débugger, c'est très court, mais il y a un moyen pour contourner cette protection (la désactiver):

Mozila Firefox – Disable hang protection

Après cette modification, vous pourrez reprendre vos sessions de debugging comme avant

Au passage, on se rend aussi compte avec ces nouvelles protections de l'importance d'un code propre. Si vous avez le Flash Player Debugger, vous vous êtes sûrement rendu compte que de (trop) nombreux sites lancent des erreurs d'exécution (null pointer, nombre d'arguments non correspondants, …). Parfois on se demande même si certains sites ont été testés avant d'être mis en production.

Si vous êtes développeur sur un de ces sites, corrigez ces erreurs d'exécution (si vous n'y arrivez pas, envoyez-moi un mail!). Cela rendra vos utilisateurs plus heureux et cela évitera de nuire un peu plus à la réputation de Flash

Remplis sous: Debugging, Flash Builder, Flex Builder 2 Commentaires

1mai/100

Migration de projets Flex Builder 3 vers Flash Builder 4: Le guide détaillé

Avec l'arrivée de Flash Builder 4 et ses nombreuses améliorations, se pose la question de la migration de vos anciens projets Flex Builder 3 dans votre nouvel IDE, FB4. Attention, on parle ici bien de changement d'IDE et pas de passer tout votre code Flex 3 en Flex 4.

Pour vous aider, Andrew Shorten a écrit un guide plutôt très détaillé (avec screenshots) pour faciliter cette migration. Plusieurs cas sont distingués:

I want the new Flash Builder 4 features, but can't switch SDK versions.
I want the new Flash Builder 4 features and the faster Flex 4 compiler, but I need to maintain my application's existing behavior.
I want the new Flash Builder 4 features and all the new Flex 4 language features, but I don't want to adopt the new Spark component architecture.
I want the new Flash Builder 4 features, all the new Flex 4 language features and I want to add Spark-based components into my existing application.

Moving existing Flex projects from Flex Builder 3 to Flash Builder 4

Il y a cependant certains cas auxquels il faut faire attention, comme le précise le 2e commentaire, cette procédure peut poser problème si vous utilisez SVN (ou autre système de versionning). En effet, à l'ouverture d'un projet FB3 dans FB4, Flash Builder 4 va vous indiquer que les propriétés de ce projets vont être modifiée et qu'il ne pourra plus être ouvert dans FB3.

Si vous utilisez SVN, cela impose donc que tous les collaborateurs utilisant SVN fassent la migration, sans quoi certains seront laissés pour compte.

C'est d'ailleurs la raison pour laquelle je n'ai pas encore migré là où je bosse, on n'a pas vraiment le temps de synchroniser tous les postes en plein milieu d'une sortie de version.

Remplis sous: Flash Builder, Flex 4, Flex Builder Aucun commentaire

27mar/100

Flash Builder 4 – Gestion de l'AsDoc (documentation)

Dans la précédente version de Flex Builder (3), l'AsDoc était complètement ignorée. Vous pouviez, certes, en écrire mais à part pour relecture, cela n'apparaissait jamais pour vous aider.

Pour ceux qui ne connaissent pas, l'AsDoc est l'équivalent de la JavaDoc pour ActionScript, permettant d'annoter sa classe afin de produire une documentation complète (au format HTML par exemple). Inutile de préciser que la documentation de son code est un élément indispensable pour les développeurs.

Avec Flash Builder 4 vient l'arrivée de la prise en compte de ces tags AsDoc avec affichage dans l'interface ou dans une vue Eclipse dédiée.

Ecriture de documentation au format AsDoc

Pour écrire des commentaires en AsDoc, il suffit de suivre des conventions de nommage. Des plugins comme FlexFormatter peuvent vous aider à pré-générer cette documentation.

Au lieu de vous énoncer des règles qui sont déjà écrites, voici un lien vers un article très complet de FlashXpress:

Commenter ses Classes AS3 au format ASDoc

Voilà, à partir de maintenant, on va considérer que vous savez écrire votre documentation .

Quelques précisions…

Vous pourrez aussi visualiser la documentation des librairies SWC (si elles contiennent de l'AsDoc bien sûr). C'est d'ailleurs comme cela que vous avez accès à toute la documentation du framework Flex

Notez que Flash Builder 4 ne vous permet toujours pas d'exporter votre AsDoc au format HTML facilement. Cependant, comme avec Flex Builder 3, vous pouvez utiliser l'outil asdoc.exe présent dans le dossier "bin" du framework. Couplé avec un petit script Ant ou une petite Debug Configuration dans Eclipse, vous pourrez générer facilement la documentation de votre projet.

Voici quelques articles pour vous mettre sur la voie:

Sinon il y a le très bon outil AsDocr de Grant Skinner permettant de configurer plus finement l'export de son AsDoc. On obtient la ligne de commande à exécuter et voilà.

AsDocr par Grant Skinner