Remarques générales

Il est important de rester dans le cadre du TP. En effet, les outils utilisés sont des outils développés dans des équipes de recherche. Ces outils sont encore en développement et ils comportent des bugs

Manipulation d'Amusing

Vous trouverez ci-après une image représentant l'application avec les différentes zones de travail de l'IDE.

Première étape : Ouverture d'un fichier existant

Vous trouverez des exemples d'IHM décrites dans SunML. Pour se faire, il suffit d'aller dans File->Open puis dans le répertoire example->sunml_wml_tests présent dans le dossier où se trouve Amusing.

Une fois le fichier chargé, pour pouvoir visualiser l'IHM décrite, il faut d'abord faire un clic-droit sur le second élément qui se situe dans le cadre de gauche et cliquer sur Select. L'image suivante représente ce que vous devez réaliser.

Seconde étape : Visualisation en Java Swing

Après avoir réalisé les étapes précédentes, il suffit de sélectionner l'élément qui est apparu dans le cadre de droite. Après avoir sélectionné l'élément, il faut cliquer sur HMI Swing. Une fenêtre apparaît alors qui correspond à la visualisation de la description SunML.

Troisième étape : Vers la composition de description SunML

Avant toute chose, il faut ouvrir un second fichier de description SunML afin de pouvoir faire une composition. Pour se faire, il faut répéter ce qui a été fait en étape 1. Ensuite, il faut changer d'onglet dans le cadre de droite et sélectionner Manual Fusion. Pour effectuer la composition, il faut sélectionner les deux éléments présents à droit, puis choisir Union et enfin cliquer sur Merge. Le résultat de la composition apparaît dans le cadre de droite et peut donc être visualisé.

Manipulation de SketchiXML

Création d'un projet

A l'ouverture du logiciel, il est possible de paramétrer le projet. Une fois le projet créé, une grille apparaît qui correspond à la zone de travail.

Un peu de dessin

Le concept de cette application est de dessiner les différents éléments qui vont composer l'application. On se retrouve dans le cas où ce sont des designers ou des utilisateurs finaux. Ce logiciel n'est pas réellement destiné aux concepteurs.

Les images suivantes présentes les différentes possibilités de dessins qu'il est possible de faire qui correspondent à des widgets graphiques. Il ne restera donc plus qu'à se lancer et à dessiner l'interface que l'on souhaite.



Rendu des dessins

Une fois l'interface réalisée, il est possible de la visualiser. Pour se faire, il faut aller dans Preview -> Preview Current UI. Le but de cet outils est de pouvoir fournir une première base de travail pour les concepteurs. L'intérêt maintenant est donc d'exporter la création de telle sorte de pouvoir l'utiliser dans l'autre logiciel qu'est GrafiXML. Il suffit de cliquer sur l'icône XML pour exporter l'interface au format usixml.

GrafiXML

Pré-requis

Pour ouvrir ce qui a été exporté précédemment, il faut rajouter ajouter un fichier dans le répertoire qui contient l'interface exportée. Ce fichier doit avoir le même nom que la description mais avec pour extension gxs. Le fichier à renommer : fichier.gxs. Il sera alors possible d'ouvrir le fichier exporté.

Ouverture d'un projet

On va maintenant ouvrir le projet qui a été créé précédemment dans SketchiXML. Pour se faire, il faut cliquer sur Open A Project. La fenêtre de sélection de fichiers apparaît vide, c'est normal, il faut cliquer sur Open et le projet va s'ouvrir avec l'interface créée précédemment.

Création d'un projet

Il suffit de cliquer sur New. Il faudra alors définir un nom de projet et une langue. Une fois ceci fait, il sera alors possible de finaliser la création du projet et commencer à créer l'interface.

Création/Manipulation des Widgets

Toute la manipulation se fait par glisser/déposer. La première chose à faire est d'ajouter une fenêtre (Window) qui sera le conteneur des différents éléments graphiques que l'on voudra mettre dedans. Il est également possible de spécifier un layout qui sera utilisé par la fenêtre.

Edition des caractéristiques des éléments

Chaque élément peut être modifié. Les caractéristiques de ceux-ci apparaissent dans un menu vertical. La modification de ses options va également modifier le fichier de description généré.

Visualisation

Pour visualiser, deux méthodes, soit en allant dans Edit -> Preview , soit en utilisant le raccourci Maj + F10. Enfin en cliquant sur l'onglet XML Editor, il est possible de visualiser le fichier XML généré suite à la création de l'IHM.

Pour aller plus loin

Il est possible d'exporter le résultat obtenu afin d'abtenir du code Java ou du code XHTML. Pour se faire, il faudra installer d'autres programmes ou plugin que vous trouverez à l'adresse suivante : www.usixml.org dans la rubrique Tools -> Generator