Telecom and Informatics 1

INF5120

”Modellbasert Systemutvikling”

”Modelbased System development”

Lecture 12: 16.04.2012 Arne-Jørgen Berre

arneb@ifi.uio.no or Arne.J.Berre@sintef.no

Telecom and Informatics 2

INF5120 - Lecture plan - 2012

Part I: SSI – Service Innovation and Agile Service/Software Engineering

Part II: SSMDE – Model Driven Engineering

Part III – Model Driven Interoperability and ADM

1: 16/1: Introduction to Model Based System Development (INF5120)

2: 23/1: SIE I: Enterprise Architecture, Role modeling-Collaboration and Value Networks – Verna Allee (VNA)

3: 30/1: SIE II:: Business Process Modeling with BPMN 2.0 and Business Model Innovation - Peter Lindgren (BMI)

4: 6/2: SIE III: AT ONE –User-oriented design – with Use cases and user stories

5: 13/2: SIE IV: Service modeling with SoaML – Service modeling - Design, patterns

6: 20/2: SIE V: Precise Modeing in UML with OCL and Design with DCI - Design, patterns

7: 27/2: MDE I: Software Process Model Frameworks – Essence/SEMAT, SPEM, EPF and ISO 24744 –Shihong Huang/Brian Elvesæter/Arne J. Berre

8: 5/3: MDE II: Metamodels, Domain specific languages and UML profiles (Franck Fleurey, Brian Elvesæter)

9: 12/3: MDE III: Metamodeling, MDLE and DSL Tools (EMF, GMF, ATL, Kermeta) (Franck Fleurey)

10: 19/3: MDE IV: Model transformations - MOFScript, QVT DSLs with examples (Franck Fleurey)

11: 26/3: MDE V: Method Engineering and CORAS UML profile-: DSL example (Arne J. Berre)

2/4, 9/4: EASTER

12: 16/4: MDE VI: User Interface Modeling – WebRatio-WEBML, ESITO-Genova, OMG IFML

13: 23/4: MDI I: MDE for SOA (Accenture/NAV) - and introduction to Semantic technologies

14: 30/4: MDI II: Semantics and Model Driven Interoperability

15: 7/5: MDI III: ADM and Migration to SOA/SaaS/Cloud computing

16: 13/5: Conclusion and Summary for INF5120 - Preparation of Exam

Exam: Monday June 4th, 2011, 1430-1830 (4 hours)

Telecom and Informatics 3

INF5120 – Oblig/Exercise plan - 2012

1: 16/1: None

2: 23/1: Guest lecture: Value Networks – Verna Allee (VNA)

3: 30/1: Guest lecture: Business Model Innovation - Peter Lindgren (BMI) – Establish groups

4: 6/2: AT ONE initial exercise – overall approach for Oblig 1 – “myServiceFellow”

5: 13/2: Group presentation

6: 20/2: Group presentation

7: 27/2: Group presentation

8: 5/3: MDE Tools – introduction – Oblig 2 intro

9: 12/3: MDE Tools II - EMF

10: 21/3: MDE Transformation tools - Delivery of Oblig 1

11: 26/3: Walk through of Oblig 1

2/4, 9/4: EASTER

12: 16/4: Discussion on Oblig 2

13: 23/4: Discussion on Oblig 2

14: 30/4: Oblig 2 delivery

15: 7/5: Oblig 2 summary

16: 13/5: Conclusion and Summary for INF5120 - Preparation of Exam

Exam: Monday June 4th, 2011, 1430-1830 (4 hours)

Telecom and Informatics

Outline

WebRatio MDE tool

WebML modeling language

WebRatio Modeling methodology

ESITO Genova (Knut Sagli)

OMG IFML RFP process and proposal

4

WebRatio

Telecom and Informatics

WebRatio demonstration

http://www.youtube.com/watch?feature=player_embedded

&v=jDrWaKSlSvY

6

Telecom and Informatics

References

- overview presentation on WebML

http://www.slideshare.net/mbrambil/webml-and-webratio-business-process-modeling-

bpm-and-web-application-modeling-4474769?from=ss_embed

- slides, materials, exercises with solutions on WebML:

http://www.webml.org/webml/page33.do?UserCtxParam=0&GroupCtxParam=0&ctx1=EN

(exercises at the bottom of the page)

- audio lessons with interactive slides in English: follow separate links in the page:

http://dbgroup.como.polimi.it/brambilla/webml

- download of webratio personal

http://www.webratio.com/portal/content/en/download

NOTICE: don't download webratio free, but webratio personal

- presentation on the move towards IFML

http://www.slideshare.net/mbrambil/experiences-and-requirements-for-a-user-interaction-

modeling-language

7

8

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

9

... for designing, building and maintaining your custom enterprise applications

A fertile environment ...

WebRatio Architecture

11

You capture business requirements in abstract, technology independent models

WebRatio – Step 1

Business User

