Upload
brook-cain
View
223
Download
0
Embed Size (px)
Citation preview
Inés Pederiva1, Jean Vanderdonckt1,2, Sergio España1, José Ignacio Panach1 and Óscar Pastor1
1Universidad Politécnica de Valencia, Departamento de Sistemas Informáticos y Computación
Camino de Vera s/n, 46071 Valencia, Spain2Université catholique de Louvain, Louvain School of Management,
Place des Doyens, 1 – 1348 Louvain-la-Neuve, Belgium{ipederiva, jvanderdonckt, sergio.espana, jpanach, opastor}@dsic.upv.es,
This work has been developed with the support of MEC under the project DESTINO TIN2004-03534 and co-financed by FEDER. We also acknowledge the support of the SIMILAR European network of
excellence on multimodal interfaces (FP6-IST1-2003-507609 - www.similar.cc)
The Beautification Process in Model-Driven Engineering of
User Interfaces
…
The Beautification Process in Model-Driven Engineering of User Interfaces Agenda
• Introduction and Preliminaries• Motivations • Proposal
• Beautification Operations • The Beautification Process
– The Beautification Process in OO-Method – Steps of the Beautification Process– Example
• Conclusions and Further Work
The Beautification Process in Model-Driven Engineering of User Interfaces
Introduction and Preliminaries
User Interfaces (UIs) Requirements in Model-Driven Engineering (MDE)
Users’ requirements to be addressed
Users’ requirements supported by MDE
Users’ requirements unsupported by MDE
M2M and M2C transformations
Automatically generated
UI
Final UIUI beautificationCode
tweakingUI
editing
The Beautification Process in Model-Driven Engineering of User Interfaces
Introduction and Preliminaries
OO-Method
MODEL COMPILATION
SYSTEM ANALYSIS
REQUIREMENTS ELICITATION
SOURCE CODE
INTERFACE TIER
APPLICATION TIER
PERSISTENCE TIER
CONCEPTUAL MODEL
OBJECT MODEL
DYNAMIC MODEL
FUNCTIONAL MODEL
PRESENTATION MOD.
PLATFORM INDEPENDENT
MODEL
PLATFORM SPECIFIC MODEL
CODE MODEL
COMPUTATION INDEPENDENT
MODEL
MDA proposal
OO-Method REQUIREMENTS MODEL
USE CASES
FUNCTION REF. TREE
MISSION STATEMENT
APPLICATION MODEL
The Beautification Process in Model-Driven Engineering of User Interfaces
Introduction and Preliminaries
OO-Method ´s
Presentation Model
The Beautification Process in Model-Driven Engineering of User Interfaces Motivations
• Manual modifications leads to:– Problems to understand generated code
– Inconsistencies: user interface vs. model
– Endanger quality features guaranteed by MDE
• Problem with re-generated UIs: lost changes
• Round-trip engineering
Manual modifications made to address unsupported user requirements
Related to the UI64%
Not related to the UI36%
The Beautification Process in Model-Driven Engineering of User Interfaces Proposal
• Framework of Beautification Operations
• Beautification in Computer Graphics
• User Interface Beautification– The whole process of improving the
automatically generated UI with beautification operations to address unsupported user requirements while preserving the qualities provided by MDE
The Beautification Process in Model-Driven Engineering of User Interfaces Beautification Operations
Beautification Operations
• Why there is a need to define them? Manual Modification – Beautification Operation – Modelling Operation
• How were them identified? – Observed in most applications – Occurred with significant frequency – Realistic in terms of implementation – At least moderate importance
The Beautification Process in Model-Driven Engineering of User Interfaces Beautification Operations
Beautification Operations• Classification: Nielsen´s linguistic model of
interaction 1- Goal 5- Lexical 2- Pragmatic 6- Alphabetic 3- Semantic 7- Physical 4- Syntactic
• Examples– Syntactic: Substitute(widgetType)– Semantic: Specify(conditionalDisplay)
The Beautification Process in OO-Method
The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process
PLATFORM INDEPENDENT
MODEL
PLATFORM SPECIFIC MODEL
CODE
CONCEPTUAL MODEL
OBJECT MODEL
DYNAMIC MODEL
FUNCTIONAL MODEL
PRESENTATION MODEL
SOURCE CODE
USER INTERFACE TIER
APPLICATION TIER
PERSISTENCE TIER
MDA proposal
ON Metamodel
UI Metamodel
Is an instance of
MODEL TO MODEL TRANSFORMATION
UI MODEL
APPLICATION MODEL
MODEL TO CODE TRANSFORMATION
UI MODEL
APPLICATION MODEL
CONCRETE UI MODEL
UI TEMPLATES
TEMPLATE EDITOR
User Interface TemplateDialog TemplatePresentation Template
Style TemplateLayout Template
Is an instance of
OO-Method Development Process
USER INTERFACE EDITOR
Population PatternPopulation Pattern
Steps of the Beautification Process
The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process
1. Derivation of a Concrete User Interface Model from the Presentation Model
PLATFORM INDEPENDENT
MODEL
PLATFORM SPECIFIC MODEL
CODE
CONCEPTUAL MODEL
OBJECT MODEL
DYNAMIC MODEL
FUNCTIONAL MODEL
PRESENTATION MODEL
SOURCE CODE
USER INTERFACE TIER
APPLICATION TIER
PERSISTENCE TIER
MDA proposal
MODEL TO MODEL TRANSFORMATION
UI MODEL
APPLICATION MODEL
MODEL TO CODE TRANSFORMATION
UI MODEL
APPLICATION MODEL
CONCRETE UI MODEL
OO-Method Development Process
USER INTERFACE
EDITOR
Steps of the Beautification ProcessPLATFORM
INDEPENDENT MODEL
PLATFORM SPECIFIC MODEL
CODE
CONCEPTUAL MODEL
OBJECT MODEL
DYNAMIC MODEL
FUNCTIONAL MODEL
PRESENTATION MODEL
SOURCE CODE
USER INTERFACE TIER
APPLICATION TIER
PERSISTENCE TIER
MDA proposal
MODEL TO MODEL TRANSFORMATION
UI MODEL
APPLICATION MODEL
MODEL TO CODE TRANSFORMATION
UI MODEL
APPLICATION MODEL
CONCRETE UI MODEL
OO-Method Development Process
USER INTERFACE
EDITOR
The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process
1. Derivation of a Concrete User Interface Model from the Presentation Model
2. Application of the Beautification Operations
Steps of the Beautification ProcessPLATFORM
INDEPENDENT MODEL
PLATFORM SPECIFIC MODEL
CODE
CONCEPTUAL MODEL
OBJECT MODEL
DYNAMIC MODEL
FUNCTIONAL MODEL
PRESENTATION MODEL
SOURCE CODE
USER INTERFACE TIER
APPLICATION TIER
PERSISTENCE TIER
MDA proposal
MODEL TO MODEL TRANSFORMATION
UI MODEL
APPLICATION MODEL
MODEL TO CODE TRANSFORMATION
UI MODEL
APPLICATION MODEL
CONCRETE UI MODEL
OO-Method Development Process
USER INTERFACE
EDITOR
The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process
1. Derivation of a Concrete User Interface Model from the Presentation Model
2. Application of the Beautification Operations
3. Generation of the Final User Interface
The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process
Step 1 – Derivation of a Concrete User Interface Model from Presentation Model
• Concrete User Interface (CUI) – Abstraction of a final UI in terms of
Concrete Interaction Objects– UsiXML
• Concrete Interaction Object(CIO)– Decorator: separator – Graphical Individual Component:
inputText or radioButton– Graphical Container: window or
tabbedDialogBox– Attributes, data types, values
CONCEPTUAL MODEL
OBJECT MODEL
DYNAMIC MODEL
FUNCTIONAL MODEL
PRESENTATION MODEL
SOURCE CODE
USER INTERFACE TIER
APPLICATION TIER
PERSISTENCE TIER
MODEL TO MODEL TRANSFORMATION
UI MODEL
APPLICATION MODEL
MODEL TO CODE TRANSFORMATION
UI MODEL
APPLICATION MODEL
CONCRETE UI MODEL
USER INTERFACE
EDITOR
The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process
Step 2 – Application of the Beautification Operations
• Beautification Operations can be applied to the CUI with a UI Editor
• Each CIO is subject to Beautification Operations
• UI Editor – Detects which Beautification Operations
can be applied to each CIO – Gives a preview of the designed UI – Is constrained with parameters
CONCEPTUAL MODEL
OBJECT MODEL
DYNAMIC MODEL
FUNCTIONAL MODEL
PRESENTATION MODEL
SOURCE CODE
USER INTERFACE TIER
APPLICATION TIER
PERSISTENCE TIER
MODEL TO MODEL TRANSFORMATION
UI MODEL
APPLICATION MODEL
MODEL TO CODE TRANSFORMATION
UI MODEL
APPLICATION MODEL
CONCRETE UI MODEL
USER INTERFACE
EDITOR
The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process
Step 3 – Generation of the Final User Interface
Once all the Beautification Operations have been applied, the CUI Model is completed and sent to the Model Compiler so as to perform the model-to-code transformation
CONCEPTUAL MODEL
OBJECT MODEL
DYNAMIC MODEL
FUNCTIONAL MODEL
PRESENTATION MODEL
SOURCE CODE
USER INTERFACE TIER
APPLICATION TIER
PERSISTENCE TIER
MODEL TO MODEL TRANSFORMATION
UI MODEL
APPLICATION MODEL
MODEL TO CODE TRANSFORMATION
UI MODEL
APPLICATION MODEL
CONCRETE UI MODEL
USER INTERFACE
EDITOR
The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process
Example
1. Specify(rowHighlightingType)
2. Convert (inputMetricUnit, outputMetricUnit)
3. Specify (buttonPresentationType)
4. Substitute (widgetType)
UI Editor
The Beautification Process in Model-Driven Engineering of User Interfaces The Beautification Process
Example• The same Final User Interface after applying more
Beautification Operations
The Beautification Process in Model-Driven Engineering of User Interfaces Conclusions
• This work has examined in detail the process of UI Beautification applied at the level of automatic software generation
• This work has – Identified the most frequently demanded UI modifications – Defined a Concrete User Interface (CUI) model that
allows refining UI – Defined operations over the elements of the CUI model – Defined a Constrained UI Editor that allows editing the
CUI model
The Beautification Process in Model-Driven Engineering of User Interfaces Conclusions
• Further work – UI Editor implementation – Empirical validation of the proposed modifications in
OO-Method• Improvements on the whole production process
• Benefits of use - Final user satisfaction and UI usability
The Beautification Process in Model-Driven Engineering of User Interfaces State of the Art
• Techniques: design patterns, framework-specific modelling languages, model reconciliation – Do not exploit the full potential of UI models
• HCI – Support for propagating manual modifications to underlying models, but not specifically for UI beautification
• MECANO project • DynaMo-AID design process • Model-based tools and techniques: MOBI-D,
TEALLACH, WISDOM• Commercial software: Genova, JaxFront,
OlivaNova