Develop Rich Web Applications with Java by Vaadin Framework (Introduction)

Vaadin (http://vaadin.com/home) is an open source web application framework having a server-side architecture which constructs user interface of web applications as RIA (rich internet applications), using Java code only.

Vaadin Logo

For developing Vaadin applications, you only use Java code, like Java Swing. This Java code is then converted to GWT (Google Web Toolkit) components (which are HTML and Javascript based) for browser side, and AJAX code sections are generated for some actions to support RIA concept. Server side validation is also performed for all actions.

An example source code is shown below:

  

import com.vaadin.ui.*;

public class HelloWorld extends com.vaadin.Application {

    public void init() {

        Window main = new Window("Hello window");

        setMainWindow(main);

        main.addComponent(new Label("Hello World!"));

    }

}

And the result is: 

Vaadin Hello World Example

Vaadin supports so many UI components and these can be extended with new GWT components if required, and CSS themes can be applied to results. For using Vaadin, only a JAR file is enough. Some Eclipse and NetBeans plugins are also available for easier development if required.

Vaadin supports JPA (java persistence API) container package JAR for database operations. By using containers, you can associate components to database operations directly, e.g. if the item list of a container changes, related visual component’s list is changed too.

Here is an example view of a Vaadin application layout VaadinTunes (http://demo.vaadin.com/VaadinTunesLayout/):

Vaadin Tunes

Because of Vaadin UI components are generated automatically from Java code, they may generally have some complex structure and a bit slow compared to a pure HTML page. For increasing the performance, some optimization rules are suggested: http://vaadin.com/wiki/-/wiki/Main/Optimizing%20Sluggish%20UI 

But development time gain is very high and rich & interactive web components can be developed without any script language information. These parameters must be considered while choosing the technology.

Vaadin is very well documented. You can take a look at “Book of Vaadin”:

http://vaadin.com/book/-/page/preface.html

A Brief Look at Apache Velocity

Introduction
Velocity is a template engine. Using Java classes, you can inject objects into template engine and use those injected objects in velocity template (.vm) files.

Its benefits are:

•  It can be used in desktop applications, web applications and other areas where a structured text or code is required.
• It can be used as a powerful code generator. Dynamic codes are created by velocity injected objects.
• It can access all public attribute and methods of given object.
•  It has an easy and clear syntax.
• You can define user interfaces (HTML, JSP etc.) dynamically and developers and designers can work seperately. So, MVC pattern can be used too.

Examples

Here is an example velocity template file helloWorld.vm:

Hello $param

And below is an example Java file HelloWorld.java that uses the template:

import org.apache.velocity.app.VelocityEngine;

import org.apache.velocity.Template;

import org.apache.velocity.VelocityContext;

import java.io.StringWriter;

public class HelloWorld

{

    public static void main( String[] args ) throws Exception

    {

        /*  first, get and initialize an engine  */

        VelocityEngine engine = new VelocityEngine();

        engine.init();

        Template template = engine.getTemplate( "helloWorld.vm" );

        VelocityContext context = new VelocityContext();

        context.put("param", "World");

        StringWriter writer = new StringWriter();

        template.merge( context, writer );

        System.out.println( writer.toString() );    

    }

}

Console Result: Hello World

In the code Velocity engine is created, initialized, velocity tamplate file template is taken, required parameters are put into context, and at last the string is written to the screen.

Commands

Velocity also has a built-in VTL (Velocity Template Language) syntax that has following statements:

VTL Tags

Escape Tool

Because of the VTL is a template language, string operations are required widely. For that case, some escaping methods are supported for java, javascript, html, xml, sql and some character renderings exist: 

(For more detail http://velocity.apache.org/tools/devel/generic/EscapeTool.html)

For example,
$val = “Stop!”
$esc.java($java) 
produces \”Stop!\”
or
${esc.d} produces $ output.
${esc.h} produces # output.