Quickstart vaadin (mobile) applications with Vaadinator – part 1: Introduction

Vaadinator generates a vaadin-based User Interface (both mobile and Desktop), backend and testing facilties from an annotated Domain class. It borrows much from the Domain Driven Design idea. Our intention is to get people productive with vaadin and excited about vaadin – even those who never worked with it before. Vaadinator is free and open source (Apache 2.0-licensed).

Above all, however, Vaadinator is aimed to get you started with vaadin in a way that is both fast and well-designed. Hence, Vaadinator does not only generate code for you, it also

  • applies Model-View-Presenter (MVP) throughout the application – giving it a clear structure and providing a good basis to build upon
  • makes sure the logic of an application is testable – both in the UI (through MVP) and in the service layer
  • makes sure the application is split into well-defined parts and stays manageable
  • provides a solid basis for acceptance testing (Acceptance-Test Driven Development – ATDD) leveraging Testeditor – copy the generated artifacts to testeditor and get your domain experts productive writing meaningful acceptance tests.
  • provides Archetypes for a quickstart within minutes

The following steps are necessary to get started:

overview

In a little more detail, this is:

cd <checkoutDir>
mvn install
cd ../<yourEmptyDir>
mvn archetype:generate -DarchetypeGroupId=de.akquinet.engineering.vaadin.vaadinator -DarchetypeArtifactId=vaadinator-touchkit-tomcat-archetype -DarchetypeVersion=0.10-SNAPSHOT

  • when specifying groupId, artifactId and package make sure not to use special characters – particularly not the minus sign “-” to avoid trouble
  • the sample class (and thus the generation result) is German – if you want to see an English UI instead download https://github.com/akquinet/vaadinator/misc/messages_en.properties and store it to src/main/resources/packageChosenBefore/ui/std/view/messages_en.properties

cd <artifactId>
mvn package eclipse:eclipse

  • eclipse:eclipse is only necessary if you want to open in Eclipse (make sure you have UTF-8 configured as workspace default charset)
  • copy WAR to Tomcat or open in Eclipse and Run on Server
  • you will get a mobile base application that runs in the browser
  • open with iPhone or Chrome or other Webkit-based browser

Result – Start:

first_screen_en

Result – after tapping “New Address”:

second_screen_en

The basis of generation is a class called „Address“ (in src/main/java). You can rename and customize this class (to e.g. manage „Event“(s) instead of „Address“(es)) and you can further customize based on what is generated. Stay tuned to this blog for more posts or check out the documentation on https://github.com/akquinet/vaadinator

Your thoughts and feedback is always appreciated – feel free to use below comments function (or create a pull request)!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s