An interaction meta-model for cooperative component-based user interfaces

APPLIED COMPUTING GROUPUNIVERSITY OF ALMERIA (SPAIN)

ISDE’2010 – OTM Workshops26th October 2010, Crete (Greece)

An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

1

An Interaction Meta-model for Cooperative Component-Based

User InterfacesL. Iribarne(1), N. Padilla(1), J. Criado(1), C. Vicente-Chicote(2)

(2) Information Technology and Communications Technical University of Cartagena, Spain

[email protected]

(1) Applied Computing Group (TIC-211)University of Almeria, Spain

{liribarne, npadilla, javi.criado}@ual.es

ISDE2010 – OTM Workshops 26 October 2010, Crete (Greece)



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

2

1. Motivation

2. Interaction Metamodel

3. Case Study

4. Future work

CONTENT



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

3

1. Motivation


3. Case Study

4. Future work

CONTENT



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

4

Knowledge Society Collaborative Information Systems

<<require>>

social interaction

(WIS) Web-based Infomation System

1. Motivation

<<globalization>>

<<instance>>

User profiles(decision-making)

CSCW

Subsystem Subsystem

Adaptableuser-interface

Adaptableuser-interface

<<social interaction>>

<<cooperate>>

<<interact>> <<interact>>

<<cooperate>>

“subsystems will probably require self-adaptable user interfaces.”



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

5

(WIS)

Environmental Management Information Systems (EMIS)

<<example>>

1. Motivation

SOLERES System “our implementation”

“There is a huge interaction between groups of people for environmental management.”

<<instance>>

Knowledge Society Collaborative Information Systems

<<require>>

social interaction

<<globalization>>

Politicians, Technicians,Administrators,…

<<roles>>



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

6

EnvironmentalManagementInformationSystem

Neural-NetworksKnowledge

Environmental InfoOntologies

Cooperative SystemsMulti-Agents

Satellite ImagesCellular-Automata clasif.

Component-based systemsTrading agents

SOLERES

“application, integration and development of multidisciplinary works”

SOLERES Framework

1. Motivation

R&D (TIN2007-61497)Spanish Ministry of Science and Innovation



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

7 SOLERES Project

Correlation

cartography

satellite

Env. map

CA-based Clasif.

Neural-Net

Age

nts,

Trad

ing,

Ont

olog

ies

1. Motivation

User Interfaces

self-adapatable



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

8 SOLERES Project

Correlation?

cartography

satellite

Env. map

AC-based Clasif.

Neural-Net

Age

nts,

Trad

ing,

Ont

olog

ies

1. Motivation

SCOPE OF THE WORK self-adapatable



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

9

Main Goal:

An MDE-based methodology for evolutive (adaptable) User Interfaces

Solution:

1. Model-Driven Engineering (MDE) solution.2. Model Evolution (by considering UI as models).3. Model transformation & Trading services.

Considerations:

1. Component-based user interfaces.2. COTS (commercial off-the-shelf) UI components.3. WIMP simple interfaces (Windows, Icons, Menus and Pointers).4. Web-based User Interfaces as supporting of WCIS (at runtime).

1. Motivation



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

10

UI gadgets/widgets

1. Motivation

Web-based WIMP Interface[Almendros & Iribarne, 2008]

Considerations:1. Component-based UI.2. COTS UI components.3. WIMP simple interfaces4. Web-based UI

“Component-based UI”



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

11

CUI1 CUI2 CUI3

CUI4 CUI5

CUI6 CUI7“COTS-component” architecture

1. Motivation“cotsget” componentCOTS + get (widget/gadget-type)

Considerations:1. Component-based UI.2. COTS UI components.3. WIMP simple interfaces4. Web-based UI

<<has>>

CUIi ...Functional

Interaction

Visual

Temporal

templatesCotsget repositories“public repositories generally managed by trading servicies.”

<<has>>

dependency-issues

COTSGETS(commercial components)

[Iribarne et al., 2004]



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

12

