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

书名：Vaadin 7 Cookbook
作者名：Jaroslav Holaň Ond?ej Kvasnovsk?
本章字数：515字
更新时间：2021-07-23 14:19:33

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.

本周热推：

计算机联锁及信号微机监测系统中国互联网发展报告2019 社交网络分析 SOA用户指南 Proxmox High Availability