1. End-to-end Model-driven Development
of Applications with Eclipse using
the MDD Toolsuite WebRatio
Emanuele Molteni, WebRatio Chief Product Officer
Marco Brambilla, WebRatio Scientific Advisor
Ludwigsburg- EclipseCon 2012– October, 24 2012

2. What is WebRatio

3. What is WebRatio
An enhanced Model-Driven Development environment
for building enterprise Web/SOA applications
based on MDD techniques and code generation
with a special focus to User Interaction
offering the highest possible level of layout customization
supporting the BPMN standard for Process Modeling

4. WebML, at the core of WebRatio
A specific modeling language
for defining applications
Based on a set of components (Units)
 “Content Units” for content publishing
 “Operations Units” for business logic
Connection to a content model for
data retrieval and management
Smart use of links for user interactions management, data flow
between units and business logic workflow definition
Page computation algorithms for execution semantics
Users can add their own components:
 Write complex business logic or integration directly in Java and
“encapsulate” it in an abstract component

5. How WebRatio works

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

7. WebRatio – Step 1
Capture business requirements in abstract, technology
independent models
WebRatio
Business
Modeler
User

8. Step 1 – Design the model
Application Model Process Model
Define data, services, logic, Define business processes
presentation details and user managed by the application
interaction BPMN notation
WebML Notation > IFML(*)
(*) the standardization process of the language is in progress within

9. Model components
WebRatio Built-in WebRatio Store Custom
Components Components Components
Content DB SOA BPM Legacy E- Social Saas
commerce
… … … … … … … … …

10. WebRatio – Step 2
Customize the environment by defining your own
generation rules
Designer Java
Programmer

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

12. WebRatio – Step 3
Get a tailored, yet standard, Java Web application
with no proprietary runtime
WebRatio Business
Modeler User

13. Step 3 – Get the application
Standard Web App
User Interface
Desktop Mobile
Deploy
On-premises In the cloud
Standard Java
Application
Server
… …
Integration Layer
DBM System BPM Engine Legacy System Middleware
MySQL, PostgreSQL,
SQL Server, Oracle, TIBCO (*), JBPM (*) SAP, IBM Host, TIBCO ESB, Mule ESB
DB2, etc. AS400

14. Step 3 – Application architecture
WebRatio IDE
WebML and BPM Customized rules
Code generators (Groovy and Java)
Standard Java Application
Struts Java actions Commons libraries
JSP Pages
Struts actions WebRatio WebRatio Custom
AJAX Runtime mapping and form Runtime Java BPM Java components
framework beans Services Engine Java Services
WebRatio components descriptors
Hibernate configuration files and Java classes
Web application and logs configuration files

15. WebRatio IDE Architecture
ported from an AWT/Swing to Eclipse 3.2 in 2007 (currently under
Eclipse 3.6.2)
based on GEF
 in 2007 EMF/GMF was not mature enough for our purposes (in
particular in terms of performances)
based on an architecture similar to EMF/GMF
 a meta-model (WebML )
 automatic generation of domain models, palettes and tools
 tree based model-driven compare (a-la EMFCompare)
code generation based on a template based generation through
Java and Groovy
 a set of built-in generators to generate application logic, parameters
propagation, AJAX features and so on
 A set of user defined templates in particular to define custom visual
identities and custom components

16. Demo

17. The Standardization Effort:
towards IFML

18. IFML - Objectives
Create a language able to define for the front-end of applications
belonging to diverse domains these aspects
Content of interfaces
User events and interaction
Binding to business logic

19. IFML - Focus
With a particular focus on 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

20. IFML concrete syntax by example

21. IFML concrete syntax by example

22. IFML concrete syntax by example

23. 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. The IFML metamodel - 1
25

25. The IFML metamodel - 2

26. IFML – Open-source editor
WebRatio will provide a first open-source
implementation of the IFML editor
published first on Eclipse Labs
later on, after gathering interest and partecipation from the
community, transformed to a project of the Eclipse Foundation
a full solution based on EMF/GMF
 The initial Ecore model for the core part of IFML
 The EMF-based IFML editor
 Integration with open source UML editors (Papyrus)
 The Alf and fUML execution engines

27. IFML – Open-source editor (2)
Architecture overview
UML Editor Alf
IFML Editor
(class, activity, … from Papyrus) Editor
Code
generator
fUML + Alf
Front-end
Alf + fUML interpreter
code
You are welcome to comment on IFML at OMG and to
contribute!

28. Thank you!
emanuele.molteni@webratio.com marco.brambilla@polimi.it
emanuelemolteni marcobrambi
emanuelemolteni marcobrambi