Monthly Archives: novembre 2007

Quels livres pour démarrer en Flex?

Comme à chaque fois que je dois travailler sur une nouvelle technologie, une nouvelle librairie ou un nouveau language, je commence par lire un maximum de livres sur le sujet. Un livre ne suffit généralement pas car chacun à ses spécifités: certains sont mieux pour débuter mais deviennent ensuite inutiles, d’autres sont inabordables au départ, etc.

Acheter des livres peut paraitre superflu alors qu’il existe d’un coté plein d’articles sur Internet pour se former sans dépenser un sou, et de l’autre des formations sur-mesure de quelques jours à un semaine (BaaO en propose de très bonnes sur Flex) pour ceux qui veulent monter en compétence rapidement. D’un autre coté, c’est un bon deal. On apprend plus vite et mieux qu’en lisant une série d’articles plus ou moins bons sur Internet et ça coute de l’ordre de 100 Euros (2 a 3 livres entre 30 et 40 euros). Comparé à une semaine de formation à 2000 euros, c’est 20 fois moins cher et plus complet.

Lorsque j’ai commencé à m’intéresser à Flex 2, je n’ai pas dérogé à la règle et j’ai acheté tous les livres disponibles. Voici mon point de vue sur chacun des livres qui étaient disponible sur Flex en juin 2007.

Programming Flex 2 Programming Flex 2

Un livre bien écrit et très agréable à lire. On y trouve notamment une bonne introduction aux languages ActionScript 3 et MXML. Par contre, point ici de Flex Builder; ce livre ne traite que du Flex SDK.

Ce livre traite en profondeur de Flex 2 en nous épargnant les trivialités d’usage. La plupart des sujets un peu compliqués de Flex 2 à savoir les states, les effets, les styles, le drag and drop, les item renderers, la gestion du focus, et le data binding sont donc traités en détails.

Le livre est en revanche très leger sur la présentation et l’utilisation des différents composants graphiques disponibles en standard dans Flex 2 (DataGrid, TreeView, Menu, PopUp, etc.). Il ne traite d’ailleurs pas du tout de Flex Charting. Inutile donc de chercher dans ce livre comment utiliser le composant PieChart. Ce livre ne traite également que partiellement de l’accès aux données distantes (Web Services, RemoteObjects, …). Adobe Flex DataServices (LiveCycle Data Services) n’est pas du tout couvert.

