Vaadin Framework Presentation - Filtering Table @ Jan 9th 2013 Codeaholics. A server-side filterable, sortable and editable table as a demo.

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

7. Code Walk Through
http://github.com/lsiu/vaadin-filtering-table-
example

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