Un Éditeur Collaboratif pour le Framework MaDViWorld

Transcription

1 Université de Fribourg Département d Informatique Travail de Bachelor Un Éditeur Collaboratif pour le Framework MaDViWorld Sanaa Maati sanaa.maati@unifr.ch Responsable : Prof. Jacques Pasquier-Rocha Assistant: Patrik Fuhrer Décembre 2003

2 Table des matières 1 Introduction Présentation du travail Conventions Structure du document Un objet simple Présentation de l objet Guesser But de l objet Guesser Règles du jeu Exemple Structure de l objet Guesser L interface de l objet Guesser La partie implémentation de l objet Guesser La partie GUI de l objet Guesser Bilan Extensions possibles Editeurs collaboratifs Trois exemples SubEthaEdit Topologi Collaborative Markup Editor CVS Présentation de l objet Paint But de l objet Paint Présentation de la fenêtre de l objet Paint Exemple Structure de l objet Paint L interface de l objet Paint La partie implémentation de l objet Paint La partie GUI de l objet Paint Bilan Extensions possibles Conclusion et Perspectives 27 A Appendice : MaDViWorld 28 A.1 Installation de MaDViWorld A.1.1 Software nécessaire A.2 Exécution de MaDViWorld i

3 A.2.1 Exécution du Serveur A.2.2 Exécution du Wizard A.2.3 Exécution du Client B Appendice : Hardware et Software utilisés 32 C Appendice : Contenu du CD-ROM 33 D Bibliographie 34 Table des figures 1 Mary a exécuté l objet Guesser et a ensuite cliqué sur Login. 5 2 Mary participe au jeu Structure des fichiers du package guesser Messages échangés lorsqu un nouvel avatar se connecte Quatre utilisateurs traitant le même document Message renvoyé à son émetteur avec des commentaires Front-end du CVS Décomposition du GUI de l objet Paint À gauche : Mary vient d exécuter l objet Paint. À droite: Mary ne veut pas voir le travail fait par Paul Les barres des avatars de Mary, Paul et Peter Mary a écrit une phrase Structure des fichiers du package paint Messages échangés pendant un login Diagramme de séquence UML pour le login Messages échangés après avoir dessiné une nouvelle figure Hiérarchie d héritage Lancement du serveur dans une console Le Room Setup Utility pour créer les chambres La création d un nouvel avatar Exécution d un objet ii

4 1 Résumé MaDViWorld est un framework développé au sein du groupe de recherche Software Engineering du Département d Informatique de l Université de Fribourg. Il s agit d une architecture logicielle destinée à supporter des systèmes de mondes virtuels massivement distribués. Dans le cadre de ce travail, deux objets MaDViWorld concrets ont été développés. Il s agit du jeu Guesser et de l éditeur graphique Paint. L objet Guesser est un jeu permettant à un ou plusieurs avatars de jouer avec l ordinateur, en essayant de deviner le bon numéro appartenant à un intervalle que génère aléatoirement l ordinateur. Bien sûr, il permet à d autres avatars de regarder les parties en cours. De plus pour gérer les jeux et les avatars, il emploie le mécanisme événementiel du framework. L objet Paint représente une adaptation d un éditeur graphique et textuel, tel que par example le programme Paint, fourni par Microsoft. Le mécanisme événementiel du framework est une nouvelle fois employé pour gérer les objets et les avatars.

5 1 INTRODUCTION 2 1 Introduction 1.1 Présentation du travail Le software framework de MaDViWorld [15, 16, 17, 21], acronyme pour Massively Distributed Virtual Worlds, est développé au sein du groupe de recherche Software Engineering 1 du Département d Informatique de l Université de Fribourg. Il est basé sur le modèle client-serveur, avec la restriction de n avoir aucun serveur centralisé, en vue de cela, le coté serveur peut être réparti sur un nombre arbitraire de machines. Ce framework propose une plateforme pour la réalisation d un monde virtuel qui est composé de pièces et d objets actifs distribués sur diverses machines, et qui vont héberger chacune une application serveur. Les pièces sont interconnectées entre elles par l intermédiaire de simples portes, et peuvent être peuplées avec des objets. Puis les utilisateurs sont représentés par des avatars au travers d une application cliente. Ces avatars ont la possibilité de visiter les pièces et d interagir avec les objets contenus dans celles-ci (créer, exécuter, et même déplacer), ainsi qu avec les autres avatars se trouvant dans la même pièce au même moment. Brièvement, dans le contexte des mondes virtuels, de multiples avatars et objets actifs interagissent dans le même espace. Ils s influencent directement les uns les autres. Si un avatar apporte quelques modifications au monde virtuel, les autres avatars présents dans le même sous-espace (c est-à-dire dans la même pièce) en sont immédiatement avertis. 1.2 Conventions Ce document est divisé en chapitres, qui eux même peuvent être divisés en sections, voire en sous-sections. Les différentes figures sont numérotées consécutivement dans tout le document. Les mots importants sont en gras ou en italique. Pour les liens hypertextes, les noms de classes, la police Courier sera utilisée. Pour illustrer la structure logicielle du programme, des diagrammes UML [9] ont été réalisés. 1.3 Structure du document Le présent document est décomposé comme suit : Le premier chapitre introduit ce document et donne ses objectifs. Il procure également les informations relatives à la structure et aux conventions de ce document. 1. voir