CUI1 CUI2 CIU3

CUI4 CUI5

CUI6 CUI7

A B C

t

CUI1

CUI4

CUI6 CUI7

A B C

CUI8

2: R

egen

erat

ion

1: Transformation

UIe

1: Transformation

2: R

egen

erat

ion

CUI1 CUI9 CUI3

CUI4

A B C

cooperation & interaction issues

1. MotivationGoal: self-adaptable interfaces

“instances of the user interface when social interaction and cooperation issues occur.”





An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

13

CUI1 CUI2 CUI3

CUI4 CUI5

CUI6 CUI7

A B C

CUI1 CUI9 CUI3

CUI4

A B C

t

mt

Model A Model B

Rmt

Trading RT

Transformationrules

TradingRT

User interface A User interface B

Model Transformation(MDE)

1. Motivation

Rege

nera

tion

Rege

nera

tion

M2M

Metamodel

“For our purposes, we consider the user-interface as a model.”

I V

S



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

14

CUI1 CUI2 CUI3

CUI4 CUI5

CUI6 CUI7

A B C

CUI1 CUI9 CUI3

CUI4

A B C

t

mt

Model A Model B

Rmt

Trading RT

Transformationrules

TradingRT



1. Motivation

Rege

nera

tion

Rege

nera

tion

M2M

Metamodel

“For our purposes, we consider the user-interface as a model.”

Interaction +

I V

S



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

15

1. Motivation


3. Case Study

4. Future work

CONTENT



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

16

UIA UIB

2. Interaction Metamodel“The methodology considers

interface evolution.”

Architectural Metamodel

Architectural Modeli





An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

17





1

2 3

1. Structural metamodel: composition dependencies between components through connection ports (i.e., provided and required interfaces).

2. Visual metamodel: components behaviour from a visual point of view (open, close, show, hide components, etc.) by means of a state machine.

3. Interaction metamodel: models the user-interaction behaviour, and describes the structure of interaction tasks that users may complete in the system.



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

18





1

2 3

1. Structural metamodel: composition dependencies between components through connection ports (i.e., provided and required interfaces).

2. Visual metamodel: components behaviour from a visual point of view (open, close, show, hide components, etc.) by means of a state machine.

3. Interaction metamodel: models the user-interaction behaviour, and describes the structure of interaction tasks that users may complete in the system.



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

19 2. Interaction MetamodelArchitectural Metamodel




An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

20 2. Interaction Metamodel

main concepts





An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s


<<shared elements>>


Architectural Modeli <<interconnection>>



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s


Roles:<<politician>> <<technician>>

<<administrator>>

Group:Actor:

Actor:Actor:

Cotsget:

Cotsget:

Cotsget:





An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

23 2. Interaction MetamodelArchitectural Metamodel


<<atomic task>>



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

24

ANDOR

complexsimple


“A choreography describes the protocol, or the sequence in which the tasks must be executed.”

Activity-diagram



“To facilitate the modelling, concepts have been collected in an ‘enumeration-class’ in the MM.”



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s


Activity-Diagram

r1

r2r3

r1

r2

In order to complete the semantical closure of the interaction metamodel:

r3

…



incoming (1)

outgoing (2..*)



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

26

1. Motivation


3. Case Study

4. Future work

CONTENT



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

27 3. A Case Study

Scenario: EMIS cooperative task for decision-making on natural disasters.

<<politician>>

<<GISexpert>>

<<evaluator>>

UI1UI2

UI3

Analyzes land areas in order to classify types of soil, affected area, etc.

Carries out an economic study from that information provided by the GIS expert.

Wishes to carry out a particular assessment of a natural disaster.

Cooperative task requesting information

“Environmental study”

“Economic study”



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

28 3. A Case Study“cooperative-interaction diagram (model)”

“adapted activity-diagram notation”



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

29 3. A Case Study

Metamodel

Model



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

30 3. A Case Study



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

31 3. A Case Study

<<InitialStep>>

