Specificarea abstracta a interfetelor folosind UIML si UsiXML

MotivatieAplicatii actuale se axeaza pe functionalitati din ce in ce mai complexe si pe o interactiune cu utilizatorul mult mai bogata, incercand sa cuprinda cat mai multe platforme si dispozitive atat conventionale cat si neconventionale. Astfel ecranele tactile, recunoasterea scrisului si a vocii, folosirea stylus-ului, sintetizarea vocii, dispozitive portabile au devenit mult mai folosite, asteptarile utilizatorilor crescand odata cu intrarea acestor noi forme de interactiune. Aceasta diversitate de tehnologii ridica probleme de la modul in care sunt realizate si distribuite aplicatiile catre utilizatori, pana la probleme de implementare. Putem vorbi astfel de nevoia de a porta o aplicatie pe mai multe dipozitive precum PC-uri, dispozitive mobile precum, pagini web sau alte dispozitive pentru persoane cu disabilitati.

Construirea aplicatiilor pentru mai multe medii de interactiune presupune cateva obstacole precum asigurarea suportului pentru multiple coduri sursa pentru a oferi aplicatia pentru diverse dispozitive. In al doilea rand, complexitatea interfetelor difera semnificativ in ceea ce priveste continutul, de exemplu, interfetele pentru PC fata de cele pentru telefoane mobile difera la modul de organizare dar si la modul de interactiune. O alta problema este reprezentata de riscul de dezvoltare a unor interfete pentru platforme care ar putea sa nu mai existe in viitorul apropiat.

Proiectarea interfetelor utilizator interactive devine foarte dificila din cauza complexitatii si diversitatii mediilor de dezvoltare si a cunostintelor de programare necesare de un programator: markup languages (HTML), limbaje de programare (C++, Java), cunostinte pentru ingineria utilizabilitatii etc. Aceste dificultati sunt accentuate atunci cand aceeasi interfata ar trebui sa fie dezvoltata pentru contexte multiple de utilizare precum categorii diferite de utilizatori (de exexmplu avand preferinte diferite, vorbesc limbi native diferite, unii suferind de anumite dizabilitati), platforme diferite (de exemplu, telefon mobil, Pocket PC, laptop), si diferite medii de lucru. Cu toate ca fiecare limbaj de programare dispune de o modalitate de a crea intefete utilizator si ofera suport pentru distribuirea pe diverse dipozitive, nu tot timpul vom putea pastra fluiditatea unei intefete pe acele dispozitive, astfel vor exista conflicte de usabilitate pentru si de interactiune cu utilizatorul.

Sa presupunem ca dorim ca o aplicatie pe care am creat-o sa poata fi accesata de pe dispozitive multiple. Sa luam ca si exemplu un magazin de diverse articole in care dorim ca clientii sa poate face comenzi in mod electronic de pe patru dispozitive diferite. Aceasta va fi o munca foarte laborioasa din punct de vedere al implementarii precum si a realizarii interactiviitatii pentru cele patru dispozitive diferite. Putem identifica in acest scenariu urmatoarele probleme:

• Cunoasterea a patru limbaje de programare diferite; mai mult, noi versiuni ale acestor limbaje apar in mod continuu;

• Vor exista patru modalitati diferite de a descrie interfata (de exemplu, utilizand tag-uri pentru HTML, metode Java etc.), patru modalitati de a descrie cum interfata apeleaza logica aplicatiei (de exemplu, inregistrarea comenzile intr-o baza de date, sau calcularea pretului produselor comandate).

• Va trebui asigurat suportul pentru cele patru aplicatii, inclusiv atunci cand sunt necesare functionalitati noi.

• Aparitia unui dispozitiv va genera aceleasi probleme, refolosirea codului pentru noul dispozitiv, nu va putea fi realizata in cele mai multe cazuri.

Luand in considerare problemele expuse in paragrafele de mai sus putem semnala nevoia de standardizare, si de modularitate a aplicatiilor si mai precis a intefetelor cu utilizatorul. Vom prezenta in cele ce urmeaza doua limbaje bazate pe tehnologia XML, care au ca scop definirea in mod abstract a intefetelor, precum si modul de implementare a acestora in diverese platforme si limbaje de programare.

UIML

