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:

1. Create an application with the main UI class called, for example, Demo.

   public class Demo extends UI {…}

2. We need our own label with the fontSize variable. We create a TagLabel class that extends Label.

   public class TagLabel extends Label {…}

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

   private int fontSize;
   
   public int getFontSize() {
     return fontSize;
   }

4. 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...