Luận văn modélisation en xml du fonctionnement des composants interactifs

L’objectif de mon travail est de faire une analyse sur des widgets, concevoir une bibliothéque de widgets WIMP et de construire um systéme de thémes pour des widgets qui peut étre téléch

Modélisation eu du fanctionnement des composants intersctife 4

Abstract

‘My researchin the TnttiKat project is focused on finding the models in order to model in

‘XML the operation of the interactive canponents (widgets) Based on the fonnd models I

propose a system of theme for these components In fact, the system is similar to the font

system Tins signifies that we can apply 2 model of visual appearmce and of behaviour to

a user interface independent of the content of the interface

This paper describes how Lo model the widgets in XML and lo ceate a system of theme for widgels Il presents also inodels necessary for widgets such as: layoul model, behaviour model, view/cipping model, We proposed to use one way constraint systems

to model dynamic behaviours, This helps us to build a systein of theme which supports dynamic (even downloadable) appearance and behaviour changes tor graphical user

Modélisation eu du fanctionnement des composants intersctife 4

lable des matiéres

“

341 CONGAPHON

3.3/11 DSCOMPOSIUGS 2” UNSYSIEME INTERAC

3.21.2 MCDELS DE COMPOTION DES ZACETIES:

3241 DF CONTRATNTES A SENS DNICHP, (CINE WAY CCNSTRATNT SYSTEM), —

29

ab + +

Modélisation eu du fanctionnement des composants intersctife

Modélisation eu du fanctionnement des composants intersctife 6

Table de figures

Figure 3: Exemple du couviemeul de Parlee a

Figure 4: FSM modelisaul fe comportement d'un Bouton oe -

Figure 5: ‘Trmusdacteur des événements -

Figure 6: Moddle d’sbonnement des événements recommandé per W3C - -

#igure 7: FSM your le compemtessen du bouln _— - Figure 8: Structure du modéle de boulun -

‘Figure 9: Widget bouton modélisé en XML dans Intuiki

‘igure 10: Une contrainte gdométrique entre Le texte ct le rectangle

‘Figure 11: Modile du widget ¢ bar de détilement » (SeroliBar) - -

‘Figure 12: Un modile du widget Fenétre (Window)

¥iguve 13: Guphe représentanl les cntraintes avec tag dee scents _

Yigure 14: Disposition verticate -

Figure 15: Đisposiliun horizonlafe - - -

‘Figure 16: Disposition en bordure ¬ -

¥igine 17: Disposition en hordare horizontale 7 -

Figure 18: Disposition en bordure vesticale a

Figure 19: Mudde Wun ongiel 7 - Figure 30 : Mudife des ouglels - - Figure 21 Modile d’nn onglet avee container

Figure 22: Arbre de composants du modéle de longict avec contsines oe

‘igure 23: Modéle de vue scrollable ee -

‘igure 24: Modéle de théme et son réle dans une application interactive

‘igure 25 : Application d'un skin 4 un widget

Figure 26: Widgets dans des themes différents (dans QT)

Figure 27 : Diagramme de classes du paquetage WimpKil et sa position dans TantiKif -

*ieure 28 : Un bouton miodélisé en XML,

Figure 29 : Exemple du widaet fenétre -

Figure 30: Widget «Window » dans phusionrs themes différents

¥ignre 31 = Groope des anplets - - Xipure 32 : Fnmlaire _¬.- -

Modélisation eu du fanctionnement des composants intersctife 7

‘plus familier de jour en jour Pour cela, il y a eu beaucoup de recherches sur ce domaine

Ơn a cherché & créer des outils qui aident des réalisateurs a produire des logiciels inleratifs plus facilement et plus rapidement,

Quant mx utilisnteurs, ils désirent que des applications interactives avancés soient faciles 4 utiliser et 4 apprendre Aujourd'hni les utilisateurs veulent pouveir étre chez eux et utiliser dey logiciels saw dépenser leur temps pour ie deg aumucls, Néwunoiny, de elles interfaces d'utilisatenr sont ditliciles a designer et a implanter Plusiews recherches différentes ont montré que 484 du code de Yapplication est consacré a Pinterface

