Archive

Archives pour la catégorie ‘Tatami’

Prototypage avec Axure RP Pro 5.5

J’ai fait une petite étude pour analyser les outils de prototypages existants. Le but étant de voir quelle application utiliser pour faire des maquettes pour l’IHM d’une application Web.

Il y a plusieurs outils de prototypage qui permettent de faire ceci (Balsamiq, WireframeSketcher, Axure, …). Parmis les outils existants, ma préférence se porte sur Axure RP Pro.

Axure est un outil payant qui permet de faire des maquettes interactives.

Ses points positifs:

  • La prise en main est très facile. Son interface est conviviale: Voici un aperçu de l’environnement de travail:

axure1

Il y a plusieurs éléments disponibles comme des text area, des combo box, des boutons etc… Il suffit de faire un drag and drop et de changer les couleurs, la taille comme on veut.

  • Les maquettes créées sont interactives, il est donc possible de cliquer sur les boutons, d’ouvrir des combobox et demander des actions associées à ces éléments (comme dire que quand on clique sur le bouton on va à telle page etc)
  • Il est possible d’ajouter des notes, des commentaires aux pages qui seront disponibles dans le navigateur
  • Il est possible et facile de créer ses propres widgets et les réutiliser dans différentes maquettes
  • On peut créer des pages « master » réutilisables pour toutes les pages qu’on crée pour l’application (comme un master « theme » qui contient le header, footer et le menu de l’application)
  • Il existe également une version admin (ax-admin), qui permet de travailler en interactif avec le client. Il peut faire ses commentaires et voir les changements en temps réel.

Voici un exemple de prototypage interactif pour une page d’identification:

Pour l’identification nous avons un formulaire avec un champ e-mail et un champ mot de passe:

auth1

Le résultat de cette identification peut être « réussi », dans quel cas on passerait à la page suivante, ou bien « échoué » qui nous afficherait un message d’erreur.

Dans le prototype utilisé, quand on clique sur le bouton « S’identifier », on nous demande si nous voulons simuler le cas d’une identification réussie ou le cas inverse. Si l’identification réussit, on passera à la page suivante et si on choisit « Identification échouée » nous aurons l’écran suivant:

authfailure

Il est donc possible, de cette façon, de simuler les fonctionnalités attendues de l’application finale.

Ses points négatifs:

  • Les maquettes créées sont « trop » belles et réalistes. Donc le client, en voyant ses maquettes, peut avoir l’impression que l’application est déjà codée et qu’il ne reste plus grand chose à faire. Ce serait bien d’avoir un theme « pencil » qui nous permettrait de faire les mêmes choses mais avec un look « dessiné sur papier ».

Categories: Outillage, Tatami Tags: ,

GWT 1.6.2 RC disponible

GWT 1.6.2 RC est disponible en téléchargement, cependant Google lui annonce un cycle de vie très court. Peut être que d’ici 2 à 3 semaines l’équipe GWT annoncera enfin leur nouvelle release stable.
La migration vers cette nouvelle release aura apparemment un certain coût, certaines API sont devenues « deprecated » étant donné que la gestion des évènements a été entièrement revue dans cette release.

L’autre grande nouveauté est l’utilisation du serveur embarqué Jetty et non plus Tomcat en mode Hosted…

Affaire à suivre donc…

Google Web Toolkit et Dojo : Tatami version 1.3

Logo OD labs projet soutenu par Objet Direct
Tatami est le projet Open Source d’Objet Direct pour le développement d’applications GWT. Une nouvelle version est arrivée mi décembre, la version 1.3. C’est effectivement notre troisième mouture depuis la création du projet (été 2007). Rappelons que Tatami a l’ambition majeure d’encapsuler le toolkit JavaScript nommé Dojo (www.dojotoolkit.org) afin de fournir les richesses de cette immense librairie en GWT.
Le projet est hébergé sous Google Code : http://code.google.com/p/tatami/
Dans cette  dernière version beaucoup de points ont été abordés, que ce soit en termes de nouveaux composants, conception ou de livraison.
Ainsi, voici une liste des nouvelles fonctionnalités disponibles :

  • Encapsulation de la version de  1.2.3  de Dojo.
  • Intégration de la nouvelle API pour la DataGrid.
    Dojo 1.2.1 arrive avec de nouvelles fonctionnalités pour la DataGrid ainsi que quelques changements dans l’API.
  • API  pour la gestion de Drag And Drop.
    Intégration de l’API Dojo pour effectuer du Drag and Drop entre les composants.
  • API pour la réalisation de charting.
    Création de diagramme en bâtons, camembert, nuages… avec différents effets.
  • De nouveaux Widgets :
    • Un  BorderContainer.  Comme le DockPanel GWT mais utilisant le layout Dojo,  l’accessibilité est ainsi améliorée.
    • Le widget Tree de Dojo.
  • API pour la gestion des thèmes Dojo :
    Plus besoin de rajouter dans le fichier bootstrap du module GWT la classe CSS dans l’élément body. Les thèmes disponibles sont ceux de Dojo :

    • Tundra
    • Soria
    • Nihilo

