Recommended
More Related Content
What's hot
What's hot (20)
Similar to Vaadin filtering table example
Similar to Vaadin filtering table example (20)
Recently uploaded
Recently uploaded (20)
Vaadin filtering table example
- 1. Vaadin Framework – Filtering Table Make Restaurant License info from Gov.HK web editable By Leonard Siu – Twitter: @lsiu
- 2. What are we building here? Server-Side Filterable, Sortable, Ed itable Table Dataset has 12453 Rows H2 Hong Kong Restaurant License Data courtesy of HK Database SAR Government
- 3. This is CodeAholics • Let’s go straight to coding! • Pre-requisites: – JDK 1.6+ – Maven 3+
- 4. Generate project from archetype mvn archetype:generate -DarchetypeGroupId=com.vaadin -DarchetypeArtifactId=vaadin-archetype-clean -DarchetypeVersion=LATEST -DgroupId=com.github.lsiu -DartifactId=vaadin-filtering-table-example -Dversion=1.0 -Dpackaging=war
- 5. Things to download • Get the restaurant license info from HK gov website: – http://www.gov.hk/en/theme/psi/datasets/restau rantlicences.htm • Place the file “LP_Restaurants_EN.XML” at the root of the project
- 6. Follow the project on Github • http://github.com/lsiu/vaadin-filtering-table- example • Go upto: – “Fix POM gwt:compile output compatible with eclipse servers” • Run in Command Prompt on project root: – mvn vaadin:update-widgetset gwt:compile
- 8. Compile Widgetset • Vaadin is dependent of GWT • Whenever new add-on used with client-side code, widgetset needs to be recompiled • Compile widgetset takes a few minutes (about 5 to 10 minutes on my old i3 Laptop)
- 9. Prepare Project for Vaadin WidgetSet Addon/Development • Reference: – https://vaadin.com/book/- /page/addons.maven.html#addons.maven.widgetset 1. Configuring the POM – Add plugins 2. Creating a Widget Set Definition File – Create xxx.gwt.xml file 3. Enabling the Widget Set in the Application – Reference xxx.gwt.xml file in Vaadin Servlet in web.xml
- 10. WidgetSet strategy for large project • Create separate maven module for Vaadin widgetset • Only need to compile when client widgets are added • Add it to internal maven repository for large DEV teams
- 11. Now let’s look at FilteringTable Code Walk Through http://github.com/lsiu/vaadin-filtering-table- example
- 12. Vaadin Architecture I will add business logic here too Source: https://vaadin.com/book/-/page/architecture.html
- 13. Great Framework for quick business apps • RAPID development! – No client-server boilerplate code – Write validation code only once! • Look Nice out-of the box – Skinnable through CSS • Lot’s of nice widget out-of the box – Checkout Vaadin Sampler: – http://demo.vaadin.com/sampler
- 14. Nice Visual Editor • A little slow though…
- 15. Easy Form and Write Validation online Once • Default validation on Apply • Make validation immediate tf.setImmediate(true) Source: http://demo.vaadin.com/sampler#FormBasic
- 16. Very nice alert/message box Source: http://demo.vaadin.com/sampler#NotificationHumanized
- 17. Check Out Vaadin Sampler
- 18. Lots of Add-ons • Check out: https://vaadin.com/directory • E.g Invient Charts
- 19. Thank You! Slides will be on http://www.slideshare.net/leonardsiu Code on http://github.com/lsiu/vaadin-filtering-table- example Follow Me on Twitter: @lsiu http://about.me/leonardsiu