Task 1: Getting to know Vaadin. A warmup.

Read through vaadin.com/introduction and vaadin.com/tutorial. Also have a look at what components are available inside Vaadin at dev.vaadin.com/sampler. Then answer the following questions.

When using Vaadin I am free to program all of my applications in one language. Which one?

What is required from my runtime environment in order to run a Vaadin application?

How much does it cost to use Vaadin?

What do your end-users need on their computers to use a Vaadin application?

What class does the main entry point to your application need to extend?

How does Vaadin communicate parameter changes when moving from one view to another


Task 2: Creating your first application

  1. In this assignment we're going to create your first application. If you haven't already, install Eclipse IDE for Java EE Developers.
  2. Then install IBM WebSphere Application Server Liberty Profile Developer Tools from within the Eclipse Marketplace. Just select Eclipse Marketplace from the Help-menu inside Eclipse. Or if you already have a Java Servlet Container app server, such as Tomcat, feel free to use that as well.
  3. Also install Vaadin Plugin for Eclipse from within the Eclipse Marketplace. Instructions: https://vaadin.com/eclipse
  4. Next we'll use a Maven project that we copy and import to our Eclipse. The application is a small Hello World application.
    1. Click on "Download as ZIP" at https://github.com/mstahv/bluemix-challenge-starter
    2. In Eclipse select Import->"Import existing Maven project" and select the maven project.
    3. Right click on your project, select Run As > Maven Install. This will compile the widgetset and creates the war-file for you. Be patient, it can take a minute on slower machines.
    4. To learn more about Maven read https://vaadin.com/blog/-/blogs/the-maven-essentials-for-the-impatient-developer
    5. See chapter 1.2 in the Book of Vaadin, "Example Application Walkthrough" for a more detailed description on how the Hello world application works.
  5. Change the basic application's functionality so that instead of adding a label saying "Thank you for clicking" when clicking the "Click me" button, the application takes in your name and replies with "Thank you for clicking <name>".
    1. Tips: See https://vaadin.com/book/-/page/components.textfield.html and https://vaadin.com/book/-/page/application.events.html
  6. To run your application on localhost, just right click on it in Eclipse and select Run > Run on server and select your Liberty server
  7. Submit your application source code as a zip package (<100 Mb)

Task 3: Getting data on the screen

In this assignment you'll learn how to bind real data to your application. We'll use a mockup service (available in the base project that you copied in the previous step) that returns you some POJOs but you could think of this as your database abstraction layer, your EJB or your REST-service. You'll start building on the previous assignment or start from scratch in the same way as in the previous assignment.

  1. All Vaadin components use the same Container interface for binding data to your UI components. The beauty of this is that, as Vaadin takes care of communication between the server and the browser, you don't have to create any DTOs or JSON objects that you pass but instead you're working with plain Java. In this example you'll use the BeanItemContainer to bind your list of Customer POJOs from the DummyDataService to a ComboBox component. Now show all the customers from the service inside a ComboBox on the screen.
    1. See more on BeanItemContainer in chapter 9.5.4 here: https://vaadin.com/book/-/page/datamodel.container.html
    2. See more on ComboBox here: https://vaadin.com/book/-/page/components.combobox.html
  2. Now you can use the same BeanItemContainer to show the data inside a Grid component. Add a Grid component underneath the ComboBox.
    1. An introduction to the Grid component: https://vaadin.com/grid
    2. Grid component documentation: https://vaadin.com/book/-/page/components.grid.html
  3. Add an event listener to the grid and do something when a row is selected in the Grid. The easiest would be to show a Notification but feel free to get creative. Also try to tweak the Grid component through its API to earn extra points.
    1. Check out the Grid documentation above for the Grid component's vast API
    2. For notifications see https://vaadin.com/book/-/page/application.notifications.html
  4. Submit your application source code as a zip package

Task 4: Layouting

