SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 1

MADModel Aggregator eDitor

Fabien Vignal – Philippe Palau

Http://www.sysord.com

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 2

Who Are We ?

Software Engineer

SYSORD- Small company (3 person-strong) located in Roquefort (FR12)

- Eclipse, RCP, Java, J2EE- Software development for the food industry

Interested in MDA and development automation

Empirical approach before using EMF

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 3

Motivation Daily use of EMF / UML modelers

Properties view :

- Not very user friendly

- Not always adapted to user needs

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 4

What Would Be Nice ...

An input form with adapted widgets

Properties adapted to user needs

Revised form design

Simple navigation between elements

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 5

MAD :Model Aggregator eDitor

Video MAD for UML Model (http://youtu.be/ACFS6ajAsV8)

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 6

MAD Concepts (Configuration)

Use of metamodels

Description of views - Template by EClassifier- Includes configurable widgets

- Values obtained using queries

Reuse of templates :- Inheritance (implicit / explicit)- Composition

Configuration changes immediately applied :- No code- No generation

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 7

MAD Concepts (Edit / Save)

Editing of the selected element

Property modification using widgets

Value validation before update

Two types of model- Main model - Foreign model

MAD only saves foreign models

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 8

Architecture Service-oriented architecture

Three main plugins

- API : interfaces (services / objects)- Core : implementations- UI : Eclipse view implementation

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 9

Core

Main Services :- View Builder- Configuration Manager- Model Access Object- Query Evaluation Service

Core provides default service implementations

Any service can be replaced or customised

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 10

User Interface (UI) Uses Core to get the model for the view

Eclipse view (SWT) Customisation :- ViewBuilder et WidgetBuilder extensions- New custom widgets- New UI library target : (JavaFX / HTML)

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 11

Technology Used Eclipse

Xtext (configuration editor + DSL)

SWT + FormToolKit / Eclipse view

Query evaluators :- OCL- Acceleo

EMF Adapters (Model synchronization) Dependency injection with Guice

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 12

Queries (I)

Queries"authors" no language defined, OCL by default language:ACCELEO call authorsOfSeveralBooks() Acceleo Query call

language:MAD "CREATE('books')" MAD function to create a new book

Query chainsQuery Chain {

"books->last()",language: ACCELEO call authorMultiBook(),"first()"

}

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 13

Queries (II)

SubquerieseContainer().oclAsType(Library).books->select(pages > [pages])->isEmpty()

The first 'pages' refers to the books in the iteration. '[pages]' is evaluated before the iteration and corresponds to the number of pages of the book.

Contextual Variables$CONTEXT, $VALUE, $UIVALUE, $MODEL … usable variables for queries.

$UIVALUE > 10 and $UIVALUE < 10000 Validation rule of a numerical widget's value

Need for evaluator monitoring

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 14

MAD in Action

The Tinylibrary model

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 15

tinylibrary.mad Configuration

MAD base configuration import

Tinylibrary metamodel import

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 16

Widgets

Set of configurable widgets InputWidgets :- Text, Numeric, Date, Boolean- ComboBox, List, PickList (popup or embedded)- Embedded Xtext editor

 OutputWidget NavigationWidget FlexibleWidget Command

Extendable by customised implementation

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 17

First Configuration (I)

//------------------------------------------// MAD configuration for Tiny library model//------------------------------------------ //MAD base configuration importimport "platform:/resource/mad.configuration/config.mad" //Tiny library Ecore metamodel importimport "platform:/plugin/com.sysord.mad.demo.tinylibrary/model/tinylibrary.ecore"

//Configuration for a Book elementConfiguration BOOK for tinylibrary.Book {template:

//Textbox widget for editing title property widget:Title //the widget idlabel:"Title" //widget labeltype:TEXT_WIDGET //display a text widgetvalue:"title" //Ocl query for getting the 'title' property from the book.

}

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 18

First Configuration (II)

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 19

Simple Widgets

Configuration BOOK for tinylibrary.Book {//Format expression for all Book elements Label computing//queries between [] are evaluated parts. label provider:"Book: [title]"template:...//Number input widgetwidget:Pages label:"Pages"type:NUMBER_WIDGETvalue:"pages"

//Date input widgetwidget:PublicationDate label:"Publication date"type:DATE_WIDGETvalue:"published"

//Checkbox widgetwidget:Damaged label:"Is damaged"type:BOOL_WIDGETvalue:"damaged"

}

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 20

List Widgets

List content (candidates) provided by queries

//Configuration for a Book elementConfiguration BOOK for tinylibrary.Book {...//Combo widgetwidget:Categorylabel:"Category"type:SINGLE_SELECT_WIDGETvalue:"category":tinylibrary.BookCategory//OCL query for filling combocandidates:"BookCategory.allInstances()"

//Popup PickList widgetwidget:Authors//Dynamic label value label:"[authors->size()] authors" type:MULTI_SELECT_WIDGET:POPUP_PICKLISTvalue:"authors"//Populate the list with candidates query resultscandidates:"eContainer().oclAsType(Library).writers"item label:"[name]"

}

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 21

Navigation Widget

List of links to detail view of a selected element Double-click to access detail element Click on the left arrow to return

//Configuration for the Library elementConfiguration LIBRARY for tinylibrary.Library {template://Navigation for accessing Book detailwidget:BooksNavigationlabel:"Books"type:NAVIGATION_WIDGETcandidates:"books"

}

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 22