WVutilisateurs et qwenviron 50% du temps d’implantation est consacré a linterface

@ubilisateur [Myers$2], Quand des interfaces C'ulilisaleur deviement facile & uliliser, ils

devienment difficiles a uésr, Dex developpeuws Cinlerface di utilisaleur ont besoin des

cutils qui fournissent mm support plus riche pour le développement des interfaces

Pubilisalcurs avancus,

At coms des demiéres années, plusieurs ontils ont été créée pour aider des réalisateurs đimterfacc utilisatow, og «Toolkits», « User Interface Management Systems », « User Interface Development Environments » D’aprés la classification de ccs outils de B Myers dans [Myers95], 1Í y a trois types des outils que nous portvons lister comme ci-dessous

2 Qubils & base de langage (unguage-based lols) : exigent des développeurs d programmer dans un langage pour un but particulier

#? Ounls de spécification graphiques interactits (Interactive graphical specification tools): permettent de designer une interface d'utilisateur mteractive

#? Ouils à base de modéles (mudcHbused tools}: uliliseat un imodéle ou une spécification de riveau dlevé pour produire des interfaces d’ufilisateur

Je cycle de vie de I'interface d'utilisateur

A partir des amées 80s, il y a eu beaucoup de recherches sur des systémes A base de aodéles (iiodel Vased systems), Avec cus sysléines, nous voulons décompuser un sysléme

an modéles (¢t en plusiewrs nivean sémantique : moréle de tiches, syntaxique : modile de dialogues, lexique ; modte des événcmenls, .) ol chercher & les composer, L'inbértt de ces modéles est que des logiciels peuvent étre générés automatiquement & partir des zmodkles [Olsen93| L’approchs du développement des interfaces ('utilisateur a bese de modéles et ses outils foumissent toutes les phases dans le cycle de vie d’un logiciel interactif’ Plusiewrs actews (graphistes, programme, concepteur, chef de projet ) peuvent particrper au développement des logiciels Malgré tout, juequ’é maintenant il n'y a

Modélisation en du fonctionnement des composants interactifis 8

pas encore de grand suecès pour ces systémes Soit il est difficile a 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 a 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 4 produire des logiciels interactifs plus facilement et plus rapidement Pour I'instance, IntuiKit posséde des briques de base pour aider a fabriquer des logiciels Cependant, i manque certains modéles pour devenir

un toolkit complet

1.2 Motivationet objectifs du travail

Sensibilité a la problématique de I'Interaction Homme Machine, j'ai choisi đ'effectuer mion stage de fin d'études a Intuilab dans le projet IntuiKit Mon travail conceme a la modélisation en XML du fonetionnement 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 um systéme de thémes pour des widgets qui peut étre téléchargeable comme 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:/Avww intuilab.com ) est une entreprise privée trés jeune (fondée

en 2002) qui se consacre a fabriquer des applications d’Interaction Homme Machine multimodales (gestes, vocales, etc.) Intuilab đéveloppe un environnement de prototypage

et de production d'interface multimodales IntuiKit

InhuiKit crée a pour but de faire patticiper 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 no-programmeurs (graphise, ergonome, .), C'est l'architecture a base

de modéles (model-based architecture) oit le programme est définit par une composition des modéles Dans sa version complete, IntuiKit sera constitué de

2 Unensemble de modéles des différentes facettes d’un logiciel interactif

2 Des formats XML correspondant a ces modéles

2 Une bibliotheque Perl constitué de motews de rendu de ces modéles, de parseur XML, et d'une API pour manipuler les modéles

2 Un ou des éditeurs graphiques pour fabriquer des modéles (éditeur d’interface)

Pham Nguyen Khong, Promotion Vill, IFI—Hanoi 8

Modélisation eu du fanctionnement des composants intersctife ụ

1 Rechercher sur travanx autẻriets

2, Fuire des expériences,

Répéter ce processus jusqu’ A trouver une solution

Ty a des parties que j'ai lavaille autonome, el il y a aussi dex panties que jai pativipe

a Véquipe

3 Pmiier le noyan đ IntniKit (persormel)

Fabnquer des widgets en utilisant IntuiKit (personnel)