En conclusion, c’est un livre idéal pour découvrir Flex si vous aimez lire loin de votre écran (dans le train, …). Vous apprécierez d’autant plus ce livre si vous pratiquez déjà un langage objets (Java, C#) et êtes familier avec un ou plusieurs frameworks graphiques à base de composants (Windows Forms, Swing, ASP.NET, JSF, ou autres).

Professional Flex 2 Professional Adobe Flex 2

Ce livre, c’est l’exact opposé du livre précédent. Il couvre pratiquement tous les sujet, y compris Flex Builder, les Charts, Flex Data Services, et même les nouveautés de la version 2.0.1….mais il n’y a aucune trame.

C’est l’archétype du bouquin écrit à la va-vite par un ensemble d’auteurs (3 dans notre cas) sans aucune cohésion. Le résultat c’est que le livre utilise par exemple la notion de behavior dans un chapitre mais ne l’introduit que 4 chapitres plus tard. De même, ActionScript n’est présenté qu’au chapitre 16 (sur 26) alors qu’il est utilisé tout au long du livre.

Conclusion, ce livre n’est intéressant que si vous avez déjà fait le tour de Flex et que vous cherchez à approfondir votre connaissance en lisant les chapitres qui vous intéressent.

Adobe Flex 2: Training from the Source

Un livre original ! Ce livre est en fait un tutoriel géant qui vous permettra de découvrir tous les fonctionnalités de Flex 2.

Pratiquement tous les concepts sont abordés, en commençant par les plus simples et en terminant par les plus complexes. Je vous conseille donc vivement de lire le livre dans l’ordre. Néanmoins, il est possible de sauter un ou plusieurs chapitres grâce au CD fourni qui contient tous les sources du livres.

Pour conclure, choisissez ce livre pour démarrer en Flex si vous aimez les tutoriels et que vous n’avez pas peur de lire devant votre écran. Ce livre est également utile ponctuellement par la suite pour se remémorer comment marche tel ou tel fonctionalité de Flex (drag and drop, binding, etc.)

The Essential Guide to Flex 2 with ActionScript 3.0

Pas vraiment excellent, ni vraiment mauvais. Sans savoir réellement expliquer pourquoi, je n’ai pas accroché avec ce livre. Peut-être parce que c’est le dernier que j’ai lu et que je n’ai rien appris de plus que ce que j’avais lu dans les autres livres, peut-être également parce que l’auteur a trop tendance a systématiquement survoler les sujets abordés.

Je n’ai pas aimé ce livre également parce qu’il essaye de marier un style narratif, à la façon Programming Flex 2, avec des tutoriels comme dans Training from the Sources. Et finalement le résultat n’est pas convaincant à mes yeux. Je pense qu’après avoir lu ce livre, un débutant en Flex saura à peu près se débrouiller en Flex mais qu’il lui manquera un petit quelque chose pour bien comprendre Flex et se sentir à l’aise.

En conclusion, je pense qu’il vaut mieux vous tourner vers d’autres livres sauf si votre objectif est juste de vous faire une opinion sur Flex sans réellement le pratiquer.

Flex API, le cas useHandCursor

Comme toute API qui se respecte, celle de Flex 2 réserve son lot de bizarreries. Cette semaine, j’ai eu besoin d’afficher un label cliquable. Et pour bien montrer à mes utilisateurs Web que ce label est cliquable, je voulais que le curseur en forme de main s’affiche lorsque la souris passe au dessus de ce label.

C’est le genre de truc qu’on fait des milliers de fois sans se poser de question en HTML:

<span style= »cursor:hand;cursor:pointer;text-decoration:underline » onclick= »alert(‘Facile…’) »>Cliquer ici</span>

En Flex, l’équivalent se nomme useHandCursor. On s’attend donc à ce que le code suivant fonctionne:

<mx:Label text= »Cliquer ici » useHandCursor= »true »/>

Que nenni ! Rien nada. Pas de curseur en forme de main, rien. De deux choses l’une: Ou bien c’est un bug, mais dans ce cas comment se fait-il que personne n’ai trouvé ce bug aussi évident depuis la sortie de Flex 2 en 2006?… ou bien c’est un de ces cas où le design de l’API laisse à desirer et où changer la valeur de la propriété ne suffit pas. Encore faut-il trouver ce qui manque.

Et là, les gars de chez Adobe-Macromedia m’ont épaté:
Il faut modifier non pas UNE propriété…
non pas DEUX….
mais… TROIS !!!
Et, oui, c’est carrément trois propriétés qu’il faut changer pour voir apparaitre ce fameux curseur en forme de main.

Il faut donc dire à notre label, de montrer son curseur (useHandCursor=true), de se comporter comme un bouton (buttonMode=true) et enfin de ne pas déléguer les évènements de la souris à ses enfants (mouseChildren=false). On a connu plus intuitif !

Pour résumer voici le code MXML qu’il faut écrire pour voir notre curseur fétiche.

<mx:Label text= »Mais tu vas cliquer ici, oui ! » useHandCursor= »true » buttonMode= »true » mouseChildren= »false » />

Pit of Success

Selon Brad Abrams, un des pères de l’API de .NET, une API bien conçue est une API qui fait tomber le développeur dans la fosse du succès (The Pit of Success). Tel un marcheur qui essayerait de passer d’une vallée à une autre, et qui passera naturellement par le col plutôt que d’escalader le pic, une API bien conçue guide les développeurs dans la bonne direction, et leur rend la tache compliquées quand ils ne sont pas sur le bon chemin.

Dans le cas de useHandCursor, par exemple, je pense qu’il aurait été préférable de surcharger la propriété pour mettre à jour les 2 autres propriétés, ou au moins de l’indiquer clairement dans la documentation.

12/03/2008: Remplacé showHandCursor par useHandCursor.

Flex Identicons

Comme j’aime beaucoup les Identicons et que je n’ai pas trouvé d’implementation Flex après une fouille minutieuse sur Google, j’ai décidé de me retrousser les manches et de m’y coller. Le résultat tient dans un petit package de 2 classes et met à votre disposition un composant affichant l’identicon de votre choix.

Ce composant Identicon prend en paramètre un code (integer) et affiche l’identicon correspondant. Il vaudra mieux lui préciser ses dimensions (width et height) et on pourra changer la couleur de fond (blanche par défaut). Pour afficher l’identicon associée à une chaine de caractères, la classe Identicon possède une fonction statique qui calcule le hash code d’une chaine.

J’ai monté une petite application de test qui vous permet d’entrer une chaine de caractères et de voir l’identicon correspondant. Pour cela, j’ai utilisé une List avec un itemRenderer affichant le composant Identicon et un label.

Flex Identicons Example

Cliquez sur l’image ci-dessus pour acceder à l’application.
Les sources sont disponibles en open-source (licence WTFPL).

Enjoy :-)