Output Widget

Display read-only values Elementary properties or computed values

Configuration BOOK for tinylibrary.Book { ...//Output textwidget:avgPagelabel:"Pages by author"type:OUTPUTTEXT_WIDGET//conditional visibilityvisible when:"not authors->isEmpty()"//Compute pages average by authors.value:"(pages / authors->size())" //value converter from double to string.valueConverter:DOUBLE

}

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 23

Flexible Widget (I)

//Configuration for a person element (abstract)Configuration Abstract_PERSON for tinylibrary.Person {label provider:"[name]"template:

widget:Name...widget:FirstName ...widget:LastName...

}

//Configuration for a Writer element. //(extends implicitly Person configuration)Configuration WRITER for tinylibrary.Writer {template:

widget:Bookslabel:"Books"type:FLEXIBLE_WIDGET//include Book template for each writen bookvalue:"books"

}

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 24

Flexible Widget (II)

Selection of the template to use for the flexible elements//Alternative configuration for a Book elementConfiguration BOOK_SHORT for tinylibrary.Book {//Explicit extensionextends: BOOK //Reuse the BOOK template template://Display only those widgetslayout: Isbn Title

}

Configuration WRITER for tinylibrary.Writer {template:widget:Bookslabel:"Books"type:FLEXIBLE_WIDGET//Use the BOOK_SHORT template //for book detail.flexible template: BOOK_SHORTvalue:"books"

}

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 25

Command//Icon declarationUse icon DELETE_ICON URI:"platform:/resource/mad.configuration/icons/delete-icon_16.png"

//Shared command declaration Common Command DELETE_ELEMENT_COMMAND { ITEM_COMMAND "Delete item" //Command label icon:DELETE_ICON //Image for the command button//launch the DELETE MAD Macro for deleting selected itemaction: language:MAD "DELETE()"on success: Reload view

}

Configuration LIBRARY for tinylibrary.Library {template:widget:BooksNavigationlabel:"Books"type:NAVIGATION_WIDGETcandidates:"books"commands://Inner command for creating a new bookGLOBAL_COMMAND "New Book" action: language:MAD "CREATE([OCL:'books'])"//after creation displays view //for the created item: the command RESULT.on success: Display view for "$RESULT",//Use shared command with label overrideDELETE_ELEMENT_COMMAND("Delete the selected book.")

}

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 26

Other Widgets

- Xtext embedded editor

- Custom Widgets- HTML Link- Google Map widget

Demonstration video for the first version of MAD:MAD and Xtext (http://youtu.be/ShoLi5XoQOw)MAD is customizable (http://youtu.be/2NTAP--Hi1I)

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 27

« Layout » Widgets distribution by tab Display order selection

//tab declarationUI Tab {id:WRITEN_BOOKSlabel:"Writen books"

}

Configuration WRITER for tinylibrary.Writer {template:

widget:Books//the widget will be diplayed //on the WRITEN_BOOKS tabtab:WRITEN_BOOKSlabel:"Books"type:FLEXIBLE_WIDGET

flexible template: BOOK_SHORTvalue:"books"

//widgets display order definitionlayout: LastName FirstName Name Books

}

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 28

Validators

Validation based on rulesConfiguration BOOK for tinylibrary.Book { …//Number input widgetwidget:Pages label:"Pages"type:NUMBER_WIDGETvalue:"pages"

validators://Validation: pages widget must be filled //and its value between 10 and 10000validation rule:

"not $UIVALUE.oclIsUndefined()" I18N Error message:"REQUIRED_VALUE"

validation rule:"$UIVALUE > 10 and $UIVALUE < 10000" I18N Error message:"VALUE_OUT_OF_RANGE[10][10000]"

…}

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 29

Layers Filter and aggregate information by domain « Layers » are hierarchical and stackable//Layers configurationLayer INFO_LAYER {

label:"All Information"Sub layers {

Layer BASIC {label:"Basic information"}Layer DETAILED{label:"Additional information"}

}}

Layer STATISTICS_LAYER {label:"Statistics"Sub layers {

Layer AUTHOR{label:"Authors statistics"}Layer BOOKS{label:"Books statistics"}

}}

Configuration BOOK_SHORT for tinylibrary.Book {...widget:Pages//available only in books statistics layerlayers: STATISTICS_LAYER.BOOKS...//Output textwidget:avgPage//available in the two layerslayers:STATISTICS_LAYER.BOOKS, STATISTICS_LAYER.AUTHORlabel:"Pages by author"...}

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 30

Other Functionalities

I18N : for all labels and messages

Referentials : Queries, Commands, Constants

Multimodel edition (decoration and extension)

- Extension manager

- Model Synchronisation

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 31

Use Cases

MDE/MDA approach with Eclipse

RAD approach : editor creation with a user

Identical edition whatever the modeler used

Domain specific commands

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 32

Conclusion

MAD is functional

Used by Sysord for all modelling works (UML, etc …)

Ongoing evolutions : queries compilator (performance optimisation)

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 33

Perspectives

Queries creation wizards

CDO for multi-user mode

MAD configuration generator

MAD plugins generator

Multimedia element edition sound, images, videos, Charts and Graph

Eclipse4, JavaFX

SYSORD - Model Aggregator eDitor – Fabien Vignal – Philippe Palau – Stephan Montagnes 34

Merci