json forms 2 › sites › default › files › slides...© 2018 eclipsesource | | dr. maximilian...
TRANSCRIPT
![Page 1: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/1.jpg)
© 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]
![Page 2: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/2.jpg)
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 2
Applications frequently require forms
![Page 3: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/3.jpg)
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 3
Forms map data into a UI
![Page 4: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/4.jpg)
© 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
![Page 5: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/5.jpg)
© 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
![Page 6: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/6.jpg)
© 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
![Page 7: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/7.jpg)
© 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
![Page 8: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/8.jpg)
© 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
![Page 9: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/9.jpg)
© 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
![Page 10: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/10.jpg)
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 10
Rendering Layouts
User Interface UI Schema
![Page 11: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/11.jpg)
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 11
Demo!
![Page 12: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/12.jpg)
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 12
Demo: Validation
![Page 13: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/13.jpg)
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 13
Demo: Visibility Rules
![Page 14: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/14.jpg)
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 14
Demo: Custom Renderers
![Page 15: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/15.jpg)
© 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
![Page 16: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/16.jpg)
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 16
Demo: Mobile Renderer with Ionic
![Page 17: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/17.jpg)
© 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)
![Page 18: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/18.jpg)
© 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)
![Page 19: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/19.jpg)
© 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
![Page 20: JSON Forms 2 › sites › default › files › slides...© 2018 EclipseSource | | Dr. Maximilian Koegel | JSON Forms 2.0 1 JSON Forms 2.0 Form-based UIs for Web Applications Maximilian](https://reader034.vdocument.in/reader034/viewer/2022042307/5ed3d3f1e581cf2aa161c696/html5/thumbnails/20.jpg)
© 2018 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | JSON Forms 2.0 20
this
WITH