end-to-end model-driven development of applications with eclipse using the mdd toolsuite webratio
TRANSCRIPT
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
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
What is 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
WebML, at the core of WebRatio
How WebRatio works
... for designing, building and maintaining your custom enterprise applications
A fertile environment ...
Capture business requirements in abstract, technology independent models
WebRatio – Step 1
Business User
WebRatio Modeler
Application Model
Define data, services, logic, presentation details and user interaction
WebML Notation > IFML(*)
Process Model
Define business processes managed by the application
BPMN notation
Step 1 – Design the model
(*) the standardization process of the language is in progress within
WebRatio Built-in Components
WebRatio Store Components
DB Social Legacy SOA Content E-
commerce
BPM
…
Saas
… … … … … … … …
Custom Components
Model components
Customize the environment by defining your own generation rules
WebRatio – Step 2
Designer Java Programmer
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
Step 2 – Customize the generation rules
Get a tailored, yet standard, Java Web application with no proprietary runtime
WebRatio – Step 3
WebRatio Modeler
Business User
Standard Web App
Step 3 – Get the application
Mobile Desktop
User Interface
DBM System MySQL, PostgreSQL, SQL Server, Oracle,
DB2, etc.
Legacy System
SAP, IBM Host, AS400
BPM Engine
TIBCO (*), JBPM (*)
Middleware
TIBCO ESB, Mule ESB
Integration Layer
On-premises In the cloud
… …
Standard Java Application
Server
Deploy
Standard Java Application
Step 3 – Application architecture
Code generators (Groovy and Java)
Struts actions mapping and form
beans
Hibernate configuration files and Java classes
JSP Pages
Web application and logs configuration files
WebRatio IDE
WebML and BPM Customized rules
Commons libraries
WebRatio Runtime Java
Services
Custom components Java Services
WebRatio BPM Java
Engine
WebRatio components descriptors
Struts Java actions
AJAX Runtime framework
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
WebRatio IDE Architecture
Demo
The Standardization Effort: towards IFML
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
IFML - Objectives
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
IFML - Focus
IFML concrete syntax by example
IFML concrete syntax by example
IFML concrete syntax by example
A real example.. The complete Gmail UI
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, ..
*
The IFML metamodel - 1
25
The IFML metamodel - 2
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
IFML – Open-source editor
Architecture overview
You are welcome to comment on IFML at OMG and to contribute!
IFML – Open-source editor (2)
IFML Editor UML Editor
(class, activity, … from Papyrus)
Front-end code
Alf + fUML interpreter
fUML + Alf
Alf Editor
Code generator
Thank you! [email protected] emanuelemolteni emanuelemolteni
[email protected] marcobrambi marcobrambi