‘2 Concevoir la notion de jen des widgets et de theme (personnel)

‘2 Identifier les movéles manquant, dans TntwKit (personnel)

7 Chuisir les modéles à gjouler (travail en éyuipe)

7) Melire en œuwe (persumnel)

1.6 Contribution

Lacontribntion de mon stage se compose de deux parties

7° Théorique faire une yzille d'aualyse sur des widgets A partir de ceite analyse, trouver des modéles manqnants dans InfuiKit et enfin chercher A modéliser les widgets WIMP en XML

‘2 Pratique : implanter des mindéles trouvés et écrire une biblioth&que des widgets clasiques lulégrer celle bibliothéque ä IntidKil

1.7 Structure de mémoire

Ce rapport se divise en 4 parties :

‘2 Introduction : présente un pen snr le contexte de travail et le problame que je dois

2 Une évaluation faite en utilisation sera abordée dans la partie 4

7 En Gn, quelques conclusions el perspectives ve trouvent dans ta pattie $

Modélisation eu du fanctionnement des composants intersctife 1

Chapitre 2 : ‘Travaux antéricurs

2.1 Des travaux anterieurs

Ty a longtemps oi des programmeur travaillaient sur le systéme d'exploitation Me

DOS, aréer wn logiciel avec une interface d’utilisatcur demandat beaucoup de temps et de

travail La fagon Ja plus classique de communiqner entre Fhomme ct la machine est

@ouliliser des lignes de coummmdes (counmand line), Celle fagon est facile a prograuuner sais Vutilisatenr doit apprendre par cour des commandes La deuxiéme fason est de composer des interaceurs (ce yout des objets a travers Iesquele I utilisaleur commmuniquent avec machine) pour constituer une interface d'utilisateur

24.1 Outils a base de lampaye de programmation

La plus pat dey laugages de prognumualion fountissenl des lignes de commmandes @

taavers ley conmmundes « read» et « wiile ») La coumnunication enlze Thome et la

machine est faite par le clavier et I'écran Tl existe anssi des langages de programmation qui fourniysent des boties a outils (collection des intewuetcurs} pour construire des logiviels duleractifs comme Passcul (Turbo Vision), Foxpro, Java, Visual C++, QT de C++ sur linus, Perl-TK, J.es widgets fournis par ces langages sont modélisés sons forme des classes ava, Visual C++) Leur apparence et Jews comportements sont désignés rigidement par le code, Iu’y pas Ja nolion de théme des widgets dans Java, Visual Cl, Perl-TK, Dunc, ses widgets dépendent du syste d'exploitalion Lulilisaleur wamive pas a modifier Vapparence et les comportements des ces widgets QT fonrnit la notion «style » que nous porlvons utiliser pour simuler des widgets de Windows, Motif, Nous ponvons créer des

‘aalerfacey d'utilivalcur mdépendanles du systeme d’exploitation De plus, le vlyle d'un widget peut étre changé dynamiquement (an cours d'exécution đu programme)

L’utilisatew peut aussi déñmir un nouveau style & lui Cependant, tous les widgets sont

définis par le code Tl n' ya que des programmenrs qui peuvent modifier cu ajouter des styles

Le développement des logiciels en utilisant ces langages dépend beaucoup des proguummeus De plus, il ea difficile de créer dee interfaces dutilivatewr fautuisivles 1 est compliqué de créer un bouton doa la foune vat un cerele, par exemple

2.1.2 Outils utilisaut XML

a XUL (eXtensible User lulerface Langupupe)

XUL (prompucé comme «zoul») a été oréé pour faze développer ke browser Mozzila pins facilement et pins rapidement C’est un langage basé snr XMI pour description le

contenu de fenéie ct boite de dialogue XUL povstde wi langage pour lous les widgets

typiques comme : toolbars, trees, progress bars, memus, button, check box, radio button,

Ce langage a été créé pour des applications de Movilla et est utilisé pour définir leur

imerface d'utilisateur L’implémentation de XUL et browser Mozilla sont en trains de

changer de jour en jour XUL est 1m des langages désignés spécifiquement pour construire des inlerfaces d'ulilisaleur portables Normalemenl, 1 prend beaucoup de lemps pour constmire ime apphcation pour chaque plateforme T.e temps nécessaire pour compiler et deboguer peuvent étre trés long Avec XUL, une interface peut étre implémentée et modifié rapidement et facilement CSS (Cascade Style Sheets) peuvent étre appliqués

Modélisation en du fonctionnement des composants interactifis n

pour modifier l'apparence des interfaces d’utilisateur (resemble le skin et le theme dans

‘WinAmp ou quelques manageur des fenétres) Comme XUL est un langage pour construire des interfaces portables, i demande donc w moteur de rendu pour chaque platforme

