Creating a custom layout_Vaadin 7 Cookbook-QQ阅读男生都市网

上QQ阅读APP看书，第一时间看更新

Creating a custom layout

When we work on a complex web application, we need to cooperate with more people in the team. UX or graphic designers design layouts and for them it is more natural to design layouts using HTML and CSS. In such cases, we can use Custom layout that is described in the HTML template.

How to do it...

Carry out the following steps to create a custom layout:

Create a project with the main UI class, Demo.
```
public class Demo extends UI {…}
```
First, we'll create an HTML template. Vaadin separates the appearance of the user interface from its logic using themes. Themes can include Sass or CSS style sheets, custom HTML layouts, and any necessary graphics. We'll call our template mylayout.html and place it under the folder layouts. In the WebContent folder we create this path of folders:
```
WebContent/VAADIN/themes/mytheme/layouts
```
Next, we define our layout. By setting the location attribute in the <div> element, we mark our specific areas. These elements will be replaced by Vaadin components. On the top we will put a header. We will create one menu on the left side. We will leave the central area for some content page. At the end we will insert a page footer, for example, for a status line. The Attribute class is used for CSS styling.
```
   <div location="header" class="header"></div>
   <div location="menu" class="menu"></div>
   <div location="content" class="content"></div>
   <div location="footer" class="footer"></div>
```
In the next step, we create our CSS style for this layout. Under the folder mytheme we create a file styles.css.
```
WebContent/VAADIN/themes/mytheme/styles.css
```

In this file, we can say how to align a component in each area, what color and size will be used, and other properties.

.header,.menu,.footer {
  border: thin;
  border-style: solid;
  border-color: LightGrey;
}

.header {
  text-align: center;
  font-size: 32px;
  height: 75px;
}

.menu {
  height: 300px;
  width: 20%;
  text-align: center;
  float: left;
}

.content {
  text-align: left;
}

.footer {
  text-align: right;
  clear: both;
}

Now we will create a simple Vaadin project with a main UI class called Demo. We will add the annotation mytheme, which means that we use this theme in our application. In the init() method, we will set CustomLayout as a content. Each component is added by the addComponent() method, where the second parameter is the location in the HTML template.

@Theme("mytheme")
public class Demo extends UI {
  @Override
  public void init(VaadinRequest request) {
    CustomLayout layout = new CustomLayout("mylayout");
    setContent(layout);

    Label header = new Label("Custom layout");
    header.addStyleName("header");
    layout.addComponent(header, "header");

    Label menu = new Label("menu");
    layout.addComponent(menu, "menu");

    Label content = new Label("This is content of page.");
    layout.addComponent(content, "content");            

    Label footer = new Label("Created by Vaadin, 2013");
    layout.addComponent(footer, "footer");      
  }
}

How it works...

Layout is described in the HTML template file. A template includes the <div> elements with a location attribute that defines the location identifier. The client-side engine of Vaadin will replace the contents of the location elements with the components. The components are bound to the location elements by the location identifier given to the addComponent() method. The template file is separate from the source code. It's placed under the WebContent/VAADIN/themes/<nameTheme>/layouts folder. We can set the style of the layout with the CSS file placed in WebContent/VAADIN/themes/<nameTheme>/styles.css.

本周热推：

6G：面向2030年的移动通信面向物联网的CC2530与传感器应用开发物联网与无线传感器网络校园网络规划与架设智能物联安防视频技术基础与应用