<<FinalStep>>

Main coreographies



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

32 3. A Case Study

<<InitialStep>>

<<FinalStep>>

#1/3

#3/3

#6/3#7/3

#5/1

#4/1

#2/1

<<simple>> <<complex>>

1 2 3

[ #n/n = #step/replaced-by ]



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

33 3. A Case Study

#1/3

#3/3

#6/3#7/3

#4.2/2

#5/1

#4/1

#2/1

#4.1/3

#4.3/1

#4.4/1

#4.5/3

#5.2/2#5.1/3

#5.3/1

#5.4/1

#5.5/3


1 2 3


“a similar behaviour (step #4) occurs in step #5”



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

34 3. A Case Study

#1/3#2/1

#3/1

#4/1

#5/3


1 2 3

“both expert and evaluator have also their own choreography”

#1/3#2/1

#3/1

#4/1

#5/3


Environmental study

Economic study

“a similar behaviour has the choreography associated to the evaluator rol”



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

35

1. Motivation


3. Case Study

4. Future work

CONTENT



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

36

a) Automated co-evolution of models [Cicchetti et al., 2008]

b) Metamodel adaptation techniques [Wachsmuth, 2007]

c) Model Evolution concepts [Blair et al., 2009]

4. Future Work

Future Work:

1. GUI tool (Eclipse GMF) to draw new scenarios (models).

2. Simulation tool (to reproduce events and interactions; groups/UI).

3. Variability (chage-detection) of Interaction Metamodel:



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

37

An Interaction Meta-model for Cooperative Component-Based

User InterfacesL. Iribarne, N. Padilla, J. Criado and C. Vicente-Chicote

ISDE2010 – OTM Workshops 26 October 2010, Crete (Greece)

More info: http://www.ual.es/acg/soleresContact: [email protected] Thanks !!

SOLERES R&D Project TIN2007-61497

Applied Computing Group Ref. TIC-211

Engineering Higher Polytechnic School

University of AlmeriaCampus, Spain

Spanish Ministry of Science and Innovation



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

38

Appendix

ComplementarySlides



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

39

Implementation Framework (MDE)

Eclipse Modeling Project, EMP, http://www.eclipse.org/modeling/

EMF (Eclipse Modeling Framework), “.ecore” diagramshttp://www.eclipse.org/modeling/emf/

ATL (Atlas Transformation Language) http://www.eclipse.org/m2m/atl/

OCL (Object Constraint Language), OMG

GMF (Graphical Modeling Framework) http://www.eclipse.org/modeling/gmp/

Visual Paradigm SDE for Eclipse, http://www.visual-paradigm.com/

UML scenarios as models of the metamodel

Appendix. Implementation Details



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

40 Appendix. Implementation Details



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s




An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

43

Metamodel

Model

<<Graphical View>> <<Object View>>

<<Views>>

“metamodel-checkings” “model transformation”




An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

44<imm:InteractionModel xmlns:imm="http://imm/1.0" xsi:schemaLocation=“.../imm.ecore" name=”naturaldesaster”><role isPlayed="//@group.0 //@group.0/@actor.0" name="Politic”>

<task xsi:type="imm:CooperativeTask" name="DamageEvaluationP”><taskUnit xsi:type="imm:TaskAction" name="InputData"/><taskUnit xsi:type="imm:SubTask" name="GeographicAnalysis”><choreography id="ch_p_2”>

<step xsi:type="imm:ControlStep" controlFlow=”.../@step.1" id="step_p_2_1"/><step xsi:type="imm:TaskStep" controlFlow=”.../@step.2" id="step_p_2_2" task="//@role.1/@task.0"/><step xsi:type="imm:TaskUnitStep" controlFlow=” .../@step.3" id="step_p_2_3” ... /><step xsi:type="imm:TaskUnitStep" id="step_p_2_4" taskUnit=".../@subTaskUnit.1"/><step xsi:type="imm:ControlStep" id="step_p_2_5” ... />