In this assignment we're going to create a login screen for the application you created in the previous assignment. We're going to use the Vaadin Designer to create the screen using drag 'n' drop. There are three ways to create UIs in Vaadin. So far we've used the Java API in the previous examples. You can also create your design in Declarative format or with the Designer. Vaadin Designer creates both a declarative HTML file for you, as well as a Java-file, which you can use to access the Java APIs of the designed components.

  1. Right click on your project in Eclipse and create a new Vaadin Design. Use a Vertical Layout as your starting point.
    1. Vaadin Designer is part of Vaadin Pro Tools and needs a license. Use this as your Designer license key: 12584cc7-8a7a-4180-9d52-002cc79dd806 (This license key is valid until the end of 2015, so feel free to use it after the challenge as well).
    2. Also see the Vaadin Designer website
  2. Drag and drop a TextField, a PasswordField and a Button from the Palette to your canvas, give them Captions in the Properties pane and arrange them in a visually pleasing way. The screen should look like a standard login-view where the user is asked for her username and password and then clicks on "Sign in".
    1. Also click on the small icon next to the property of each component to have it create accessible Java attributes for the component in the .java file that it generates for you.
  3. Remember to check out what your design looks like in different viewport sizes
    1. You can also check out the view on your own mobile phone by using the QR code provided in the top right-hand corner of your design.
  4. Add the newly created View to your UI class so you can see it when you start up your application.
  5. Add an event listener to your Button and then read the Login and Password. Only allow the username "vaadin" and password "bluemix" and when successful, change the view of your application to the Grid-view you created in the previous task.
    1. Use ui.setContent() to change the content of the view from the login view to your other view
    2. Button: https://vaadin.com/book/-/page/components.button.html
    3. TextField: https://vaadin.com/book/-/page/components.textfield.html
    4. PasswordField: https://vaadin.com/book/-/page/components.passwordfield.html
  6. Submit your application source code as a zip package.

Task 5: Using Templates to create IBM Design language UIs

IBM Design language is a methodology for creating business applications that follow a certain predefined and tightly designed philosophy. In this task you'll create a new design with Vaadin Designer using one of the provided IBM Design language templates.

  1. Download the templates from https://github.com/vaadin/ibm-design-language-templates/tree/master/DesignerTemplate/completed_templates
  2. Import one of the templates into your project according to the instructions at https://vaadin.com/wiki/-/wiki/Main/Using+templates+in+Vaadin+Designer

Using the provided template, let's get creative! Create either a Dashboard with amount of women and men in the backend (using the Dashboard-template) or a form with which to edit your Customers' from your backend with (using the Form-template) or add the grid in the previous assignment to the Navigation-template. The floor is yours. Just go crazy! We appreciate creativity!

Submit your application as a zip package including the source code.


Task 6: Charting

In this assignment we're going to bring some life to your app by using charts and visualizing your users that you get through the same DummyDataService again.

  1. Create a new project and use the same DummyDataService as used in the previous tasks, available at https://github.com/mstahv/bluemix-challenge-starter
  2. In this demo we're going to use Vaadin Charts which needs a license
    1. You can go with the latest stable version 2.1.3 or try out the bleeding edge 3.0.0-alpha6. You can choose desired version on the Vaadin Directory page.
    2. Your license key is for Vaadin Charts 2 is: 2085a5b9-afc2-4c9d-b368-147c5b4ca68d
    3. Your license key is for Vaadin Charts 3 is: 13b27b5d-a9a3-48f9-b7ce-c1f7f2b87a33
    4. Install your license according to the instructions at https://vaadin.com/directory/help/installing-cval-license
  3. Calculate the age distributions and create a bar chart that shows the number of people in your service per age.
    1. See https://vaadin.com/book/vaadin7/-/page/charts.html for documentation on how to use charts and define its X and Y-axis
  4. Add a pie chart that shows the distribution of men vs women in your service data
  5. Select a suitable chart for showing the email or phone or something else
    1. See http://demo.vaadin.com/charts/ for available chart types
  6. Submit your application as a zip package including the source code.

Task 7: Deploying your application to Bluemix