Perfectionnez votre anglais en vous amusant…

… et en aidant Google au passage !

Le Google Image Labeler est à la fois un jeu, un concours et un moyen original pour Google d’effectuer massivement des traitements manuels de reconnaissance d’image.

Le principe est le suivant : Vous êtes associé à un partenaire tiré au sort et vous avez deux minutes pour décrire un maximum d’images.

Pour décrire une image, il suffit d’entrer des mots qui se rapportent à l’image. Dès qu’un même mot figure dans votre liste et dans celle de votre partenaire, vous gagnez un nombre de points et une autre image vous est présentée. Si vous n’arrivez pas à trouver de mots en commun avec votre partenaire, vous pouvez passer immédiatement à l’image suivante.

Google Image Labeler

Pour certaines images, une liste de mots existe déjà, et il faut donc trouver des mots qui ne sont pas déjà dans la liste.

A la fin des deux minutes, vous pouvez voir la liste des images qui vous a été proposé, et pour chaque photo voir la liste des mots proposés par votre partenaire. Cela vous permettra d’enrichir votre vocabulaire !

Google Image Labeler Results

A vos claviers, prêt-partez !

Et si vous aimez le principe de ce « jeu » ajoutez Unanimo à votre liste au Père-Noël. C’est un jeu de société qui reprend le même principe, mais vous pouvez y jouer en français et jusqu’à huit personnes. Rires garantis !

Identicons

Une identicon est une petite figure géométrique qui représente visuellement un nombre. Comme nos chers ordinateurs ne savent finalement que manipuler des 0 et 1, un identicon de représenter par une image à tout ce qui peut se résumer par une série de bits : adresse IP, chaine de caractères, code barre, …

Grâces aux identicons, il est possible de visuellement distinguer plus rapidement des objets identiques dans une liste. Regardez par exemple la liste d’adresses IP suivante et essayer de trouver la ou les adresses qui apparaissent plus d’une fois:

192.168.0.147
192.169.0.147
192.168.1.147
192.198.0.147
192.768.0.147
192.198.0.147
192.768.1.147
192.168.1.147

Pas évident ! Regardez maintenant la même liste mais ou chaque adresse IP est précédée de son identicon associée.

192.168.0.147
192.169.0.147
192.168.1.147
192.198.0.147
192.768.0.147
192.198.0.147
192.768.1.147
192.168.1.147

Les identicons sont par exemple très utiles dans les commentaires de blog car cela permet d’identifier l’auteur d’un commentaire d’un coup d’œil. A vous de trouver d’autres champs d’application pour ces terribles petites figures.

Enfin rendons à césar ce qui lui appartient. Les identicons ont été inventées par Don Park au début de cette année et vous pourrez trouver sur son blog une liste des implémentations déjà disponibles (Java, .NET, …).

