json forms 2 › sites › default › files › slides...© 2018 eclipsesource | | dr. maximilian...
TRANSCRIPT
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 1
JSON Forms 2.0Form-based UIs for Web Applications
Maximilian [email protected]
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 2
Applications frequently require forms
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 3
Forms map data into a UI
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 4
• “XML Schema for JSON”• Format to describe JSON-based data• Focused on data validation• Can be created manually• Can be generated from EMF Ecore
→ Used in JSON Forms to define the data
Declarative Data Definition = JSON Schema
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 5
• Declarative format for form-based UIs• Describes the layout of a form• Describes the data binding• Does not describe the data• References the data schema (JSON Schema)
→ Used in JSON Forms to define the form-based UI
Declarative UI Definition = UI Schema
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 6
Combining JSON and UI Schema = Rendering
User Interface JSON Schema(Data Schema)
UI Schema
RendererSet
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 7
Rendering Controls
User Interface JSON Schema(Data Schema)
UI Schema
Renderer
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 8
Rendering Controls
User Interface JSON Schema(Data Schema)
UI Schema
Data Binding
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 9
Rendering Layouts
User Interface JSON Schema(Data Schema)
UI Schema
Name
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 10
Rendering Layouts
User Interface UI Schema
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 11
Demo!
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 12
Demo: Validation
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 13
Demo: Visibility Rules
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 14
Demo: Custom Renderers
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 15
Demo: EMF Forms Integration
Ecore
SWT/JavaFX/RAP/Tabris Renderer Sets
User Interface View Model
User Interface JSON Schema UI Schema
Web Renderer Set
JSON Schema Export
EMF Forms
JSON Forms
UI Schema Export
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 16
Demo: Mobile Renderer with Ionic
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 17
● Improved Architecture○ Redux-based architecture○ Renderers are simpler (no update handling)
● Renderer Sets○ Material React and Vanilla React○ Ionic (WIP)○ Angular Material (WIP)○ Easy to create new one: 20-50 days
What's new with 2.0? (1/2)
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 18
● Improved Schema support:○ Any of & All of○ Reference resolving
● Support for Trees:○ TreeWithDetail○ Tree-Editor
● Eclipse Theia Integration: Theia-Tree-Editor
What's new with 2.0? (2/2)
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 19
JSON FormsWeb: http://jsonforms.ioTwitter: #jsonforms @JSONForms
EMF FormsWeb: http://emfforms.orgTwitter: #emfforms @EMFForms
EclipseCon EuropeBuilding Web-based Modeling Tools based on Theia - 11:30 AM - Theater StageThe Busy RCP Developer’s Guide to Eclipse Theia - 1:15 PM - Theater Stage
More Information
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 20
this
WITH