b XAML €Xtensible Application Markup Language)

XAML (prononcé comme « zammel ») : C’est un des technologies intéressantes pour des développeurs de Microsoft ‘Longhorn’ Markup Language Il est un langage de marge basé sur XML (XML-based markup language) Les interfaces d'utilisateur dans des applications de Longhom sont typiquement construite en utilisant XAML

Des interfaces d’utilisateur de XAML sont établies plus ou moins de la méme facon en tant que des interfaces d’utilisateur de Web HTML Nous créons simplement wn document avec des balises pour des éléments d'interface d'utilisateur comme: button, text, radiobutton, que nous désirons

C’est un langage de la famille XML qui permet de créer des applicatons interactives en

‘XML Une chose trés intéressante dans LASZLO est qu'il nous fournit un mécanisme pour pouvoir modéliser de nouveaux interacteurs (directement en XML) et les réutiliser Cependant, pour modéliser des comportements il nous faut écrire des scripts LASZLO posséde quelques caractéres d’un langage de programmation orienté objet comme Vhéritage, la déclaration des attributs et des méthodes, Comme ks widgets foumit par LASZO sont prédéfinis Nous ne pouvons que changer leur apparence par des paramétres prédéfinis Il n'y a pas la notion de theme dans LASZLO Puisque LASZLO utilise des scripts pour des comportements, il cause des difficultés pour des non-programmeurs

2.1.3 Travail deHudson

Hudson et al, ont proposé dans [HUDSON97] un systéme de thémes pour l'apparence des composants interactifs dans Iimterface d’utilisateur Ts ont aussi introduit un mécanisme de composer des objets graphiques pour construire un interacteur, D’aprés ce mécanisme, l'apparence d'un composant interactif est une composition des objets graphiques (des images) Les auteurs ont aussi abordé un systémes de contraintesentre ses objets Pourtant, comme le nom d’article , ce n’est pas wn systéme de themes complet mais setilement un systéme pour I'apparence des composants interactifis

2.1.4 IntuiKit

C’est un environnement pour le développement des logiciels interactifs Il permet plusieurs acteurs (concepteur, graphiste , programmeur, .) de participer au développement des interfaces d’ vilisatew IntuiKit a proposé I’architecture a base des modéle XML Le noyau d'IntuiKit (avant mon stage) nous permet & modéliser des widgets simples en XML comme Button, Radiobutton, CheckBox Pour des widgets plus complexes, il ne foumit

Pham Nguyen Khong, Promotion Vill, IFI—Hanoi „

Modélisation eu du fanctionnement des composants intersctife 1

twy encore TÏ iuamque quelques mmodÈlcs mécossnires pour les restes widgets, De plus, il

#'agi de produire des widgets conerets WJone, il est difficile (voire impossible) de les véufiliser autant que de les étendre Par contre, ¢’est ime approche trés intéressante pour la

composition des components interactifs IntuiKit utilise des dessins SVG pou la

đếcoradơn Em composam des glémenls SVG, uous pouvons créer des interfaces

@'ntibsateur plus jolie

2.2 Quelques remarques sur des travaux antérieurs

Les travanx considérés an-dessus me conduit & quelques remarques suivantes :

2 Pou les ontils A base de langage de programmation, le développement d'un logiciel inleractif depend beaucoup des programmews,

2 Les widgets sont modélisés comme des boites noires : les widgets sont implantes sous forme des classes (de langages de programmation) on déclarés gnice des balises KML Le processus de construction des widgets fait parti du code LASZLO nous permet de modéliser de nouveanx widgets Mais comme il utilise des scripts pour des comportements, ce ne sont que des programmewrs qui peuvent les écrire

