Pour ceux qui ne sont pas à l’aise avec la syntaxe du code que j’utilise ici, je suis fan de la gem MetaWhere, et je ne sais plus vraiment écrire de ActiveRecord pur

L’Exemple

Prenons un petit exemple simple pour bien visualiser.

Imaginons une application avec des utilisateurs.
Ces utilisateurs ont besoin d’être validés par un administrateur pour se connecter au site.
Ils peuvent également payer pour différents abonnements qui eux aussi nécessitent la validation d’un administrateur pour être en règle.

Imaginons maintenant que vous vouliez une page de type TODO pour l’administrateur, avec la liste des utilisateurs en attente d’une validation et qu’il faut appeler.

Première solution (pas maline)

Bon … on va pas être bien malins pour le coup !

User.where(:validated => false).all
  + User.joins(:subscriptions)
        .where(:subscriptions => {:validated => false}).all

Simple, efficace. Deux chargements en base de données qu’on réuni en suite à l’aide d’une simple addition de tableau.

Deuxième solution (qui marche pas)

OK soyons plus malin maintenant. Finalement ce qu’on veut, c’est charger des utilisateurs ! On a qu’à faire ça en une seule fois !

User.joins(:subscriptions)
    .where({:validated => false} 
           | {:subscriptions => {:validated => false}}).all

Et là c’est avec un grand sourire qu’on lance ses tests vérifier qu’on a bien le résultat attendu, et c’est donc tout naturellement qu’on tire la gueule en le voyant s’allumer en rouge…

Que s’est-il passé ? C’est simple, tout se joue au début avec la jointure:

User.joins(:subscriptions)

Ceci va être traduit en SQL par un LEFT INNER JOIN. Le comportement de cette instruction est « fusionnes les éléments de cette table dans cette autre table à condition qu’il respecte telle condition », et la condition en question c’est que l’id de l’utilisateur corresponde au user_id de l’abonnement.

Que se passe-t-il si un utilisateur n’a aucun abonnement, et bien la base SQL ne trouve aucune ligne dans les abonnements à faire correspondre à l’utilisateur, et il supprime donc la ligne des résultats.

Notre joli test nous indique ainsi que tous les utilisateurs qui sont en attente de validation (et non pas la validation de leur abonnement) ne sont pas renvoyés par notre méthode.

Quelle est la solution ?

Troisième solution (la bonne)

OK sur ce coup là il va falloir me faire confiance au début.

User.joins(:subscriptions.outer)
     .where({:validated => false}
            | {:subscriptions => {:validated => false}}).all

Eh bah on était pas si loin que ça avec notre deuxième solution ! Le soucis venait simplement du joins ! Explication.

Si le LEFT INNER JOIN cherche absolument à faire correspondre la table jointe, le OUTER JOIN lui en revanche s’en fout un peu … s’il ne trouve aucune ligne dans les abonnements avec l’id de l’utilisateur courant, il le conserve quand même et considère toutes les valeurs des colonnes de la table abonnement comme vides.

Au final

Je suis passé un peu au travers de l’explication du fonctionnement précis du JOIN en lui-même, mais pour ça vous trouverez bien assez d’aide sur le inner join sur le reste du web.

Le outer join lui est souvent moins traité, voilà pourquoi j’ai voulu en faire une explication simple par un exemple pratique.  Le cas se répète, si vous faite une requête avec une jointure, mais que cette jointure est « optionnelle », alors n’oubliez pas que c’est d’un OUTER JOIN dont vous avez besoin.

Pour fêter ça un nouveau thème, et un custom s’il vous plait ! Un grand merci à mon amie webdesigner Maeva Cecchi qui s’est donnée beaucoup de mal pour que le site soit beau, j’espère qu’il vous plaira autant qu’à moi !

Pourquoi rouge alors que l’ancien était bleu ? Tout simplement parce que depuis environ 10 mois j’ai arrêté de faire du Java, et je fais maintenant du Ruby (avec Rails). Il fallait donc un thème en accord avec ça

A venir très bientôt quelques articles sur Ruby et Rails justement. A noter que le 4 Octobre prochain il y aura la 2ème édition du Riviera.rb au Green King à 18h30 où je ferai une présentation de la gem MetaWhere.

La nouvelle de la semaine est que Liberty Global, leader mondial de la télévision par cable et satellite américain (c’est pas moi qui le dit c’est Wikipedia) vient d’annoncer lors d’une conférence le projet Horizon pour iPad, réalisé par mes collègues développeurs iOS ! Voilà un petit lien vers un article qui en parle et également une vidéo de promotion de l’application. Félicitations à mes collègues pour leur boulot !

J’en profite tant qu’on y est pour rappeler qu’Intellicore souhaite recruter plusieurs développeurs iOS si possible avec des connaissances en OpenGL ES. Pour le contact voici l’adresse http://www.intellicore.net/positions/ et vous pouvez me poser des questions sur Twitter (@PierreSchambac).

Avant de me faire lyncher je tiens à souligner le fait que je n’ai aucune prétention de professionnel de la photo ! Je voulais juste partager mes photos avec mes amis et avec les internautes qui pourraient le cas échéant bien aimer une de mes photos. Pour le reste vous êtes cordialement invités à visiter le site et éventuellement noter une photo, en bien ou en mal

Relire le premier billet ne serait d’ailleurs pas idiot puisqu’il y a eu quelques ajouts dans le tutoriel précédents (stashs, hooks, alias).

Système de version décentralisé vs centralisé ?

La puissance d’un modèle décentralisé à la git c’est justement qu’il n’est pas figé. En effet il peut aussi bien être utilisé avec un dépôt local unique, avec une multitude de dépôts locaux, ainsi qu’avec un dépôt central… ou la combinaison de tous ces modes, tandis qu’avec un dépôt central unique on ne peut changer de modèle. Si on rajoute la facilité d’utilisation et la rapidité des opérations, il n’y a plus de raisons d’aller voir ailleurs ! Bien sûr on pourra toujours critiquer les aspects de configurations à mettre en place pour un mode centralisé, mais quand on achète une Ferrari il faut aussi apprendre à la conduire.