UIML (User Intercface Markup Language) se afla la versiunea 4.0 fiind specificat de OASIS (Organization for the Advancement of Structured Information Standards ).Acesta a fost proiectat pentru a servi ca unic limbaj ce permite crearea crearea de interfete pentru orice dispozitiv, orice limbaj de programare si orice sistem de operare intr-un mod abstract. Acest lucru reprezinta un avantaj in vederea modelarii si proiectarii intr-un mod cat mai flexibil a intefetelor cu utilizatorul. Faptul ca UI este definit in mod abstract permite adaptarea aplicatiei si implicit a interfetelor la orice dispozitiv conventional sau neconventional. UIML nu este un limbaj ce creeaza interfete multiple dintr-o singura descriere, ci este un limbaj in care aceste interfete sunt inregistrate.

In substanta acesta descrie trei lucruri:

• Modul cum arata interfata, daca interfata ar trebui sa contina spre exemplu butoane pentru a permite selectia diverselor optiuni, precum si caracteristicile specifice butonului, culoarea, pozitionarea, font-ul, precum si alte caracteristici.

• Interactiunea cu utilizatorul. Mai precis se defineste ce actiune rezulta in urma apasarii acelui buton descris si cum este trata acesta interactiune. Aceasta descriere comportamentala este ce in mod normal se afla intr-un event handler dintr-un limbaj precum Java sau C#, sau in scripting in HTML

• Metoda de realizare a conexiunii dintre interfata si logica aplicatiei. Se defineste metoda in care acel buton comunica cu un server sau alte compomente logice ale aplicatiei.

UIML este proiectat pentru a fi un "markup language" relativ simplu. In contrast cu Dynamic HTML sau XSL, ce au foarte multe tag-uri pe care putine persoane le cunosc pe toate, UIML are mult mai putine. El este de asemenea independent de orice metafora in ceea ce priveste interfata, precum interfata grafica sau vocala. Este de asemenea proiectat pentru a permite compilarea eficienta din UIML in orice limbaj (Java, C, HTML, VoiceXML etc.). Respectarea sabloanelor de proiectare este posibila, desi definita la modul abstract. Un dezavantaj ce poate fi identificat imediat ar fi modul de descriere a interfetei, aceasta neavand posibilitatea de a furniza un raspuns imediat cu privire la diverselor probleme de interactiune, precum si la testarea interfetei, totul fiind abstractizat. Totusi marele avantaj e ca in orice moment al stadiului de proiectare si definire a interfetei finale se poate interveni si schimba modul de organizare in vederea adaptarii pe diverse dispozitive si eventual noi cerinte din partea utilizatorilor.

Figura 1. Modul de organizare a unei interfete definite prin UIML

Conceptele care stau la baza UIML sunt urmatoarele:

1. Poate fi considerat un meta-limbaj. UIML, fiind bazat pe XML, defineste o multime mica de tag-uri, precum <part> pentru a descrie o componenta a interfetei sau <property> pentru a descrie o proprietate a componentei. Tag-urile UIML sunt independente de orice metafora, de platforma tinta sau limbaj in care UIML va fi mapat (de ex., VoiceXML, HTML).Pentru a utiliza UIML,

trebuie adaugat un vocabular (analog cu adaugarea unei DTD pentru un document XML). Vocabularul specifica o multime de clase a componentelor si proprietatile claselor. Grupuri diferite de persoane pot defini vocabulare diferinte, in functie de nevoile lor. UIML poate fi standardizat o data si tool-uri pot fi dezvoltate independent de dezvoltarea vocabularelor.

2. UIML separa elementele interfetei. Aceasta separare identifica ce componente contine o interfata, modul de prezentare pentru fiecare componenta printr-o lista de elemente <property>, continutul fiecarei componente (de ex., text, sunet, imagini) si asocierea componentelor cu resurse externe (de ex., resurse XML sau apeluri de metode din obiecte externe), comportamentul componentelor cand un utilizator interactioneaza cu interfata ca o multime de reguli cu conditii si actiuni, conexiunea interfetei cu logica aplicatiei si definirea vocabularului dorit.

3. Organizeaza structura interfetei in mod logic, ca un arbore de componente care se schimba pe parcursul ciclului de viata al interfetei. Acest arbore isi poate schimba forma in mod dinamic prin adaugarea sau stergerea de componente. Spre exemplu, deschiderea unei ferestre noi ce consine butoane intr-o intrefata grafica poate corespunde adaugarii unui sub-arbore de componente arborelui UIML. UIML ofera elemente pentru a descrie structura initiala a arborelui (<structure>) si pentru a modifica dinamic structura (<restructure>).

4. Permite componentelor interfetei si arborilor aferenti sa fie impachetati in template-uri. Aceste template-uri pot fi apoi folosite in design-uri diferite.

