Vaadin is an open source Java framework for building modern web applications. In this post, I’m going to walk through getting a sample Vaadin address book app running on Liberty. The sample uses the CDI injection for the UI components, making for a very clean and simple app.

The sample makes use of Java 8 language features, so rather than modifying the source to Java 7 level, it is easier to use the latest Liberty beta with Eclipse 4.4 and a Java 8 SDK.

  1. Get yourself setup with Eclipse and the beta WebSphere Application Server Developer Tools for Eclipse (WDT for short). If you haven’t done this before, follow the steps in Alasdair’s article; just remember to download the beta tools. Do follow the whole of the post, as it will walk you through creating a Liberty server which you will use later on.
  2. The simplest way to create a Vaadin application is to use a Maven project with the Vaadin application archetype. Start the wizard from File > New > Maven Project, and click Next. Click Configure and add a remote catalog pointing at http://repo1.maven.org/maven2/archetype-catalog.xml. Select the vaadin-archetype-application:

    maven_archetype_select
  3. Click Next and define the Group Id, Artifact Id and Package. This project isn’t going to be shared so the Group Id and Artifact Id can be arbitrary, but set the Package to org.example as that will make the next steps easier. Click Finish to create the project.
  4. You now have a skeleton Vaadin project, to which we are going to add the address book sample. As the sample uses Vaadin’s CDI integration and some extra widgets, we need to add some modules to your Maven configuration. For simplicity, rather than using the Eclipse tools for editing your pom.xml file, just paste the XML snippet below into the <dependencies> section of the file, and save it.
    		<dependency>
    			<groupId>com.vaadin</groupId>
    			<artifactId>vaadin-cdi</artifactId>
    			<version>1.0.0.beta4</version>
    		</dependency>
    		<dependency>
    			<groupId>org.peimari</groupId>
    			<artifactId>maddon</artifactId>
    			<version>1.13</version>
    		</dependency>
    		<dependency>
    			<groupId>javax</groupId>
    			<artifactId>javaee-api</artifactId>
    			<version>6.0</version>
    			<scope>provided</scope>
    		</dependency>
    
  5. Now we’re going to swap the skeleton files provided with the archetype for an address book sample which uses CDI. Delete the skeleton Java source file (MyVaadinUI.java) and XML file (AppWidgetSet.gwt.xml) from your project:


    delete_vaadin_skeleton

  6. Add the source for the Vaadin address book sample (available from their Github repository). Import everything from the src/main directory, that is four classes (in the org.example and org.example.backend packages) and an intentionally empty beans.xml file in the WEB-INF directory (this is required by the CDI 1.0 specification).
  7. The app is now ready to run. We just need to tell Liberty that the app will use CDI and JNDI by adding the features to server.xml. This is really simple to do using WDT’s editing tools. Open up the server.xml for the server you defined when following Alasdair’s instructions. Select Feature Manager and click Add. Add the cdi-1.0 and jndi-1.0 features, and save.


    addFeatures

  8. All that’s left is to run your app. Right-click on your project and select Run As > Run on Server. Select the Liberty server you defined previously, click Finish and you’re done! Eclipse should automatically launch a web-browser pointing at your new app, and you should see the address book UI.

Have a look around at the source of the sample to see how it uses CDI. One noticeable aspect in VaadinUI.java is the way that the data store (PhoneBookService.java) and a UI component (PhoneBookEntryForm.java) are injected (and managed) by the container:

public class VaadinUI extends UI {

    @Inject
    PhoneBookService service;

    @Inject // With Vaadin CDI one can also inject basic ui components
    PhoneBookEntryForm form;

See also

WAS IBM has to do with Vaadin (on Vaadin.com)

Join The Discussion

Your email address will not be published. Required fields are marked *