Experiences and requirements for a User Interaction Modeling Language
-
Upload
marco-brambilla -
Category
Technology
-
view
4.959 -
download
0
description
Transcript of Experiences and requirements for a User Interaction Modeling Language
Experiences and requirements for a User Interaction Modeling Language
Marco Brambilla marcobrambi
Politecnico di Milano and WebRatio
Emanuele Molteni emanuelemolteni
WebRatioCode Generation 2012, Cambridge, March 28, 2012
2
User Interaction complexity
The gap in UI modeling standards
Features, focus and objectives
Metamodel and UML profile
IFML by example
WebML and WebRatio
Agenda
The Problem of User Interaction
4
UI has been neglected in the MDE communityComplexity of UIs increase in time
• New events, devices, use cases, interactions
Crappy tools for UI programming around• Widgets drag&drop• Hooks to execution
No real MDE attempt to address the problem
UI Modeling Problem
5
UI blends into visualization and graphics
Distinguish Interaction from Interface
User interaction focus:Previous attempts failed because of:
• Low usability and effectiveness of notation• Missing solid implementations with vendors support
User Interface vs. Interaction
The Standardization Gap
7
A perceived gap in the standardization efforts User interaction has been overlooked in modeling proposals
Previous attempts failed because of:• Low usability and effectiveness of notation• Missing solid implementations with vendors support
Standardization gap
8
Exploit the possible relations withBPMN -- Already in place
Structure models (Class, components, CWM …)
SOAml
SysML
Others
Support the standardizationRefine the metamodel
Implement appropriate injectors to MOF-compliant models
WebML in the OMG framework
The Standardization Effort: towards IFML
10
Expressing
Content of interfaces
User events and interaction
Binding to business logic
of the front-end of applications belonging to diverse domains
Objectives of IFML
11
formal specification of the different perspectives of the front-end
Isolate implementation-specific issues of UIs
separation of concerns in the user interaction design
enable the communication of interaction design to non-technical stakeholders
automatic generation of code also for the application front-end part
Advantages
12
The VIEW part of a software application
view components
view modules
events
interaction between components
Interaction between the user and the components (events)
the distribution of view components and referenced data and business logic at the different tiers of the architecture
Focus
14
Multiple views for the same application
Mobile and multi-device applications
Visualization and input of data, and production of events
Components independent of concrete widgets and presenation
Interaction flow, initiated by the user or by external events
User context: the user status in the current instant of the interaction (position, history, machine, platform,…)
Modularization of the model (design-time containers for reuse purposes of model fragments)
User input validation, according to OCL or other existing constraint languages
But not:
inference rules that make model specification simpler and more concise
Mandatory application requirements
The IFML metamodel - 1
15
The IFML metamodel - 2
16
The IFML metamodel - 3
17
18
Static aspects
The UML profile for IFML
« p a g e »AlbumSe arch
« p a g e »Albums
« p a g e »Album
Album Se arch Album Inde x Album De tail
« in d e x»M e ssage
Inde x
« in d e x»M Box List « lin k»
19
Static aspects
Signals with tagged values
Dynamic aspects
The UML profile for IFML
« s ig n a l»Se le ctM ailM e ssage s
mBo x :s tr in g
T a g g e d va lu e s.
Pa ra me te r mBoxo u t n a me : se le c te d MBo xin n a me : mBo x
« in d e x»M Box List
« in d e x»M e ssage
Inde x
Se le ctMa ilMe ssa g e s(mBo x)
20
IFML concrete syntax by example
22
IFML concrete syntax by example
23
IFML concrete syntax by example
A real example.. The complete Gmail UI
24
A solid foundation: WebML
27
1998: Born within the W3I3 EU project• Visual modeling of Web application interfaces
2003: Evolved to the management of Web services (WebSi EU project)
2005: Evolved to the support of business processes (WebSi EU project)
2006: Added support to semantic web aspects (SWS Challenge)
2007-2010: continuous improvements, metamodel definition, support for additional aspects: reuse, async interactions, ...
Currently adopted in more than 300 universities worldwide for research and education purposes
Some words on the WebML history
28
A visual modeling language (DSL) ...
Oriented to the high level design
Incorporating all the details that are needed for refined specification
... Effective and essential ...
Including only the concepts relevant to the domain
No overhead because of verbose notation or orthogonality
... For user interaction design ...
Page contents
Navigation paths and UI events
... Within web applications
Born bottom-up from the features of dynamic web applications
Effective and essential
29
Role and positioning
Contents: ER, class, ..
Process:BPMN
User Interaction: WebML
Style:CSS, ...
Backend:soaML, WSDL..
BPMN model
Services
Two pages
Retrieval of session data (CurrentUser)
Review Page• Lists of (prefered) artists • Links to artist details
Albums Page• List of albums of selected
artist• Checkbox and deletion of
albums
The WebML notation exampleReviewPage
CurrentUser
CurrentUser
AllArtists
Artist Artist
ArtistDetails
Albums
DeleteAlbum
Album
OK
KO
AlbumIndex
Album[PlayedByArtist]
GetUser
CurrentUser
Artist[UserPreference]
PreferredArtists
31
A WebML unit is the atomic information publishing element
A “view” defined upon a container of objects:The instances of a concept
Based on one or more complex selection conditions (called selectors)
A unit may need some inputs and produces some outputsInputs are required to compute the unit itself (params of the selector)
Outputs can be used to compute other unit(s)
Content publishing units
UnitName
Concept[Selector (Param1, ..., ParamN)]
UnitType
IN:Param1, ... ParamN
OUT:Params
Links
AllArtists
Artist Artist
ArtistDetails
Source Destination
Links in WebML have 3 purposesDescribe navigation paths
Transport parameters between units
Activate computation of units and execution of side effects
Normally, links are rendered as one or more anchors/buttons based on the dataset and semantics of the source unit
Various behaviors are allowed (automatic, asynchronous, transport ..)
Transport links: only carry parameters, no navigation nor side effects
33
Execution of operations and business logic
Simple failure/success model of operationsSuccess: green “OK link” is navigated
Failure: red “KO link” is navigated
Chains of operations can be definedControl dictated by links
Basic control flow elements available (loop, switch)
Operation units
OperationName
Concept[Selector (Param1, ..., ParamN)]
OpType
OK
KO
34
Content publishing Data Index MultiData Entry Scroller Multichoice HierarchicalIndex
Session management Web Services Login Logout Get Set Request-Response ….
CRUD OperationsCreate Modify Delete Connect Disconnect
Units coverage
35
The language foundationsBasic set of units
Connection to a content model for data retrieval and management
Links for control and data flow
Page computation algorithms for execution semantics• The page content is automatically calculated also in case of complex topologies• Incoming links and dependencies among units are considered
The language is openNew units and operations can be specified
For implementing ad-hoc business logics
Foundations and extensibility
WebRatio
37
An Eclipse-based development environment allowing:Modeling: ER + WebML + BPMN
100% code generation of standard JEE applications• Clear separation between design time and run time• No proprietary runtime
Quick and agile development cycles
Extending the generation rules• Defining new presentation styles• Defining new components
Versioning, teamwork, full lifecycle mgt
What is WebRatio
Requirement Analysis
Solution Modeling
Prototype Generation
Results Verification
38
... for designing, building and maintaining your custom enterprise applications
A fertile environment ...
39
You capture business requirements in abstract, technology independent models
WebRatio – Step 1
BusinessUser
WebRatioModeller
40
Design the model
Process ModelDefine business processes managed by the application
BPMN notation
Application ModelDefine data, services, logic and presentation details
WebML notation
41
You customize the environment by defining your own generation rules
WebRatio – Step 2
LayoutDesigner
JavaProgrammer
42
Customize the generation rules
Layout templatesfor a perfectly fine-tuned layout, tailored to your visual identity
Custom componentsfor implementing any kind of business logic, integration or complex task
43
You get a tailored, yet standard, Java Web applicationwith no proprietary runtime
WebRatio – Step 3
WebRatioModeller
BusinessUser
Get the application
WebApp
DBMS
Browser
SOACustom
InformationSystem
Standard execution environment
Standard JavaApplication
Server
44
Involve business users in the development process and converge quickly to the target
An evolutionary prototyping dev cycle
Requirement Analysis
SolutionModelling
ApplicationGeneration
ResultsValidation
47
3 reasons in favour of Code Generation
Execution environment is as standard as possible• standard architecture, standard libraries• fitting corporate IT policies
Two degrees of freedom instead of one• not all the requirements can be modelled• define, use and reuse your own generation rules
No vendor lock-in• generated code is human-readable, applications can be easily maintained without the
tool
Why we chose Code Generation
Model
GenerationRules
GenerationEngine
49
Do you want to touch the generated application ?Touch the generation rules instead !
How you can keep on generating
GeneratedApplication
?
50
Kinds of application
Corporate Operations
Human Capital Management
Product Life Cycle Management
CustomerRelationshipManagement
Enterprise Resource Planning
Supply Chain Management
Knowledge Support
Sales and LeadManagement
Marketing Resources Mgt
Web CustomerServices
B2C/B2BE-Commerce
Learning Management
Document Management
Project Management
Customer Information Mgt
Partner Relationship Mgt
Recruitment
Training
Workforce Management
Supplier Relationship Mgt
Business Intelligence
Web Content Management
Knowledge Management
Risk and Compliance
Enterprise Governance
Order Mgt
Payment Services Orchestration
Web Front-End of accounting sys.
Front-Office Process Mgt
Financial Services
51
Some relevant experiences
worldwide web site + CMS and product
cataloguewww.acer.com
www.packardbell.com
Web-based, multi country,End-to-end Front-Office
Process Mgt platform
• Unsold items mgt system• Warehouse mgt system
Web-based, IT budget monitoring system
• Web-based security law compliance system
• Green energy department internal knowledge base system
Fashion & Furniture
Finance
Energy & Utilities
Public Sector
Electronic invoice mgt system
• Web-based cash control system• Internal training system
Mobile public portal
IT industry
Ecuador cooperative network cash flow compensation system
Web site + CMS + online customer services
Public transport pass e-ticketing system
WebRatio is
now at its 6th major release (the 7th due since the end of 2012)
on the market since 2001
WebRatio customers
120+ companies and 500+ users
in Italy, Europe and South America
WebRatio adoption
15,000+ users of the free edition
Used in hundreds of universities all over the world
WebRatio partners
40+ software houses and system integrators
300+ universities worldwide, 12.000+ students
Summary
marcobrambi
emanuelemolteni elenawebratio
Come and visit us at booth
Visit us at the booth and win 5 free copies of upcoming MDSE book and full access to
Morgan&Claypool library for 1 month!