La panoplie des logiciels pour développer des projets agiles

Pour gérer un projet, on a plusieurs solutions: On peut le faire à la-rache sans utiliser de logiciels, en partageant le code source via une clef USB, en notant les demandes utilisateurs dans un coin de la tête du chef de projet, et les bugs bloquants sur une feuille volante. On peut aussi le faire à l’ancienne, avec Visual Source Safe, Microsoft Project et un outil de gestion de bugs fait maison. On peut également se la jouer grosse boite qui a de l’argent en utilisant ClearQuest pour gérer les bugs et les demandes d’évolution et Primavera pour gérer les plannings. Indépendamment de leurs qualités intrinsèques, ces logiciels ont tous un point commun: ils ne correspondent pas à ce dont à besoin une équipe qui utilise une méthodologie de développement agile.

De quoi à besoin une équipe de développement agile ?

  1. Un logiciel de gestion des sources qui ne verrouille pas les fichiers (plusieurs développeurs doivent pouvoir travailler en même temps sur le même fichier) et qui gère les branches. Subversion me semble indiscutablement le choix qui s’impose, mais CVS – son ancêtre – marche également. Enfin Perforce est également une solution pour les plus fortuné d’entre vous.
  2. Un logiciel de build et d’intégration continue. Son rôle est de compiler le projet, d’exécuter les tests unitaires et de générer le distribuable, ceci de manière régulière. Pour un projet Java ou Flex, on utilisera typiquement Ant ou Maven pour la build. Pour l’intégration continue CruiseControl, Continuum et Hudson sont des candidats de choix. Pour un projet .NET, on passera par MsBuild et Team System si on arrive à négocier les licences avec son supérieur, ou bien Nant et CruiseControl.NET.
  3. Un logiciel de tests unitaires. Pas la peine d’aller chercher bien loin, JUnit et ses différents portages (NUnit pour .NET et AsUnit pour ActionScript) feront parfaitement l’affaire. Pour .NET on regardera également du coté de Team System si on a le budget.
  4. Un logiciel de rapport de couverture des tests unitaires. Du coté .NET, Team System fait ça très bien, sinon on peut essayer NCover (payant, contrairement à ce que son nom laisse présager). Pour Java on utilisera Cobertura si on veut du gratuit, ou le très bon Clover si on est prêt à payer pour avoir mieux (le plug-in Eclipse est très pratique). Pour ActionScript, il n’existe malheureusement pas encore d’outil à ce jour, il faut attendre encore un peu.
  5. Un logiciel de gestion de projets (gestion de taches, bugs, spécifications, etc.). C’est le logiciel sur lequel il ne faut pas hésiter à investir, et à passer du temps à trouver celui qui vous convient le mieux. Néanmoins je vous recommanderais, dans l’ordre du plus simple au plus complet : FogBugz, Gemini, JIRA et AtTask. Ils sont tous payant (sauf JIRA si vous développez un projet open source) mais la qualité est à ce prix. S’il ne fallait en retenir qu’un seul, je dirais JIRA avec le plug-in GreenHopper. Jetez également un œil sur Basecamp et Unfuddle qui sont des solutions en ligne. Unfuddle allant jusqu’à héberger vos sources sur leur serveur SVN.

Et vous, utilisez-vous des logiciels plus complet ou performant que ceux-ci ?

FlexSpy 1.1

J’ai mis à jour FlexSpy ce week-end. Au menu de cette version 1.1:

  • La possibilité de rechercher un composant directement en cliquant dessus
  • La mise en surbrillance du composant lorsqu’on le sélectionne dans l’arbre des composants
  • Une fenêtre redimensionnable et non modale par défaut
  • Un code un peu mieux documenté

FlexSpy démo (right-click pour voir les sources)

Télécharger FlexSpy-1.1.zip (sources + swc)

