Building and maintaining form-based Are you still manually...
Transcript of Building and maintaining form-based Are you still manually...
![Page 1: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/1.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 1
Are you still manually coding UIs?Building and maintaining form-based
UIs for data entry efficiently
Eclipse Finance Day 2013 – Zürich
Maximilian Koegel
![Page 2: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/2.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 2
Data conforms to a domain-specific data model
![Page 3: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/3.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 3
Data is often viewed/edited in a form-based UI
![Page 4: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/4.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 4
Data model needs to be mapped to UI
![Page 5: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/5.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 5
Modeling the UI
1. Data Binding with Controls
2. Modeling Structure with Layouts
Domain Model View Model UI
![Page 6: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/6.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 6
Modeling UI Data Binding with Controls
Domain Model View Model UI
Domain Model References Domain Model Reference
![Page 7: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/7.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 7
Modeling UI Structure with Layouts
View Model UI
![Page 8: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/8.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 8
Extensibility and Adaptability
• Custom Controls
• e.g. Email-Control
• Custom View Model Elements and Renderers
• e.g. Group
![Page 9: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/9.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 9
Custom Control: Email
![Page 10: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/10.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 10
Custom View Model Element
• Define new view model element in Ecore
• Generate model and edit plugins
• Create a Renderer
Renderer
View Model Element
![Page 11: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/11.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 11
Exchangeable UI Technology
• UI Model is independent of Renderers
• Only renderers are UI technology dependent
• Renderers can be replaced
• Allows for parallel use of different UI technologies
• Existing renderers:
• RCP/SWT
• Web based on RAP
• JavaFX (demo only)
![Page 12: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/12.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 12
Web-Renderer based on RAP
![Page 13: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/13.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 13
When to use/not use of 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
![Page 14: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/14.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 14
More Information
• Current Release 1.1: Minimal public view model API
• Roadmap:
• Expose more view model API
• JavaFX Renderer
• Tooling
• EMF Client Platform: http://eclipse.org/emfclient
• Twitter: #emfcp https://twitter.com/EMFCP
![Page 15: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/15.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 15
Backup Slides
![Page 16: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/16.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 16
JavaFX Renderer
![Page 17: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/17.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 17
Embedding the editor
![Page 18: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/18.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 18
“The EMF project is a modeling
framework and code generation facility for
building tools and other applications based on
a structured data model. From a model
specification described in XMI, EMF provides
tools and runtime support to produce a set
of Java classes for the model, along with a set
of adapter classes that enable
viewing and command-based editing […].”Source: http://www.eclipse.org/emf
“The EMF project is a modeling
framework and code generation facility for
building tools and other applications based on
a structured data model. From a model
specification described in XMI, EMF provides
tools and runtime support to produce a set
of Java classes for the model, along with a set
of adapter classes that enable
viewing and command-based editing […].” Source: http://www.eclipse.org/emf
What is EMF?
![Page 19: Building and maintaining form-based Are you still manually ...wiki.eclipse.org/images/2/2e/MKoegel.pdfBuilding and maintaining form-based UIs for data entry efficiently ... • JavaFX](https://reader036.fdocuments.net/reader036/viewer/2022081404/5f0459937e708231d40d8b64/html5/thumbnails/19.jpg)
© 2013 EclipseSource | http://eclipsesource.com/munich | Dr. Maximilian Koegel | Are you still manually coding UIs? 19
What is EMF Client Platform?
Navigator
Editor
Validation View
Dialogs
Model Workspace