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

29mar/100

Sortie de FlexPMD 1.1 / FlexCPD 1.1 / FlexMetrics 1.1

Il y a quelques mois (6 en fait), je vous présentais des outils à la fois puissants et pratiques pour mesurer et corriger les bonnes pratiques dans votre développement. Ces outils sont développés par une petite team comprenant des français (voir le blog de Xavier Agnetti). Les trois projets sont hébergés sur le portail Open Source d'Adobe.

Est tout d'abord sorti FlexPMD permettant d'analyser votre code et d'en fait l'audit. Si vous ne vous rappelez pas, voici l'article présentant cet outil:

FlexPMD – Un outil pour faire l'audit de vos projets Flex / AS3 / Air

Est ensuite sorti, un plug-in Eclipse / Flex Builder pour vous simplifier la vie:

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

Pour la version 1.0, ils ont en même temps sorti  FlexCPD, pour détecter la duplication de contenu dans votre code ainsi que FlexMetrics, qui vous permet d'avoir quelques statistiques sur votre code. Ces plugins peuvent facilement se greffer sur votre système d'intégration continue (Hudson et autres), ce n'est pas non plus le genre d'outil que l'on va utiliser pendant le dev, il permet juste de contrôler les versions release que vous allez publier tous les jours.

Pour ceux qui s'en inquiètent, ces 3 outils fonctionnent avec Flex 4 et Flash Builder 4 sans souci.

Comme l'indique le titre, les versions 1.1 de ces 3 outils sont sorties, corrigeant une bonne série de bugs (voir les release notes / bugs corrigés). N'oubliez donc pas de vous mettre à jour ;)

Site officiel de FlexPMD

Site officiel de FlexCPD

Site officiel de FlexMetrics

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

FlexPMD – Tutorial Invoquer FlexPMD en ligne de commande

FlexPMD est un outil permettant d'analyser votre code ActionScript/MXML. A partir d'un ensemble de règles, il peut générer un fichier de rapport (pmd.xml). Dans ce tutorial FlexPMD, je vais montrer comment utiliser FlexPMD en ligne de commande.

Présentation de l'outil Adobe FlexPMD

Télécharger la dernière version de FlexPMD

Pour cela, rendez-vous sur la page de download du projet FlexPMD sur opensource.adobe:

Télécharger FlexPMD en ligne de commande.

Prenez celle ayant la date de build la plus récente (les numéros de versions peuvent varier par rapport au screenshot):

dl-pmd

Télécharger le fichier de règles (Rules)

Avant de lancer FlexPMD, vous devez disposer d'un fichier de règles que l'on va donner all_flex.xml. Ce fichier peut être crée par le FlexPMD Ruleset Creator. Lancez l'outil, modifiez les règles composant votre RuleSet si vous le voulez puis cliquez sur "Export". Ne nommez pas votre fichier pmd.xml mais plutôt all_flex.xml, ce sera plus clair pour la suite.

pmd-creator

Dans sa version actuelle, le FlexPMD Ruleset Creator à un petit "bug". En effet, l'application ne se resize pas par rapport à la taille de votre fenêtre. Si vous avez un wide screen ou beaucoup de toolbars, vous ne pourrez donc pas voir le bouton export. Dans ce cas, vous pouvez télécharger ce fichier exporté depuis FlexPMD RuleSetCreator:

Télécharger le fichier all_flex.xml contenant les règles pour FlexPMD

Lancer FlexPMD en ligne de commande

Dézippez l'archive et vous devriez avoir ces fichiers:
pmd-lis
Pour cet exemple, le chemin vers le dossier de FlexPMD est C:\Users\fab\Desktop\flex-pmd-command-line-1.0.RC3, que l'on va appeler [PMD_DIR].

Le chemin des sources de mon projet Flex est C:\Users\fab\Desktop\src, que l'on va appeler [SRC_DIR].

Pour la suite, vous devez avoir Java ajouté à votre Path si ce n'est pas déjà fait (tuto Windows / Unix)

Si vous êtes sous Windows, ouvrez un Invite de Commande (Démarrer>Executer>cmd). Sous linux/mac, ouvrez votre terminal.

Placez vous dans le répertoire ou se trouve les jar de FlexPMD ([PMD_DIR]):

cmd-1

Vous pouvez maintenant invoquer FlexPMD en ligne de commande. Voici la ligne à entrer:

java -Xmx256m -jar flex-pmd-command-line-1.0.RC3.jar -s [SRC_DIR] -o . -r all_flex.xml

Voici le détail des différentes options de compilation:

  • -s: Chemin vers les sources ActionScript à analyser
  • -o: Chemin dans lequel le fichier sera écrit. La valeur "." indique que le fichier sera crée dans le même répertoire que le jar.
  • -Xmx256m permet de modifier un paramètre de Java. Si vous ne le précisez pas, vous aurez l'erreur "Exception in thread "main" java.lang.OutOfMemoryError: Java heap space"
  • -r (facultatif): Chemin vers le fichier de règles (RuleSet). Si vous né spécifiez pas de fichier de règles (all_flex.xml), un ensemble de règles par défaut sera utilisé.

cmd-2

Un fichier nommé "pmd.xml" sera crée. C'est lui qui contient le rapport FlexPMD.

Remplis sous: Exemple, FlexPMD Lire la suite
3sept/090

FlexPMD – Un outil pour faire l'audit de vos projets Flex / AS3 / Air

Adobe a sorti hier un nouvel outil baptisé FlexPMD. Cet outil permet de faire l'audit du code de vos projets Flex / AS3 / Air. Il a été développé en interne au sein du Adobe Technical Services. FlexPMD est maintenant accessible à tous, en Open Source et de manière gratuite.

Que fait FlexPMD?

FlexPMD permet de détecter automatiquement dans votre code, les anti-pattern, et autres "Worst Practices" (mauvaises pratiques) dans votre code source Flash/Flex. FlexPMD utilise en partie PMD, l'équivalent Java. A l'origine, FlexPMD a été crée pour automatiser les audits de code bas-niveau pour que les consultants puissent se concentrer sur les problèmes de plus haut niveau. Au final, cet outil permet aussi de détecter les anti-pattern plus avancés.

Le projet contient actuellement plus de 80 règles, comme par exemple la détection de code inutilisé (dead code), les méthodes trop complexes avec référence cycliques, les variables mal nommées, mais aussi les problèmes d'architecture comme par exemple les View référencées dans les Model, … Comme le projet est Open Source, la communauté pourra créer de nouvelles règles que vous pourrez ajouter à FlexPMD. Vous pouvez aussi créer vos propres règles.

Consulter la page officielle de FlexPMD

Voir le blog de l'auteur Xavier Agnetti

Comment utiliser FlexPMD?

FlexPMD peut être invoqué de 4 manières différentes:

Des tutoriaux Flex seront bientôt publiés sur flex-tutorial, expliquant comment invoquer FlexPMD et traiter les résultats. Un plugin Flash Builder est déjà considéré par les développeurs.

Télécharger les différentes versions de FlexPMD

Comment marche FlexPMD?

FlexPMD est fourni avec un ensemble de règles pour le développement Flex/AS. Chaque fichier source passé dans FlexPMD est testé sur chacune des règles.