So far you've built something amazing. Now it's time to deploy it into the cloud so that others can access it as well. We'll use CloudFoundry for this because Bluemix is built on the open source Cloud Foundry tools.

  1. Log into https://bluemix.net and create an account for yourself
  2. Install the CloudFoundry command line tools as described under https://www.ng.bluemix.net/docs/starters/install_cli.html on your local machine. Tip: Sign in and choose your desired region to get personilized getting started commands for Cloud Foundry tools.
  3. cf push <myserver> -p <target.war>
    1. CloudFoundry automatically detects that the artifact you're trying to deploy is a Java web application archive and installs a Liberty server to host it for you.
    2. Make sure that <myserver> is a unique name so that Bluemix can assign a unique URL for your application
  4. When done, submit the link to your running Vaadin app to the textfield below

Task 8: The Vaadin Bluemix Boilerplate

In this task you'll build your very own version of the Vaadin Bluemix Boilerplate available inside Bluemix. A Boilerplate is a predefined environment with a set of app servers, DBs and even an application. To see Vaadin Boilerplate, take a look at http://simplecrm.mybluemix.net. The Vaadin Bluemix Boilerplate includes a JPA layer to access your data stored inside the DB2 database inside Bluemix, all running on a Liberty server.

  1. The sourcecode for the SimpleCRM app is hosted in hub.jazz.net at https://hub.jazz.net/project/vaadin/vaadin-jpa-app/overview
  2. Create an account to hub.jazz.net with your IBM id
  3. Click on the "Deploy to Bluemix" button on the vaadin-jpa-app-project page.
    1. This creates a personal clone of this application for you under your own account, configures a DevOps chain for it and deploys it to Bluemix. Then make changes to it with the DevOps services integrated into Bluemix and Jazz.net
  4. Then set up a local development environment by
    1. git clone https://hub.jazz.net/git/<youraccount>/vaadin-jpa-app
    2. You also need to set up a database on your local environment. Follow the instructions on jazz.net for Local Development
    3. Import the project as existing maven project to your Eclipse like in Task 2.
  5. The task this time requires you to add some filtering to the map view of the application.
    1. Add a ComboBox to the Map View that lets you filter the pins on the map based on user selection
    2. See the ComboBox documentation at https://vaadin.com/book/vaadin7/-/page/components.combobox.html
  6. Submit the link to your running Vaadin app to the textfield below

Task 9: Services in Bluemix

You've now learned how to build applications in localhost using the Vaadin Eclipse plugin and by using the Bluemix boilerplate as a starting point. You've also learned to use the designer and to create your UIs in pure Java code. As a final task, let's bring that all together by using some of the features of the Watson services provided by Bluemix. Watson is the supercomputer that runs inside Bluemix (although as a slightly watered down version from the real Watson). Use this service to create a Vaadin app that analyzes any images you throw at it and lets you know what they represent.

  1. Create a new Vaadin project either by using Eclipse or by forking the Bluemix boilerplate in jazz.net or by using Maven
    1. Maven instructions available here: https://vaadin.com/maven
  2. There's a handy community maintained Java API for accessing Watson's APIs and as we're Java coders, let's use that.
    1. https://github.com/mstahv/watson-java-api
  3. Use the Vaadin Upload component to upload an image to your server and then process the image inside your Bluemix account's Watson using the Java APIs provided above
    1. More about the Upload component at https://vaadin.com/book/-/page/components.upload.html
  4. Get creative! This is the final assignment so go nuts. There are a lot more components inside Vaadin we haven't used yet and lots of interesting services you can use inside Bluemix.
    1. Bluemix services: https://console.ng.bluemix.net/catalog/
    2. Vaadin components: http://demo.vaadin.com/sampler/
    3. Step-by-step instructions: how to use Watson, Bluemix and Vaadin to create a Medical Q&A app step by step.
  5. Submit the URL to your app deployed inside Bluemix in the TextField below

You will be issued a badge for completing the challenge. To issue this badge, IBM will share your details with Pearson VUE Acclaim, who we have partnered with us to assist with administration of the IBM Open Badge program and to issue any badge you have achieved. Your details are shared ONLY for the purpose of issuing IBM open badge credentials and will be treated by Pearson VUE Acclaim in a manner consistent with IBM's policies.