User Interaction is one of the most overlooked aspects by software modeling practices. Some approaches exist for describing user interfaces in terms of buttons and items to be put in the forms, but they mostly consist of WYSIWYG form building environments. Furthermore, no standard notation exist for modeling these application aspects. This session will present the ongoing activities at OMG towards the standardization of a Interaction Flow Modeling Language (IFML): we will discuss the requirements and the scope of the sought standard, and we will propose a solution based on our 15-year experience in Web interaction design. We will be inspired by our WebML language, but we will also explain how to go beyond that, so as to cover mobile, multi-touch, collaborative applications, independently from the implementation platform. We will also show how a dedicated interaction modeling tool like WebRatio can ease the development through a plethora of facilities supporting the developer, including: visual debugging, quick prototyping, multi-platform and cloud deployment, and so on.

1. Experiences and requirements
for a User Interaction Modeling Language
Marco Brambilla marcobrambi
Politecnico di Milano and WebRatio
Emanuele Molteni emanuelemolteni
WebRatio
Code Generation 2012, Cambridge, March 28, 2012

2. Agenda
User Interaction complexity
The gap in UI modeling standards
Features, focus and objectives
Metamodel and UML profile
IFML by example
WebML and WebRatio
2

3. The Problem of User Interaction

4. UI Modeling Problem
UI has been neglected in the MDE community
Complexity 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
4

5. User Interface vs. Interaction
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
5

6. The Standardization Gap

7. Standardization gap
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
7

8. WebML in the OMG framework
Exploit the possible relations with
BPMN -- Already in place
Structure models (Class, components, CWM …)
SOAml
SysML
Others
Support the standardization
Refine the metamodel
Implement appropriate injectors to MOF-compliant models
8

9. The Standardization Effort: towards IFML

10. Objectives of IFML
Expressing
Content of interfaces
User events and interaction
Binding to business logic
of the front-end of applications belonging to diverse domains
10

11. Advantages
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
11

12. Focus
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
12

13. Mandatory application requirements
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
14

14. The IFML metamodel - 1
15

15. The IFML metamodel - 2
16

16. The IFML metamodel - 3
17

17. The UML profile for IFML
Static aspects
«page» «page» «page»
AlbumSearch Albums Album
Album Search Album Index Album Detail
«index» «index»
MBox List «link» Message
Index
18

18. The UML profile for IFML
Static aspects
Signals with tagged values
«signal» Tagged values.
SelectMailMessages
Parameter mBox
mBox :string out name: selectedMBox
in name: mBox
Dynamic aspects
SelectMailMessages(mBox)
«index»
«index»
Message
MBox List
Index
19

19. IFML concrete syntax by example
20

20. IFML concrete syntax by example
22

21. IFML concrete syntax by example
23

22. A real example.. The complete Gmail UI
GMAIL top [X]
Messages [L D] <<XOR>> Message search
<<D>> Search <<P>> FullSearch
OUT: Keyword Message
keyword Show search Message Message
IN: SearchKey options full search
search
OUT: Keyword, From, notification
To., ...
IN: SearchKey,
Search mail FromKey, ToKey, ..
Mbox
List
<<XOR>> Message Management <<L>> Settings
MailBox {Self.MessageRecipients >1}
OUT: AllMessages <<XOR>> Message Reader
IN: MessageSet
MarkAll Message ReplyToAll
AsRead
MarkAll * Message
Index details Forward
Reply
Delete <<D>>
OUT: MessageID
IN: MessageID
Archive Message toolbar
State =”Reply” OR
Delete ”Forward”
Archive <<parameter>>
Report MessageSet
Report <<L>> Message writer
OUT: SelectedMessages MoveTo Discard
IN: MessageSet Reply OUT: Subject, From,
<<form>> Message Writer Cc, Body, “ReplyAll”
ToAll
State = Add Cc IN: “Re:”+ Subject, To, Cc,
”NewMessage” OR <<field>> To
Body, State
“Forward”
<<P>> Tag chooser <<field>> Cc
State =”Forward”
Associate Add Bcc Reply OR ”ReplyToAll”
Tag/ <<field>> Bcc
to tag /
Folder
Move to Select Index State =”Reply” <<field>> Subject
folder Tag OR ”ReplyToAll” OUT: Subject, From,
<<field>> Body “”, Body, “Reply”
OUT: SelectedTag Edit subject
IN: ATag Forward IN: “Re:”+ Subject, To, Cc,
Create <<field>> Attachment Body, State
OUT: NewTag
IN: ATag New
<<parameter>> State
<<M>> Tag creator Add attachment
Create OUT: Subject, “”, “”, Body,
Tag/ New Tag/ Send Save “Forward”
Folder Create Folder IN: “Fw:”+ Subject, To, Cc,
Body, State
OUT: NewTagName
IN: TagName
State =”Reply” OR
”ReplyToAll”
Send Save
Action Action
24

23. A solid foundation: WebML

24. Some words on the WebML history
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
27

25. Effective and essential
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
28