Commandes de base

L’utilisation en mode centralisé est aussi simple, côté client, que l’utilisation générale de Git. Pour ainsi dire il n’y a que 4 commandes importantes :

• clone
• remote
• pull
• push

clone

git clone dépôt_distant [dossier]

Permet de récupérer un dépôt distant dans dossier. Les protocoles supportés sont : rsync, http, https, git, ssh, file. Les fichiers étant compressés et empaquetés un checkout est donc très rapide comparé à un svn qui va tout télécharger unitairement !
Par défaut la référence au projet distant sera « origin » (voir remote).

Remote

Cette commande permet de gérer les dépôts distants :

Lister les références aux dépôts distants :

git remote [-v]

Ajouter la référence nom à un dépôt distant. Dans le cas de clone, origin référencera le dépôt distant :

git remote add nom dépôt_distant

Supprimer une référence

git remote rm reference

Renommer une référence :

git remote rename ancienne_ref nouvelle_ref

Modifier une référence

git remote set-url reference nouvelle_adresse

Afficher les informations d’une référence

git show reference

pull

git pull [--rebase] reference branche

Cette commande est équivalent à un checkout de svn. On va récupérer l’état actuel de la branche distante. Le paramètre ‘reference’ est la référence que nous avons manipulé avec la commande remote. Par défaut on utilise origin. Après le pull il y a un merge automatique, sauf avec l’option –rebase qui permet de revenir à la version exacte du serveur (équivalent à un reset –hard de la version sur le serveur).

push

git push reference branch

git push –tags dépôt

Cette Commande est l’inverse de pull, elle permet d’envoyer ses modifications sur le serveur. C’est l’équivalent d’un checkin de svn.
L’option –tags permet d’envoyer la liste de tous tags locaux. Pour n’envoyer qu’un seul tag on procède comme suit :

git push reference tag NomDuTag

Cycle de vie des commandes

Un petit exemple vaut mieux qu’un long discours :

Initialisation

git clone git://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux-2.6.git linux

ou

git init linux
cd linux
git remote add origin git://git.kernel.org/pub/scm/linux/kernel/git/torvalds/linux-2.6.git
git pull origin master

Ensuite on fait des modifications comme vu dans le tutoriel précédent avec la puissance d’un gestionnaire de version décentralisé.

Pour se resynchroniser avec le serveur :

git commit -a
git pull origin master

Puis on pousse nos modifications sur le serveur :

git push origin master

Simple non ?

On est mal barrés !

Les dépôts distants sont généralement crées avec l’option –bare et se terminent par .git

git init –bare dossier.git

Un dépôt de type « bare » est en fait un dépôt sans espace de travail (working directory), ainsi il n’y a pas directement les fichiers sources mais uniquement le contenu du dossier .git. Cela empêche l’utilisation de certaines commandes (git add, git rm, git commit …).

Supprimer une référence distante

Il peut être utile de supprimer à distance une branche ou un tag. Pour se faire il suffit d’ajouter « : » avant la référence à supprimer. En théorie lors de la spécification d’une référence on devrait la noter +ref_locale:ref_distante, donc si on omet la référence locale il y aura suppression. La syntaxe de git permet de se passer du « + » et du « : » comme dans l’exemple.

Supprimer un tag distant :

git push –tags origin :TagASupprimer

Supprimer une branche distante :

git push origin :MaBranche

Pour lister les références distantes, on utilise la commande :

git ls-remote [--heads] [--tags] reference

Exporter un dépôt sur le réseau

Le site http://www.jedi.be/blog/2009/05/06/8-ways-to-share-your-git-repository (in English, sorry) liste les différentes façons d’exporter les dépôts git.
La version maison est un démon intégré à git qui écoute sur le port 9418 par défaut, il va scanner les dossiers de sa liste blanche et s’il détecte le fichier « git-daemon-export-ok » dans le .git du dépôt, alors celui-ci sera exporté.

git daemon [--export-all] [--base-path=path][--user-path] [--reuseaddr] [directory…]

–export-all exporte tous les dépôts que le fichier « git-daemon-export-ok » soit présent ou non

–base-path permet d’indiquer le répertoire de base des dépôts

–user_path permet d’utiliser la notation ~user dans l’adresse de git clone

–reuseaddr permet de pouvoir se lier au port même s’il est déjà utilisé (après un crash en général)

On peut spécifier ensuite les répertoires de la liste blanche (en plus de –base-path). On peut utiliser un démarrage manuel ou un service comme inetd.

Contrôle d’accès au dépôt

Et bien c’est simple, git n’intègre pas de mécanisme de contrôle d’accès aux dépôts ! C’est un gestionnaire de version, il laisse donc ce travail à d’autres couches systèmes spécialisées. Mais ceci vient aussi du fait que le mode décentralisé est celui par défaut, donc si quelqu’un a fait une modification dans le code de Linux, il va demander à Linus de faire un pull de ses modifications. Dans ce schéma il n’y a pas besoin d’intégrer des mécanismes de sécurité divers et variés.
Néanmoins il existe des solutions.

• Pour http(s), on peut utiliser l’authentification intégrée (voir liée à un LDAP)
• Pour un système de fichier on a toute la gestion des droits intégrée au système (un peu lourd à mettre en place)
• Idem pour ssh, mais cela nécessite en plus de créer des comptes ssh sur le serveur

Néanmoins la solution la plus pratique est Gitosis. Avec Gitosis il n’est nécessaire de créer qu’un seul compte sur la machine « git », chaque utilisateur est authentifié par sa clé ssh (clé unique, authentification forte) et les dépôts peuvent avoir un accès lecture seule ou lecture/écriture.
Pour modifier la configuration de Gitosis, on fait un pull du projet gitosis-admin, on obtient l’arborescence suivante :

• keydir dossier qui contient les fichiers de clés ssh publiques (.pub) de tous les utilisateurs
• gitosis.conf fichier qui contient la configuration des dépôts