2 Jusqu’a présent, 41 y pas de notion de thime complet pour les widgets : un théme des widgets est unc collection des guides qui paticipe a Ja construction des widgets La plupart des outils Iuisse ces guides dans Ia partic d'implanlation, QT a introduit ta

notion đe theme mais malheureusement ces thames sont définis directement en code

de C11 eat pour cela senlement les programmes peuvent créer de nonveaux thémes, Des thémes deus XUL gout toul uniment des CSS qui changent seulement Tappmemee des widgels Les comportements ef Ja structure des widgets sWappartiennent pas an théme

A partir ces analyses, nolie cyuipe a décidé d'ajouter & lnwiKil un sysléme complet

pour des widgets classiques (widgets de WIMP)

Modélisation eu du fanctionnement des composants intersctife 1

Chapitre 3 : Méthode ct Solution

3.1 Problématique :

La plupart des toolkits qui foumissent KML (XUL, XAML) none permet de déclarer tr

widget en donnant le nom ct ses attributs Le processus de construction du widget cst sous-

cntendu, ct est fait par «code amiére » (code behind) Nous n’amivons pas ä intervenix au processus de construction Par conséquence, il esl impossille de modifier des comportements dn widgets (sauf que novs réécrivons le code pour le processus de construction des widgets dans le motcur de rendu Cvest un gros (avail et wes pas intéressant du tout !)

Nous cherchons a modéliser les widgets en XML (en plus de les noms et les aftributs)

Aulenicut dil, nous cherchous wi moedéle pour des widgets afin que mous puissions décrie:

Jeur processus de construction en KML Bt en fin, cela sert 4 construize mn systéme de thime pour des widgets Avec cette solution, nous pouvons bien infervenir 4 la

construction des widgets Il est facile de a¢er des différents thémes pour les widgets (par

exemple, changer bk « peau», le cumporlement pour un widget, , sans modifier aucun code), L’application sera bien séparée de d'interface Une Suis une application esl écrile, nous ponvons changer facilement l'interface sans auctme modification đe Ï'application

1'uilisaiow de XML et SVG (Sculable Vector Graphics) uous pennet de rendre téléchargeable des thémes Le thime est livré sous forme des fichiers XML, SVG ot éventucllement des fichiers images

32 Environnement ImtuiKit

32.1 Conception

3.2.1.1 Décomposition duu systéme interactit

Dans IntuiKil, un systeme interactif est décompos¢ en plusieurs modéles qui s'appelle nt

facettes Ces modéles sont composés grace A wn modéle de composition La

communication entre des facette cst faite par Pémis ct V’abonncment de ¢vénements

Ty a trois types de facettes principanx :

2° Eldment SVG : des dlémenly déclaréy en SVG (eel, path, )

2 FSM: machine & élal Gaul (voir comportements discreis)

2? Rules: modéle de contréle d'affichage

Un «atles » possèdc dˆun ¿tát inten L’allichege de sez fils est fait en fonction đc

Modélisation eu du fanctionnement des composants intersctife

C me) idle 5 [-vidle’, \/mask]

active 2° [‘uchive’, ‘mask"]

GS Gp tap

Figure 1; Un rules aver ses 3 fis et 2 régles

1

Sï Fátat đe «miles » est «idle » les 2 fils ‘idle’ et ‘mask’ seront affichés Si I’état de

«rules >» est « active » ‘active’ et ‘mask’ seront affichés D’autres cag, rien n’est affiché

En praigue, le comtrôle de Ï'état inleme de «rules » est exdeute grace & une FSM

3.2.1.2) Modéle de compusilion des facettes

a Arbre de composanis : les cơmposanls soul organisés en arbre Nous avons choisi cette

stricture pour la cohdrence avec SVG D’aillews, la structure d’arbre correspond bien ala structme de XML.Dans IntniKit, um modéle (an sous arbre de composants) peut atre défini en Perl (ou @’autres langages de programmation dans le futur) ott en XML Mous pouvons instancier tm modéle dans Per] on XML

