Vaadin filtering table example
-
Upload
leonardsiu -
Category
Technology
-
view
10.459 -
download
8
description
Transcript of Vaadin filtering table example
Vaadin Framework – Filtering Table
Make Restaurant License info from Gov.HK web editable
By Leonard Siu – Twitter: @lsiu
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
This is CodeAholics
• Let’s go straight to coding!
• Pre-requisites:– JDK 1.6+– Maven 3+
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
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
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
Code Walk Throughhttp://github.com/lsiu/vaadin-filtering-table-example
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)
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
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
Now let’s look at FilteringTable
Code Walk Throughhttp://github.com/lsiu/vaadin-filtering-table-example
Vaadin Architecture
Source: https://vaadin.com/book/-/page/architecture.html
I will add business logic here too
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
Nice Visual Editor
• A little slow though…
Easy Form and Write Validation online Once
• Default validation on Apply
• Make validation immediate
tf.setImmediate(true)
Source: http://demo.vaadin.com/sampler#FormBasic
Very nice alert/message box
Source: http://demo.vaadin.com/sampler#NotificationHumanized
Check Out Vaadin Sampler
Lots of Add-ons
• Check out: https://vaadin.com/directory• E.g Invient Charts
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