Datorita acestor concepte, UIML este foarte util in crearea de interfete multiplatforma, multimodale, pentru limbaje diferite si dinamice.

Un exemplu al unui document UIML este prezentat in randurile urmatoare:

<?xml version="1.0"?><!DOCTYPE uiml PUBLIC "-//Harmonia//DTD UIML 3.0 Draft//EN" "http://uiml.org/dtds/UIML3_0a.dtd"><uiml> <interface> <structure> <part id="TopHello"> <part id="hello" class="helloC"/> </part> </structure> <style> <property part-name="TopHello" name="rendering">Container</property> <property part-name="TopHello" name="content">Hello</property> <property part-class="helloC" name="rendering">String</property> <property part-name="hello" name="content">Hello World!</property> </style> </interface> <peers> ... </peers></uiml>

In <peers> va trebui sa specificam motorul de randare a codului astfel avem doua posibilitati prezentate mai jos. Prima varianta va randa interfata in VoiceXML, iar a urmatoare in WML.

peers> <presentation id="VoiceXML"> <d-class id="Container" maps-to="vxml:form"/> <d-class id="String" maps-to="vxml:block"> <d-property id="content" maps-to="PCDATA"/> </d-class> </presentation></peers>

<peeers> <presentation id="WML"> <d-class id="Container" maps-to="wml:card"> <d-property id="content" maps-to="wml:card.title"/> </d-class> <d-class id="String" maps-to="wml:p"> <d-property id="content" maps-to="PCDATA"/> </d-class> </presentation></peers>

UsiXML

UsiXML (USer Interface eXtensible Markup Language) este de asemeni un limbaj bazat pe XML, ajuns la versiunea 1.8.0, ce descrie o interfata pentru contexte multiple de utilizare, precum interfete textuale, interfete grafice, interfete audio si interfete multimodale. Cu alte cuvinte, aplicatii interactive cu diferite tehnici de interactiune, modalitati de utilizare si platforme pot fi descrise intr-un mod ce pastreaza design-ul independent de caracteristicile platformei. UsiXML este definit ca o multime de scheme XML. Fiecare schema corespunde unuia din modelele folosite.

UsiXML este destinat si celor care nu sunt dezvoltatori. Cu ajutorul acestui limbaj, ei pot schita interfata oricarei aplicatii interactive prin specificarea si descrierea ei in UsiXML, fara a fi necesare cunostinte de programare. Limbajul descrie la un nivel mare de abstractizare elementele constituiente ale intefetei unei aplicatii: "widget-uri", controale, containere, tipuri de interactiune, tehnici de interactiune etc. De asemeni ofera independenta de dispozitiv: o interfata poate fi descrisa intr-un mod independent de dispozitivele utilizate in interactiune precum mouse-ul, tastatura, sistemul de recunoastere a vocii etc. in caz ca este nevoie, poate fi facuta o referinta la o platforma particulara.

UsiXML ofera independeta in ceea ce priveste tipul de interactiune: interfata poate fi descrisa independent de orice tip de interactiune, precum interactiune grafica, vocala, haptica etc. in caz ca este nevoie, poate fi facuta o referinta la un tip particular. UsiXML se adreseaza ca si UIML problemelor cu care dezvoltatorii se confruta in construirea de interfete modulare, flexibile si usor adaptabile pe diferite medii de interactiune. UsiXML permite reutilizarea elementelor continute intr-o interfata sa fie folosite pentru crearea unei interfete noi.

Figura 2. Proiectarea interfetelor in UsiXML

UsiXML este considerat un User Interface Description Language (UIDL), care este un limbaj declarativ ce contine exact esenta a ceea ce este o interfata independenta de platforma. Descrie la un nivel inalt de abstractizare elementele ce formeaza interfata unei aplicatii: widget-uri, controale, containere, tehnici de interactiune etc. O interfata a oricarei aplicatii ce respecta specificatiile UsiXML ruleaza in toate toolkit-urile ce o implementeaza: compilatoare, interpretoare etc.

Limbajul se bazeaza pe MDE (Model-driven engineering) aplicat pe construirea de interfete cu utilizatorul, modul de operare fiind descris in Figura 2. Pasii prezentati rezulta din framework-ul de referinta Cameleon.

Task-uri si concepteModelarea task-ului si a domeniului: se construieste un model pentru task, un domeniu al activitatii si, daca este necesar, contextul utilizarii (utilizator, platforma, mediu). Acest pas este suportat de IdealXML. in ultima versiune a UsiXML, modelul task-ului a fost extins in FlowiXML pentru a include aspecte ce nu erau prezente in modelele de task-uri existente, dar care ar putea servi pentru un scop mai general decat doar pentru modelarea task-ului. De exemplu, conceptele de proces si workflow au fost integrate pentru a arata unde si cum un task finalizat. Acestea nu sunt neaparat specifice modelarii task-ului, dar ofera informatii utile despre task.