Ci-dessous un exemple pour utiliser le thème Nihilo avec le thème chrome des composants GWT.

<inherits name= »com.google.gwt.user.User »/>
<inherits name= »com.google.gwt.user.theme.chrome.Chrome »/>
<inherits name= »com.objetdirect.tatami.Tatami_dojoAll »/>
<inherits name= »com.objetdirect.tatami.theme.Nihilo »/>

On peut aussi changer de thème  de façon programmatique :


Tatami.applyTheme(Tatami.NIHILO_THEME,false);

  • Optimisation des modules Dojo chargés selon les besoins du développeur.
    Les versions précédentes de Tatami utilisaient le chargement dynamique des scripts Dojo afin de créer les différents objets. Cette approche pouvait être pénalisante pour un utilisateur ne souhaitant utiliser qu’un module spécifique comme le charting, gfx ou uniquement des widgets car beaucoup de requêtes sont envoyées. Afin d’optimiser cela, Dojo propose un outil permettant de créer des modules JavaScript chargeant les ressources nécessaires qui éviteront ainsi toutes ces requêtes.  C’est pourquoi, plusieurs modules GWT existent désormais dans Tatami :

    • Tatami_Base : Tatami sans Dojo, le framework Dojo ne sera pas chargé, YUI non plus. L’intérêt de n’utiliser que ce module n’a pas vraiment de sens pour le moment.
    • Tatami_DojoBase : Tatami et Dojo avec chargement dynamique de tous les objets. Dans ce module, le drag and drop YUI n’est pas possible.
    • Tatami_DojoCharting : Tatami et Dojo avec une optimisation des chargements des objets pour effectuer du charting.
    • Tatami_DojoGFX :  Tatami et Dojo avec une optimisation des chargements pour l’utilisation du package gfx.
    • Tatami_DojoWidget : Tatami et Dojo avec une optimisation des chargements pour l’utilisation des widgets (DatePicker, DataGrid…).
    • Tatami_DojoALL : importe toutes les modules d’optimisation de chargement. Ce module impliquera un chargement plus long pour l’application la première fois mais une création des composants plus fluide.
    • Tatami_YUI : Tatami et les scripts YUI pour effectuer du Drag and Drop. Dojo ne sera pas chargé.
    • Tatami : Ce module importe les modules suivant : Tatami_Base, Tatami_DojoBase, Tatami_YUI ainsi que le thème Tundra. On reste donc en chargement dynamique par défaut avec le thème tundra.

Un utilisateur de Tatami ne souhaitant utiliser que le module de charting pourra optimiser le chargement de ses composants dans l’application en important le module Tatami_DojoCharting par exemple.

  • Refonte du packaging du projet :
    Tatami est maintenant découpé en 6 sous-projets.

    • TatamiJS : projet concernant la gestion des versions de Dojo, YUI etc…  ainsi que les différents builds possibles pour optimiser le chargement des objets Dojo. En clair, dans ce projet se trouvent toutes les librairies JavaScript utilisées.
    • Core : Développement des différents composants GWT faisant partie du projet Tatami. Ce projet est dépendant du projet TatamiJS évidemment.
    • Tests : Projet permettant d’effectuer les tests sur les différents composants en utilisant HTMLUnit.
    • TestUtil : Projet contenant différentes classes « Helper » pour le projet tests.
    • Demo : Projet de type showcase, démontrant les différents composants de Tatami.
    • Tatamix : Ce projet est une extension de Tatami. Dans ce projet on va trouver des widgets « expérimentaux » c’est à dire des widgets non industrialisés, mais pouvant être tout de même très utiles aux développeurs. Dans ce projet on trouve par exemple : Un framework HMVC (Hierarchical Model View Component) pour faciliter le développement des applications GWT, divers widgets natifs GWT comme GlassDialog, OptionPanel, Loader, Title etc… ou simplement des widget Tatami étendu ou faisant partie d’une composition comme ColorEditor. Le projet TatamiX est distribué dans un jar à part, mais dépend d’une version de Tatami.
  • Tatami-1.3  est toujours livré sous un jar contenant toutes les dépendances JavaScript (Dojo, YUI).
    La documentation utilisateur est maintenant disponible en ligne directement : TatamiUserDocumentation.html ou en version imprimable : TatamiUserDocumentation.pdf. Le projet utilise l’outil Lyx pour générer les différentes documentations. Lyx est un outil WYSIWYG basé sur LaTeX.
    Les démos en ligne de la version sont disponibles ici : showcase et TatamiPlayer.