Contacts - Vaadin Project with External Backend

This is a demo Vaadin 8 project with CDI. It relies on an external backend to serve the data.

Workflow and FAQ are listed below

You are on the 'Vaadin 8' (latest) branch!

There is an older Vaadin 7 demo branch, and there is also Vaadin 7 to Vaadin 8 demo branch.

Vaadin 8 Demo

The coding process of the demo is available on this 12 minutes video

Steps are clearly divided into separate commits

Step 0 | 01:00 | Create a new maven-based Vaadin project using IntelliJ

Step 1 | 01:57 | Add the backend person-service and the add-on vaadin-cdi as dependencies

Step 2 | 02:34 | Replace servlet annotations with CDIUI annotation

Step 3 | 03:22 | Place HorizontalSplitPanel and Grid instead of demo code

Step 4 | 04:27 | Populate backend data into the grid

Step 5 | 05:08 | Create a new design file using Vaadin Designer

Step 6 | 05:26 | Create the form using Vaadin Designer

Step 7 | 07:45 | Use the design inside Java code

Step 8 | 08:25 | Add selection listener to the grid

Step 9 | 09:00 | Define data binder for the form

Step 10 | 10:01 | Save changes to the local object in the binder

Other enhancements to the code that are not mentioned in the video

Extra 1 | Add Valo style to the control buttons

Extra 2 | Add icon to the save button

Extra 3 | Add image component in the form

Extra 4 | Bind picture resource to image component

Extra 5 | Handle default and null selection in grid

Extra 6 | Organize and remove unneeded grid columns

Extra 7 | Add cancel event

Extra 8 | Add delete event

Extra 9 | Host widgetset in CDN and upgrade framework version

FAQ

1. Where can I find the person-service? The backend service is located in this repository along with detailed steps on how to install it. You can also get it from Vaadin Directory (version 2.x only).

2. Where can I find the backend project? Please refer to previous answer.

3. The person-service does not work? For this demo with Vaadin 8, you must use version 2.x.

4. I'm using Wildfly 10 as shown in the video, but I get 404 in the browser? Sometimes Wildfly deploys with version suffix, and the context root must contain this suffix. You can change it from configurations, and in this simple demo you can just append -1.0-SNAPSHOT to the context root. So the demo should be available under this URL: http://localhost:8080/contacts-1.0-SNAPSHOT/

5. I'm using Tomcat/Jetty/..etc and it does not work? In this particular example I had to use Wildfly, because of CDI and JEE specs, the application server must fully support those specs. Otherwise in other Vaadin application, any servelet container such as tomcat and jetty will work just fine.

6. I'm following the demo step by step, but when I refresh the browser, modifications do not appear? Sometimes you need to restart the server to be able to see modifications. In the video I was using some external tools for automatic redeployment.

7. Is it limited to IntelliJ? You can use Eclipse, it has Vaadin Designer plugin as well. Netbeans plugin is available but currently it has limited functionalities. You can also easily get started from commandline using Maven archetype.

8. How to install Vaadin Plugin for Eclipse? Please follow this video tutorial for installing the plugin on Eclipse.

9. Where to find the Vaadin CDI Add-on? It's available in Vaadin Directory.

Workflow

Clone this project from GitHub

git clone https://github.com/amahdy/vaadin-stepbystep-demo-contacts.git
cd vaadin-stepbystep-demo-contacts/

To compile the entire project, run

mvn install

To run the application, run

mvn wildfly:run

The application will be available in this URL

 http://localhost:8080/contacts-1.0-SNAPSHOT/

Questions or issues? Please post them in the issues tracker.