Vaadin with CDI

Todays post will show a mini tutorial on how to use CDI with the current Vaadin version (7.1.8). To keep it simple, I will just extend the official Vaadin-HelloWorld-Program a bit.

The normal Non-CDI-HelloWorld-Program works like that: There is a "Click Me"-Button on the screen and when you click that button, a label with the text "Thanks for clicking" is added below that button.
I will extend that HelloWorld-Program by using (injecting) our RapidPM-CDILogger which prints a WARN-Message on the console ("Button was clicked").

The project structure looks like the following:

I created that Vaadin-project via Maven (see

To get the program working, we have to make the following changes:
  1. Add the Vaadin-CDI-support and the RapidPM-Modules as dependencies in the pom.xml
  2. Create a in the resources-folder to configure the logger
  3. Modify the Vaadin UI-Class (called MyVaadinUI per default)
That's all. So let's start:

Add the following dependency entries to the pom.xml:


The first dependency is needed to get Vaadin working with CDI, the second is needed to use our RapidPM-Logger.
Attention: The logger won't work with cdi-commons in version 1.1.1

Create a file called

log4j.appender.stdout.layout.ConversionPattern=%d %p [%c] - %m%n

That file is needed for log4j, which is used by our CDILogger. Put it into src/main/resources. I had to create that resources-folder and mark it as a source-folder manually.

Modify the MyVaadinUI-Class so it looks like the following:
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.cdi.CDIUI;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import org.rapidpm.demo.cdi.commons.logger.CDILogger;

import javax.inject.Inject;
import javax.servlet.annotation.WebServlet;

public class MyVaadinUI extends UI

    @WebServlet(value = "/*", asyncSupported = true)
    @VaadinServletConfiguration(productionMode = false, ui = MyVaadinUI.class, widgetset = "VaadinWithCDI.AppWidgetSet")
    public static class Servlet extends VaadinServlet {

    private Logger logger;

    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        final Button button = new Button("Click Me");
        button.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                layout.addComponent(new Label("Thank you for clicking"));
                logger.warn("Button was clicked");
        configureLayout(layout, button); //Only configuring layouting-issues

    private void configureLayout(final VerticalLayout layout, final Button button) {
- The @CDIUI Annotation at line 19 is needed to make the project use CDI.
- Recognize that the inner class at lines 24-27 must be commented out (you can delete those lines completely, of course). If this isn't commented out the Logger is not injected properly and a NullPointerException is thrown when calling methods of it.
- The CDILogger is injected in lines 30-32
- When the button is clicked, a label is added to the layout and a WARN-message is posted on the console via our logger (lines 40/41).


The result looks like the following:



Beliebte Posts