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

9sept/105

AIR pour Android – Package et installation d’une application en un double-clic (avec Ant)

Tutorial Flex écrit par Mathurin Body. Publiez vous aussi sur flex-tutorial!

Fabien nous proposait dans un post récent l’utilisation de commandes externes pour gérer d’un clic le packaging et l’installation des applications AIR pour Android. Une autre option envisageable (en un double-clic ;-) est l’utilisation d’un script Ant tel que celui généreusement proposé par Jonathan Campos sur son blog. Ce dernier permet en effet, moyennant un paramétrage minimum, de bénéficier d’une boîte à outils des commandes les plus utiles pour le développement AIR Android dont notamment la gestion du certificat, l’installation des runtimes AIR et l’installation des applications signées… Les scripts Ant permettent par ailleurs d’ajouter son projet à un processus d’intégration et de simplifier le partage de projets.

Le script fourni par Jonathan Campos ayant été développé pour Mac, j’ai rencontré quelques difficultés à le faire fonctionner sous windows. Aussi, je me suis permis de le modifier très légèrement mais vous pouvez le retrouver dans sa version originale sur ce post.

Voyons maintenant comment mettre en place ce script à travers un mini tutorial !

Pour ce tutorial, les pré-requis sont les suivants (détaillés dans ce post de Fabien) :

  • avoir installé et téléchargé le SDK Android
  • avoir configuré le SDK AIR pour Android et téléchargé les runtimes pour émulateur et/ou téléphone

Mise en place d’un script Ant pour Air Android

Tout d’abord, créez un nouveau projet Flex de type Application de bureau (AIR) et utilisant le SDK AIR pour Android fourni par Adobe.

air-android-ant-1

Une fois le projet créé, copiez à la racine les deux fichiers contenus dans cette archive zip:

http://dl.dropbox.com/u/7843151/android/scriptsAnt-V1.1.zip

Vous obtenez l’arborescence suivante :

air-android-ant-2

Editez le fichier build.properties, et adaptez les premières propriétés à votre configuration personnelle :

air-android-ant-3b

Si vous n’avez pas de certificat, inutile de le créer manuellement : il sera automatiquement créé à partir des données renseignées dans ce fichier.

Et voilà ! … ou presque ;-) Il ne reste plus que trois petites astuces à ne pas oublier :

  1. La configuration par défaut attend un dossier assets qu’il vous faut créer dans le fichier src.
  2. Remplacez le s:WindowedApplication par une s:Application dans le fichier principal de l’application
  3. N’oubliez pas de modifier le fichier [NomAppli]-app.xml pour y ajouter
    1. Le nom réel du swf principal (e.g. <content>[NomAppli].swf</content>)
    2. l’option <visible>true</visible>

Pour exécuter rapidement les différentes commandes contenues dans ce script Ant, il est conseillé d’ouvrir la vue Ant de Flash Builder (Fenêtre > Afficher la vue > Autre > Ant > Ant) ou bien d’utiliser le très pratique raccourci CTRL + SHIFT + 3 qui ouvre une fenêtre d’accès rapide dans laquelle, si vous tapez ‘ant’, la vue Ant apparaîtra en première proposition…

Une fois cette vue ouverte, (personnellement je la place dans le cadre en bas à gauche) vous pouvez y glisser-déposer votre script Ant. En activant le bouton 'Hide internal target' (entouré en rouge), puis en cliquant sur la petite flèche à gauche du nom du script, les principales commandes disponibles apparaissent et vous pouvez les exécuter d’un double-clic :

air-android-ant-4b

On y trouve un bon nombre de commandes plutôt sympas dont :

  • La compilation (par défaut)
  • L’installation de AIR sur votre android ou l’émulateur (install_air_on_*)
  • Le déploiement sur votre android ou l’émulateur (install_app_on_*)
  • Le lancement du manager Android pour contrôler les émulateurs (startup_manager)

Dernière astuce, si vous avez plusieurs projets et scripts Ant, il est préférable de renommer l’attribut name de l’élément projet du fichier build.xml de manière à les distinguer dans cette vue Ant.

Un grand merci à Jonathan Campos pour avoir réalisé et partagé ce script avec la communauté.

21fév/100

La vie d'un développeur Flex

Un petit billet pour vous faire partager un excellent article écrit par David Buhler qui est paru sur mes feeds ce matin:

Become, and maybe even stay, a Flex Developer.

Dans ce (long) article, l'auteur expose les situations et les difficultés auxquelles il a été confronté dans sa carrière de développeur, notamment de développeur Flex.

Personnellement, je me suis reconnu dans de nombreuses passages de l'article (notamment dans la partie un peu "codeur-no-life-passionné"). Il parle aussi des évolutions permanentes qu'impose le métier de développeur mais aussi de les approches "Entreprise" du développement.

Quelques conseils qu'il donne pêle mêle à titre d'exemple:

  • Learn a tool that makes life easier. Try Cairngorm 3 Validation
  • Learn a mainstream framework. Try Parsley
  • Improve the quality of your code using a Code Quality tool. Try FlexPMD
  • Learn a unit-testing framework. Try FlexUnit 4
  • Make all of the above work with an automated build-process. Try Ant
  • Learn some Java. The support for Java and Flex integration is excellent, the language and the OOP concepts are similar to Actionscript, and the tools for Enterprise development are robust. Try a Java Tutorial.

Bref, un article très complet et intéressant que je vous recommande vivement de lire :)

10déc/090

FlexPMD – Le plug-in Eclipse / Flex Builder 3 / Flash Builder 4 disponible

Il y a quelques semaines, je vous présentais FlexPMD, un outil permettant de faire un audit de votre code ActionScript / Flex  pour vos applications Adobe Flex / Adobe Air. A sa sortie, vous ne pouviez l'invoquer qu'en ligne de commande, par Ant ou par Maven. C'est plutôt pratique si vous avez déjà un système d'intégration continue ou des scripts de build en place mais sinon, cela restait un peu laborieux.

Heureusement, on apprend sur le blog de Xavier Agnetti, la sortie de FlexPMD sous forme de plug-in Flex Builder (mais aussi TextMate et FlashDevelop). Vous pourrez trouver plus d'informations sur le wiki de FlexPMD:

Wiki FlexPMD sur opensource@adobe

Notez que l'outil est compatible (testé) sur les versions de Flex Builder suivantes:

  • FlashBuilder 4 Beta 2 standalone
  • FlashBuilder 4 + Eclipse 3.5
  • FlashBuilder 4 + Eclipse 3.4
  • FlashBuilder 3 + Eclipse 3.4

Des vidéos expliquant l'utilisation de FlexPMD en plugin et sur sa configuration sont disponibles.

Au passage, Xavier annonce aussi la sortie d'autres outils pour faire l'audit de votre code (outil venant du monde Java eux aussi):

  • FlexCPD (Copy & and Paste Detector): Vous indique la quantité de code dupliqué dans vos projets. Une bonne idée pour un bon refactor ;)
  • FlexMetrics (équivalent de JavaNCSS): Vous permet d'avoir des statistiques générales sur votre projet (nombre de lignes, de fonctions, etc.)
5sept/092

FlexPMD – Tutorial Invoquer FlexPMD avec Ant

FlexPMD, l'outil d'audit Adobe peut être appelé soit en ligne de commande, soit par Ant. Vous pouvez donc générer un rapport comme une tâche supplémentaire de votre build Ant. Dans ce tutorial, on va voir comment faire fonctionner le build Ant depuis Flex Builder.

Installer Ant dans Flex Builder

Tout d'abord, la première étape est d'installer Ant dans Flex Builder 3. Pour cela, suivez ce tutorial Flex:

Installer Ant dans Flex Builder 3

Télécharger FlexPMD pour Ant et le copier dans votre projet

Rendez vous sur la page de téléchargement de FlexPMD et téléchargez la dernière version pour Ant (les numéros de version peuvent varier par rapport au screenshot):

dl-ant1

Dézippez l'archive que vous venez de télécharger, vous devriez y trouver une série de fichiers JAR. Dans le projet que vous souhaitez vérifier avec FlexPMD, créez un dossier "lib" à la racine:

ant-pmd-step-1

Créer le script Ant pour FlexPMD