Ensuite modifications, commit, push comme vu plus haut.
Les dépôts contrôlés par Gitosis sont situés dans /home/git/repositories, mais rien n’empêche de faire des liens symbolique pour les stocker ailleurs.
Exemple de fichier de configuration :

[gitosis]
## Autoriser gitweb à montrer tous les dépôts
gitweb = no

## Autoriser git-daemon à publier tous les dépôts
daemon = no

[group quux]
members = jdoe wsmith @anothergroup
writable = repo1 repo2
readonly = repo3

[group anothergroup]
members = alice bill

[repo foo]
## Configuration par dépôt au lieu de la configuration globale pour gitweb (idem pour git daemon)
gitweb = yes

On définit des groupes avec des membres et les dépôts auxquels ils peuvent accéder en lecture seule ou lecture/écriture. La syntaxe de contrôle est inversée par rapport à ce qu’on a l’habitude de voir : un dépôt ne définit pas ses permissions, c’est un groupe qui définit ses accès.
Le seul défaut de Gitosis est que la granularité des accès se font au niveau du dépôt complet (y compris pour les tags). Pour avoir un contrôle plus fin on sera obligé de passer par des hooks (le hook update en l’occurrence) ou de se tourner vers Gitolite qui a un comportement identique avec la possibilité de définir précisément les droits d’accès.

Pour accéder à un dépôt on procède de la manière suivante :

git clone git@serveur:repo1

Tutoriel GIT by Grégory Soutadé est mis à disposition selon les termes de la licence Creative Commons Paternité-Partage des Conditions Initiales à l’Identique 2.0 France.

Si vous avez l’oeil vous devriez avoir constaté l’ajout à droite d’un bouton pour faire un don PayPal. L’idée est de compenser les frais d’hébergement du site et d’autre part d’encourager l’écriture de nouveaux billets techniques et tutoriaux car ils me demandent beaucoup de temps et de motivation. Vous êtes libre de m’insulter si ça ne vous plait pas ou de faire un don si vous m’approuvez, je ne contrains personne et je promet de ne pas faire de rappels intempestifs dans les articles.

J’en profite pour annoncer cette semaine l’arrivée d’une partie 2 au billet sur GIT qui est le billet le plus consulté du blog (et ne l’ayant pas rédigé moi-même, mon égo en prend un coup ). Guettez le flux RSS, c’est pour cette semaine !

Dernière information, l’arrivée imminente d’un sous-domaine photo.pierreschambacher.com pour une galerie photo. J’ai fait l’acquisition d’un appareil photo réflex il y a peu et je souhaite publier mes photos pour avoir l’avis d’autres personnes. Les photos seront librement téléchargeables dans une excellente résolution et ce sera une fois encore le système de don qui sera utilisé par les gens qui souhaitent me soutenir ou utiliser mes photos. Il faut bien rembourser l’appareil et les objectifs qui sont très loin d’être gratuits.

Etant donné que je ne suis pas homme à gueuler sans preuve, voici la démonstration de ce que j’avance.

Je vous laisse le temps de lire ce petit bout de code et deviner le résultat logique d’une exécution…
Si vous pensez comme moi, vous vous attendez à ce résultat:

Object: java.lang.String

Integer

Float

Réfléchissons deux minutes.

Nous avons une liste qui contient différents objets, une chaîne de caractère, un entier et un nombre décimal. Notre classe Main présente une méthode polymorphique prenant en paramètre un Object, un Integer ou un Float.
Pour le premier objet la méthode la plus approchante est la méthode avec le paramètre Object.
Pour les deux autres la méthode avec le paramètre de type exact va être appelé du fait que la liaison en java est dynamique et décidée à l’exécution. Le fameux « VIRTUAL » des programmeurs C++.

Voyons le résultat de l’exécution (JVM 1.6 sur MacOS 10.6 dit « Snow Leopard »):

Object: java.lang.String
Object: java.lang.Integer
Object: java.lang.Float

Mais ????!!!! Voilà un résultat qui ferait lacher à nos amis anglo-saxons un virulent « WTF ?! ». Que c’est-il passé ?

Et bien c’est extrêmement facile. Nous nous trouvons devant un manique échec de Java et ses méthodes liées à l’exécution… Le compilateur voit que l’ArrayList contient des instances de Object, il voit une méthode prenant en paramètre un Object, il fait la liaison à la compilation. Dans le langage courant on dirait simplement: JAVA FAIL !

Si vous ne me croyez pas, vous pouvez simplement télécharger le fichier de test ici (en renommant le fichier Main.java évidemment). Pour le principe j’ai changé Object en Number (superclasse de Integer, Float, Double, …) et le résultat est bien sûr le même, comme vous le constaterez là.

Voici une liste de ces composants avec leur syntaxe à l’ancienne, la nouvelle syntaxe et quelques exemples d’utilisation.

Comme d’habitude vous pouvez opter pour la version PDF du tutoriel.

WOString

Rôle

C’est probablement le composant le plus utilisé du framework. Son but est simple, afficher une chaîne de caractère. Vous pouvez l’inclure un peu où vous voulez pour y insérer une chaîne de caractère.

Bindings importants

value: chaîne de caractère que vous souhaitez afficher, tout simplement.
numberFormatter: instance de NSNumberFormatter à utiliser s’il s’agit d’une valeur numérique qu’il faudra parser et/ou formatter.
dateFormatter: chaîne de caractère pour indiquer les informations l’affichage d’une valeur de type date.

Inline tags

<wo:str />
<wo:string>

WOConditionnal

Rôle

Permet d’afficher un bloc selon une condition, par exemple « Afficher ce bloc si l’utilisateur connecté est administrateur ».

Bindings importants

condition: condition à laquelle le code contenu sera affiché. Quelque soit le type de paramètre passé, un cast vers boolean est effectué. Comprenez que false, null, chaîne vide et 0 (zéro) valent FAUX. N’importe quoi d’autre est vrai.
negate: si ce binding est mis à vrai, c’est la négation de la condition qui déclanchera l’affichage du code. Par défaut ce binding est à faux.

Inline tags

<wo:if> … </wo:if>
<wo:conditionnal> … </wo:conditionnal>
<wo:condition> … </wo:condition>

