Dashlet spécifique HelloWorld 1 (1/3)

Introduction

Cet article fait directement suite à celui-ci.

Structure du projet

Le projet apparaît comme cela dans un IDE :

Bien sûr, la première chose à faire est de lire avec attention le fichier README.txt, et éventuellement les commentaires du fichier build.xml

C’est fait ? OK.

Que voit-on dans ce projet ?

• Vos propres web scripts doivent toujours figurer dans config/alfresco/site-webscripts, mais vous devriez definir votre propre package sous cette arborescence. L’exemple ici montre org/alfresco, mais vous devriez changer cela avec votre nom de package.
• Le répertoire source/web n’est pas utilisé ici, mais vous permet d’inclure des fichiers de ressources côté client comme des CSS, des fichiers javascript, ou encore des images (il n’y en a aucun dans notre exemple)
• /lib contient deux librairies liées au framework web YUI. Pour l’instant, nous allons laisser ces fichiers de côté, qui ne servent aucunement dans nos modules HelloWorld.

Ainsi, nous pouvons déduire que le code de la dahlet consiste essentiellement en trois fichiers : hello-world.get.desc.xml, hello-world.get.html.ftl, hello-world.get.properties

Développement du webscript de présentation

Comme vous le savez sans doute, une interface qui s’appuie sur le framework Spring webscript peut utiliser des “data webscripts“ (webscripts de données) ou des “presentation webscripts“ (webscripts de présentation). Si cela ne vous dit rien, vous pouvez comprendre le principe à cette page :

http://wiki.alfresco.com/wiki/Web_Scripts

Etant donné que le dashlet que nous souhaitons développer ne fera qu’afficher un message choisi (sans aucune interaction avec l’entrepôt), c’est donc un webscript de présentation que nous allons concevoir.

En supposant que vous connaissez donc ce framework, attaquons par la conception du fichier descripteur hello-world.get.desc.xml.

Fichier descripteur du webscript de présentation

<webscript>

<shortname>Hello World</shortname>

<description>Displays Hello World text to the user</description>

<family>dashlet</family>

<url>/components/dashlets/hello-world</url>

</webscript>

A noter :

- dashlet : il FAUT identifier la famille du webscript. Ici, on choisit “dashlet”, mais on aurait pu restreindre le type de dashlet en annotant “site-dashlet” ou bien “user-dashlet”.

- components/dashlets/hello-world : il n’y a aucune structure de chemin particulière ici, vous auriez pu choisir n’importe quoi comme “/mytutorial/test/dashlet/anything” . Cependant, une bonne pratique est d’utiliser un préfixe unique pour vos développements spécifiques : /components devrait être réservé au code Alfresco mais vous pourriez choisir /mycompany/components pour vos développements spécifiques

Fichier de présentation du webscript :

Il faut ensuite créer le fichier de “vue” (dans la conception Modèle – Vue – Contrôleur) qui est un template freemarker.

Pour bien comprendre, commençons avec un template aussi simple que possible.

hello-world.get.html.ftl :

HELLO

Même avec ce contenu aussi simple, vous pouvez compiler et installer votre dashlet, et vous aurez quelque chose qui fonctionne (même si ce n’est pas bien joli) :

Tentons maintenant de concevoir quelque chose d’un peu plus esthétique, en utilisant les références des feuilles de style CSS de Share. On peut également définir une barre de titre pour le dashlet.

hello-world.get.html.ftl :

<div class="dashlet">

<div class="title">Hello World!</div>

<div class="detail-list-item first-item last-item">

<span>Hello</span>

</div>

</div>

On dispose désormais d’un dashlet plus stylisé, mais nous apercevons qu’il n’est pas redimensionnable. Nous allons donc à présent ajouter cette capacité au dashlet, en utilisant l’objet javascript Alfresco.widget.DashletResizer, ainsi qu’une balise

pour encadrer la section redimensionnable du dashlet.

hello-world.get.html.ftl :

<script type="text/javascript">//<![CDATA[

new Alfresco.widget.DashletResizer("${args.htmlid}", "${instance.object.id}");

//]]>

</script>

<div class="dashlet">

<div class="title">Hello World!</div>

<div class="body scrollableList"

<#if args.height??>style="height: ${args.height}px;"</#if>

>

<div class="detail-list-item first-item last-item">

<span>Hello</span>

</div>

</div>

</div>

Le résultat est bien là :

Internationalisation du webscript de presentation :

Nous devons produire un dernier effort pour internationaliser le dashlet. Par exemple, on souhaiterait traduire le titre et le message de celui-ci dans différentes langues.

Pour parvenir à cela, il nous faut modifier légèrement le template freemarker, et créer les fichiers de traduction (message bundles).

hello-world.get.html.ftl :

<script type="text/javascript">//<![CDATA[

new Alfresco.widget.DashletResizer("${args.htmlid}", "${instance.object.id}");

//]]>

</script>

<div class="dashlet">

<div class="title">${msg("header")}</div>

<div class="body scrollableList"

<#if args.height??>style="height: ${args.height}px;"</#if>

>

<div class="detail-list-item first-item last-item">

<span>${msg("label.hello")}</span>

</div>

</div>

</div>

hello-world.get_fr.properties :

header=Bonjour le monde !

label.hello=Bonjour

hello-world.get.properties :

header=Hello world !

label.hello=Hello

Si vous dénichez des coquilles ou des erreurs dans cet article, n'hésitez pas à le signaler dans les commentaires, je m'empresserai de corriger cela.

A venir bientôt, le guide de conception pour HelloWorld 2, pour pousser les choses un peu plus loin ...