6 1 INTRODUCTION 3 Le deuxième chapitre présente la phase d approche, qui a permis de se familiariser avec la technologie Java [4], et d implémenter le premier objet développé pour MaDViWorld dans le cadre de la ce travail, qu est l objet Guesser. Il expose sa structure en tenant compte des améliorations possibles. Le troisième chapitre aborde la partie du travail consacrée à l éditeur graphique. Il présente tout d abord l objet, puis sa structure, et enfin les extensions envisageables. La conclusion et les perspectives de ce travail se trouvent dans le quatrième chapitre. L appendice A explique comment installer et utiliser le framework MaDViWorld et ses applications. L appendice B illustre le software et le hardware utilisés. L appendice C indique le contenu du CD-ROM fourni comme annexe de ce document. La dernière partie contient la bibliographie.

7 2 UN OBJET SIMPLE 4 2 Un objet simple Le deuxième chapitre présente l objet MaDViWorld concret, qui a été développé dans le cadre de la première partie programmation de ce travail. C est sur la base de cette expérience de programmation en Java [12, 13] que doit être réalisé par la suite le deuxième objet MaDViWorld : Paint. L objet sujet de ce chapitre est le jeu Guesser. Le guide du programmeur d objets MaDViWorld [21] nous a été utile pour connaître et respecter la structure du framework. 2.1 Présentation de l objet Guesser But de l objet Guesser L objet Guesser est un jeu concret du framework logiciel MaDViWorld, il respecte sa structure [21] et offre plusieurs fonctionalités. Il permet à un ou plusieurs avatars de participer au jeu simultanément. Et bien sûr, à d autres d y prendre part en tant que spectateurs, et de regarder les parties en cours. Les jeux et les avatars sont gérés par le framework par l emploi de son mécanisme événementiel Règles du jeu Ce jeu est destiné à une multitude de joueurs simultanés, où chacun peut jouer individuellement, dans le but de réussir à deviner un numéro que l ordinateur a choisi aléatoirement. Quand un nouvel avatar se connecte et se logue, une table à dimension supportant au maximum 50 joueurs simultanés apparaît, les noms de tous les joueurs y sont affichés dans la colonne tout à gauche (voir figure 1), y compris aussi celui du nouvel avatar. Chaque joueur a la possibilité de faire 10 parties, sachant que chacune comporte 10 essais pour trouver le bon numéro. Une fois le bon numéro trouvé ou les 10 essais achevés, la partie est finie, et le joueur a le choix de recommencer une nouvelle partie ou de se déloguer et arrêter le jeu Exemple Mary est un nouvel avatar qui vient de lancer l objet Guesser, Peter et Paul sont par contre les deux utilisateurs qui sont en train d executer l objet Guesser. Sur l écran de Mary, la fenêtre gauche de la Figure 1 apparaît tout au début. Elle contient un tableau avec les 12 colonnes Player, 1,...,10 et Total. Les noms de Peter et Paul s y trouvent dans les premieres deux lignes de la colonne Player. Les colonnes 1,...,10 contiennent les résultats que

8 2 UN OBJET SIMPLE 5 Peter et Paul ont déjà fait dans le jeu et la dernière colonne Total contient la somme totale. Mary peut observer les deux joueurs Peter et Paul sans jouer elle-même, elle a donc le rôle d une spectatrice du jeu. Fig. 1 Mary a exécuté l objet Guesser et a ensuite cliqué sur Login Au moment où Mary clique sur le bouton Login, elle devient joueur et participe activement au jeu. La fenêtre droite de la Figure 1 montre que par conséquent son nom apparaît dans la colonne Player non seulement dans son propre tableau, mais aussi dans les tableaux de Peter et Paul. De plus, il y a deux nouveaux boutons Start et Logout qui ont été crées. Fig. 2 Mary participe au jeu En cliquant sur le bouton Start, l ordinateur choisi un nombre que Mary doit ensuite essayer de deviner (voir la fenêtre gauche de la Figure 2). Elle a donc 10 essais en total. Si elle réussit avant le 10ème essai, la fenêtre droite de la Figure 2 s affiche. En cliquant sur le bouton Start, elle peut maintenant continuer à jouer, par contre avec un clic sur le bouton Logout elle a aussi la possibilité d arrêter de jouer.