Notez qu’en utilisant ces tags inline vous disposez d’un petit raccourci avec un tag ayant pour sa part negate par défaut à vrai comme son nom l’indique.

<wo:not> … </wo:not>

WORepetition

Rôle

En complément des trois éléments précédents, vous avez avec celui-ci de quoi faire les trois quarts de vos applications. L’élément WORepetition permet de parcourir une liste ou de faire un certain nombre d’itérations. C’est le composant dont le fonctionnement demande le plus d’explication sur son fonctionnement.

Admettons que vous utilisiez le WORepetition avec une liste d’éléments de type User. Vous allez alors mettre en place un binding sur item de type User appelé « currentUser », accessible en lecture et en écriture. À chaque tour de boucle, le setter de ce binding sera appelé afin d’y placer la valeur courante. Ainsi lorsque vous allez vouloir afficher par exemple le nom de votre utilisateur courant, vous utiliserez simplement un binding currentUser.name, donc inutile de vous prendre la tête avec des indices de liste quand vous codez le contenu du composant.

Bindings importants

list: si vous souhaitez itérer sur les composants d’une liste, c’est ici que vous devrez fournir la liste.
item: élément courant pendant l’execution de la boucle.
count: il s’agit d’une alternative à list, permettant d’itérer un nombre de fois précis sans se référer au parcours d’une liste.
index: binding lecture/écriture qui contiendra la valeur i pour la ième itération.

Inline tags

<wo:foreach> … </wo:foreach>
<wo:repeat> … </wo:repeat>
<wo:repetition> … </wo:repetition>
<wo:loop> … </wo:loop>

AjaxUpdateContainer

Rôle

Par la suite, je vais parler de composants Ajax, il m’est donc obligatoire de parler de l’AjaxUpdateContainer. Son principe est très simple, le composant sera par la suite transformé en une zone <div> munie d’un id que vous lui aurez fourni. Vous pouvez alors ajouter à votre page des composants Ajax qui vont déclencher une action sur le serveur, et indiquer l’id de votre AjaxUpdateContainer de façon à ce que le résultat de votre action vienne remplacer son contenu actuel.

Si vous aviez besoin de mettre à jour plusieurs panneaux de votre écran sur une seule action du serveur, regardez AjaxUpdateTrigger

Bindings importants

id: chaîne de caractère qui permet d’identifier votre élément de manière unique dans une page.

Inline tags

<wo:AjaxUpdateContainer> … </wo:AjaxUpdateContainer>

WOHyperlink / AjaxHyperlink

Rôle

Inutile de vous faire un dessin. Il s’agit de liens classiques et ajax.

Bindings importants

action: il est vivement recommandé d’utiliser ce bindings plutôt que href ou pageName car il est plus facile de détecter une erreur dans un fichier Java que dans un fichier HTML.
directActionName: pour appeler une directAction plutôt qu’une action du composant sous-jacent.
string: chaîne de caractère à afficher pour représenter le lien (vous pouvez aussi l’insérer dans les balises)
updateContainerID: pour AjaxHyperlink, partie de la page à rafraichir avec le composant renvoyé par l’action appelée.

Inline tags

Pour le WOHyperlink

<wo:link> … </wo:link>
<wo:hyperlink> … </wo:hyperlink>

Le AjaxHyperlink n’a par défaut pas de raccourci.

<wo:AjaxHyperlink> … </AjaxHyperlink>

WOSubmitButton / AjaxSubmitButton

Rôle

Vous aurez compris que vous avec affaire aux éléments qui vont générer un input de type submit. Ces deux composants doivent se trouver dans un formulaire (créé de préférence à l’aide d’un WOForm, aucun binding important).

Bindings importants

action: le fonctionnement est le même que pour le WOHyperlink à ceci près que les données contenues dans le formulaire contenant le bouton vont être envoyées au serveur, ce qui n’est pas le cas avec le WOHyperlink (ni avec le AjaxUpdateLink).
value: chaîne de caractère à afficher sur le bouton.
updateContainerID: pour AjaxSubmitButton, partie de la page à rafraichir avec le composant renvoyé par l’action appelée.

Inline tags

Pour le WOSubmitButton

<wo:submit> … </wo:submit>
<wo:submitButton> … </wo:submitButton>

Pour le AjaxSubmitButton

<wo:AjaxSubmitButton> … </wo:AjaxSubmitButton>

ERXElse

Rôle

Pas un essentiel du tout mais un apport particulièrement appréciable de Wonder. Souvent lors de l’usage d’un WOConditionnal, on a également un comportement à définir pour le cas où la condition n’est pas satisfaite. C’est une partie de l’origine du binding negate, puisqu’au lieu d’écrire deux conditions, il suffisait d’utiliser deux fois la même et d’utiliser ce binding. Wonder offre une possibilité entre plus simple, le else ! Situé après un WOConditionnal, son contenu ne sera affiché qu’à condition que celle du WOConditionnal ne le soit pas. Ce composant n’a aucun binding.

Inline tags

<wo:else> … </wo:else>

Aller plus loin

Ce tutoriel s’arrête ici. Le but n’est pas de faire toute la chevauchée avec vous mais simplement de vous mettre le pied à l’étrier. J’espère que vous suivez ces tutoriaux en faisant vos propres tentatives à côté et non pas simplement en lisant ces pages l’une après l’autre. La mise en application est très importante pour vérifier que vous avez mémorisé ce qui a été abordé et compris les principes.

Pour aller plus loin dans la création de votre propre application, voici une liste de noms de composants qui vous seront utiles. Vous avez un nom, cherchez simplement comment l’utiliser sur internet et dans le pire des cas, servez vous de la fonction d’auto-complétion d’eclipse pour comprendre le fonctionnement du composant. eclipse est un excellent outil pour apprendre notamment les bindings obligatoires.

