网投十大信誉平台j0500

書名： Vaadin 7 Cookbook
作者名： Jaroslav Holaň Ond?ej Kvasnovsk?
本章字數： 510字
更新時間： 2021-07-23 14:19:33

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.

官术网_书友最值得收藏!

Controlling components over the CSS layout

How to do it...

How it works...

See also

官术网_书友最值得收藏!

Vaadin 7 Cookbook

Controlling components over the CSS layout

How to do it...

How it works...

See also