Tnstanctation XML ‘Aulre Iangage

‘Séparer la pattie interface avec Je noyan

Permettre de construire d"apphcaliơn

XMI, une application enliéxe cn

XML Permettre de faire

Definition panticiper des progranuncurs et des non-programmeurs

des nouveaux modéles dans

Autre langage de vụ /|,

Importer Jes modéles

difficile a définir en XML

Figure 2 : D éfinttion et Instanciation des msdéics

b Couvrement de Parbee ; la référence des ucends est faite par le langage de référence & nous (im peu simdlaiie au lengage XPath recommundé pox W3C)

toto :Je frére ‘toto” da neeud examiné

Le couvrement de larlve sert a indiquer la source des événements dans Ie modéle dabonnement des événements

Modélisation en du fonctionnement des composants interactifis

‘xpath ( /tata)’,

*BLABLA', sub {print “tata émet BLABLA\n”)) z

<EVENEMENT> — : événement regu

<EVENEMENT> ì événement émis Figure 4: FSM modélisant le comportement d’un Bouton

L'utilisation des FSM nous permet de concevoir des événements plus haut niveau, Comme décrit dans [Acot], des événements en plus haut niveau (par exemple : double-

Pham Nguyen Khong, Promotion Vill, IFI—Hanoi 1

Modélisation en du fonctionnement des composants interactifis 16

clic, glisser-déplacer) a partir des événements de niveau plus bas (presse, reliche, déplace) Cela forme tn transducteur des événements

sien a <EVENEMENT> i événement émis

Figure 5: Transducteur des événements

3.2.1.4 Fusion des variables (merge)

C'est un mécanisme qui permet d'exprimer quelques comportements continus Un

changement d’nn variable cause le changement des autres Quand nous faisons tne fusion entre un attributs des fils et celui du père, cela nous donnera tine encapsulation

La synchronisation de l'état d'une FSM et d'un «Rules » est faite par ce mécanisme

Exemple

§fsm->merge (name => [§fsm->current_state, $rules->current rule]) +

Chaque fois quand le $fsm change I’état (un événement a lieu, par exemple), Tétat inteme de Srules change aussi Par conséquence, cela constitue un modéle «control — vue » (control - view),

Cependant, ce mécanisme ne permet pas d'exprimer tous les comportement continus I nest possible que d’exprimer des contraintes de type «égaÙ› = b= ) Nous avons donc besoin d’autres modéles pour pouvoir modéliser des comportements continus

3.2.1.5 Modéle d’ émis et d’abonnement des événements

Un événement est la représentation de asynchrone occurrence (comme un clic de souis, une touche de clavier, .) associé avec un élément cible

Modéle d'abonnement recommandé par W3C:: en général, quand wn événement a liew

il est expédié a partir du racine al'élément (Source d°événement) qui émet Ï'événement dans la phase «capturer » Du source d’élément 'événement peux étre passé Ï'arbre encore une fois en direction inverse dans la phase « bubbling » Un événement peut étre répondu à n'importe of (un observateur) dans le chemin dans n’importe quelle phase par langant une action et/ou en arrétant I’événement

Pham Nguyen Khong, Promotion Vill, IFI—Hanoi 16

Modélisation en du fonctionnement des composants interactifis 1

Le modéle d’abonnement des événements dns IntuiKit utilise seulement la deuxiéme phase (phase bubbling), et la propagation s’améte quand il y a un observateur qui consomme cet événement Dans tne action, des événements peuvent étre aussi émis Done,

en s‘abonnant sur une facette, un consommateur peut capturer tous les événements émis

par cette facette, ses fils et ses descendances (si il n'y a personne qui s‘abonne sur les đemiers)

3.2.2 Exemple

Nous allons analyser et créer le widget bouton Le bouton que nous examinons a forme rectangle avec un texte centré Par défaut, le bouton est en état « normal » (représenté par

la couleur bleu) Quand nous poussons sur le bouton, il va a l'état « poussé » (représenté

par la couleur rouge) et quand nous le relachons, il revient |’ état « normal »

Analyse :

