Vaadin – using html template files as a layout in a vaadin application

While it is possible in a Vaadin application to create almost any typical layout with the standard layout components, it is sometimes best to separate the layout completely from code.

With the CustomLayout vaadin component, you can write your layout as a template in XHTML separately, and this html file will contain div elements with the location attribute, to provide locations of any contained vaadin widget in it.

The layout template html is included in a theme directory in your web directory.

..\web\VAADIN\themes\sampletheme\layouts\examplecustomlayout.html

This separation allows the layout to be designed separately from code, for example using WYSIWYG web designer tools such as Adobe Dreamweaver.

Vaadin requires that the templates layout must use UTF-8 charset

Let’ look how does it look such a HTML template layout file, that holds place for vaadin widgets:

<table>

  <tbody>

    <tr>

      <td colspan="2">

      <h1 style="margin-top: 0pt;" align="center">Belépés a banki rendszerbe</h1>

      </td>

       <td> </td>

    </tr>

    <tr>

      <td align="right">Felhasználó:</td>

      <td>

      <div location="username"></div>

      </td>

    </tr>

    <tr>

      <td align="right">Jelszó:</td>

      <td>

      <div location="password"></div>

      </td>

    </tr>

    <tr>

      <td colspan="2" align="right">

      <div location="okbutton" style="padding: 10px;"></div>

      </td>

    </tr>

    <tr>

      <td colspan="2" style="padding: 7px; background-color: rgb(255, 172, 132);">

      <img src="examplecustomlayout_elemei/icon_info.gif" align="absbottom">Kérem adja meg a belépési adatait.

      </td>

      <td> </td>

    </tr>

  </tbody>

</table>

The whole template html should look like this at design view:

Now let’s have the java code which will use this template above, in a vaadin application:

First the we work with the main starting java file:

import com.vaadin.Application;

import com.vaadin.ui.*;

import com.vaadin.data.*;

/**

 *

 * @author Sipos Lehel

 * @version 1.0.0.0

 */

public class MyApplication extends Application {

    @Override

    public void init() {

        //create the directory for your own Theme

        //web\VAADIN\themes\lehel\styles.css

        setTheme("lehel");

       

        Window mainWindow = new Window("HTML TEMPLATE EXAMPLE");

        mainWindow.setName("main");

        //instantiating the java class working with the HTML layout templat

        CustomLayoutsExample template = new CustomLayoutsExample();

        mainWindow.addComponent(template);

        setMainWindow(mainWindow);

    }

}

Then let’ see the class which will hold the html template file:

import com.vaadin.ui.Button.ClickEvent;

import com.vaadin.ui.*;

import javax.management.Notification;

@SuppressWarnings("serial")

public class CustomLayoutsExample extends VerticalLayout {

    //vaadin widget that we will place on the layout

    Button ok;

    TextField username;

    PasswordField password;

    public CustomLayoutsExample() {

        setMargin(true);

        // Create the custom layout html file, and set it as a component in

        // the current vaadin layout

        //d:\Programming\JavaVaadin\Vaadin1\web\VAADIN\themes\lehel\layouts\examplecustomlayout.html

        CustomLayout custom = new CustomLayout("examplecustomlayout");      

        addComponent(custom);

        // Create components and bind them to the location tags

        // in the custom layout html template                             

        username = new TextField();

        custom.addComponent(username, "username");

       

        password = new PasswordField();

        custom.addComponent(password, "password");

       

        ok = new Button("Belépés");

        custom.addComponent(ok, "okbutton");

       

        ok.addListener(new Button.ClickListener() {

            @Override

            public void buttonClick(ClickEvent event) {               

                //verifying that the fields are filled or not

                if (!username.getValue().toString().equals("") && !password.getValue().toString().equals(""))

                    ok.getApplication().getWindow("main").showNotification("Figyelem!", "A belépés folyamatban");

                else

                    ok.getApplication().getWindow("main").showNotification("Figyelem!", "Töltse ki a mezőket");                   

            }

        });       

    }

}

After running the vaadin application that uses the html template file the result will be: