Using jQuery with Vaadin

After spending some time with Vaadin and developing a small application and a usability framework the moment came in which Vaadin application had to be integrated with another existing application. The integration wasn't tough at all due to the nice work done by the Vaadin folks.

However at my place we have separate team for Vaadin core development and jQuery / JavaScript doing the client side hacking. So to make the job easier for both the sides I developed a small Contact Us demo application which creates a Vaadin form and beautifies it with jQuery Effects and Tooltip plugin.

A cool Vaadin application on Google App Engine

Vaadin, as we all know is a rapidly growing GWT based Java Web Framework. The coolest feature of Vaadin is that there is no client/server concept as it is in GWT. The developer can freely code anything "anywhere" and Vaadin will handle all the client/server related stuffs. 

One of our existing in-house production application is built using GWT and causing lot of difficulties for developers in terms of understanding the model and designing the proper application. So to retain all the GWT features and offload the additional burdens we (as such I) have decided to move to the Vaadin and redesign the existing application.

To convince the technical and management team and for demonstration purpose I developed a small application in Vaadin and uploaded it to the Google Application Engine (click here) so that others can also get the idea and at the same time I can load test the application and get all the execution details from the App Engine dashboard.  

The application contains a simple functionality where in which the user can design her custom entry forms, enter/save form data and finally view the saved data in a table. The application was built in few hours only so it doesn't have "next big ground breaking idea" or the nice GUI but Vaadin provides fairly nice UI which can work for any application to start with.

To speed up the development I extended the basic Form functionality to a Generic Form so that UI Forms can be created not only from Java Beans but from java.util.Map also. The reason to choose this is because some of our applications are purely data centric where in which numbers of UI forms are presented to users; however the fields in every form can very even after application deployment so to reduce the repetitive development effort I have taken the model where in which forms not only can be generated at runtime but can behave line a normal pre-coded form in most of the cases.

There are still many points to resolve before we finally switch over to Vaadin as our web application development framework but with the growing popularity of the framework and new initiative like Vaadin Directory acceptance would not be much difficult.

Vaadin demo application url: http://vaadincoolapp.appspot.com/

Vaadin-Spring Integration

I remember the time when i was trying to integrate Spring with Struts2 and GWT applications. The problem was rather documenting the integration stuff i tried to remember them and as usual tend to forgot them. So this time have decided to document the Spring integration with Vaadin.

• web.xml changes

So first we need to add the Spring Context listener to load the bean configuration file.

<listener>

  <listener-class>

    org.springframework.web.context.ContextLoaderListener

  </listener-class>

</listener>

<context-param>

  <param-name>contextConfigLocation</param-name>

  <param-value>/WEB-INF/applicationContext.xml</param-value>

</context-param>

Add the Spring Servlet to intercept Vaadin requests

<servlet>

  <servlet-name>VaadinSpringServlet</servlet-name>

  <servlet-class>com.dhaval.web.vaadin.spring.servlet.SpringApplicationServlet</servlet-class>

  <init-param>

    <param-name>applicationBean</param-name>

    <param-value>testApplication</param-value>

  </init-param>

</servlet>

<servlet-mapping>

  <servlet-name>VaadinSpringServlet</servlet-name>

  <url-pattern>/vaadin/*</url-pattern>

</context-param>

• Spring Servlet

This servlet connects the Spring with Vaadin. The servlet loads the Vaadin Application class and dispatches all the HTTP requests/responses. The Servlet is available in the Simple Application provided by Vaadin Team for Spring integration.

• Spring bean configuration

<bean id="dataSource" class="org.springframework.jdbc.datasource.DriverManagerDataSource">

  <property>name="driverClassName" value="${db.driver}"/>

  <property>name="url" value="${db.url}"/>

  <property>name="username" value="${db.user}"/>

  <property>name="password" value="${db.pass}"/>    

</bean>

<bean id="jdbcTemplate" class="org.springframework.jdbc.core.JdbcTemplate">

  <property>name="dataSource" ref="dataSource"/>

</bean>

<bean id="dao.user" class="com.dhaval.web.vaadin.spring.dao.UserDaoImpl">

  <constructor-arg>ref="jdbcTemplate"/>

</bean>

<bean id="testApplication" class="com.dhaval.web.vaadin.spring.MyApplication">

  <constructor-arg>ref="dao.user"/>

</bean>

testApplication bean id is same as we have given in the web.xml as an init-param to Spring Servlet.

• Vaadin Main Application class

This is my Vaadin Application class

public class MyApplication extends Application{

    private UserDaoImpl userDao;

    public MyApplication(UserDaoImpl userDao){

        this.userDao = userDao;

    }

    public void init() {

        Window mainWindow = new Window("Simple Vaadin Spring Integration");

        final TextField txtUser = new TextField("Enter username");

        Button btnCheckUser = new Button("Check Username");

        final Label lblCheckMsg = new Label("");

        btnCheckUser.addListener(new Button.ClickListener() {

            public void buttonClick(ClickEvent event) {

                boolean result = userDao.hasUser(txtUser.getValue().toString());

                if(result){

                    lblCheckMsg.setValue("Available");

                }else{

                    lblCheckMsg.setValue("Not Available");

                }

            }

        });

        mainWindow.addComponent(txtUser);

        mainWindow.addComponent(btnCheckUser);

        mainWindow.addComponent(lblCheckMsg);

        setMainWindow(mainWindow);

   }

}

The full source code is available at vaadin-spring-integration in download section.