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