</choreography><taskUnit xsi:type="imm:TaskAction" objectFlow=”.../@infoObject.0" name="SendAnalysisData"/><taskUnit xsi:type="imm:TaskAction" objectFlow=”..." name="ReceiveAnalysisInformation"/>

</taskUnit><taskUnit xsi:type="imm:SubTask" name="Evaluation”><choreography id="ch_p_3”> ... </choreography><taskUnit xsi:type="imm:TaskAction" objectFlow=“.../@infoObject.1" name="SendEvaluationData"/><taskUnit xsi:type="imm:TaskAction" objectFlow=".../@infoObject.3" name="ReceiveEvaluationReport"/>

</taskUnit><choreography id="ch_p_1”><step xsi:type="imm:ControlStep" controlFlow=".../@step.1" id="step_p_1_1"/><step xsi:type="imm:TaskUnitStep" id="step_p_1_2" taskUnit=".../@taskUnit.0"/><step xsi:type="imm:ControlStep" controlFlow=".../@step.4" ... /><step xsi:type="imm:TaskUnitStep" id="step_p_1_4" taskUnit=".../@taskUnit.1"/><step xsi:type="imm:TaskUnitStep" id="step_p_1_5" taskUnit=".../@taskUnit.2"/><step xsi:type="imm:ControlStep" id="step_p_1_6” ... /><step xsi:type="imm:ControlStep" id="step_p_1_7” ... />

</choreography><infoExchangeObject name="AnalysisData"/> <infoExchangeObject name="AnalysisInformation"/><infoExchangeObject name="EvaluationData"/> <infoExchangeObject name="EvaluationReport"/>

</task></role><role isPlayed="//@group.0/@actor.1" name="ExpertGIS”> ... </role><role isPlayed="//@group.0/@actor.2" name="Evaluator”> ... </role><group plays="//@role.0" name="Politic1" id="Group1”>

<actor plays="//@role.0" name="Politic1"/> <actor plays="//@role.1" name="ExpertGIS1"/> <actor plays="//@role.2" name="Evaluator1"/>

</group></imm:CooperativeModel>




An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

45<imm:InteractionModel xmlns:imm="http://imm/1.0" xsi:schemaLocation=“.../imm.ecore" name=”naturaldisaster”><role isPlayed="//@group.0 //@group.0/@actor.0" name="Politic”>













An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

46 Appendix. Implementation Details<imm:InteractionModel xmlns:imm="http://imm/1.0" xsi:schemaLocation=“.../imm.ecore" name=”naturaldisaster”><role isPlayed="//@group.0 //@group.0/@actor.0" name="Politic”>












An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

47<imm:InteractionModel xmlns:imm="http://imm/1.0" xsi:schemaLocation=“.../imm.ecore" name=”naturaldisaster”><role isPlayed="//@group.0 //@group.0/@actor.0" name="Politic”>










1234567


1

2

3

4

5

67



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s


An example of a COTGET-based user interface

Structural model view



An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

49

CUI1 CUI2 CUI3

CUI4 CUI5

CUI6 CUI7

A B C

CUI1 CUI9 CUI3

CUI4

A B C

t

mt

Model A Model B

Rmt

Trading RT

Transformationrules

TradingRT



Rege

nera

tion

Rege

nera

tion

M2M

Metamodel

Intelligent Model-Transformation

a) Deterministic transformationb) Hybrid transformationc) Intelligent transformation

I V

S




An

inte

ract

ion

met

a-m

odel

for c

oope

rativ

e co

mpo

nent

-bas

ed u

ser i

nter

face

s

50

repository

Push model

trader

Pull model(bots or search engines)

ServiceFetcher

exportimport

“Trader Federation”

“Trader Interfaces”

“Trader Structure”

“Trader Invocations”

Appendix. Implementation DetailsTRADING SERVICE

OMG-ODPTrading

An interaction meta-model for cooperative component-based user interfaces

Education

Transcript of An interaction meta-model for cooperative component-based user interfaces