Modélisation en XML du fonctionnement des composants interactifs

Institut de la Francophonie pour l'Informatique MEMOIRE DE FIN D’ETUDES Sujet : Modélisation en XML du fonctionnement des composants interactifs Tuteurs Dr Stéphane CHATTY Dr Stéphane SIRE IntuiLab, Labège, France Etudiant PHAM Nguyen Khang Promotion IFI, Hanoï, Vietnam 03 – 2005 Modélisation en du fonctionnement des composants interactifs Remerciements Je tiens remercier particulièrement Monsieur Stéphane Chatty (IntuiLab) , qui m’a accepté comme stagiaire IntuiLab dans son équipe de projet IntuiKit et qui m’a donné beaucoup d’aides et de conseils pendant mon séjour en France Je tiens remercier aussi tous les personnels dans l’entreprise IntuiLab qui m’ont accueilli très chaleureusement et qui me rendent l’aise pendant mon stage IntuiLab Je remercie sincèrement Monsieur Charles Durand, directeur de l’Institut de la Francophonie pour l’Informatique (IFI) et Monsieur Ho Tuong Vinh, directeur des études de l‘IFI qui ont fait des nécessaires pour que je puisse effectuer mon stage de fin d’études Je voudrais donner un grand merci Madame Loan qui m’a aidé la demande du visa et qui a acheté le billet d’avion pour moi Les derniers mots sont consacrés l’âme de ma mère défunte qui m’a élevé et m’éduqué depuis que j’étais petit ; mon père qui a travaillé très dur pour nourrir la famille qui m’a encouragé beaucoup continuer les études ; et ma petite famille (ma femme et ma fille) qui m’a appuyé moralement quand je rencontre des difficultés Pham Nguyen Khang, Promotion VIII, IFI – Hanoï Modélisation en du fonctionnement des composants interactifs Résumé Mon travail dans le projet IntuiKit se focalise sur la recherche des modèles pour pouvoir modéliser en XML du fonctionnement des composants interactifs (interacteurs, widgets) Basé sur les modèles trouvés, je propose un système de thèmes pour ces composants Le système est en fait analogue aux systèmes de polices Cela signifie que nous pouvons appliquer un modèle d’apparence visuelle et de comportement une interface d’utilisateur indépendante de son contenu Ce mémoire décrit comment modéliser les widgets en XML et créer un système de thèmes pour des widgets Il présente aussi des modèles nécessaires pour des widgets comme : modèle de disposition, modèle de comportement , modèle de coupure, … Nous avons proposé d’utiliser des systèmes de contraintes sens unique pour modéliser des comportements continu Tout cela nous aide construire un système de thème qui fournit des changements dynamiques (voire téléchargeables) de l’apparence et des comportements pour l’interface d’utilisateur graphique Les expériences que j’ai effectuées sur des widgets WIMP (acronyme pour Window Icon Menu et Pointer ) permettent d’ illustrer notre solution et de valider notre approche Mots clefs : Interaction Homme Machine, Interaction multimodale, Widgets, Rôle de XML dans Interaction Homme Machine, Système de contraintes, Modèle de disposition, Réseau de Petri, Machine état fini, Comportements continus, Modèle d’événements Pham Nguyen Khang, Promotion VIII, IFI – Hanoï Modélisation en du fonctionnement des composants interactifs Abstract My research in the IntuiKit project is focused on finding the models in order to model in XML the operation of the interactive components (widgets) Based on the found models , I propose a system of theme for these components In fact, the system is similar to the font system This signifies that we can apply a model of visual appearance and of behaviour to a user interface independe nt of the content of the interface This paper describes how to model the widgets in XML and to create a system of theme for widgets It presents also models necessary for widgets such as: layout model, behaviour model, view/clipping m odel, … We proposed to use one way constraint systems to model dynamic behaviours This helps us to build a system of theme which supports dynamic (even downloadable) appearance and behaviour changes for graphical user interface The experiments that I carried out on widgets WIMP (acronym for Window Icon Menu and Pointer) allow to illustrate our solution and validate our approach Key words: Computer Human Interaction, Multimodal Interaction, Widgets, Role of XML in Computer Human Interaction, Constraint systems, Layout model, Petri net, Finite state machine, Behaviour model, Event model Pham Nguyen Khang, Promotion VIII, IFI – Hanoï Modélisation en du fonctionnement des composants interactifs Table des matières REMERCIEMENTS RESUME ABSTRACT TABLE DES MATIERES .4 TABLE DE FIGURES .6 CHAPITRE : 1.1 1.2 1.3 1.4 1.5 1.6 1.7 INTRODUCTION M OTIVATION ET OBJECTIFS DU TRAVAIL E NVIRONNEMENT DE STAGE T HEMES A EXPLOITER M ETHODE DE TRAVAIL C ONTRIBUTION STRUCTURE DE MEMOIRE CHAPITRE : 2.1 2.1.1 2.1.2 2.1.3 2.1.4 2.2 INTRODUCTION TRAVAUX ANTERIEURS 10 DES TRAVAUX ANTERIEURS 10 O UTILS A BASE DE LANGAGE DE PROGRAMMATION 10 O UTILS UTILISANT X M L 10 T RAVAIL DE HUDSON 11 INTUIK IT 11 QUELQUES REMARQUES SUR DES TRAVAUX ANTERIEURS 12 CHAPITRE : METHODE ET SOLUTION 13 3.1 PROBLEMATIQUE : 13 3.2 E NVIRONNEMENT INTUIK IT 13 3.2.1 C ONCEPTION 13 3.2.1.1 D ECOMPOSITION D’ UN SYSTEME INTERACTIF 13 3.2.1.2 M ODELE DE COMPOSITION DES FACETTES 14 3.2.1.3 C OMPORTEMENTS DISCRETS .15 3.2.1.4 FUSION DES VARIABLES (MERGE) 16 3.2.1.5 M ODELE D’EMIS ET D’ABONNEMENT DES EVENEMENTS 16 3.2.2 E XEMPLE .17 3.3 L ES MODELES MANQUANTS DANS I NTUIKIT ET SOLUTIONS .20 3.3.1 C OMPORTEMENTS CONTINUS .20 3.3.1.1 A TTRIBUTS A BASE D’EXPRESSIONS 20 3.3.1.2 SYSTEME DE CONTRAINTES A SENS UNIQUE (ONE WAY CONSTRAINT SYSTEM) 22 3.3.2 M ODELE DE DISPOSITION : 24 3.3.3 M ODELE DE CONTAINER 29 3.3.4 M ODELE DE VUE /COUPURE .31 3.4 SYSTEME DE THEME 32 3.4.1 M ODELE DE THEME 32 3.4.2 C HANGEMENT DE SKIN D’UN WIDGET .32 3.4.3 H ERITAGE DU THEME 34 CHAPITRE : 4.1 4.1.1 4.1.2 4.1.3 RESULTAT ET VERIFICATION 35 PRESENTATION DE RESULTAT 35 L ES MODULES EN PERL 35 STRUCTURE D’UN FICHIER THEME 37 U TILISATION DES WIDGETS WIMP DANS INTUIKIT 38 Pham Nguyen Khang, Promotion VIII, IFI – Hanoï Modélisation en du fonctionnement des composants interactifs 4.2 VERIFICATION 41 CHAPITRE : 5.1 5.2 CONCLUSION ET PERSPECTIVES 43 C ONCLUSION .43 PERSPECTIVES 43 RÉFÉRENCES 44 Pham Nguyen Khang, Promotion VIII, IFI – Hanoï Modélisation en du fonctionnement des composants interactifs Table de figures Figure : Un rules avec ses fils et règles 14 Figure : Définition et instanciation des modèles .14 Figure : Exemple du couvrement de l’arbre .15 Figure : FSM modélisant le comportement d’un Bouton 15 Figure : Transducteur des événements 16 Figure : Modèle d’abonnement des événements recommandé par W3C 17 Figure : FSM pour le comportement du bouton 18 Figure : Structure du modèle de bouton .18 Figure : Widget bouton modélisé en XML dans IntuiKit 20 Figure 10 : Une contrainte géométrique entre le texte et le rectangle 21 Figure 11 : Modèle du widget « bar de défilement » (ScrollBar) 21 Figure 12 : Un modèle du widget Fenêtre (Window) 23 Figure 13 : Graphe représentant les contraintes avec rang des nœuds .24 Figure 14 : Disposition verticale 25 Figure 15 : Disposition horizontale 25 Figure 16 : Disposition en bordure 26 Figure 17 : Disposition en bordure horizontale 27 Figure 18 : Disposition en bordure verticale .27 Figure 19 : Modèle d’un onglet .28 Figure 20 : Modèle des onglets .29 Figure 21 : Modèle d’un onglet avec container 30 Figure 22 : Arbre de composants du modèle de l’onglet avec container 30 Figure 23 : Modèle de vue scrollable 31 Figure 24 : Modèle de thème et son rôle dans une application interactive 32 Figure 25 : Application d’un skin un widget .33 Figure 26 : Widgets dans des thèmes différents (dans QT) 34 Figure 27 : Diagramme de classes du paquetage WimpKit et sa position dans IntuiKit .36 Figure 28 : Un bouton modélisé en XML 38 Figure 29 : Exemple du widget fenêtre 40 Figure 30 : Widget « Window » dans plusieurs thèmes différents 41 Figure 31 : Groupe des onglets 42 Figure 32 : Formulaire 42 Pham Nguyen Khang, Promotion VIII, IFI – Hanoï Modélisation en du fonctionnement des composants interactifs Chapitre : INTRODUCTION 1.1 Introduction De nos jours, nous avons besoin de plus en plus des logiciels interactifs non seulement pour des ordinateurs mais aussi pour des PDA, des automates (distributeurs de l’argent , distributeurs de billets, …) Nous voulons que l’Interaction Homme Machine devienne plus familier de jour en jour Pour cela , il y a eu beaucoup de recherches sur ce domaine On a cherché créer des outils qui aident des réalisateurs produire des logiciels interactifs plus facilement et plus rapidement Quant aux utilisateurs, ils désirent que des applications interactives avancés soient faciles utiliser et apprendre Aujourd'hui les utilisateurs veulent pouvoir être chez eux et utiliser des logiciels sans dépenser leur temps pour lire des manuels Néanmoins , de telles interfaces d’utilisateur sont difficiles designer et implanter Plusieurs recherches différentes ont montré que 48% du code de l’application est consacré l’interface d’utilisateurs et qu’environ 50% du temps d’implantation est consacré l’interface d’utilisateur [Myers92] Quand des interfaces d’utilisateur deviennent facile utiliser, ils deviennent difficiles créer Des développeurs d’interface d’utilisateur ont besoin des outils qui fournissent un support plus riche pour le développement des interfaces d’utilisateurs avancées Au cours des dernières années, plusieurs outils ont été créés pour aider des réalisateurs d'interface d’utilisateur, e.g « Toolkits », « User Interface Management Systems », « User Interface Development Environments » D’après la classification de ces outils de B Myers dans [Myers95], il y a trois types des outils que nous pouvons lister comme ci-dessous : ? ? ? Outils base de langage (language-based tools) : exigent des développeurs de programmer dans un langage pour un but particulier Outils de spécification graphiques interactifs (Interactive graphical specification tools) : permettent de designer une interface d’utilisateur interactive Outils base de modèles (model-based tools) : utilisent un modèle ou une spécification de niveau élevé pour produire des interfaces d’utilisateur automatiquement Des développeurs d’interface d’utilisa teur restent encore des difficultés en utilisant les outils base de langage ou de spécification graphiques interactifs car ces outils fournissent la spécification des comportements dynamiques ou la disposition mais pas tous les deux en même temps D’ailleurs, ces outils fournissent seulement la phase de développement dans le cycle de vie de l’interface d’utilisateur A partir des années 80s, il y a eu beaucoup de recherches sur des systèmes base de modèles (model based systems) Avec ces systèmes, nous voulons décomposer un système en modèles (et en plusieurs niveau sémantique : modèle de tâches, syntaxique : modèle de dialogues, lexique : modèle des événements, …) et chercher les composer L’intérêt de ces modèles est que des logiciels peuvent être gé nérés automatiquement partir des modèles [O lsen93] L’approche du développement des interfaces d’utilisateur base de modèles et ses outils fournissent toutes les phases dans le cycle de vie d’un logiciel interactif Plusieurs acteurs (graphistes, programme ur, concepteur, chef de projet, …) peuvent participer au développement des logiciels Malgré tout, jusqu’à maintenant il n’y a Pham Nguyen Khang, Promotion VIII, IFI – Hanoï Modélisation en du fonctionnement des composants interactifs pas encore de grand succès pour ces systèmes Soit il est difficile générer le code partir des modèles, soit des interfaces d’utilisateur générées ne sont pas très jolies Le projet d’IntuiKit (à Intuilab) créé a pour but de concevoir un environnement pour le développement des logiciels interactifs IntuiKit n’a pas ambition de générer automatiquement des logiciels partir des modèles mais il utilise des modèles décla ratifs pour construire des logiciels interactifs L’objectif d’IntuiKit est de construire un environnement (un toolkit) pour aider des concepteurs produire des logiciels interactifs plus facilement et plus rapidement Pour l’instance, IntuiKit possède des briques de base pour aider fabriquer des logiciels Cependant, il manque certains modèles pour devenir un toolkit complet 1.2 Motivation et objectifs du travail Sensibilité la problématique de l’Interaction Homme Machine, j’ai choisi d’effectuer mon stage de fin d’études Intuilab dans le projet IntuiKit Mon travail concerne la modélisation en XML du fonctionnement des widgets WIMP (des interacteurs que IntuiKit manque Un interracteur est un composant interactif qui possède une apparence et des comportements) L’objectif de mon travail est de faire une analyse sur des widgets, concevoir une bibliothèque de widgets WIMP et de construire un système de thèmes pour des widgets qui peut être téléchargeable com me celui de font Avec la notion de thème, la « peau » et éventuellement les comportements d’une interface sont changés facilement sans aucune modification de code De plus, cette approche sépare bien la partie d’interface d’utilisateur avec le noyau d’application 1.3 Environnement de stage Intuilab (site web : http://www.intuilab.com ) est une entreprise privée très jeune (fondée en 2002) qui se consacre fabriquer des applications d’Interaction Homme Machine multimodales (gestes, vocales, etc.) Intuilab développe un environnement de prototypage et de production d’interface multimodales IntuiKit IntuiKit crée a pour but de faire participer les graphistes, les ergonomes, et les programmeur la conception et réalisation d’un logiciel interactif rapidement et effectivement IntuiKit propose une approche pour permettre la production d’éléments de logiciel par des non-programmeurs (graphiste , ergonome, …) C’est l’architecture base de modèles (model-based architecture) où le programme est définit par une composition des modèles Dans sa version complète, IntuiKit sera constitué de : ? ? ? ? Un ensemble de modèles des différentes facettes d’un logiciel interactif Des formats XML correspondant ces modèles Une bibliothèque Perl constitué de moteurs de rendu de ces modèles, de parseur XML, et d’une API pour manipuler les modèles Un ou des éditeurs graphiques pour fabriquer des modèles (éditeur d’interface) 1.4 Thèmes exploiter En analysant le sujet posé, j’ai tiré la première remarque C’est qu’il faut exploiter plusieurs thèmes suivants : système base de modèles, XML, langages déclaratifs, réseau de Petri, système de contraintes, système de layout, modèle des événements, Interaction Homme Machine, multi-modalités dans Interaction Homme-Machine, le rôle de XML dans Interaction Homme Machine, S ystème de thèmes, … Pham Nguyen Khang, Promotion VIII, IFI – Hanoï Modélisation en du fonctionnement des composants interactifs 1.5 Méthode de travail Afin d’accomplir le travail donné, j’ai recherché sur des travaux antérieurs, fait une analyse, effectué des expériences et la fin choisi une meilleure solution La façon de travail se résume comme suit : Rechercher sur travaux antérieurs Faire des expériences Répéter ce processus jusqu’ trouver une solution Il y a des parties que j’ai travaille autonome, et il y a aussi des parties que j’ai participé l’équipe : ? ? ? ? ? ? Etudier le noyau d’IntuiKit (personnel) Fabriquer des widgets en utilisant IntuiKit (personnel) Concevoir la notion de jeu des widgets et de thème (personnel) Identifier les modèles manquant dans IntuiKit (personnel) Choisir les modèles ajouter (travail en équipe) Mettre en œuvre (personnel) 1.6 Contribution La contribution de mon stage se compose de deux parties : ? ? Théorique : faire une grille d’analyse sur des widgets A partir de cette analyse, trouver des modèles manquants dans IntuiKit et enfin chercher modéliser les widgets WIMP en XML Pratique : implanter des modèles trouvés et écrire une bibliothèque des widgets classiques Intégrer cette bibliothèque IntuiKit 1.7 Structure de mémoire Ce rapport se divise en parties : ? ? ? ? ? Introduction : présente un peu sur le contexte de travail et le problème que je dois traiter Un état de l’art se trouve dans la partie qui présente quelques travaux des autres concernant ce sujet La partie est la plus importante Elle concerne mes solutions et méthodes pour résoudre le problème posé Une évaluation faite en utilisation sera abordée dans la partie En fin, quelques conclusions et perspectives se trouvent dans la partie Pham Nguyen Khang, Promotion VIII, IFI – Hanoï Modélisation en du fonctionnement des composants interactifs 31 3.3.4 Modèle de vue/coupure Ce modèle se base sur le modèle de coupure de TkZinc [TkZinc] Un groupe des objets graphiques peut posséder un élément spécia l qui définit une vue pour ce groupe Les parties dehors cette vue sont invisibles En déplaçant la position de cet élément, nous pouvons modéliser des widgets avec une vue scrollable Les widgets de container peuvent également posséder un coupeur (clipper en anglais) pour limiter la vue Exemple : pour faire défiler le contenu la vue un déplaceme nt dy les coordonnées sont recalculées par les formules suivantes : clipper.y = clipper.y + dy parent.y = parent.y – dy clipper parent dy Figure 23 : Modèle de vue scrollable Pham Nguyen Khang, Promotion VIII, IFI – Hanoï 31 Modélisation en du fonctionnement des composants interactifs 3.4 32 Système de thème 3.4.1 Modèle de thème Le thè me et son utilisation peuvent se résumer en l’équation suivante : Widget concret = widget abstrait + thème Afin de pouvoir construire un système de thème pour des widgets notre équipe a décidé de se baser sur cette hypothèse : Application = Thème + Structure + Noyau d’application En changeant le thème, nous obtenons une application avec une nouvelle interface d’utilisateur La structure d’interface se compose des widgets abstraits Ces widgets seront construits grâce aux thèmes Le thème joue le rôle d’un guide dans le processus de construction des widgets concrets Nous cherchons modéliser des thèmes pour les widgets abstraits Thème Peau (skin) du widget Structure du widget Fusion des variables et abonnement des événements Structure d’interface Noyau d’application Figure 24 : Modèle de thème et son rôle dans une application interactive Puisque le thème joue le rôle d’un guide pour la construction des widgets, un thème se compose donc des modèles pour tous les widget dans ce thème Le modèle pour un widget son tour se compose d’une liste des facettes d’interface s (skin), d’une structure (skeleton) et d’une partie de contrôle (merge, bind et dragger) ? Skin : défini une liste des composants que nous allons utiliser dans la structure du widget ? Structure : décrit un arbre des facettes qui constitue le widget, y compris des contraintes entre des facettes ? La partie de contrôle : o Merge : fait une fusion des variables o Bind : fait s’abonner des événements o Dragger : quand nous faisons un glisser-déplacer de la souris les opérations dans cette partie seront exécutés Un thème est défini dans un fichier XML Il sera chargé lors de la construction des widgets L’application d’un thème un widget nous donnera un widget concret avec le thème spécifié 3.4.2 Changement de skin d’un widget Un widget peut être changé son style en changeant le skin (ou plus fortement en changeant sa structure) Application d’un skin un widge t : un widget est modélisé comme ci-dessous Pham Nguyen Khang, Promotion VIII, IFI – Hanoï 32 Modélisation en du fonctionnement des composants interactifs 33 Modèle widget = skeleton + skin par défaut L’application d’un skin un widget nous donne un nouveau widget avec le skin changé Exemple : Check box Skin = x on x off Check box ° * on off Check box Skin * on = off Figure 25 : Application d’un skin un widget Nous utilisons ce caractère pour redéfinir un widget quand nous voulons créer un nouveau thème Puisque les FSM font partie du skin, le skin les comportements d’un changent aussi quand nous appliquons un nouveau skin ce widget Remarque : les structures d’ un widget dans les thèmes différents peuvent être différents aussi Exemples : Thème Windows Pham Nguyen Khang, Promotion VIII, IFI – Hanoï Thème Motif 33 Modélisation en du fonctionnement des composants interactifs Thème Céramique 34 Thème B3 Thème Platinum Figure 26 : Widgets dans des thèmes différents (dans QT) Comme nous voyons, les bars de défilement dans thème windows et thème motif ont même structure Mais les structures du bar de défilement dans le thème windows et thème B3 sont différentes 3.4.3 Héritage du thème Nous pouvons faire hériter un thème partir un autre thème Le nouveau thème possède tous les widgets dans le thème hérité Les nouveaux widgets pourront être ajoutés au nouveau thème Nous pouvons également redéfinir quelques widgets pour obtenir des widgets désirés En redéfinissant un widget, nous pouvons appliquer un autre skin l’ancien widget et/ou changer sa structure Pham Nguyen Khang, Promotion VIII, IFI – Hanoï 34 Modélisation en du fonctionnement des composants interactifs Chapitre : 35 Résultat et vérification Pour illustrer la solution proposée dans le chapitre 3, j’ai créé une bibliothèque WimpKit (écrit en Perl) qui se compose d’un moteur de rendu pour interpréter des widgets abstraits en widgets concrets d’IntuiKit grâce au modèle des widgets décris dans un thème, d’un solutionneur de contraintes (constraints solver) pour le système des contraintes, d’un parseur pour des descriptions des widgets en XML et enfin d’un adaptateur pour utiliser mes widgets dans IntuiKit 4.1 Présentation de résultat La distribution de travail se compose des modules en Perl et quelques thèmes exemplaires en XML 4.1.1 Les modules en Perl L’environnement IntuiKit se compose de trois paquetage principales (core : les classes de base ; base : FSM et Rules ; GUI : les classes pour des facettes graphiques) Pour être cohérent avec IntuiKit, j’ai créé un paquetage nommé WimpKit qui contient des classes nécessaires pour les widgets « skinnables » Puisque la classe WimpKit::Widget est héritée de la classe IntuiKit::Element, mes widgets peuvent être utilisés comme les autres éléments (les composants) dans IntuiKit Le thème est aussi un élément, nous pouvons alors le mettre dans l’arbre de composants qui constitue l’interface d’ut ilisateur Pham Nguyen Khang, Promotion VIII, IFI – Hanoï 35 Modélisation en du fonctionnement des composants interactifs 36 IntuiKit::Element IntuiKit::Base::FSM IntuiKit::Base::Rules IntuiKit::GUI::Element IntuiKit::GUI::Group IntuiKit::GUI::Rectangle IntuiKit::WimpKit::Widget Paquetage WimpKit IntuiKit::WimpKit::Theme IntuiKit::WimpKit::Graph IntuiKit::WimpKit::Part IntuiKit::WimKit::Variable IntuiKit::WimpKit::WidgetModel IntuiKit::WimpKit::Parser IntuiKit::WimpKit::ParserWidget Figure 27 : Diagramme de classes du paquetage WimpKit et sa position dans IntuiKit Pham Nguyen Khang, Promotion VIII, IFI – Hanoï 36 Modélisation en du fonctionnement des composants interactifs 37 4.1.2 Structure d’un fichier thème … … … … … … Un thème (déclaré par la paire et ) définit une liste des widgets (en fait, le thème compose des guides pour la constr uction des widgets Le widget concret sera construit par un moteur de rendu) Les widgets peuvent être définis directement dans ce fichier ou dans un autre fichier et sont référés par propriété xlink:href Un widget se modélise en parties principales comme déjà dit avant : skin (balise ), structure (balise ) et la partie de contrôle (, et ) La balise dans les balises et représente l’opération exécuter quand un événement a lieu ou quand il y a un glisser-déplacer de la souris Pham Nguyen Khang, Promotion VIII, IFI – Hanoï 37 Modélisation en du fonctionnement des composants interactifs 38 4.1.3 Utilisation des widgets WIMP dans IntuiKit Comme nous avons vu au début, les composants d’IntuiKit peuvent être définis en Perl et/ou XML et ils peuvent aussi être instanciés en Perl et/ou en XML Tous les widgets WimpKit que j’ai modélisés sont définis entièrement en XML Pour les utiliser (les instancier) en Perl, nous utilisons la classe WimpKit::Widget en lui donnant le nom du widget que nous voulons (Button, par exemple) Le widget sera construit grâce un thème utilisé Exemple : use IntuiKit::Simple; use IntuiKit::GUI; use IntuiKit::Base; use IntuiKit::WimpKit::Widget; my $frame = new GUI::Frame(-title => ‘Button Widget’); #créer un composant thème qui est décrit dans le fichier windows.xml my $theme = new Int uiKit::WimpKit::Theme(-source => ‘./theme/windows.xml’); #instancier le widget button avecle thème $theme my $button = new IntuiKit::WimpKit::Widget(-name => ‘Button’, -x => 50, -y => 50, -width => 100, -height => 50, -text => ‘OK’); $frame->bind(-source => $button, -spec => ‘CLICKED’, -action => sub {print “Button OK is clicked\n”}); run; Et le résultat : Figure 28 : Un bouton modélisé e n XML P our utiliser les widgets de WimpKit dans la partie XML d’IntuiKit, j’ai écrit un adaptateur En fait , cet adaptateur charge des widgets définis dans les fichiers XML correspondants et les interprète en un composant d’IntuiKit Exemple : le widget window est modélisé dans le fichier « window.xml » comme suit : Pham Nguyen Khang, Promotion VIII, IFI – Hanoï 38 Modélisation en du fonctionnement des composants interactifs 39 [...]... leave : ộvộnement reỗu : ộvộnement ộmis Figure 4 : FSM modộlisant le comportement dun Bouton Lutilisation des FSM nous permet de concevoir des ộvộnements plus haut niveau Comme dộcrit dans [Acott], des ộvộnements en plus haut niveau (par exemple : double- Pham Nguyen Khang, Promotion VIII, IFI Hanoù 15 Modộlisation en du fonctionnement des composants. .. modốle des widgets dộcris dans un thốme, dun solutionneur de contraintes (constraints solver) pour le systốme des contraintes, dun parseur pour des descriptions des widgets en XML et enfin dun adaptateur pour utiliser mes widgets dans IntuiKit 4.1 Prộsentation de rộsultat La distribution de travail se compose des modules en Perl et quelques thốmes exemplaires en XML 4.1.1 Les modules en Perl Lenvironnement... Center.width = parent.width West.width East.width 2*(margine + spacing) Center.height = parent.height North.height South.height 2*(margine + spacing) Pham Nguyen Khang, Promotion VIII, IFI Hanoù 26 Modộlisation en du fonctionnement des composants interactifs ? 27 Disposition en bordure horizontale : cest un cas particulier du type de disposition en bordure parent.width margine Left spacing Center... partie en haut Left Center Right Les contraintes: Center.x = Left.width Center.y = Left.height Center.height Center.width = Window.width Left.width Right.width Right.x = Window.width Right.width Right.y = Center.y Pham Nguyen Khang, Promotion VIII, IFI Hanoù 23 Modộlisation en du fonctionnement des composants interactifs 24 Left.width Center.x Left.height Right.y Center.y Root Window.width Center.width... des facettes est effectuộe par le mộcanisme dabonnement des ộvộnements Un ộvộnement sidentifie par une source (une facette) et une spộcification, et ộventuellement est accompagnộ par des paramốtres Quand un ộvộnement a lieu, le dộclenchement des actions associộes cet ộvộnement est lancộ Le modốle dabonnement des ộvộnements dans IntuiKit utilise seulement la deuxiốme phase (phase bubbling), et la propagation... ne dộpendent de rien (leur rang est le plus ộlevộ) seront ộvaluộes dabord Ensuite les variables dont le rang est moins de 1, et ainsi de suite, En fin cest le tour des variables don trien ne dộpend Propagation des changements : quand il y a un changement pour une variable Ce changement doit ờtre propagộ pour toutes les variables qui dộpendent de cette variable pour maintenir des contraintes En bref,... dộboguer peuvent ờtre trốs long Avec XUL, une interface peut ờtre implộme ntộe et modifiộe rapidement et facilement CSS (Cascade Style Sheets ) peuvent ờtre appliquộs Pham Nguyen Khang, Promotion VIII, IFI Hanoù 10 Modộlisation en du fonctionnement des composants interactifs 11 pour modifier lapparence des interfaces dutilisateur (ressemble le skin et le thốme dans WinAmp ou quelques manageur des fenờtres)... composants interactifs 16 clic, glisser-dộplacer) partir des ộvộnements de niveau plus bas (presse, relõche, dộplace) Cela forme un transducteur des ộvộnements click start : ộvộnement reỗu : ộvộnement ộmis Figure 5 : Transducteur des ộvộnements 3.2.1.4 Fusion des variables (merge) Cest un mộcanisme qui permet dexprimer quelques comportements... bubbling ằ Un ộvộnement peut ờtre rộpondu nimporte oự (un observateur) dans le chemin dans nimporte quelle phase par lanỗant une action et/ou en arrờtant lộvộnement Pham Nguyen Khang, Promotion VIII, IFI Hanoù 16 Modộlisation en du fonctionnement des composants interactifs 17 Figure 6 : M odốle dabonnement des ộvộnements recommandộ par W3C Dans IntuiKit, la communication entre des facettes est effectuộe... layout) : les 2 types de disposition c i-dessus crộent seulement des contraintes sur la position des objets mais pas sur la taille des objets Tandis que le type de disposition en bordure produit des contraintes sur la position et autant que sur la taille des objets parent.width margine North spacing parent.height West Center East South Figure 16 : Disposition en bordure Les contraintes : North.x = margine