Pour ajouter FlexSpy à votre application, suivez le guide:

  1. Dezippez le contenu de FlexSpy-1.1.zip dans le repertoire de votre choix (ex: C:workFlexSpy)
  2. Dans FlexBuilder, ouvrez la fenêtre de propriétés de votre projet (Project menu > Properties)
  3. Dans la partie gauche de la fenêtre de propriétés, selectionnez Flex Library Build Path, puis l’onglet Library path dans la partie droite
  4. Cliquez sur le bouton Add SWC…
  5. Selectionnez le fichier FlexSpy.swc dans le répertoire que vous avez choisi à l’étape 1 (ex: C:workFlexSpybinFlexSpy.swc) et cliquez sur OK pour fermer la fenêtre.
  6. Ensuite, ajoutez un bouton qui appelle la méthode FlexSpy.show() dans votre application ainsi que l’import qui va bien… compilez votre projet et voilà !






Des développeurs dans un open-space

L’année dernière, l’éditeur de logiciels dans lequel je travaille a rénové entièrement les locaux. La rénovation s’est soldée par quelques abattages de cloisons pour gagner de la place et la plupart des bureaux sont maintenant organisés en open-space.

N’ayant pas d’expérience dans des domaines tels que la vente ou le marketing, je ne sais pas si cela leur permet de mieux travailler, ou bien si au contraire cela freine leur créativité ou les empêche de conclure certaines ventes. En revanche, mettre une vingtaine de développeurs dans un open-space, c’est absurde (mais moins que de mettre des commerciaux et des développeurs dans un même open-space).

Voici une équation simple pour mettre en lumière l’absurdité:

Développeurs + open-space = productivité faible + bugs

L’open-space est un mauvais endroit pour faire travailler un développeur car il concentre deux faiblesses : c’est un endroit bruyant, et c’est endroit sans intimité.

A moins de travailler pour la NSA, les développeurs sont en contact avec toutes sortes de gens: d’autres développeurs qui viennent leur demander conseil, des clients ou des collègues du département support qui les appellent au téléphone, etc. Mettons que chaque développeur est ainsi dérangé 2 à 3 fois par jour pendant 5 à 10 minutes ; Dans un open-space avec 20 développeurs, cela veut dire qu’il y aura quasiment à tout moment de la journée, une conversation en cours, et donc du bruit toute la journée. Pas facile de se concentrer dans ces conditions…

De plus, dans un open-space où tout le monde est « visible », il est plus facile d’aller déranger son collègue pour savoir pourquoi il a renommé la méthode titi de la classe Toto plutôt que d’aller regarder dans l’historique de Subversion.

Or une étude (lire Peopleware, Chapitre 9) a montré qu’un développeur mettait en moyenne 10 minutes à « rentrer » dans le code qu’il était en train d’écrire. Au bout de 10 minutes de programmation, un développeur sait exactement quelles fonctions il est en train d’écrire, quelles autres classes il faudra qu’il modifie suite aux changements qu’il est en train d’effectuer, etc. On peut le comparer à un jongleur qui jonglerait avec une dizaine de massues.

Au début il commence avec une massue, et toutes les minutes il peut en rajouter une. Au bout de 10 minutes, il jongle avec toutes ses massues. Maintenant, un équilibriste arrive et demande à notre jongleur de bien vouloir l’aider à tendre son fil. Le jongleur cesse de jongler, pose ses boules et aide bien amicalement son collègue. A la suite de quoi, le jongleur recommence à jongler, avec une massue d’abord, puis au bout de 10 minutes avec toutes ses massues. Il en va de même du développeur. Interrompez-le 2 minutes et il lui faudra 10 minutes pour reprendre son « rythme » de croisière.

On peut même prolonger l’analogie avec le jongleur: dérangez le jongleur, en lui posant une question, en lui racontant une bonne blague, ou juste en aillant une conversation animée avec l’équilibriste et il risque de se déconcentrer et de faire tomber une boule. Dérangez le développeur et il risque d’écrire un bug!

Pour augmenter la productivité et la qualité des développements d’une équipe, il faut éviter de distraire incessamment les développeurs. Et un open-space c’est un endroit plein de distractions…