Faites attention aux bindings GET et aux bindings GET/SET. Attention également aux chaînes de caractères, qui sont à mettre des fois sur le binding string et des fois sur value. Vous aurez remarqué d’ailleurs qu’il ne faut pas utiliser le même pour le WOHyperlink et le WOSubmitButton. Il n’y a pas vraiment de règle pour savoir lequel des deux il faudra utiliser, la seule chose certaine est que si le binding string existe, c’est celui à utiliser.

WOBody, WOForm, WORadioButton, WORadioButtonList, WOCheckBox, WOCheckBoxList, WOTextField, WOPasswordField, WOText, WOPopUpButton, WOResetButton, WOImage, AjaxModalDialog, …

Tout au long de ce tutoriel je vais considérer que vous avez déjà une connaissance normale du langage Java et d’eclipse. Si tel n’est pas le cas je vous conseille de vous former dans un premier temps sur ces outils car sinon vous risquez d’éprouver quelques difficultés à suivre ce qu’il se passe.

Pour ce tutoriel et les suivants, je m’inspire fortement des screencasts de David LeBer WebObjects, WOLips and Wonder tutorial part 1 et part 2 qui sont disponible sur le site de WOCommunity avec tous les autres screencasts que je vous recommande vraiment.

Vous pouvez aussi utiliser la version PDF de ce tutoriel et si vous souhaitez le traduire je me ferais un plaisir de le publier ici même.

Créer un projet Wonder

Première étape, nous allons créer dans notre joli eclipse disposant du plug-in WOLips un projet Wonder.
Vous êtes habitué à eclipse donc aucune difficulté jusqu’ici: File > New > Wonder Application.

Première étape, le nom du projet. Pour illustrer notre tutoriel, nous allons créer une petite application permettant à un utilisateur de créer sa collection de séries et de se souvenir du dernier épisode regardé. Notre projet s’appellera donc « Series ». Vous pouvez également choisir votre workspace eclipse pour ce projet.

Deuxième étape vous pouvez choisir le package de base de vos classes et de vos composants. Le standart pour le package des composants est d’utiliser le package de base auquel est ajouté .components, c’est à dire que pour un package de base xxx.yyy vous utiliserez le package xxx.yyy.components. Dans notre exemple je vais utiliser comme racine com.pierreschambacher.series.

Etape intermédiaire, si vous avez d’autres projets vous pourrez indiquer que vous les utilisez dans votre nouvelle application. Si vous n’avez pas d’autre projet eclipse cet écran n’apparait normalement pas, s’il apparait choisissez next.

Dernière étape, l’import d’EOModels existants. Nous n’avons pas non plus d’EOModel existant, cliquez donc sur Finish. Pour information cette étape vous permettra d’utiliser un modèle déjà existant.

Vous pouvez voir qu’eclipse vient de créer votre projet avec tout un tas de dossiers, packages et fichiers déjà écrits.

Classes, packages, ressources, …

Faisons un tour des dossiers et fichiers générés pour maîtriser la structure de notre projet.

Sources

Tout d’abord vous remarquez trois classes dans le package de base que vous avez fourni au wizard: Application, DirectAction et Session.

Application

Il s’agit de votre classe main. Peu de choses sont à faire avec ce fichier si ce n’est de la configuration au démarrage comme l’indique le commentaire inséré par le template.

DirectAction

Les direct actions sont des méthodes dites « stateless ». Elles n’ont pas besoin d’une session, bien qu’il soit possible de la transmettre par cookie par exemple, et sont accessible directement par leur URL à tout moment et par n’importe qui. La méthode la plus classique que l’on trouvera dans un fichier de direct action est la méthode d’authentification sur un site web, car on ne souhaite par forcement qu’elle soit couplée à une page en particulier et n’est associée à aucune session.

Session

Comme son nom l’indique il s’agit de la classe qui sera instanciée pour créer des sessions pour les utilisateurs. Les attributs d’instance que vous y ajouté dureront aussi longtemps que la session de l’utilisateur durera. C’est ici généralement que l’on retrouve stocké l’utilisateur connecté et quelques autres informations. Lorsque vous vous trouvez dans un composant WebObjects, la session est simplement accessible à l’aide de la méthode session() qui par défaut demandera un cast vers le type Session de votre projet, le type renvoyé étant une classe de plus haut niveau.

Dans le package components se trouve un unique fichier.

Main

Ce fichier au nom un peu trompeur ne contient pas le main de votre application (il est dans la classe Application, regardez juste au dessus :-p). Il s’agit de la page principale de votre application qui a été gentiment déjà créée pour vous. Ou plutôt une partie du composant Main, voir juste ci-dessous.

Components

À côté du dossier Sources, vous remarquez un autre dossier appelé Components qui contient un élément Main WO, et conjointement dans le package com.pierreschambacher.series.components vous remarquez un Main.java. Sachez donc qu’un composant graphique WebObjects est constitué de plusieurs éléments portant tous le même nom mais des extentions différentes:

• Composant.html: fichier de template contenant du texte, des balises html et des balises WebObjects. C’est le principal fichier sur lequel vous allez travailler.
• Composant.java: fichier de code qui permet de définir le comportement de votre page. N’oubliez pas que vous êtes cependant dans une vue et le code contenu ici devrait être minimaliste.
• Composant.wod: vous allez définir ici la nature des webobjects défini dans votre fichier HTML et mettre en place le binding des variables à l’aide du fichier java, mais j’y reviendrais plus tard.
• Composant.api: définition des bindings visibles depuis l’extérieur de votre composant. Vous pouvez définir qu’un binding est requis pour obliger le programmeur à vous le fournir par la suite.
• Composant.woo: contient des informations comme la version de WebObjects, l’encodage des caractères et la configuration des DisplayGroups. Nous n’aborderons pas ce fichier, inutile d’y toucher.

Libraries

Rien de particulier ici, il s’agit du dossier où déposer les fichiers jar nécéssaires à votre projet avant de les ajouter dans votre Build Path.

Resources

C’est dans ce dossier que se trouve le fichier de configuration Properties. C’est également ici que plus tard nous ajouterons notre modèle mais il est encore trop tôt pour cela.

WebServerRessources

Images, vidéos, fichiers de style CSS … les ressources statiques de votre site vont ici. Vous êtes libre de les organiser dans une hiérarchie de dossier.

woproject

NE TOUCHEZ PAS !! :-p

Run as …

Rien de compliqué pour cette opération. Faites un clic droit sur votre projet, choisissez « Run as… » ou plutôt « Debug as… », puis WOApplication.
eclipse recherche le main et vous demande de lui indiquer lequel choisir, prenez bien évidemment celui qui se trouve dans votre classe Application (dans mon cas dans le package com.pierreschambacher.series).

À cette étape, votre navigateur préféré se lance et affiche le message « Hello World ». Bravo vous venez de lancer votre première application WebObjects.

Modifier un composant

Maintenant que vous avez pris connaissance de l’arborescence de votre nouveau projet, nous allons essayer de le modifier un petit peu !

REMARQUE IMPORTANTE: dans la mesure du possible lorsque vous avez une instance de l’application en train de fonctionner et que vous modifiez du code, WOLips va essayer de modifier votre instance « à chaud ». Des fois votre modification permettra un tel remplacement mais des fois le changement sera trop important pour le permettre et vous aurez une fenêtre d’alerte « Hot Code Replace Failed » vous demandant quoi faire. Ne vous inquietez pas, contentez vous de cliquer sur « Terminate » afin de tuer l’instance courante. Vous aurez simplement à relancer l’application une fois vos modifications terminées.

Ouvrez le dossier Components et double-cliquez sur Main et sa petite icône de pièce de puzzle. Eclipse ouvre une fenêtre partagée horizontalement en deux. La partie haute contient du HTML tout ce qu’il y a de plus classique et la partie basse est vide complètement.

Mon premier WebObject

Vous remarquez dans le code HTML une message « Hello World ». Supprimez ce texte et rentrez à la place la balise suivante:

<webobject name = « helloString » />

Si vous sauvegardez maintenant, vous remarquez d’eclipse n’est pas très heureux parce que vous utilisé un WebObject helloString qu’il ne connait pas. Ajoutez donc les lignes suivantes dans la partie basse de la fenêtre jusqu’à présent encore vite:

helloString: WOString {

}

Sauvegardez et vous remarquez qu’eclipse n’est toujours pas heureux parce que vous utilisez un WOString sans définir le binding « value » qui est requit ! Insérez donc entre les accolades:

value = « Hello World ! »;

Et cette fois si après sauvegarde, eclipse est heureux. Relancez l’application et vous devriez avoir votre Hello World ! affiché dans votre navigateur préféré. Vous pouvez changer la chaîne de caractère pour ce que vous voulez, sauvegarder et actualiser la page, vous remarquez que le message affiché dans le navigateur change !
Cependant sachez qu’il existe deux façon d’écrire les templates WebObjects. Vous venez d’utilisé l’ancienne façon, voyons à présent la nouvelle écrire apportée par le projet Wonder et que personnellement je préfère.

Supprimez complètement le contenu de la fenêtre du bas, le fichier WOD. Dans le fichier HTML, supprimez votre balise <webobject> et remplacez la par celle-ci:

<wo:str value = « Hello World ! » />

Vous remarquez que l’on a plus besoin de nommer notre variable ce qui je vous l’assure est un gros point positif. De plus à l’usage cette notation est plus pratique pour relire un fichier et savoir rapidement ce qu’il fait car on sait immédiatement ce que fait une balise sans avoir à consulter le WOD. Relancez l’application pour vérifier que tout va bien.

Un peu de dynamisme

Afficher une chaîne de caractère, c’est bien mais on voudrait pouvoir afficher quelqu’un d’un peu plus dynamique. Nous sommes au XXIème siècle quand même !

Chaîne de caractère

Dirigez vous vers votre fichier Main.java. Ajoutez une méthode currentTime renvoyant un objet String comme suit:

public String currentTime() {
return new java.util.Date().toString();
}

À présent dans votre fichier Main.html, remplacez dans la balise wo:str le value= »Hello World ! » par value= »$currentTime ». La présente du caractère $ indique qu’il s’agit d’un binding. WebObjects va alors rechercher dans le fichier Java:

1. une méthode getCurrentTime renvoyant un objet et ne prenant aucun paramètre
2. une méthode publique nommée currentTime, renvoyant un objet et ne prenant aucun paramètre
3. un attribut public nommé currentTime

Vous aurez compris dans notre cas que WebObjects sera satisfait de trouver notre méthode fraichement créée. Dans le cas où plusieurs de ces éléments existent, ils sont choisis dans l’ordre indiqué, c’est donc une méthode get qui sera choisie en premier.

Relancez l’application, vous voyez l’heure actuelle affichée dans votre navigateur. Si vous actualisez la page, l’heure est mise à jour.

Une date

Nous avons renvoyé une chaîne de caractère afin d’afficher la date dans notre fenêtre. Cependant il existe une façon un peu plus propre de faire la même chose.

Changez la signature de la méthode currentTime, qui ne renvoie plus un objet String mais un objet NSTimestamp. Il suffit de créer une nouvelle instance de cet objet:

public NSTimestamp currentTime() {
return new NSTimestamp();
}

Vous constatez alors que votre page affiche l’heure actuelle, mais il faut bien le dire, dans un format absolument dégueulasse ! Il faut à tout prix remédier à cela.
Non non, modifier la méthode dans le fichier java n’est pas une bonne idée, ajoutez plutôt l’attribut dateFormat à votre balise wo:str comme suit:

<wo:str value = « $currentTime » dateformat = « HH:mm:ss dd/MM/yyyy » />

Actualisez la page … c’est mieux non ?

Un peu d’Histoire

WebObjects a été développé par la société NeXT en Objective C. Les classes utilisées en Objective C sont précédées par NS (NeXT Step). La société est rachetée plus tard par Apple mais les classes garderont historiquement ce préfixe. À partir de la version 4 de WebObjects, Java remplace petit à petit l’Objective C jusqu’à l’avoir complètement remplacé aujourd’hui mais afin de ne pas perdre les personnes ayant développé pendant longtemps en Objective C, les méthodes du framework ont été porté vers Java avec leur nom et leurs méthodes. Ce choix est fait au détriment en revanche des programmeurs Java qui devront apprendre à remplacer leurs classes habituelles par celles de WebObjects.

