vaadin filtering table example
DESCRIPTION
Vaadin Framework Presentation - Filtering Table @ Jan 9th 2013 Codeaholics. A server-side filterable, sortable and editable table as a demo.TRANSCRIPT
![Page 1: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/1.jpg)
Vaadin Framework – Filtering Table
Make Restaurant License info from Gov.HK web editable
By Leonard Siu – Twitter: @lsiu
![Page 2: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/2.jpg)
What are we building here?
H2Database
Server-Side Filterable, Sortable, Editable
Table
Hong Kong Restaurant License Data courtesy of HK SAR Government
Dataset has 12453 Rows
![Page 3: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/3.jpg)
This is CodeAholics
• Let’s go straight to coding!
• Pre-requisites:– JDK 1.6+– Maven 3+
![Page 4: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/4.jpg)
Generate project from archetypemvn 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
![Page 5: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/5.jpg)
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
![Page 6: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/6.jpg)
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
![Page 7: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/7.jpg)
Code Walk Throughhttp://github.com/lsiu/vaadin-filtering-table-example
![Page 8: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/8.jpg)
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)
![Page 9: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/9.jpg)
Prepare Project for Vaadin WidgetSet Addon/Development
• Reference: – https://vaadin.com/book/-/page/addons.maven.ht
ml#addons.maven.widgetset1. 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
![Page 10: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/10.jpg)
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
![Page 11: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/11.jpg)
Now let’s look at FilteringTable
Code Walk Throughhttp://github.com/lsiu/vaadin-filtering-table-example
![Page 12: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/12.jpg)
Vaadin Architecture
Source: https://vaadin.com/book/-/page/architecture.html
I will add business logic here too
![Page 13: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/13.jpg)
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
![Page 14: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/14.jpg)
Nice Visual Editor
• A little slow though…
![Page 15: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/15.jpg)
Easy Form and Write Validation online Once
• Default validation on Apply
• Make validation immediate
tf.setImmediate(true)
Source: http://demo.vaadin.com/sampler#FormBasic
![Page 16: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/16.jpg)
Very nice alert/message box
Source: http://demo.vaadin.com/sampler#NotificationHumanized
![Page 17: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/17.jpg)
Check Out Vaadin Sampler
![Page 18: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/18.jpg)
Lots of Add-ons
• Check out: https://vaadin.com/directory• E.g Invient Charts
![Page 19: Vaadin filtering table example](https://reader031.vdocuments.mx/reader031/viewer/2022012321/54627689b4af9f4e1c8b47a3/html5/thumbnails/19.jpg)
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: @lsiuhttp://about.me/leonardsiu