© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 1

Building Business UIs with EMF FormsMaximilian Koegel

mkoegel@eclipsesource.com

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 2

Data is often viewed/edited in a form-based UI

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 3

Data model needs to be mapped to UI

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 4

Manual coding of these UIs is a huge effort

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 5

Modeling the UI

Domain Model(XSD, Ecore)

Renderer

User Interface View Model

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 6

Modeling the UI

1. Data Binding with Controls

Domain Model View Model User Interface

2. Modeling Structure with Layouts

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 7

Demo

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 8

Example: Embedding EMF Forms in a SWT UI

• EMF Forms can be embedded on every Composite• ECPSWTViewRenderer.INSTANCE.render(Composite

parent, EObject domainObject);

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 9

EMF Forms Features

• Controls to edit data + Layouts to structure UI• IDE-Tooling• Many additional view model elements• Live-Validation• Rule-based visibility and enablement of controls• Exchangeable UI Technology:

• SWT (Production)• JavaFX (Development)• Browser/Web based on RAP (Production)• Browser/Web based on AngularJS (Development)• Mobile based on Tabris (Demo)

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 10

Rendering technologies

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 11

When to use UI Modeling

• Large Domain Model• Many different Views• Frequent Domain Model changes • Homogenous UI • UI Technology Independence• Improved Customer Involvement

• Fast Turnaround + Rapid Prototyping• Easy-to-grasp UI concepts

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 12

More Information

• Next Release 1.7 Mars SR1• Roadmap:

• API/SPI improvements• Specific Ecore Edit Support• Work towards a new Domain Model Reference API• Web Renderer based on AngularJS

=> http://JSONForms.org

• EMF Forms: http://emfforms.org => Getting started Tutorial

• Twitter: #emfforms @EMFForms

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Building Business UIs with EMF Forms 13

Sign in: www.eclipsecon.orgEvaluate this session

this

WITH