WebRatio Modeller

Design the model

Process Model

Define business processes managed by the application

BPMN notation

Application Model

Define data, services, logic and presentation details

WebML notation

12

13

You customize the environment by defining your own generation rules

WebRatio – Step 2

Layout Designer

Java Programmer

Customize the generation rules

Layout templates

for a perfectly fine-tuned layout, tailored to your visual identity

Custom components

for implementing any kind of business logic, integration or complex task

14

15

You get a tailored, yet standard, Java Web application with no proprietary runtime

WebRatio – Step 3

WebRatio Modeller

Business User

Get the application

Web App

DBMS

Browser

SOA Custom

Information System

Standard execution environment

Standard Java Application

Server

16

Involve business users in the development process and converge quickly to the target

An evolutionary prototyping dev cycle

Requirement Analysis

Solution Modelling

Application Generation

Results Validation

18

The two ways of MDD

Design-time Run-time

Model

Model

Generation Rules

Interpreter

Model

Generated Application

Generation Engine

Immediately available

Generation and deploy

Model Interpretation

Code Generation

Vendor-dependent code

Analyst / Modeller

Layout Designer

Java Programmer

App User

Analyst / Modeller

App User

19

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

20

How you can be agile

Development Prototype

Test User

Zero-cost, 1-click, prototype generation

Final Application

Development / Testing environment

Final execution environment Different deployment configurations

Iterative, agile development ?

Model

Generation Rules

Generation Engine

Final App User

Model

Generation Rules

Generation Engine

21

Do you want to touch the generated application ? Touch the generation rules instead !

How you can keep on generating

Generated Application

?

22

Kinds of application

Corporate Operations

Human Capital Management

Product Life Cycle Management

Customer Relationship Management

Enterprise Resource Planning

Supply Chain Management

Knowledge Support

Sales and Lead Management

Marketing Resources Mgt

Web Customer Services

B2C/B2B E-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

A solid foundation: WebML

24

WebML is the core of the upcoming IFML standard

Expanded to new classes of applications

Stripped of non-UI aspects (e.g., business logic orchestration)

Reasons for the success of the current notation

Extremely 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)

Lesson learned from WebML

25

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

26

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

27

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 example

ReviewPage

CurrentUser

CurrentUser

AllArtists

Artist Artist

ArtistDetails

Albums

DeleteAlbum

Album

OK

KO

AlbumIndex

Album

[PlayedByArtist]

GetUser

CurrentUser

Artist

[UserPreference]

PreferredArtists

29

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)

Content publishing units

UnitName

Concept

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

UnitType

IN:

Param1, ... ParamN

OUT:

Params

Links

AllArtists

Artist Artist

ArtistDetails

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

31

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)

Operation units

OperationName

Concept

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

OpType

OK

KO

32

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

Units coverage

33

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

Foundations and extensibility

34

Some relevant experiences

worldwide web site + CMS and product

catalogue www.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

www.webratio.com

New book,

May 2012

OMG IFML RFP Process Experiences and requirements for a User Interaction Modeling Language

Marco Brambilla marcobrambi

Politecnico di Milano and WebRatio

RFP Schedule

38

Event or Activity Actual Date

Preparation of RFP by TF November 14, 2011

RFP placed on OMG document server November 14, 2011 Approval of RFP by Architecture Board Review by TC

December 16, 2011 December 2011

TC votes to issue RFP December 16, 2011

LOI to submit to RFP due May 20, 2012

Initial Submissions due and placed on server (4 week) August 20, 2012

Voter registration closes August 20, 2012

Initial Submission presentations August 20, 2012

Preliminary evaluation by TF September, 2012

Revised Submissions due and placed on svr. (4 week) February, 2013

Revised Submission presentations March 20, 2013 Final evaluation and selection by TF Recommendation to AB and TC June, 2013

Approval by Architecture Board Review by TC June, 2013

TC votes to recommend specification June, 2013

BoD votes to adopt specification June, 2013

39

A MOF-compliant metamodel which describes the user interaction within front-end interfaces, their constituents, and their connections with back-end business components, data storage and Web Services.

A concrete syntax for the interaction flow notation which provides an intuitive representation of the user interface composition, interaction and control logic for the front-end designer.

• Specified through Diagram Definition

A UML Profile consistent to the metamodel.

A complete mapping between the UML Profile and the metamodel.

An interchange format between tools using XMI.

Mandatory requirements

40

Multiple views for the same application

Support for mobile and multi-device applications

view components: the visualization and input of data, and the production of events.

view components shall be independent of

• the concrete widgets at PS level

• the presentation aspects

interaction flow, initiated by the user or by external events, in terms of:

1. a source component;

2. possibly, a reference to an action flow model specifying the actions triggered by the event; 3) one or more target view modules and components that are presented as the result of the interaction.

Extensibility for components

User context: the user status in the current instant of the interaction (position, history, machine, platform,…)