Comme vous l’avez vu dans l’exemple précédent, il faudra utiliser NSTimestamp en lui et place d’une Date.
Pour les tableaux, oubliez l’ArrayList, vous allez utiliser les classes NSArray et NSMutableArray. Pourquoi deux classes me direz vous ? Comme leur nom l’indique, l’un est un tableau, l’autre un tableau modifiable. Si vous avez besoin en paramètre d’un tableau que vous n’allez pas modifier, indiquez qu’il s’agit d’un NSArray, mais si vous avez l’intention de changer son contenu utilisez NSMutableArray. Si vous avez un NSArray et que vous tenez absolument à pouvoir effectuer des modifications sur ses éléments vous disposez de la méthode mutableClone qui créera un clone de votre NSArray en version Mutable.
Pour les dictionnaires, oubliez la HashMap et dites bonjour à NSDictionary et NSMutableDictionary . Je vous renvoie au paragraphe précédent pour le Mutable/non Mutable.
Si vous aimez utiliser les Sets, utilisez NSSet et NSMutableSet.

Interaction avec l’utilisateur

Suffit d’afficher la date dans son navigateur sauf si vous êtes en train de créer horloge-parlante.com ! Nous allons inviter l’utilisateur à rentrer son nom et le saluer pour le remercier.

Mise en place

Modifiez votre fichier HTML pour obtenir le résultat suivant dans la partie body:

<wo:form>
Enter your name: <wo:textfield value = « $username » />
<wo:submit value = « Say hi » action = « $sayHi » />
</wo:form>
<br />
<h1>Hello <wo:str value = « $username » /> !</h1>

Si vous sauvez, vous constaterez d’eclipse n’est pas vraiment heureux parce qu’il ne trouve pas username et sayHi dans votre fichier Java. Nous allons résoudre le problème. Ne quittez pas le fichier HTML, maintenez le bouton Command enfoncé et placez votre souris sur $username, vous remarquez que le nom se transforme en lien. Si vous cliquez, eclipse vous indique qu’il ne trouve pas username dans votre fichier Java et se propose de le créer pour vous. Voyons les différents éléments de cette boîte de dialogue

• les boutons radio vous permettent de choisir si votre binding est un objet, un NSArray d’objets ou un NSMutableArray d’objet.
• le champ texte permet de choisir le type de notre objet, ici java.lang.String nous convient parfaitement.
• les checkbox suivantes permettent de demander la génération d’un attribut, d’un get et d’un set, ce qui est coché par défaut. Vous pouvez choisir de mettre « get » ou non sur le getter avec la dernière checkbox.

Dans notre cas tout est configuré comme il faut, faite simplement OK et vous vous retrouvez dans le fichier Java où vous constatez qu’eclipse s’est chargé de générer un attribut privé username, une méthode publique username qui renvoie cet attribut et une méthode setUsername qui s’occupe de peupler l’attribut. Concernant username eclipse est heureux.

Retournez dans le fichier HTML, command-clic sur $sayHi qui est une action et remarquez que cette fois ci eclipse propose de créer une méthode renvoyant un objet de type WOActionResult. Cliquez sur OK la configuration par défaut nous convient. Voici la méthode générée:

public WOActionResults sayHi() {
return null;
}

Petite explication. Les actions sont des méthodes qui permettent de définir un comportement sur une action de l’utilisateur, par exemple ici le clic sur le bouton submit.
L’objet retourné par une action est très important car il définit la prochaine page à afficher. Si la méthode retourne null, alors c’est la même page qui est regardée, sinon c’est la page retournée qui sera envoyée au client. Pour créer une page différente, utilisez la méthode pageWithName qui possède deux signatures. Nous y reviendrons un peu plus tard dans ce tutoriel dans la section « Deuxième composant ».

Dans le cas présent, il suffit de recharger la page courante, donc laissez la méthode générée telle quelle. Sauvegardez tout et lancez l’application, ça fonctionne, magique non ?

Explications

Vous n’avez pas l’impression d’avoir fait grand chose et pourtant ça marche. Faisons un petit retour sur le fonctionnement de cette page.

Concernant le wo:str, vous voyez qu’il y a un binding de value sur username, donc de façon très simple au moment du chargement de la page la méthode username est appelée et insérée dans la page. Rien n’a changé par rapport à tout à l’heure.

Pour le wo:textfield et le wo:submit, vous avez mis en place un binding à l’aide de l’élément value du textfield sur username. Donc au chargement de la page la valeur de username est utilisée pour remplir le textfield, mais dans le cas d’un retour d’informations, comme c’est le cas avec le clic sur le bouton submit, c’est la méthode SET qui est appelée pour modifier la valeur dans le fichier Java avec la valeur que l’utilisateur a mis dans son navigateur. Comme l’action du bouton submit renvoie null, la même page est rechargée avec cette fois ci username différent de null.

Vous l’aurez compris, certains bindings fonctionnent uniquement en GET, comme le value du wo:str, et d’autres fonctionnent en GET et SET comme le value du textfield. Consultez la documentation pour savoir à quel type de binding vous avez affaire, de toute façon c’est généralement assez explicite. Dernier type de binding, les actions pour réagir aux actions utilisateurs. Quelque chose que vous remarquez rapidement, votre fichier HTML a connaissance des éléments publiques de votre fichier Java, mais ce dernier ignore totalement l’existence de la page HTML. Tout fonctionne par bindings, il faudra vous habituer.

Améliorations

Première chose, vous avez remarqué qu’au premier chargement il est simplement affiché « Hello  ! » ce qui est un peu bête. Ajoutez sur votre wo:str le binding suivant:

valueWhenEmpty = « World »

Rafraichissez la page. Mieux non ?
Deuxième petite amélioration-démonstration, sur le binding value du wo:str, changez le pour mettre ceci:

value = « $username.toUpperCase »

Rafraichissez de nouveau. Vous aurez compris, rien n’empêche dans un binding d’utiliser un chaînage de méthodes.