26. Role and positioning
Contents: Process: User Interaction: Style:
ER, class, .. BPMN WebML CSS, ...
BPMN model
Backend:
soaML, WSDL..
Services
29

27. The WebML notation example
ReviewPage
GetUser CurrentUser PreferredArtists Two pages
Retrieval of session data
(CurrentUser)
CurrentUser
CurrentUser Artist Review Page
[UserPreference]
AllArtists
• Lists of (prefered) artists
ArtistDetails
• Links to artist details
Albums Page
Artist Artist • List of albums of selected
artist
KO
Albums • Checkbox and deletion of
AlbumIndex DeleteAlbum albums
OK
Album Album
[PlayedByArtist]

28. Content publishing units
IN: UnitName OUT:
Param1, ... ParamN Params
UnitType
Concept
[Selector (Param1, ..., ParamN)]
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 outputs
Inputs are required to compute the unit itself (params of the selector)
Outputs can be used to compute other unit(s)
31

29. Links
AllArtists ArtistDetails
Artist Artist
Links in WebML have 3 purposes
Describe 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

30. Operation units
OperationName OK
OpType
KO
Concept
[Selector (Param1, ..., ParamN)]
Execution of operations and business logic
Simple failure/success model of operations
Success: green “OK link” is navigated
Failure: red “KO link” is navigated
Chains of operations can be defined
Control dictated by links
Basic control flow elements available (loop, switch)
33

31. Units coverage
Content publishing
Data Index MultiData Entry Scroller Multichoice HierarchicalIndex
Session management Web Services
Login Logout Get Set Request-Response ….
CRUD Operations
Create Modify Delete Connect Disconnect
34

32. Foundations and extensibility
The language foundations
Basic 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 open
New units and operations can be specified
For implementing ad-hoc business logics
35

33. WebRatio

34. What is WebRatio
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
Requirement Analysis
Quick and agile development cycles
Extending the generation rules
• Defining new presentation styles
Results Verification Solution Modeling
• Defining new components
Versioning, teamwork, full lifecycle mgt
Prototype Generation
37

35. A fertile environment ...
... for designing, building and maintaining your
custom enterprise applications
38

36. WebRatio – Step 1
You capture business requirements in abstract,
technology independent models
WebRatio
Business Modeller
User
39

37. Design the model
Process Model Application Model
Define business processes Define data, services, logic and
managed by the application presentation details
BPMN notation WebML notation
40

38. WebRatio – Step 2
You customize the environment by defining your own
generation rules
Layout Java
Designer Programmer
41

39. Customize the generation rules
Layout templates Custom components
for a perfectly fine-tuned layout, for implementing any kind of
tailored to your visual identity business logic, integration or
complex task
42

40. WebRatio – Step 3
You get a tailored, yet standard, Java Web application
with no proprietary runtime
WebRatio Business
Modeller User
43

41. Get the application
Browser
Standard execution environment
Standard Java
Web Application
App Server
Custom
DBMS Information SOA
System
44

42. An evolutionary prototyping dev cycle
Involve business users in the development process and
converge quickly to the target
Requirement
Analysis
Solution
Results Modelling
Validation
Application
Generation

43. Why we chose Code Generation
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
47

44. How you can keep on generating
Do you want to touch the generated application ?
Touch the generation rules instead !
?
Generation Generated
Model
Engine Application
Generation
Rules
49

45. Kinds of application
Document Customer
Management Information Mgt
Knowledge Web Content Sales and Lead
Management Management
Management
Learning Customer Partner
Management Knowledge Relationship Relationship Mgt
Support Management
Project Marketing
Management Resources Mgt
Business Web Customer
Supply Chain Services
Intelligence Management
B2C/B2B
E-Commerce
Web Front-End of Financial Enterprise
accounting sys.
Services Resource Supplier
Payment Services Planning Relationship Mgt
Orchestration
Product Life Cycle Human Capital Corporate
Front-Office
Management Management Operations
Process Mgt
Recruitment Enterprise
Governance
Training
Risk and
Workforce Compliance
Management
Order Mgt
50

46. Some relevant experiences
IT industry Energy & Utilities
worldwide web site +
• Web-based security law
CMS and product
compliance system
catalogue
• Green energy department
www.acer.com
internal knowledge base system
www.packardbell.com
Web-based, IT budget
Finance monitoring system
Web-based, multi country,
End-to-end Front-Office Web site + CMS + online
Process Mgt platform customer services
Ecuador cooperative network
cash flow compensation system Public Sector
Fashion & Furniture Electronic invoice mgt system
• Unsold items mgt system
Public transport pass e-ticketing system
• Warehouse mgt system
Mobile public portal
• Web-based cash control system
• Internal training system
51

47. Summary
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

48. Visit us at the booth and win 5 free copies
of upcoming MDSE book and full access to
Morgan&Claypool library for 1 month!
Come and visit us at booth
www.webratio.com
contact@webratio.com
marcobrambi
emanuelemolteni
elenawebratio