(For more resources related to this topic, see here.)

Setting up a Vaadin project with Spring in Maven

We will set up a new Maven project for Vaadin application that will use the Spring framework. We will use a Java annotation-driven approach for Spring configuration instead of XML configuration files. This means that we will eliminate the usage of XML to the necessary minimum (for XML fans, don't worry there will be still enough XML to edit).

In this recipe, we will set up a Spring project where we define a bean that will be obtainable from the Spring application context in the Vaadin code. As the final result, we will greet a lady named Adela, so we display Hi Adela! text on the screen. The brilliant thing about this is that we get the greeting text from the bean that we define via Spring.

vaadin-project-spring-and-handling-login-spring-img-0

Getting ready

First, we create a new Maven project.

mvn archetype:generate 
 -DarchetypeGroupId=com.vaadin 
 -DarchetypeArtifactId=vaadin-archetype-application 
 -DarchetypeVersion=LATEST 
 -Dpackaging=war 
 -DgroupId=com.packtpub.vaadin 
 -DartifactId=vaadin-with-spring 
 -Dversion=1.0

More information about Maven and Vaadin can be found at https://vaadin.com/book/-/page/getting-started.maven.html.

How to do it...

Carry out the following steps, in order to set up a Vaadin project with Spring in Maven:

First, we need to add the necessary dependencies. Just add the following Maven dependencies into the pom.xml file:

dependencies into the pom.xml file:
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-core</artifactId>
  <version>${spring.version}</version>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-context</artifactId>
  <version>${spring.version}</version>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-web</artifactId>
  <version>${spring.version}</version>
</dependency>
<dependency>
  <groupId>cglib</groupId>
  <artifactId>cglib</artifactId>
  <version>2.2.2</version>
</dependency>

In the preceding code, we are referring to the spring.version property. Make sure we have added the Spring version inside the properties tag in the pom.xml file.
```
<properties>
…
  <spring.version>3.1.2.RELEASE</spring.version>
</properties>
```
At the time of writing, the latest version of Spring was 3.1.2. Check the latest version of the Spring framework at http://www.springsource.org/spring-framework.

The last step in the Maven configuration file is to add the new repository into pom.xml. Maven needs to know where to download the Spring dependencies.

<repositories>
…
  <repository>
  <id>springsource-repo</id>
  <name>SpringSource Repository</name>
  <url>http://repo.springsource.org/release</url>
  </repository>
</repositories>

Now we need to add a few lines of XML into the src/main/webapp/WEB-INF/web.xml deployment descriptor file. At this point, we make the first step in connecting Spring with Vaadin. The location of the AppConfig class needs to match the full class name of the configuration class.

<context-param>
  <param-name>contextClass</param-name>
  <param-value>
    org.springframework.web.context.support.Annotation
      ConfigWebApplicationContext
  </param-value>
</context-param>
<context-param>
  <param-name>contextConfigLocation</param-name>
  <param-value>com.packtpub.vaadin.AppConfig
    </param-value>
</context-param>
<listener>
  <listener-class>
    org.springframework.web.context.ContextLoaderListener
  </listener-class>
</listener>

Create a new class AppConfig inside the com.packtpub.vaadin package and annotate it with the @Configuration annotation. Then create a new @Bean definition as shown:

package com.packtpub.vaadin;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
@Configuration
public class AppConfig {
@Bean(name="userService")
  public UserService helloWorld() {
    return new UserServiceImpl();
  }
}

In order to have the recipe complete, we need to make a class that will represent a domain class. Create a new class called User.
```
public class User {
  private String name; 
  // generate getters and setters for name field
}
```
UserService is a simple interface defining a single method called getUser(). When the getUser() method is called in this recipe, we always create and return a new instance of the user (in the future, we could add parameters, for example login, and fetch user from the database). UserServiceImpl is the implementation of this interface. As mentioned, we could replace that implementation by something smarter than just returning a new instance of the same user every time the getUser() method is called.
```
public interface UserService {
  public User getUser();
}
public class UserServiceImpl implements UserService {
  @Override
  public User getUser() {
    User user = new User();
    user.setName("Adela");
    return user;
  }
}
```

Almost everything is ready now. We just make a new UI and get the application context from which we get the bean. Then, we call the service and obtain a user that we show in the browser. After we are done with the UI, we can run the application.

public class AppUI extends UI {
  private ApplicationContext context;
  @Override
  protected void init(VaadinRequest request) {
    UserService service = getUserService(request);
    User user = service.getUser();
String name = user.getName();
    Label lblUserName = new Label("Hi " + name + " !");
    VerticalLayout layout = new VerticalLayout();
    layout.setMargin(true);
    setContent(layout);
    layout.addComponent(lblUserName);
  }
  private UserService getUserService
    (VaadinRequest request) {
    WrappedSession session = request.getWrappedSession();
    HttpSession httpSession = ((WrappedHttpSession) 
      session).getHttpSession();
    ServletContext servletContext = 
      httpSession.getServletContext();
    context = WebApplicationContextUtils.getRequired
      WebApplicationContext(servletContext);
    return (UserService) context.getBean("userService");
  }
}

Run the following Maven commands in order to compile the widget set and run the application:
```
mvn package
mvn jetty:run
```

How it works...

In the first step, we have added dependencies to Spring. There was one additional dependency to cglib, Code Generation Library. This library is required by the @ Configuration annotation and it is used by Spring for making the proxy objects. More information about cglib can be found at http://cglib.sourceforge.net

Then, we have added contextClass, contextConfigLocation and ContextLoaderListener into web.xml file. All these are needed in order to initialize the application context properly. Due to this, we are able to get the application context by calling the following code:

WebApplicationContextUtils.getRequiredWebApplicationContext
  (servletContext);

Then, we have made UserService that is actually not a real service in this case (we did so because it was not in the scope of this recipe). We will have a look at how to declare Spring services in the following recipes.

In the last step, we got the application context by using the WebApplicationContextUtils class from Spring.

WrappedSession session = request.getWrappedSession();
HttpSession httpSession = ((WrappedHttpSession) 
  session).getHttpSession();
ServletContext servletContext = httpSession.getServletContext();
context = WebApplicationContextUtils.getRequired
  WebApplicationContext(servletContext);

Then, we obtained an instance of UserService from the Spring application context.

UserService service = (UserService) context.getBean("userService");
User user = service.getUser();

We can obtain a bean without knowing the bean name because it can be obtained by the bean type, like this context.getBean(UserService.class).

There's more...

Using the @Autowire annotation in classes that are not managed by Spring (classes that are not defined in AppConfig in our case) will not work, so no instances will be set via the @Autowire annotation.

Handling login with Spring

We will create a login functionality in this recipe. The user will be able to log in as admin or client. We will not use a database in this recipe. We will use a dummy service where we just hardcode two users. The first user will be "admin" and the second user will be "client". There will be also two authorities (or roles), ADMIN and CLIENT.

We will use Java annotation-driven Spring configuration.

vaadin-project-spring-and-handling-login-spring-img-1

Getting ready

Create a new Maven project from the Vaadin archetype.

mvn archetype:generate 
 -DarchetypeGroupId=com.vaadin 
 -DarchetypeArtifactId=vaadin-archetype-application 
 -DarchetypeVersion=LATEST 
 -Dpackaging=war 
 -DgroupId=com.app 
 -DartifactId=vaadin-spring-login 
 -Dversion=1.0

Maven archetype generates the basic structure of the project. We will add the packages and classes, so the project will have the following directory and file structure:

vaadin-project-spring-and-handling-login-spring-img-2

How to do it...

Carry out the following steps, in order to create login with Spring framework:

We need to add Maven dependencies in pom.xml to spring-core, spring-context, spring-web, spring-security-core, spring-security-config, and cglib (cglib is required by the @Configuration annotation from Spring).

<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-core</artifactId>
  <version>${spring.version}</version>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-context</artifactId>
  <version>${spring.version}</version>
</dependency>
<dependency>
  <groupId>org.springframework</groupId>
  <artifactId>spring-web</artifactId>
  <version>${spring.version}</version>
</dependency>
<dependency>
  <groupId>org.springframework.security</groupId>
  <artifactId>spring-security-core</artifactId>
  <version>${spring.version}</version>
</dependency>
<dependency>
  <groupId>org.springframework.security</groupId>
  <artifactId>spring-security-config</artifactId>
  <version>${spring.version}</version>
</dependency>
<dependency>
  <groupId>cglib</groupId>
  <artifactId>cglib</artifactId>
  <version>2.2.2</version>
</dependency>

Now we edit the web.xml file, so Spring knows we want to use the annotation-driven configuration approach. The path to the AppConfig class must match full class name (together with the package name).

<context-param>
  <param-name>contextClass</param-name>
  <param-value>
org.springframework.web.context.support.Annotation
    ConfigWebApplicationContext
  </param-value>
</context-param>
<context-param>
  <param-name>contextConfigLocation</param-name>
  <param-value>com.app.config.AppConfig</param-value>
</context-param>
<listener>
  <listener-class>
    org.springframework.web.context.ContextLoaderListener
  </listener-class>
</listener>

We are referring to the AppConfig class in the previous step. Let's implement that class now. AppConfig needs to be annotated by the @Configuration annotation, so Spring can accept it as the context configuration class. We also add the @ComponentScan annotation, which makes sure that Spring will scan the specified packages for Spring components. The package names inside the @ComponentScan annotation need to match our packages that we want to include for scanning. When a component (a class that is annotated with the @Component annotation) is found and there is a @Autowire annotation inside, the auto wiring will happen automatically.

package com.app.config;
import com.app.auth.AuthManager;
import com.app.service.UserService;
import com.app.ui.LoginFormListener;
import com.app.ui.LoginView;
import com.app.ui.UserView;
import org.springframework.context.annotation.Bean;
import org.springframework.context.
  annotation.ComponentScan;
import org.springframework.context.
  annotation.Configuration;
import org.springframework.context.
  annotation.Scope;
@Configuration
@ComponentScan(basePackages = {"com.app.ui" , 
  "com.app.auth", "com.app.service"})
public class AppConfig {
@Bean
  public AuthManager authManager() {
    AuthManager res = new AuthManager();
    return res;
  }
  @Bean
  public UserService userService() {
    UserService res = new UserService();
    return res;
  }
  @Bean
  public LoginFormListener loginFormListener() {
    return new LoginFormListener();
  }
}

We are defining three beans in AppConfig. We will implement them in this step.

AuthManager will take care of the login process.

package com.app.auth;
import com.app.service.UserService;
import org.springframework.beans.factory.
  annotation.Autowired;
import org.springframework.security.authentication.
  AuthenticationManager;
import org.springframework.security.authentication.
  BadCredentialsException;
import org.springframework.security.authentication.
  UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.
  AuthenticationException;
import org.springframework.security.core.
  GrantedAuthority;
import org.springframework.security.core.
  userdetails.UserDetails;
import org.springframework.stereotype.Component;
import java.util.Collection;
@Component
public class AuthManager implements 
  AuthenticationManager {
@Autowired
  private UserService userService;
  public Authentication authenticate
  (Authentication auth) throws AuthenticationException {
    String username = (String) auth.getPrincipal();
    String password = (String) auth.getCredentials();
    UserDetails user = 
    userService.loadUserByUsername(username);
    if (user != null && user.getPassword().
    equals(password)) {
      Collection<? extends GrantedAuthority> 
      authorities = user.getAuthorities();
      return new UsernamePasswordAuthenticationToken
      (username, password, authorities);
    }
    throw new BadCredentialsException("Bad Credentials");
  }
}

UserService will fetch a user based on the passed login. UserService will be used by AuthManager.

package com.app.service;
import org.springframework.security.core.
  GrantedAuthority;
import org.springframework.security.core.
  authority.GrantedAuthorityImpl;
import org.springframework.security.core.
  authority.SimpleGrantedAuthority;
import org.springframework.security.core.
  userdetails.UserDetails;
import org.springframework.security.core.
  userdetails.UserDetailsService;
import org.springframework.security.core.
  userdetails.UsernameNotFoundException;
import org.springframework.security.core.
  userdetails.User;
import org.springframework.stereotype.Service;
import java.util.ArrayList;
import java.util.List;
public class UserService implements UserDetailsService {
@Override
  public UserDetails loadUserByUsername
  (String username) throws UsernameNotFoundException {
    List<GrantedAuthority> authorities = new 
    ArrayList<GrantedAuthority>();
    // fetch user from e.g. DB
    if ("client".equals(username)) {
      authorities.add
      (new SimpleGrantedAuthority("CLIENT"));
      User user = new User(username, "pass", true, true, 
      false, false, authorities);
      return user;
    }
    if ("admin".equals(username)) {
      authorities.add
      (new SimpleGrantedAuthority("ADMIN"));
      User user = new User(username, "pass", true, true, 
      false, false, authorities);
      return user;
    } else {
      return null;
    }
  }
}

LoginFormListener is just a listener that will initiate the login process, so it will cooperate with AuthManager.

package com.app.ui;
import com.app.auth.AuthManager;
import com.vaadin.navigator.Navigator;
import com.vaadin.ui.*;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.authentication.
  UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.
  AuthenticationException;
import org.springframework.security.core.context.
  SecurityContextHolder;
import org.springframework.stereotype.Component;
@Component
public class LoginFormListener implements 
  Button.ClickListener {
@Autowired
  private AuthManager authManager;
  @Override
  public void buttonClick(Button.ClickEvent event) {
    try {
      Button source = event.getButton();
      LoginForm parent = (LoginForm) source.getParent();
      String username = parent.getTxtLogin().getValue();
      String password = 
      parent.getTxtPassword().getValue();
      UsernamePasswordAuthenticationToken request = new 
      UsernamePasswordAuthenticationToken
      (username, password);
      Authentication result = 
      authManager.authenticate(request);
      SecurityContextHolder.getContext().
      setAuthentication(result);
      AppUI current = (AppUI) UI.getCurrent();
      Navigator navigator = current.getNavigator();
      navigator.navigateTo("user");
    } catch (AuthenticationException e) {
      Notification.show("Authentication failed: " + 
      e.getMessage());
    }
  }
}

The login form will be made as a separate Vaadin component. We will use the application context and that way we get bean from the application context by ourselves. So, we are not using auto wiring in LoginForm.

package com.app.ui;
import com.vaadin.ui.*;
import org.springframework.context.ApplicationContext;
public class LoginForm extends VerticalLayout {
  private TextField txtLogin = new TextField("Login: ");
  private PasswordField txtPassword = new 
  PasswordField("Password: ");
  private Button btnLogin = new Button("Login");
public LoginForm() {
    addComponent(txtLogin);
    addComponent(txtPassword);
    addComponent(btnLogin);
    LoginFormListener loginFormListener = 
    getLoginFormListener();
    btnLogin.addClickListener(loginFormListener);
  }
  public LoginFormListener getLoginFormListener() {
    AppUI ui = (AppUI) UI.getCurrent();
    ApplicationContext context = 
    ui.getApplicationContext();
    return context.getBean(LoginFormListener.class);
  }
  public TextField getTxtLogin() {
    return txtLogin;
  }
  public PasswordField getTxtPassword() {
    return txtPassword;
  }
}

We will use Navigator for navigating between different views in our Vaadin application. We make two views. The first is for login and the second is for showing the user detail when the user is logged into the application. Both classes will be in the com.app.ui package.

LoginView will contain just the components that enable a user to log in (text fields and button).

public class LoginView extends VerticalLayout 
  implements View {
  public LoginView() {
    LoginForm loginForm = new LoginForm();
    addComponent(loginForm);
  }
  @Override
  public void enter(ViewChangeListener.ViewChangeEvent 
  event) {
  }
};

UserView needs to identify whether the user is logged in or not. For this, we will use SecurityContextHolder that obtains the SecurityContext that holds the authentication data. If the user is logged in, then we display some data about him/her. If not, then we navigate him/her to the login form.

public class UserView extends VerticalLayout 
  implements View {
  public void enter(ViewChangeListener.ViewChangeEvent 
  event) {
    removeAllComponents();
    SecurityContext context = 
    SecurityContextHolder.getContext();
    Authentication authentication = 
    context.getAuthentication();
    if (authentication != null && 
    authentication.isAuthenticated()) {
      String name = authentication.getName();
      Label labelLogin = new Label("Username: " + name);
      addComponent(labelLogin);
      Collection<? extends GrantedAuthority> authorities 
        = authentication.getAuthorities();
      for (GrantedAuthority ga : authorities) {
        String authority = ga.getAuthority();
        if ("ADMIN".equals(authority)) {
          Label lblAuthority = new Label("You are 
                             the administrator. ");
          addComponent(lblAuthority);
        } else {
          Label lblAuthority = new Label("Granted 
                Authority: " + authority);
          addComponent(lblAuthority);
        }
      }
Button logout = new Button("Logout");
      LogoutListener logoutListener = new 
      LogoutListener();
      logout.addClickListener(logoutListener);
             addComponent(logout);
    } else {
      Navigator navigator = 
      UI.getCurrent().getNavigator();
navigator.navigateTo("login");
    }
  }
}

We have mentioned LogoutListener in the previous step. Here is how that class could look:

public class LogoutListener implements 
  Button.ClickListener {
  @Override
  public void buttonClick(Button.ClickEvent clickEvent) {
    SecurityContextHolder.clearContext();
    UI.getCurrent().close();
    Navigator navigator = UI.getCurrent().getNavigator();
    navigator.navigateTo("login");
  }
}

Everything is ready for the final AppUI class. In this class, we put in to practice all that we have created in the previous steps.

We need to get the application context. That is done in the first lines of code in the init method. In order to obtain the application context, we need to get the session from the request, and from the session get the servlet context. Then, we use the Spring utility class, WebApplicationContextUtils, and we find the application context by using the previously obtained servlet context.

After that, we set up the navigator.

@PreserveOnRefresh
public class AppUI extends UI {
  private ApplicationContext applicationContext;
  @Override
  protected void init(VaadinRequest request) {
    WrappedSession session = request.getWrappedSession();
    HttpSession httpSession = ((WrappedHttpSession) 
      session).getHttpSession();
    ServletContext servletContext = 
      httpSession.getServletContext();
    applicationContext = WebApplicationContextUtils.
    getRequiredWebApplicationContext(servletContext);
    Navigator navigator = new Navigator(this, this);
    navigator.addView("login", LoginView.class);
    navigator.addView("user", UserView.class);
navigator.navigateTo("login");
    setNavigator(navigator);
  }
  public ApplicationContext getApplicationContext() {
    return applicationContext;
  }
}

Now we can run the application. The password for usernames client and admin is pass.
```
mvn package
mvn jetty:run
```

How it works...

There are two tricky parts from the development point of view while making the application:

First is how to get the Spring application context in Vaadin. For this, we need to make sure that contextClass, contextConfigLocation, and ContextLoaderListener are defined in the web.xml file. Then we need to know how to get Spring application context from the VaadinRequest. We certainly need a reference to the application context in UI, so we define the applicationContext class field together with the public getter (because we need access to the application context from other classes, to get Spring beans).
The second part, which is a bit tricky, is the AppConfig class. That class represents annotated Spring application configuration (which is referenced from the web.xml file). We needed to define what packages Spring should scan for components. For this, we have used the @ComponentScan annotation. The important thing to keep in mind is that the @Autowired annotation will work only for Spring managed beans that we have defined in AppConfig. When we try to add the @Autowired annotation to a simple Vaadin component, the autowired reference will remain empty because no auto wiring happens. It is up to us to decide what instances should be managed by Spring and where we use the Spring application context to retrieve the beans.