Experiences and requirements for a User Interaction Modeling Language

Marco Brambilla @marcobrambiPolitecnico di Milano and WebRatio

Stefano Butti @stebuttiWebRatio

OMG Technical Meeting, ADTF, Salt Lake City, June 22nd, 2011

Agenda

2

WebML: Web Modeling Language History Language Metamodel Relation to other standards

Industrial Experience WebRatio Users Projects

Requirements for a Web UI Language

Discussion RFC or RFP Consensus and partners

1. WebML

4

WebML: purpose

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 applicationsBorn bottom-up from the features of dynamic web applications

WebML: role and positioning

Contents: ER, class, ..

Process:BPMN

User Interaction: WebML

Style:CSS, ...

Backend:SoaML, WSDL..

BPMN model

Services

5

ReviewPage

CurrentUser

CurrentUser

AllArtists

Artist Artist

ArtistDetails

Albums

DeleteAlbum

Album

OK

KO

AlbumIndex

Album[PlayedByArtist]

GetUser

CurrentUser

Artist[UserPreference]

PreferredArtists

The WebML notation: example

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

7

WebML: content publishing units

A WebML unit is the atomic information publishing element

A “view” defined upon a container of objects:The instances of an concept

Based on a complex selection condition (called selector)

A unit may need some input and produces some outputInput is required to compute the unit itself (params of the selector)

Output can be used to compute other unit(s)

UnitName

Concept[Selector (Param1, ..., ParamN)]

UnitType

IN:Param1, ... ParamN

OUT:Params

WebML: Links

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 behaviours are allowed (automatic, asynchronous, transport ..)

Transport links: only carry parameters, no navigation nor side effects

AllArtists

Artist Artist

ArtistDetailsSource Destination

9

WebML: CRUD operation units

Execution of CRUD operations

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)

OperationName

Concept[Selector (Param1, ..., ParamN)]

OpType

OK

KO

WebML units: coverage

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

10

11

WebML foundation and extensibility

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

12

WebML metamodel

Language metamodel availableAs UML diagrams (MagicDraw)

As ECORE (EMF) models written in Eclipse Modeling Tools

Excerpt / overview:

WebML metamodel

13

2. WebRatio

What is WebRatio

15

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

Requirement Analysis

Solution Modeling

Prototype Generation

Results Verification

Who are the user of WebRatio

16

Application Model(ER + WebML)

Custom Model Components (Java, API ,…)

Layout Templates(HTML, CSS, JavaScript, ...)

Business ProcessAnalyst

Application Analyst /WebRatio Modeler

WebDesigner

JavaProgrammer

Standard JavaWeb application

Generation rules

Model editorProcess Model (BPMN)

(*) Learning time

(*) 4 days (*) 15 days

(*) 5 days (*) 5 days

A broad spectrum of possible applications

17

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

Supplier Relationship Mgt

Business Intelligence

Web Content Management

Knowledge Management

Payment Services Orchestration

Web Front-End of accounting sys.

Front-Office Process Mgt

Financial Services

Summary

WebRatio isnow at its 6th major release

in the market since 2001

WebRatio customers100+ companies and 500+ users

in Italy, Europe and South America

WebRatio partners40+ software houses and system integrators

300+ universities worldwide, 12.000+ students

3. Requirements and discussion

20

Modeling and 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

21

Lesson learned (so far)

Reasons for the success of the current notationExtremely compact (no useless overhead)

Effective (allows to model exactly what users want)

Efficient (grants high reusability of model fragments)

Easy to learn (very low learning curve)

Comprehensive (covers most of the web interaction needs)

Open and extensible (for covering any ad hoc logic)

Perceived missing aspectsAppropriate management of client-side logics, RIAs (Rich Internet Applications), AJAX, complex user events

Full-fledged support to UML class diagrams (esp. methods)

22

WebML in the OMG framework

Exploit the possible relations withBPMN -- Already in place

Class diagrams

SoaML

Other standards?

Support the standardizationRefine the metamodel

Implement appropriate injectors to MOF-compliant models

23

WebML standardization effort

Gather interest and consensusFrom vendors and users

Open to changes, extensions, integration

Establish a joint effort / strategy

Decide scopePossible options:

Only Web Web + Mobile Generic Graphical UI

Decide RFP vs. RFCPros and cons

www.webratio.comcontact@webratio.com

Thanks