Liapparence : nous utilisons wm rectangle bleu pour l'état « normal» et un rectangle rouge pour état « poussé » Tous les 2 états partagent um texte commun De plus, un masque (invisible) sera utilisé pour capturer des événements de la souris Il y aura 2 régles utilisés pour le contréle d’affichage

2 normal z {normal, text, mask]

? push [press text, mask]

Comportement: nous nous servons un FSM 4 2 états pour modéliser le comportement

du bouton

Pham Nguyen Khong, Promotion Vill, IFI—Hanoi m

Modélisation en du fonctionnement des composants interactifis 18

<release>

<dick >|

Figure 7: FSM pour le comportement du bouton

De l'état « normal », FSM changera son état en état « press» sil'événement « press » a lien, Et de I’état «press» si l’événement «release » se produit FSM reviendra & l'état

« normal », la synchronisation entre FSM et Rules est faite par le mécanisme de fusion des variables

Structure des composants

Modélisation en du fonctionnement des composants interactifs 9

<transition from=*normal” on=*press” to=*push”/>

<transition from=*push” en=*release” to=“normal” outpu

<! fsm référence sur le modéle >

<part id=“button_fsm” xlink:href="#fsm"/>

“normal” width="200" height="50" fil1="blue” xmins=*svg’"/>

“push” width="200" height="50" fill="red” xmins="svg"/>

“mask” width="200" height="50" £il1-opacity="0”

< synchronisation entre « FSM » et « Rules » >

<var id="state” default-value="normal”>

<importvar part-id=“button_fsm” yariable="current_state*/>

<importvar part-id=“button rules” vaciable="current cule ”/>

<var id=*text” default-value= “OK”>

<importvar part-id="label” value=*tex

La partie <structure> déclare 1a structure du modéle de bouton, La fusion de 1a variable curtent_state et variable current_rule est décrite dans la partie <variables>

‘Pham Nguyen Khong, Promotion VIII, IET=Ranọ »

Modélisation en du fonctionnement des composants interactifis 2»

Résultat :

Figure 9: Widget bouton modélisé en XML dans Intuikit

3.3 Les modéles manquants dans IntuiKit et solutions

IntuiKit manque quelques modéles pour pouvoir modéliser des widgets en XML En analysant des besoins et donnant des scénarios d’utilisateur, j'ai trouvé enfin les modéles

2 Modéle de vue/coupure (view/clipping): définit une vue pour un composant graphique En changeant la vue, nous pouvons faire des widgets scrollables

2 Modéle de themes pour des widgets: nous cherchons a modéliser un systéme de thémes pour des widgets qui fonctionne comme un systéme de polices pour des

textes

3.3.1 Comportements continus

Test impossible d’exprimer tous les comportements en utilisant simplement des FSM Par exemple : dans le widget « bar de défilement » (scrollbar), le déplacement du bar de défilement est associé celui de la souris ; un autre exemple, c'est que nous voulons modéliser un widget dont la taille peut étre changé en fonction du déplacement de la sours Ace propos, i demande un modéle pour décrite ces contrainte s Aprés avoir beaucoup travaillé sur ce probléme, j’ai trouvé que le systè me đe contraintes a sens unique est un des bons choix Ce systéme est aussi utilisé pour organiser des facettes graphiques (voir miodéle de disposition),

3.3.1.1 Attributs a base d’expressions

Exemple 1: nous youlons modéliser le widget Button avec un texte centré sachant que

le Buiton a forme d'un rectangle et le texte est aligné au centre, Done, nous obtenons 2

contraintes suivantes

Text.x = Rectangle.x + Rectangle.width / 2

Text.y = Rectangle + Rectangle.height / 2

Modélisation en du fonctionnement des composants interactifis a

Figure 10: Une contrainte géomeétrique entre le texte et le rectangle

Exemple 2: en modélisant le widget « bar de đéñlement », j’utilise un variable «pos » pour indiquer la position du bar La position du bar dans I’écran peut s‘exprimer par la fomnule :

Bar.y = pos * length / max+ margin

‘margin o

Bary pos Domaine de vue et

contréle Bary+ dy pos” Domaine de données

wa margin + length i max

Figure 11: Modéle du widget «bar de défilement » (ScrollBar)

Et quand nous déplagons le « bar » (faire un glisser-déplacer sur le «bar »), 1a nouvelle valeur de « pos » sera calculé e par

pos’ = pos + dy * max/ length

Cela se modélise en XML comme suit :

<arag

<do

</dca

Ga vent dire que quand nous faisons un glisser-déplacer sur la facette « bar », la valeur

de « root pos » est recalenlée par la formule ci-dessus

e=“root.pos" value="#mouse.dy#" ~/>

Dans ke noyau actuel d’IntuiKit, nous ne pouvons exprimer ces contraintes qu'en code mais pas en XML C'est la raison pour laquelle j'ai cherché a trouver une solution pour ce

probleme Et en fin, la solution d’utiliser les attributs ả base d’expressions a été choisie

D’aprés cette solution, les attributs d'un widget peuvent accepter une expression comme sa valeur Et la vraie valeur sera calculée quand nécessaire En utilisant les attributs a base

expressions, il est capable d'exprimer presque tous les contraintes calculables Cependant, ce choix n'est pas trés facile pour les non-programmewss A long terme, il demande d'autres modéles plus efficace, un nouveau langage pour la description des

contraintes , par exemple

Pham Nguyen Khong, Promotion Vill, IFI—Hanoi a

Modélisation eu du fanctionnement des composants intersctife 2

33.1.2 Systme de comtraiutes seus unique (Que way constraiul system)

L’utilisation des attributs & base des expressions demande un mécanisme d’ évaluation

des expressions Aulrement dil, les altcibuls a base d'expressions funment un systéme de contraintes et nous cherchans 4 les résoudre Pour sinmplifier, je propose que les contraintes gne nous potvons déctire ne forment pas de boucle Ga veut die qu'il existe pas le cas

it un alltibul Ai dépend d'un utiibut Av qui dépend d'un aulze allaibul As, el ainwi de suite jusqu’d Valibul Ay et A, dépend de Valzibul A,

Avec cette limite, notre systéme de contraintes est un systéme de contmintes A sens

‘cunigne (ont um flot de données) Grace a Valgorithme d’arrangement de graphe, j'ai tromvé une solntion que nous pouvons voir ci-dessons ponr résoudre de tels systmes de contraintes Cet algorithme est pilus rapide que lalgorithme paressenx décrit dam [Hudson96) car tous les neends a calculer sont examinds me seule fois

Description ; un tel systéme de contraiules peut se reprdsenter par un grphe orient sans boucle Chaque mend est lié A we variable (attribut d'un widget) Une améte de i à j signifie que Ja variable i dépend de la variable j (j est présent dans I’expression de ) Lévaluation de i ext walisée apris celle de j

xemple

fetowidth tatawidth/2 + 10

Le need associé 4 Ja variable « toto width» est examiné après le noeud associé 4 la

variable « tata width »

Solutiommur deg coutraies (Constraints solver): a pour bul de résoudke des

contraintes

Alserithme d'évaluation des variables ;

1 Arranger le graphe par Valgavithme d'arrangement de graphe

2 Evaluer les variables (basé sue leur rong}, Les variables qui ne dépendent de rien

deur rang esi le plus élevé) seront évaluées dabord Ensuite les variables dont le

rang est moins de I, et ainsi de suite, infin c'est le tour des variables don tien

ne dépend

Propagation des changements : quand il y a un changement pour une variable Ce unigement doit Ge propagé pour toules Jez variables qui dépendent de cette variable pour maintenir des contraintes Tin bret, tontes variables dépendant de cette variable doit atre secalculées

Algoritinne de provay:dion des changements

Appelaus :

%2 N:lenœmd quả cause le changement

#2 Q.1a Ble d'zienle contenend les ñ@uds à évaluer Les ngudš đams QQ soi tries por lem rang

Algoridune :

Q contient tes neeuds « pire » de N (ceux qui dépendent directement de N}

Tant ques (n'est pas vide » faire

4 A aile premier neud dans Q

Modélisation en du fonctionnement des composants interactifis B

Right.x = Window.width— Right.width