© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | EMF Forms goes AngularJS - a.k.a. JSON Forms 1

EMF Forms goes AngularJSa.k.a. JSON Forms

Maximilian Koegelmkoegel@eclipsesource.com

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | EMF Forms goes AngularJS - a.k.a. JSON Forms 2

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

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | EMF Forms goes AngularJS - a.k.a. JSON Forms 3

Data model needs to be mapped to UI

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | EMF Forms goes AngularJS - a.k.a. JSON Forms 4

Modeling the UI

Domain Model(XSD, Ecore)

Renderer

User Interface View ModelJSON Schema UI Schema

AngularJS Renderer

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | EMF Forms goes AngularJS - a.k.a. JSON Forms 5

EMF Forms vs. JSON Forms

Domain Model(XSD, Ecore)

SWT/JavaFX/RAP/Tabris Renderer

User Interface View Model

User Interface JSON Schema UI Schema

AngularJS Renderer

JSON Forms Exporter

EMF Forms

JSON Forms

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | EMF Forms goes AngularJS - a.k.a. JSON Forms 6

Data Model and UI Model: Iteration 1

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | EMF Forms goes AngularJS - a.k.a. JSON Forms 7

JSON Forms Example Project

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | EMF Forms goes AngularJS - a.k.a. JSON Forms 8

Demo

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | EMF Forms goes AngularJS - a.k.a. JSON Forms 9

Data Model and UI Model: Iteration 2

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | EMF Forms goes AngularJS - a.k.a. JSON Forms 10

More Demo

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | EMF Forms goes AngularJS - a.k.a. JSON 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 | EMF Forms goes AngularJS - a.k.a. JSON Forms 12

• JSON Forms: http://jsonforms.org=> Getting started Tutorial=> EMF Forms to JSON Forms Migration Tutorial

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

• Twitter: #jsonforms @JSONForms

More Information

© 2015 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | EMF Forms goes AngularJS - a.k.a. JSON Forms 13

this

WITH