Abstract User InterfaceAcest nivel descrie interfete posibile si este independent de orice tip de interactiune si tehnologie de implementare. Defineste containere abstracte si componente individuale, doua forme de Abstract Interaction Objects prin gruparea subtask-urilor conform unor criterii, o schema de navigare intre containere si selecteaza componente individuale abstracte pentru fiecare concept, astfel ele fiind independende de tipul de interactiune. O AUI (Abstract User Interfaces) abstractizeaza o CUI (Character User Interfaces) intr-o definitie a interfetei ce este independenta de tipul de interactiune (de exemplu: interactiune grafica, vocala, recunoasterea si sintetizarea vocii etc.). O AUI poate fi de asemenea considerata ca o expresie a interpretarii conceptelor domeniului si a task-urilor intr-un mod independent de tipul de interactiune. La acest nivel, interfata consista in principal din definitiile input-ului si output-ului, impreuna cu actiunile ce trebuie sa fie realizate cu aceste informatii. Acest pas este de asemenea suportat de IdealXML.

Concrete User InterfaceAcest nivel descrie o potentiala interfata dupa ce o anumita modalitate de interactiune a fost stabilita (grafica, vocala, multimodala). Acest pas este suportat de diferite unelte ce ajuta designerii si dezvoltatorii in editarea, construirea si schitarea unei interfete. De exemplu, SketchiXML, GrafiXML, ComposiXML, PlastiXMLsi VisiXML pentru interfete grafice. Concretizeaza o interfata abstracta pentru un anumit context de utilizare in Concrete Interaction Objects (CIOs) pentru a defini widges layout si navigarea prin interfata. Chiar daca CUI arata intr-un mod mai explicit aspectul si modul de interactiune final, este doar un model ce ruleaza intr-un anumit mediu. O CUI poate fi considerata o concretizare a AUI la un nivel mai inalt si o abstractizare a interfetei finale luand in considerare platforma.

Un exemplu al unui document UsiXML este prezentat in randurile urmatoare:

<?xml version="1.0" encoding="UTF-8"?><uiModel xmlns="http://www.usixml.org"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.usixml.org/ http://www.usixml.org/spec/UsiXML-ui_model.xsd"id="hello_world_12" name="hello world"creationDate="2007-02-12T14:31:45.143+01:00" schemaVersion="1.8.0"><head> <version modifDate="2007-02-12T14:31:45.143+01:00">1</version> <authorName>Benjamin Michotte</authorName> <comment>Hello World example</comment>

</head><cuiModel id="hello_world-cui_12" name="hello world-cui"> <window id="window_component_0" name="window_component_0" content="/uiModel/resourceModel/cioRef[@cioId='window_component_0']/resource/@content" defaultContent="Hello world" width="470" height="255"> <gridBagBox id="grid_bag_box_1" name="grid_bag_box_1" gridHeight="12" gridWidth="23"/> </window> </cuiModel> <contextModel id="hello_world-contextModel_12" name="hello world-contextModel"> <context id="hello_world-context-en_US_12" name="hello world-context-en_US"> <userStereotype id="hello_world-sten_US_12" language="en_US" stereotypeName="hello world-sten_US"/> <platform id="hello_world-platform_12" name="hello world-platform"/> <environment id="hello_world-env_12" name="hello world-env"/> </context> <context id="hello_world-context-fr_FR_12" name="hello world-context-fr_FR"> <userStereotype id="hello_world-stfr_FR_12" language="fr_FR" stereotypeName="hello world-stfr_FR"/> <platform id="hello_world-platform_12" name="hello world-platform"/> <environment id="hello_world-env_12" name="hello world-env"/> </context> </contextModel> <resourceModel id="hello_world-res_12" name="hello world-res"> <cioRef cioId="window_component_0"> <resource content="Bonjour le monde" contextId="hello_world-context-fr_FR_12"/> <resource content="Hello world" contextId="hello_world-context-en_US_12"/> </cioRef> </resourceModel></uiModel>