Deuxième Composant

Dernier point que nous aborderons sur ce tutoriel, nous allons créer un deuxième composant et créer un lien entre les deux.

Sur le dossier Components, faite un clic droit New > WOComponent. Entrez comme nom « About » et assurez vous que la superclass est er.extensions.components.ERXComponent et que la case « Create HTML contents » soit cochée. Vous avez votre deuxième composant WebObjects. Mettez ce que vous souhaitez dans le HTML pour reconnaitre votre page About puis retournez dans votre page Main. Ajoutez un nouveau composant dans le HTML comme ceci:

<wo:link string = « About » action = « $openAbout » />

Comme tout à l’heure, command-clic sur openAbout et laissez eclipse créer le squelette de la méthode pour vous. Dans le code remplacez le return null par ceci:

return pageWithName(About.class);

Vous disposez également de la signature suivante:

return pageWithName(About.class.getName());

Lorsque vous utilisez la méthode pageWithName, utilisez toujours le style MonComposant.class et jamais « MonComposant ». Cela au cas où vous souhaiteriez renommer votre composant un jour. La méthode pageWithName va instancier votre composant et l’initialiser, et en étant retourné par l’action vous indiquez à WebObjects qu’il s’agit de la prochaine page à afficher. Compilez et lancez l’application et observez le résultat.

Conclusion

Suite à ce tutoriel vous devriez avoir compris comment créer une page, y insérer du HTML et des composants mélangés. Vous savez mettre en place des bindings avec le code Java, changer la page courante, créer des données dynamiques. Vous êtes cependant un peu léger concernant les composants que vous connaissez, le prochain tutoriel sera consacré à la liste des principaux composants que l’on utilise 80% du temps.

Nom dans le dock

Ici c’est la manoeuvre la plus simple. Repérez dans votre dock le eclipse que vous souhaitez renommez, clic droit, [Snow Leopard] menu Options, [/Snow Leopard] Afficher dans le Finder.
Vous devriez voir votre Eclipse.app. Renommez ce fichier avec le nom que vous souhaitez, si par exemple comme moi vous avez un eclipse spécialement pour WOLips, appelez le WOLips.app. Pour que le changement prenne effet immédiatement, supprimez l’ancienne icône du dock et cliquez-glissez l’application renommée vers le dock.

Icône dans le dock

Reproduisez la manoeuvre précédente pour arriver jusqu’au fichier .app, faites un clic droit dessus et choisissez « Affichier le contenu du paquet ». Une nouvelle fenêtre s’ouvre avec un dossier « Contents » qui contient lui-même un dossier « MacOS » et un dossier « Resources ». Ouvrez le dossier Resources et vous êtes devant l’icône utilisée par eclipse au format icns. Je vous conseille de renommer cette icône en Eclipse_old.icns afin de pouvoir éventuellement la remettre en place un jour, puis placez dans ce dossier l’icône que vous souhaitez utiliser avec pour nom « Eclipse.icns ».

Le format à utiliser n’est pas jpg ou png mais icns. Je vous recommande cet utilitaire pour transformer vos images en fichier icône. Privilégiez le format png en entrée avec une bonne gestion de la transparence et une bonne résolution (idéalement 512×512 minimum) pour ne pas avoir une icône dégueulasse dans votre joli dock.

Nom dans la barre de menu

Vous remarquerez que malgré que vous ayez changé le nom du fichier .app, l’application une fois lancée s’appelle toujours Eclipse dans la barre de menu (tout en haut à gauche, à côté de l’icône Pomme).
Pour changer cela, direction le fichier eclipse.ini qui se trouve dans le fichier .app (reproduire la manoeuvre indiquée pour le changement d’icône) dans le dossier Contents/MacOS. Modifiez ce fichier avec un éditeur texte quelconque et ajoutez simplement une ligne:

-Xdock:icon=../Resources/Eclipse.icns
-Xdock:name=WOLips

Si vous regardez votre fichier la ligne Xdock:icon existe déjà. Il suffit d’ajouter -Xdock:name= suivi du nom que vous souhaitez utiliser pour votre application, probablement le même que celui que vous avez donné à l’icône dans le dock.

Mémoire autorisée pour l’application

Selon l’usage que vous faite de votre instance d’eclipse, vous pouvez avoir des besoins particulier en mémoire. Si par exemple vous utilisez le plug-in Flex Builder 3 et sa gestion pitoyable de la mémoire, vous risquez d’être confronté à des ralentissements du fait du trop faible espace mémoire dédié à l’application. Inversement, vous utilisez peut-être plusieurs instances d’eclipse en même temps et vous tenez absolument à ne pas swapper, et vous souhaitez donc que chaque instance utilise une quantité maximum de mémoire précise qui évitera de déborder de votre quantité de RAM.
Retournez donc dans le fichier eclipse.ini situé dans Eclipse.app/Contents/MacOS et repérez les deux lignes suivantes:

-Xms128m
-Xmx1024m

Si vous n’avez rien touché les valeurs après Xms et Xmx devraient différer ce celles-ci. Le chiffre suivant Xms est la quantité minimum de mémoire allouée à eclipse, et celle après Xmx est la quantité maximum qui lui sera dédiée. Étant donné que je dispose de 4Go de RAM que j’exploite peu, la quantité maximum est réglée sur 1Go afin d’éviter des ralentissements dans eclipse. À vous de juger de la quantité adéquat pour votre machine et votre utilisation d’eclipse.

Appel aux lecteurs

Je suis toujours à la recherche d’une personnalisation supplémentaire. Malgré tous ces changements, Spaces identifie toujours les deux instances d’eclipse comme une seule application. Il est donc impossible d’indiquer que l’instance « eclipse normal » va sur la Space 1, et que l’instance « eclipse WOLips » va sur le Space 2. Si un lecteur passant par là sait ce qu’il faut toujours pour que Spaces soit capable de distinguer les deux applications, je suis preneur !! Laissez un commentaire, merci . Si vous avez d’autres idées de personnalisation, partagez aussi d’ailleurs.