Mandatory application requirements

41

Reference to content model items

declarative specification of a data binding between a view component and a sub-schema of the Content Model

Reference to atomic actions and actions orchestrations triggered by an event. Actions consist of business components and/or services that are invoked upon the event

Outcome of actions and orchestrations and for describing how the view reacts to these outcomes

Parameter passing dependencies

Modeling capabilities for expressing the architectural tier where the business component triggered by an event is executed define

Reference mechanism to role-based access control (RBAC) for describing access control rules to view components or modules

mapping of the view components and modules at the PIM level to PSM artifacts

Mandatory application requirements

42

non-normative example models and accompanying explanatory text to illustrate the usage to define a typical front-end system for an application. Examples shall cover the metamodel, profile, concrete syntax and interchange format

platform-independent semantics defining how the view is computed as the result of an event occurrence and of a possible action and/or orchestration invocation

mapping of the view components and modules at the PIM level to PSM artifacts

Issues to be discussed

43

Modularization of the model (design-time containers for reuse purposes of model fragments)

User input validation, according to OCL or other existing constraint languages

inference rules that make model specification simpler and more concise

Optional requirements

44

How compact and usable the proposed modeling language is

How general and platform-independent the language and its concepts are

The availability of a proof of concept implementation

How compatible the proposal is with respect to existing, well-established practices in user interaction modeling

Evaluation

The Standardization Gap

46

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

47

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

WebML in the OMG framework

The Standardization Effort: towards IFML

49

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

50

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

51

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

52

A MOF-compliant metamodel which describes the user interaction within front-end interfaces, their constituents, and their connections with back-end business components, data storage and Web Services.

A concrete syntax for the interaction flow notation which provides an intuitive representation of the user interface composition, interaction and control logic for the front-end designer.

• Graphical and textual alternative representations

A UML Profile consistent to the metamodel.

A complete mapping between the UML Profile and the metamodel.

An interchange format between tools using XMI.

Mandatory requirements

53

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

54

The IFML metamodel - 2

55

The IFML metamodel - 3

56

57

Static aspects

The UML profile for IFML �

«page»AlbumSearch

�

«page»Albums

�

«page»Album

Album Search Album Index Album Detail

�

«index»Message

Index

�

«index»MBox List «link»

58

Static aspects

Signals with tagged values

Dynamic aspects

The UML profile for IFML �

«signal»SelectMailMessages

mBox :string

Tagged values.

Parameter mBoxout name: selectedMBoxin name: mBox�

«index»MBox List

�

«index»Message

Index

SelectMailMessages(mBox)

59

IFML concrete syntax by example

60

IFML concrete syntax by example

61

IFML concrete syntax by example

62

IFML concrete syntax by example

A real example.. The complete Gmail UI

63

Messages [L D]

GMAIL top [X]

Mbox List

<<XOR>> Message Management

MailBox

Message notification

<<XOR>> Message Reader

<<D>>

Message Index

Message details

<<L>> Settings

<<P>> Tag chooser

Report

Archive

Delete

Tag/Folder Index

Associate to tag / Move to folder

<<M>> Tag creator

New Tag/Folder

Create Tag/

Folder

Message toolbar

OUT: NewTagIN: ATag

OUT: NewTagNameIN: TagName

OUT: SelectedTagIN: ATag

OUT: SelectedMessagesIN: MessageSet

Delete

Archive

Report

MoveTo

Create New

Select Tag

Create

MarkAll

MarkAllAsRead

OUT: AllMessagesIN: MessageSet

<<parameter>>MessageSet

<<XOR>> Message search

<<D>> Search

Message keyword search

<<P>> FullSearch

Message full search

Show search options

Search mail

OUT: KeywordIN: SearchKey

<<L>> Message writer

<<form>> Message Writer

Send Action

{Self.MessageRecipients >1}

OUT: MessageIDIN: MessageID

<<field>> To

<<field>> Cc

<<field>> Bcc

<<field>> Subject

<<field>> Body

<<field>> Attachment

OUT: Subject, From, Cc, Body, “ReplyAll”IN: “Re:”+ Subject, To, Cc, Body, State

OUT: Subject, From, “”, Body, “Reply”IN: “Re:”+ Subject, To, Cc, Body, State

OUT: Subject, “”, “”, Body, “Forward”IN: “Fw:”+ Subject, To, Cc, Body, State

State =”Reply” OR ”Forward”

SaveAction

State =”Forward” OR ”ReplyToAll”

<<parameter>> State

State = ”NewMessage” OR“Forward”

Forward

Reply

ReplyToAll

Add Bcc

Add Cc

Edit subject

Add attachment

Send Save

DiscardReplyToAll

Reply

Forward

State =”Reply” OR ”ReplyToAll”

State =”Reply” OR ”ReplyToAll”

OUT: Keyword, From, To., ...IN: SearchKey, FromKey, ToKey, ..

*