9 2 UN OBJET SIMPLE Structure de l objet Guesser Pour créer l objet Guesser, un nouveau package portant le même nom que l objet, à savoir guesser est créé dans le package madviworld.wobject. En outre, dans ce package et pour compléter la structure de l objet Guesser, les parties implémentation et GUI sont créées et séparées dans deux sous-packages distincts, respectivement guesser.impl et guesser.gui. La structure des fichiers du package guesser est visualisée dans la Figure 3. Fig. 3 Structure des fichiers du package guesser L interface de l objet Guesser L interface de l objet Guesser se trouve dans le fichier Guesser.java et doit être implementée ensuite par la classe GuesserImpl. Le code de l interface débute avec la déclaration du package : package ch.unifr.diuf.madviworld.wobject.guesser; Donc, un nouveau package madviworld.wobject.guesser est créé. Toutefois, d autres packages et interfaces doivent être importés : import ch.unifr.diuf.madviworld.core.wobject; import java.rmi.remoteexception; import java.rmi.remote; import java.util.vector; L interface Guesser hérite des deux classes madviworld.core.wobject et de java.rmi.remote : public interface Guesser extends WObject, Remote {...

10 2 UN OBJET SIMPLE 7 Quand un joueur a fait un essai, la méthode checkguess() de la classe GuesserImpl réalise des tests et lui répond en utilisant les constantes suivantes, définies dans Guesser.java: static final int GAME_LOST = 0; Le joueur a déjà utilisé ses 10 possibilités pour deviner le numéro et il a donc perdu le jeu. static final int TOO_LOW = 1; Le numéro donné par le joueur est trop petit. static final int TOO_HIGH = 2; Le numéro donné par le joueur est trop grand. static final int GAME_WON = 3; Le joueur a gagné, il a deviné le numéro correct. La partie implémentation communique avec la partie GUI en lui envoyant des messages par l intermédiaire de la classe GuesserRemoteEventListener. Trois types d événements différents sont définis dans le fichier Guesser.java: static final int CELL_CHANGED = 4; Une cellule dans le tableau des joueurs a changé. Cet événement se produit par exemple à chaque fois qu un joueur a fait un essai pour deviner le numéro. static final int LINE_CHANGED = 5; Une ligne dans le tableau des joueurs a changé. Cet événement se produit par exemple quand un nouveau avatar fait un login. static final int STATISTIC_CHANGED = 6; Cet événement informe sur le fait qu il faut mettre à jour les statistiques. Les variables globales utilisées pour implementer l objet Guesser sont aussi définies dans le fichier Guesser.java static final int FIXED_ROWS = 50; Le nombre maximal des joueurs qui peuvent jouer simultanément static final int FIXED_ROUNDS = 10; Le nombre d essais par joueur. static final int FIXED_COLUMNS = FIXED_ROUNDS + 2; Le nombre de colonnes du tableau des joueurs. static final int LOWER_BOUND = 1; static final int UPPER_BOUND = 400; Le numéro à deviner est choisi par l ordinateur entre ces deux valeurs.

11 2 UN OBJET SIMPLE 8 Les lignes suivantes contiennent les déclarations des méthodes qui vont être implementées par la classe madviworld.impl.guesserimpl. C est seulement en utilisant ces méthodes que la partie GUI peut communiquer avec la partie implémentation. public boolean starttoplay(int playerid) throws RemoteException; Un joueur a cliqué sur le bouton Start pour continuer à jouer. public int[] getbounds(int playerid) throws RemoteException; Pour obtenir l intervalle dans lequel se trouve le numéro à deviner. public int getnumber(int playerid) throws RemoteException; Pour obtenir le numéro en question qu il fallait deviner. Cette méthode est utilisée quand un joueur n a pas réussi à deviner le numéro correct. public Object[][] gettablecontents() throws RemoteException; Retourne le contenu du tableau des joueurs. Cette méthode est utilisée tout au début quand un nouvel avatar vient d executer l objet Guesser. public int login(string Name) throws RemoteException; Un nouvel avatar vient d exécuter l objet Guesser et fait après un login en cliquant sur le bouton Login. public void logout(int playerid) throws RemoteException; Un joueur veut arrêter de jouer et a cliqué pour cette raison sur le bouton Logout. public int checkguess(int playerid, int guess) throws RemoteException; Vérifie si le numéro donné par un joueur est trop petit, trop grand, si le joueur a gagné ou s il a perdu La partie implémentation de l objet Guesser La partie implémentation constitue le noyau de l objet Guesser, elle a la tâche de gérer et mémoriser toutes les informations concernant les avatars et l objet Guesser. Le package guesser.impl est composé uniquement de la classe GuesserImpl : package ch.unifr.diuf.madviworld.wobject.guesser.impl; La classe GuesserImpl hérite de la classe wobject.wobjectimpl du framework MaDViWorld et implémente l interface Guesser décrite précédemment : public class GuesserImpl extends WObjectImpl

12 2 UN OBJET SIMPLE 9 implements Guesser {... L ordinateur génére les bornes inférieures et supérieures ainsi que les numéros à deviner par les joueurs. Donc, les arrays numberstoguess et bounds ont tous les deux une longueur de 10, donc le nombre maximal d essais par joueur. public int[] numberstoguess; public int[] bounds; Les résultats de tous les joueurs se trouvent dans l array tabledata. De plus, l array currrounds contient pour chaque joueur les références de la colonne du tableau des joueurs active. Donc, l array tabledata a une longueur de 50, ce qui correspond au nombre maximal des joueurs. private Object[][] tabledata; public int[] currrounds; Finalement, pour l envoi des messages, la variable seqnum est utilisée. Cette variable est incrémentée à chaque fois qu un nouveau message est envoyé. public long seqnum = 0; La classe GuesserImpl implémente l interface Guesser. Il y a trois différents types de messages que la classe GuesserImpl peut envoyer. Pour chaque type de message correspond une méthode définie: private void broadcast_updatecell(int row, int column, Object value) { Envoie un message à tous les avatars connectés pour les informer qu il y a un changement dans une cellule du tableau des joueurs. private void broadcast_updateline(int row, Object[] line) { Envoie un message à tous les avatars connectés pour les informer qu il y a un changement dans une ligne entière du tableau des joueurs. private void broadcast_updatestatistics(int playerid, int playersum, int playertries) { Envoie un message à tous les avatars connectés pour les informer qu il faut mettre à jour les statistiques.

13 2 UN OBJET SIMPLE 10 La Figure 4 montre la succession des appels et des messages envoyés quand un nouvel avatar se logue: 1. La méthode login de la classe GuesserImpl est appelée par la classe GuesserPanel. 2. Un message envoyé par la méthode broadcast_updateline de la classe GuesserImpl est reçu par le GuesserRemoteEventListener de chaque GUI. 3. La méthode notify() de la classe GuesserRemoteEventListener spécifie le type de message reçu. Dans le cas d un login, elle appelle la méthode updateline() de la classe GuesserPanel correspondante. Fig. 4 Messages échangés lorsqu un nouvel avatar se connecte La partie GUI de l objet Guesser Le package guesser.gui contient l interface graphique de l utilisateur. Il est composé des classes suivantes : GuesserGUIImpl Sert à instancier les classes GuesserRemoteEventListener et GuesserPanel, tout au début, quand un avatar vient d executer l objet Guesser. GuesserPanel Hérite de la classe JPanel et construit le GUI de l objet Guesser. GuesserRemoteEventListener Gère les événements destinés à la partie GUI de l objet Guesser et lui permet de réagir en fonction des types d événements reçus.

14 2 UN OBJET SIMPLE Bilan Comme dit auparavant, le Guesser se révèle être un objet concret du framework MaDViWorld. Voici une énumération des ses plus importantes caractéristiques : L utilisation du mécanisme événementiel afin de gérer l objet et les avatars. Séparation entre les deux parties implémentation et GUI. Possibilité de participer au jeu (l avatar en tant que joueur), ou de garder sa position de spectateur. Affichage des statistiques individuelles et celles publiques (moyenne de tous les joueurs). Si un avatar joueur quitte le jeu (ce qui arrive dans une des deux situations suivantes; soit après avoir fini les 10 parties, soit parce que l avatar joueur ne veut plus continuer le jeu), il n aura plus la possibilité de revenir dans sa partie préalablement quittée, il doit donc recommencer un nouveau jeu. Le Guesser est un jeu portable d une pièce à une autre dans le framework, mais son état ne change pas. 2.4 Extensions possibles Malgrés ses multiples caractéristiques, l objet Guesser peut être amélioré en y ajoutant d autres points qui le rendent plus parfait, tels que: Conserver les meilleurs scores réalisés dans une table, et si un nouveau joueur se logue une fenêtre affichant le nom du joueur et le meilleur score qu il a déjà réalisé apparaît. Afficher une fenêtre d aide offrant des indications sur la manière de jouer. Indiquer le nombre d observateurs. Intégrer le son.

15 3 EDITEURS COLLABORATIFS 12 3 Editeurs collaboratifs Un éditeur collaboratif est un système qui permet de travailler à plusieurs sur des données textuelles et graphiques, en utilisant le concept de tableau ou canvas sur lequel tous les gens connectés peuvent voir ce qui y est affiché et ont même l éventualité d écrire ou dessiner. Les utilisateurs peuvent travailler simultanément ou à différents moments sur le même document ou sur des différentes copies. Le chapitre présent propose trois exemples d éditeurs collaboratifs, comme il montrera par la suite l éditeur textuel et graphique réalisé dans le cadre de ce travail. 3.1 Trois exemples SubEthaEdit SubEthaEdit [7] est une application développée sur Macintosh 2, elle offre à un groupe de personnes la possibilité de travailler simultanément sur le même document. Les utilisateurs peuvent effectuer des changements sur tout le texte, ce qui -par ailleurs- facilite l utilisation de SubEthaEdit, tel tout programme de traitement de texte. La Figure 5 à gauche montre quatre utilisateurs travaillant sur le même document. Celle de droite, montre les changements effectués par chaque utilisateur et qui sont affichés dans différentes couleurs, afin de spécifier celui qui les a faites. Fig. 5 Quatre utilisateurs traitant le même document 2. Macintosh est une marque déposée de Apple Computer, Inc

16 3 EDITEURS COLLABORATIFS Topologi Collaborative Markup Editor Topologi Collaborative Markup Editor [8] est un éditeur spécialisé dans le traitement des fichiers XML. Il est muni d un mécanisme qui permet aux utilisateurs de collaborer entre eux. Si un utilisateur a une question, il peut envoyer un message ou une capture d écran à n importe quel autre utilisateur qui appartient au même reseau local (LAN). Le récepteur du message peut ensuite réaliser ses changements, ajouter des notes dans un cadre jaune ou souligner en rouge des parties du texte, et renvoyer par la suite le message changé à son émetteur. La Figure 6 explique un example d un tel message. Fig. 6 Message renvoyé à son émetteur avec des commentaires CVS CVS (Concurrent Version System) [2] est un outil utilisé souvent dans la programmation où plusieurs personnes travaillent en groupe sur le même projet. Il permet à un groupe de personnes de travailler simultanément sur un ensemble de fichiers. CVS gère les versions, et propose des outils permettant de réduire les conflits de versions et de les résoudre sans peine le cas échéant. Le fonctionnement de CVS est basé sur un répertoire central (le repository), où sont stockés les fichiers partagés. Le travail direct sur les fichiers partagés est interdit, et les accès au répertoire central sont restreints de la manière suivante : on peut à tout moment faire une copie des fichiers du répertoire central (checkout), mettre à jour sa propre copie, en fonction des dernières modifications enregistrées (update), ou soumettre à la version centrale les modifications apportées à sa propre copie locale (commit). Dans tous les cas, on ne peut travailler que sur des copies des fichiers centraux.

17 3 EDITEURS COLLABORATIFS 14 Bien entendu, les conflits sont toujours possibles (deux personnes travaillent simultanément sur deux copies du même fichier, et veulent mettre à jour leurs modifications), mais un grand nombre d outils associés à une certaine méthodologie permettent de les éviter, ou le cas échéant de les résoudre aisément. La Figure 7 montre l application WinCVS 3 qui est un "front-end" graphique pour CVS. Fig. 7 Front-end du CVS 3.2 Présentation de l objet Paint Ce chapitre présente la programmation du second objet réalisé dans le cadre de ce travail : le Paint. C est un éditeur textuel et graphique collaboratif qui permet à plusieurs avatars d éditer simultanément et en collaboration un même document But de l objet Paint L objet Paint représente une adaptation concrète d un éditeur graphique et textuel, tel que par example le programme Paint fourni par Microsoft, et sur lequel les avatars peuvent écrire du texte ou dessiner des figures qui leur sont visibles. La différence fondamentale est que l objet Paint développé dans le cadre MaDViWorld peut être partagé par plusieurs utilisateurs, son 3. voir

18 3 EDITEURS COLLABORATIFS 15 contenu peut être changé ou mis à jour par n importe quel avatar à travers son interface graphique. Le mécanisme événementiel du framework MaDViWorld [21] est une nouvelle fois employé pour gérer l éditeur et les avatars. Si un avatar change le contenu de l objet (dessiner d autres objets, effacer les objets), les autres avatars utilisant l objet Paint en sont informés, et le canvas du Paint a donc besoin d une mise à jour. Cette tâche est accomplie à l aide du mécanisme des événements à distance "remote event". En outre, le second objet propose un GUI plus élaboré et plus sophistiqué que celui du premier objet Guesser. L avatar peut rentrer en interaction avec les autres Présentation de la fenêtre de l objet Paint L interface graphique de l objet Paint se présente comme la montre la Figure 8. Elle peut être réparti en trois composantes principales: Un toolbar tout à gauche de la fenêtre à l aide duquel l utilisateur peut choisir la figure qu il veut dessiner, la couleur et l épaisseur du crayon utilisé, ainsi que tout effacer. Une barre des avatars qui se trouve tout en bas de la fenêtre et qui contient les noms de tous les utilisateurs qui exécutent l objet Paint. Un panneau de dessin dans lequel l utilisateur peut dessiner ses figures, mais aussi visualiser celles réalisées par les autres. Le prochain paragraphe introduit les fonctionalités offertes par l objet Paint, illustrées par un exemple où un nouvel avatar vient d exécuter l éditeur collaboratif et où deux autres l ont déjà exécuté Exemple Mary est un nouvel avatar qui vient de lancer l objet Paint, Peter et Paul sont par contre des anciens utilisateurs. Par défaut, le nouvel avatar aperçoit tous les dessins des autres (voir Figure 9 à gauche), mais peut aussi sélectionner ceux qu il aimerait afficher (voir Figure 9 à droite). Dans la barre des avatars, le premier bouton appartient toujours à celui qui possède la fenêtre. Comme le montre la Figure 11, il s agit effectivement d un éditeur collaboratif, dans le sens que si Mary ajoute une nouvelle figure, Peter et Paul peuvent la voir.

19 3 EDITEURS COLLABORATIFS 16 Fig. 8 Décomposition du GUI de l objet Paint 3.3 Structure de l objet Paint Pour créer l objet Paint, un nouveau package portant le même nom que l objet, à savoir paint est créé dans le package madviworld.wobject. En outre, dans ce package et pour compléter la structure du Paint, les parties implémentation et GUI sont créées et séparées dans deux sous-packages distincts, respectivement paint.impl et paint.gui L interface de l objet Paint L interface de l objet Paint se trouve dans le fichier Paint.java et doit être implementée ensuite par la classe PaintImpl. Le code de l interface débute avec la déclaration du package : package ch.unifr.diuf.madviworld.wobject.paint;

20 3 EDITEURS COLLABORATIFS 17 Fig. 9 À gauche : Mary vient d exécuter l objet Paint. À droite: Mary ne veut pas voir le travail fait par Paul Fig. 10 Les barres des avatars de Mary, Paul et Peter Un nouveau package madviworld.wobject.paint est donc créé. Toutefois, d autres classes et interfaces doivent être importées : import ch.unifr.diuf.madviworld.core.wobject; import java.rmi.remoteexception; import java.rmi.remote; import java.util.vector; L interface Paint hérite des deux packages madviworld.core.wobject et de java.rmi.remote : public interface Paint extends WObject, Remote {... Les lignes suivantes contiennent les déclarations des méthodes qui vont être implementées dans la classe madviworld.impl.paintimpl. C est seulement en utilisant ces méthodes que la partie GUI peut communiquer avec la partie implémentation. public int login(string avatarname) throws RemoteException;

21 3 EDITEURS COLLABORATIFS 18 Fig. 11 Mary a écrit une phrase Fig. 12 Structure des fichiers du package paint Un nouvel avatar vient de lancer l objet Paint et doit donc s annoncer. public void logout(int avatarid) throws RemoteException; Un avatar a fermé sa fenêtre et a donc arrêté d utiliser l objet Paint. public VectorgetAvatarEntities() throws RemoteException; Quand un nouvel avatar vient de lancer l objet Paint, il a aussi besoin de connaître les autres avatars executants l objet Paint. public Vector getshapes() throws RemoteException; Tout au début, un nouvel avatar doit obtenir tous les dessins qui ont été réalisés par les autres avatars. public void addshape(shape shape, int avatarid) throws RemoteException; Un nouveau dessin est fait et il faut l envoyer aux autres avatars. public void updateshape(shape shape, int avatarid) throws RemoteException; Un dessin déjà existant a été changé et il faut donc le mettre à jour.

22 3 EDITEURS COLLABORATIFS 19 public void clearshapes(int avatarid) throws RemoteException; Pour effacer tout les dessins d un avatar. Par contre, la partie implémentation communique avec la partie GUI en lui envoyant des messages par l intermédiaire de la classe PaintRemoteEventListener. Quatre types d événements différents sont définis dans le fichier Paint.java : static final int NEW_AVATAR = 1; Quand un nouvel avatar lance l objet Paint, cet événement est envoyé à tous les avatars exécutants l objet Paint. static final int ADD_SHAPE = 2; Lorsqu une nouvelle figure est dessinée, elle est ajoutée dans le vecteur des figures. static final int UPDATE_SHAPE = 3; Généré quand un avatar écrit un texte ou dessine à mains libres. static final int CLEAR_SHAPES = 4; Généré lorsqu un avatar efface ses figures La partie implémentation de l objet Paint La partie implémentation constitue le noyau de l objet Paint, elle a la tâche de gérer et mémoriser toutes les informations concernant les avatars et l objet Paint. Le package paint.impl est composé uniquement de la classe PaintImpl : package ch.unifr.diuf.madviworld.wobject.paint.impl; La classe PaintImpl hérite de la classe wobject.wobjectimpl du framework : public class PaintImpl extends WObjectImpl implements Paint {... Le paint est constitué d une superposition de couches transparentes. Chaque avatar à la possibilité d avoir sa propre couche pour dessiner. Quand un nouvel avatar lance l objet Paint, il obtient immédiatement le droit de dessiner dans sa couche et les autres avatars obtiennent la possibilité de voir, ce qu il va dessiner, et pas dessiner sur la même couche. Donc, le nouvel avatar n a pas besoin de passer d abord dans l état spectateur pour pouvoir participer par la suite. Finalement, à chaque moment, un avatar a le choix de visualiser ou pas ses dessins et ceux des autres. Chaque avatar exécutant l objet Paint est identifié grâce à un identificateur unique, qui lui est attribué au moment de son login (donc, quand la

23 3 EDITEURS COLLABORATIFS 20 méthode login de la classe PaintImpl est appelée). Les coordonnées d un avatar (ID et nom) sont stockés dans le vecteur avatarentities, de même pour les figures dans le vecteur theshapes. private int newavatarid = 0; private Vector avatarentities; private Vector theshapes; Pour l envoie des messages, la variable seqnum est utilisée. Cette variable est incrémentée à chaque fois qu un message est envoyé. private long seqnum = 0; Comme pour les avatars, c est aussi pareil pour les figures. Chaque figure obtient un identificateur unique lorsque la méthode addshape de la classe PaintImpl est appelée : protected int newshapeid = 0; public void addshape(shape shape, int avatarid) throws RemoteException { shape.setavatarid(avatarid); shape.setshapeid(newshapeid++); theshapes.addelement(shape); broadcast_addshape(shape); } Les avatars (GUI) sont donc informés lors de chaque nouvelle création de figure à l aide de la méthode broadcast_addshape. public void broadcast_addshape(shape shape) { try { RemoteEvent evt = new RemoteEvent(this, ADD_SHAPE, seqnum++); evt.addattribute("eventtype", EventIDs.OBJECT_EVENT_S); evt.addattribute("shape", shape); notifyalllisteners(evt); } catch (Exception e) { e.printstacktrace(); } } La Figure 13 montre ce qui se passe lorsque le nouvel avatar Mary lance l objet Paint: 1. La méthode login de la classe PaintImpl est appelée par la classe PaintPanel.

24 3 EDITEURS COLLABORATIFS 21 Fig. 13 Messages échangés pendant un login 2. Un message envoyé par la méthode broadcast_newavatar de la classe PaintImpl est reçu par le PaintRemoteEventListener de chaque GUI. 3. La méthode notify de la classe PaintRemoteEventListener spécifie le type de message reçu. Dans le cas d un login, elle appelle la méthode message_newavatar de la classe PaintPanel. 4. La méthode AddNextAvatarButton de la classe AvatarToolbar est appelée, pour ajouter un bouton dans la deuxième position dans la barre des avatars. La Figure 14 montre le diagramme de séquence UML [14] de la figure 13. Les appels et les messages échangés quand Mary réalise un nouveau dessin sont illustrés dans la Figure 15: 1. La méthode addshape de la classe PaintImpl est appelée par la classe PaintPanel. 2. Un message envoyé par la méthode broadcast_addshape de la classe PaintImpl est reçu par le PaintRemoteEventListener de chaque GUI. 3. La méthode notify de la classe PaintRemoteEventListener spécifie le type de message reçu. Dans le cas de création d une nouvelle figure, elle appelle la méthode message_addshape de la classe PaintPanel. 4. La méthode message_addshape de la classe DrawingPanel est appelée pour ajouter la nouvelle figure dans le vecteur theshapes.

25 3 EDITEURS COLLABORATIFS 22 Fig. 14 Diagramme de séquence UML pour le login La partie GUI de l objet Paint Le package paint.gui contient l interface graphique de l utilisateur. Il est composé des 17 classes suivantes : AvatarButton Hérite de la classe JToggleButton. Elle est utilisée dans la classe AvatarToolbar pour visualiser les avatars executant l objet Paint. AvatarToolbar Hérite de la classe JPanel. Elle contient la liste des boutons de la barre des avatars. AvatarEntity Utilisée pendant le login quand un nouvel avatar vient d exécuter l objet Paint. DrawingPanel Hérite de la classe JPanel. Elle est utilisée pour implémenter la partie de la fenêtre où l utilisateur dessine. En particulier, tous les événements de la souris tels que mousepressed, mousedragged,

26 3 EDITEURS COLLABORATIFS 23 Fig. 15 Messages échangés après avoir dessiné une nouvelle figure mousereleased, mouseclicked, keypressed y sont traités. PaintGlobals Cette classe contient certaines variables globales. PaintGUIImpl Sert à instancier les classes PaintRemoteEventListener et PaintPanel. PaintPanel Hérite de la classe JPanel et construit le GUI de l objet Paint. PaintRemoteEventListener Gère les événements destinés à la partie GUI de l objet Paint et lui permet de réagir en fonction des types d événements reçus. Shape Classe abstraite, contient les définitions des méthodes implémentées par la suite par les classes héritantes. TwoShape Met à disposition deux paires de coordonnées (x1,y1) et (x2,y2). La première paire marque le point où l utilisateur à cliqué pour commencer son dessin, et la deuxième le point final. ShapeCircle Hérite de la classe ShapeOval, elle sert à implémenter un cercle.

27 3 EDITEURS COLLABORATIFS 24 ShapeFreehand Hérite de la classe Shape, elle offre la possibilité de dessiner à mains libres. ShapeLine Dessine une droite. ShapeOval Contient l implémentation pour dessiner un oval. ShapeRectangle Contient l implémentation pour dessiner un rectangle. ShapeSquare Dessine un carré. ShapeText Écrit un texte. Toutes ces classes servent à mémoriser les propriétés des figures. De plus, la classe Shape est sérialisable, afin que les instances de toutes les sousclasses de Shape puissent être transférées sur un réseau. La Figure 16 illustre la hiérarchie d héritage de ces classes. Une autre composante du GUI est le dossier "resources", contenant des images aux formats.png. 3.4 Bilan L objet Paint est inspiré de l éditeur graphique et textuel Paint de Microsoft en tant qu objet concret du framework MaDViWorld mais avec la particularité d être partagé parmi plusieurs utilisateurs; il devient donc collaboratif. Voici une énumération de ses principales caractéristiques : L utilisation du mécanisme événementiel afin de gérer l objet et les avatars. Séparation entre les parties implémentation et GUI. GUI complet et évolué. Utilisation des images. Possibilité de choisir des couleurs, des figures, des styles et formats de lignes, et même le texte afin d écrire et d effectuer les dessins. Envoie de beaucoup de messages entre les interfaces. L avatar peut être utilisateur ou spectateur pour voir les autres dessiner. La partie GUI peut être mise à jour avec l aide de son RemoteEvent- Listener.

28 3 EDITEURS COLLABORATIFS 25 Fig. 16 Hiérarchie d héritage 3.5 Extensions possibles L objet Paint comme il est présenté ici est un premier pas vers un éditeur collaboratif plus sophistiqué et plus élaboré. Donc beaucoup d autres choses et améliorations peuvent lui être apportés, afin de le rendre plus utile. Entre autre, les améliorations suivantes seront très utiles : La possibilité de sélectionner un ou plusieurs dessins et les mettre derrière ou devant tous les autres dessins. La possibilité de sélectionner les dessins que l utilisateur désire effacer. La possibilité de changer la couleur des figures dessinées. Avoir différents styles et polices d écriture. La possibilité de sauvegarder le contenu de la fenêtre. Donner la possibilité à chaque avatar de pouvoir accepter ou pas, un autre utilisateur sur son interface.

29 3 EDITEURS COLLABORATIFS 26 L affichage d une fenêtre pour la confirmation du choix des couleurs. Une barre des menus pour l objet Paint et implémenter son contenu.

30 4 CONCLUSION ET PERSPECTIVES 27 4 Conclusion et Perspectives L objectif de ce travail était dédoublé de la manière suivante : Dans un premier temps, programmer un objet simple pour mieux connaître le framework MaDViWorld et le langage de programmation Java. Dans un second temps, implémenter un éditeur collaboratif permettant aux avatars de dessiner des figures plus ou moins compliquées. Il a été montré, tout au long de cette documentation, que les buts souhaités de la réalisation des deux objets Guesser et Paint ont été atteints. D autres améliorations peuvent être envisageables dans le cadre de ce travail. Du point de vue personnel, ce travail m était très enrichissant, autant du côté programmation, en utilisant le langage de programmation Java, que du côté des connaissances portant sur les éditeurs collaboratifs et les mondes virtuels. Mes remerciements les plus sincères au Prof. Jacques Pasquier-Rocha et à l assistant Monsieur Patrik Fuhrer, qui n ont épargné aucun effort pour m aider dans mon travail.

31 A APPENDICE : MADVIWORLD 28 A Appendice : MaDViWorld A.1 Installation de MaDViWorld A.1.1 Software nécessaire Pour pouvoir compiler et exécuter les différentes parties du framework MaDViWorld, il faut d abord installer certaines Ant Ce logiciel peut être téléchargé à partir de l addresse L installation est trés simple, les instructions correspondantes peuvent être trouvées dans le manuel officiel d Apache Ant. JRE 1.4 Le Java Runtime Environment, version 1.4 doit être installée. On peut le télécharger à partir du site JINI Jini Technology Starter Kit Version 1.2.1_001 doit être installé, il peut être téléchargé de l adresse Son installation est simple. L application MaDViWorld peut être téléchargée sur l adresse La distribution de MaDViWorld consiste en 3 parties principales: MaDViWorld Server MaDViWorld Client MaDViWorld Setup À chaque partie, correspond un fichier zip à télécharger. Pour l installation de ces trois composantes, veuillez consulter le Guide d installation se trouvant sur l adresse mentionnée ci-dessus.

32 A APPENDICE : MADVIWORLD 29 A.2 Exécution de MaDViWorld Les trois composantes serveur, client et setup de MaDViWorld doivent être exécutées successivement en Ant. Pour cette fin, il faut ouvrir un Command Prompt, choisir le bon répertoire et exécuter ant run pour démarrer soit le server, le client ou le setup. Avec la commande ant compile on procède à la compilation. ant clean : Supprimer les fichiers logs. ant reset : Supprimer les classes compilées. ant compile : Compiler les classes de la composante choisie. ant run : Lancer la composante choisie. A.2.1 Exécution du Serveur Dans une console, exécuter dans le répertoire racine de l application Serveur la commande ant run (voir Figure 17). Fig. 17 Lancement du serveur dans une console

33 A APPENDICE : MADVIWORLD 30 A.2.2 Exécution du Wizard Dans une console, exécuter dans le répertoire racine de l application Setup la commande ant run. La fenêtre de la Figure 18 sera affichée. Fig. 18 Le Room Setup Utility pour créer les chambres A.2.3 Exécution du Client Dans une console, exécuter dans le répertoire racine de l application Client la commande ant run. La fenêtre gauche de la Figure 19 sera affichée. Pour créer un nouvel avatar, il faut choisir le menu Avatar et sélectionner l entrée Create new & Connect. Fig. 19 La création d un nouvel avatar

34 A APPENDICE : MADVIWORLD 31 La fenêtre droite de la figure 19 apparaît, l utilisateur doit d abord remplir les champs Name, Host,..., et cliquer par la suite sur le bouton Create & Connect. La fenêtre de la Figure 20 s affiche. Cette fenêtre offre la possibilité de lancer des objets de MaDViWorld. Fig. 20 Exécution d un objet