Controlling components over the CSS layout_Vaadin 7 Cookbook-QQ阅读男生历史网

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

Controlling components over the CSS layout

In some cases, we need to control the CSS style of components programmatically. For example, when we want to create a cloud of the most searched terms or tags in our application, we need to change the size of each tag according to the number of searches. We'll use the CSS layout in that case. Our tag cloud will look like the following screenshot:

How to do it...

Carry out the following steps to create a cloud of tags using the CssLayout class:

Create an application with the main UI class called, for example, Demo.
```
public class Demo extends UI {…}
```
We need our own label with the fontSize variable. We create a TagLabel class that extends Label.
```
public class TagLabel extends Label {…}
```

Next we add the fontSize attribute and the appropriate get method.

private int fontSize;

public int getFontSize() {
  return fontSize;
}

In the constructor we call the parent's constructor by super(text) and pass the value of fontSize. If we want to wrap labels on the line, we have to set the size to Undefined, because the size of Label is naturally set to 100 percent and it won't allow wrapping label on the line.
```
public TagLabel(String text, int fontSize) {
  super(text);
  this.fontSize = fontSize;
  setSizeUndefined();
}
```
Now we create our TagCloud class that extends CssLayout.
```
public class TagCloud extends CssLayout {…}
```
Main functionality is in the getCss() method. We override and modify it according to our needs. We control only instances of the TagLabel class. Here we create a different CSS style for each TagLabel. We set font-size and line-height according to the fontSize variable. We also add style display: inline-block which we need for wrapping the component on the line.
```
@Override
protected String getCss(Component c) {
  String css = null;
  if (c instanceof TagLabel) {
    TagLabel tag = (TagLabel)c;
    css = "font-size: " + tag.getFontSize() + "px;";
    css += "line-height: " + tag.getFontSize() + "px;";
    css += "display: inline-block;";
    css += "margin: 3px;";
  }
  return css;
};
```

Now we can use TagCloud in our application in the main UI class. For creating TagLabel, we need two arrays. The first is for the names and the second is for the font size. We set the width to 150 pixels in this layout.

@Override
public void init(WrappedRequest request) {
  String names[] =
  {"HTML", "Java","Vaadin", "GWT", "CSS", "Javascript"};
  int fontSizes[] = {12,20,32,24,17,19};

  TagCloud tagCloud = new TagCloud();
  for (int i=0; i<names.length; i++){
    tagCloud.addComponent(new TagLabel(names[i],fontSizes[i]));
  }
  tagCloud.setWidth(150, Unit.PIXELS);
  setContent(tagCloud);
}

That's all. We can run the server and open the application in the web browser.

How it works...

Each component inside the layout is controlled by the getCss() method. Here we set the style for the TagLabel objects. Only font-size and line-height are changed. The values of these properties are stored in the fontSize array that is created in the main UI class.