UIML si UsiXML au la baza aceleasi obiective. Ambele cauta sa ofere independenta de platforma si dispozitive pentru orice tip de interfata, conventionala sau neconventionala. Amandoua evita crearea unui limbaj de implementare a interfetelor si se axeaza pe furnizarea integrarii cu tehnologiile existente. Ca si mod de definire a interfeteie amandoua abstractizeaza descrierea unei interfete la o reprezentare bazata de modele care este mai potrivita pentru examinarea si crearea interfetei de catre non-programatori. Se doreste o definire mai clara la nivel conceptual si sintactic astfel incat acestea sa nu se suprapuna, ambiguizand metodologia de definire a interfetelor. La nivel de limbaj precum si modul de construire, definire si redare a interfetelor se vad deosebiri clare intre cele doua limbaje, UsiXML mergand pe o cale mai precisa de definire a interfetei (CUI), totusi la un nivel mai abstract. Pe de alta parte UIML se axeaza pe definirea proprietatilor si elemtelor specifice, lasand realizare interfetei la nivel de motor de randare.

Reprezentarea abstractizata a interfetei este utila intru mediu de dezvoltare in care interfetele sunt create utilizand o varietate de limbaje: variante ale XML(de exemplu, HTML, XHTML, VoiceXML etc.), JavaScript, Java, C#, precum si altele, fiecare limbaj avand sintaxa si abstractizarile proprii. De exemplu, sintaxa in HTML 4.0 de a reprezenta un button este "<button>" si in Java Swing "JButton b = new JButton". Avantajul utilizarii unei sintaxe comune este analog avantajelor XML: tool-uri software pot fi create pentru o singura sintaxa, iar procesarea interfetelor e destinata pentru orice limbaj. Astfel o aplicatie de construire de interfete poate stoca design-ul in UIML si apoi sa mapeze UIML la limbajul dorit sau un limbaj care va fi inventat in viitor. UIML poate servi ca un format de fisier universal pentru specificarea interfetelor independente de dispozitiv, platforma, limbaj de programare. Un alt beneficiu al utilizarii unei astfel de reprezentari este dat de faptul ca o interfata este definita intr-o forma foarte maleabila. O tehnica foarte utilizata in comunitatea interfetelor om-calculator este transformarea. Avand o astfel de descriere, utilizatorii pot implementa un algoritm ce transforma documente UIML in alte documente UIML.

UsiXML merge pe o proiectare mai precisa, avand in vedere pas cu pas realizarea interactiunii, oferind

posibilitatea unui programator sa abstractizeze interfata, dar in acelasi timp ofera posibilitatea celor care nu dispun de cunostinte de programare sa proiecteze o interfata abstractizata. Modul de definire a interfetei prin UsiXML este mai precis, permitand o identificare mai buna a componentelor, actiunilor si a scenariilor de interactiune cu utilizatorul.

Se prevede ca UIML va fi folosit cu alte limbaje, precum limbaje de proiectare a interfetelor. Exista posibilitatea ca majoritatea persoanelor sa nu fie nevoite sa scrie cod UIML direct, ei pot utiliza un limbaj de proiectare particular potrivit pentru o anumita metodologie de design si apoi sa utilizeze tool-uri pentru tranformarea interfetei create intr-o reprezentare UIML ce este apoi folosita pentru generarea interfetei propriuzise.

In figurile 3 si 4 vom inlustra modul de definire a interfelor abstracte in 2 aplicatii ce implementeaza cele doua limbaje. Figura 3 arata mediul de dezvoltare a interfetelor din UIML.net, iar figura 4 arata mediul de dezvoltare din IdealXML.

Figura 3. Implementarea unei interfete in UIML

Figura 4. Implementarea unei interfete in UsiXML

Bibliografia folosita:1. Official Webpage UIML 2. Official Webpage UsiXML 3. UIML.NET 4. IdealXML 5. UsiXML USer Interface eXtensible Markup Language 6. User Interface Markup Language (UIML) 7. The Relationship of the UIML 3.1 Spec. to Other Standards/Working Groups, v01.04 July

26, 2004 8. UsiXML V1.8 Reference Manual 9. UIMLspecification-4.0 23 January 2008 10.USIXML: a User Interface Description for Specifying Multimodal User Interfaces, Jean

Vanderdonckt, Quentin Limbourg, Benjamin Michote, Laurent Bouillon, Daniela Trevisan, Murielle Florins

11.FAST HI-FI PROTOTYING BY USING IDEALXML Francisco Montero, Víctor López-Jaquero Laboratory on User Interaction and Software Engineering (LoUISE)

12.IDEALXML: AN INTERACTION DESIGN TOOL Francisco Montero, Víctor López-Jaquero Laboratory on User Interaction and Software Engineering (LoUISE)