A la racine de votre projet, créez un nouveau fichier que l'on va nommer "antpmd.xml". C'est ce fichier qui va contenir votre script Ant. Si vous avez déjà un build Ant (build.xml) de crée, vous pouvez le réutiliser en ajoutant simplement les taskdef et target qui vont suivre.

  • Allez ensuite dans le menu Run > Extenal Tools > Open External Tools Dialog…
  • Cliquez sur Ant Build puis sur le bouton New (juste en haut à gauche)
  • Nommez votre configuration Ant "FlexPMD" puis faites pointer le "Buildfile" vers votre fichier antpmd.xml et votre "Base Directory" vers le répertoire de votre projet. Vous devriez avoir quelque chose comme ceci:

ant-pmd-step-2

Fermez cette fenêtre puis ouvrez le fichier antpmd.xml. N'utilisez pas le code qui se trouve sur le site officiel, il est pour l'instant buggé.

Collez le code suivant dans ce fichier:

<project name="Flex PMD example" default="flexPmdWithDefaultRuleset" >

    <description>
        Flex PMD example
    </description>

    <property name="projecthome" value="${basedir}" />
    <property name="flexpmd.version" value="1.0.RC3" />
    <property name="flexpmd.dir" value="${basedir}/lib" />
	<property name="src.dir" value="src" />
	<property name="bin.dir" value="bin" />  

    <!--****************************************************
                FlexPMD
        *****************************************************-->

    <taskdef name="flexPmd"
         classname="com.adobe.ac.pmd.ant.FlexPmdAntTask"
         classpath="${flexpmd.dir}/flex-pmd-ant-task-${flexpmd.version}.jar">
            <classpath>
                <pathelement location="${flexpmd.dir}/flex-pmd-ruleset-api-${flexpmd.version}.jar"/>
                <pathelement location="${flexpmd.dir}/flex-pmd-ruleset-${flexpmd.version}.jar"/>
                <pathelement location="${flexpmd.dir}/flex-pmd-core-${flexpmd.version}.jar"/>
                <pathelement location="${flexpmd.dir}/as3-plugin-utils-${flexpmd.version}.jar"/>
                <pathelement location="${flexpmd.dir}/as3-parser-${flexpmd.version}.jar"/>
    			<pathelement location="${flexpmd.dir}/as3-parser-api-${flexpmd.version}.jar"/>
                <pathelement location="${flexpmd.dir}/pmd-4.2.2.jar"/>
    			<pathelement location="${flexpmd.dir}/as3-plugin-utils-${flexpmd.version}.jar"/>
    			<pathelement location="${flexpmd.dir}/commons-lang-2.4.jar"/>
    			<pathelement location="${flexpmd.dir}/flex-pmd-files-${flexpmd.version}.jar"/>
				<pathelement location="${flexpmd.dir}/plexus-utils-1.0.2.jar"/>
            </classpath>

    </taskdef>

    <target name="flexPmdWithCustomRuleset">
        <flexPmd
            sourceDirectory="${src.dir}"
            outputDirectory="${bin.dir}"
            ruleSet="${flexpmd.dir}/pmd.xml"/>
    </target>

    <target name="flexPmdWithDefaultRuleset">
        <flexPmd
            sourceDirectory="${src.dir}"
            outputDirectory="${bin.dir}"/>
    </target>

</project>
Remplis sous: FlexPMD Lire la suite
4sept/090

Installer Ant dans Flex Builder 3

Apache Ant est un utilitaire permettant d'automatiser des opérations répétitives tout au long du cycle de développement logiciel. Parmi les opérations les plus courantes, on peut compter:

  • la compilation
  • la génération de pages HTML de document (Javadoc/ASDoc)
  • la génération de rapports
  • l'exécution d'outils annexes (checkstyle, findbugs etc)
  • l'archivage sous forme distribuable

Vous pouvez donc utiliser Ant pour compiler vos projets mais aussi pour générer de l'ASDoc. Ant n'est pas fournit dans l'install par défaut de Flex Builder Standalone, il faut donc l'installer à la main. Voici un tutorial illustré pour ceux qui ne sont pas à l'aide avec les installations par Eclipse:

  • Ouvrez Flex Builder 3
  • Ouvrez le menu Help>Software Updates > Find And Install
  • Sélectionnez Search For New Features To Install (2e choix) puis Next
  • Sélectionnez The Eclipse Project Updates puis Finish

ant-step-1

Note: Si l'option "The Ecplise Project Updates n'est pas disponible, cliquer sur New Remote Site puis entrez comme nom" The Eclipse Project Updates" et comme URL "http://update.eclipse.org/updates/3.3"