Creating UI collections of components_Vaadin 7 Cookbook-QQ阅读男生科幻网

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

Creating UI collections of components

Imagine that we need to create an editor for the UI design. What is it usually composed of? It's usually composed of the toolbar, editor, and a collection of components. In this recipe, we will create a UI collection of components. When we work with many components, it is good to group them by types. For grouping, we use the Accordion layout.

How to do it...

Carry out the following steps to create a UI collection of components:

Let's create a new project and name the main UI class as Demo.
```
public class Demo extends UI{…}
```
We begin with the creation of a ComponentCollection class that extends the Accordion layout.
```
public class ComponentCollection extends Accordion {…}
```

For our example, we use icons from the internal Vaadin theme Runo because they are easily accessible using the ThemeResource class. They are divided into three groups by size. So we create two array variables.

private String[] sizes = { "16", "32", "64" };
private String[] icons = {
  "cancel.png", "calendar.png", "document.png",
  "email.png", "globe.png", "help.png",
  "note.png", "ok.png", "trash.png", "user.png" };

Now we need a method that creates tabs. Each tab represents one collection of UI components. And components are represented by icons. We call the createTabs() method and pass the sizes[] parameters.
```
private void createTabs(String sizes[]) {…}
```

Each group needs its own layout. We use CssLayout that allows us to wrap components in the line. Groups will have a name according to the size of icons inside. We insert this code in the createTabs() method.

for (String size : sizes) {
  CssLayout layout = new CssLayout(){
    @Override
    protected String getCss(Component c) {
      return "display: inline-block;";
    }
  };
  layout.setCaption("Icons " + size + "x" + size);
  addComponent(layout);
     
}

In the next step after the addComponent(layout) method, we go through an array of icons and create images from the theme resource Runo. Our createTabs() method is done.

  for (String icon : icons) {
    Resource imageResource =
      new ThemeResource("../runo/icons/" + size + "/" + icon);
    Image image = new  Image(null, imageResource);
    layout.addComponent(image);
  }

We will call this method from the constructor. And also we need to fill the whole space by our layout so that we add two methods to the constructor.
```
public ComponentCollection() {
  setSizeFull();
  createTabs(sizes);
}
```

Now we return to our root class Demo. The base layout for our application will be HorizontalSplitPanel. On its left area we insert our collection of components.

public class Demo extends UI {
  @Override
  public void init(VaadinRequest request) {  
    HorizontalSplitPanel horSplitPanel = 
                                       new HorizontalSplitPanel(); 
     horSplitPanel.setSplitPosition(20, Unit.PERCENTAGE);
    horSplitPanel.setFirstComponent(
                                       new ComponentCollection()); 
    setContent(horSplitPanel); 
  }
}

How it works...

It's an example of layout for a simple UI designer. For grouping components, we used the Accordion layout that has separate tabs. We can put a collection of components on the left side and an editor on the right side. By the splitter in the middle, we can adjust the width of the area as we wish.

There's more...

If we want components to be able to be dragged, we can easily wrap each component by DragAndDropWrapper. We can update the code inside the createTabs() method:

for (String icon : icons) {
  Resource imageResource =
   new ThemeResource("../runo/icons/" + size + "/" + icon); 
   Image image = new Image(null, imageResource);
 
  DragAndDropWrapper imageWrap = new DragAndDropWrapper(image);
  imageWrap.setDragStartMode(DragStartMode.COMPONENT);
  imageWrap.setSizeUndefined();

  layout.addComponent(imageWrap);
}

For dropping components, we can create a layout according to the Dragging-and-dropping between different layouts recipe and put this layout as a second component into the SplitPanel class in the root Demo class. We can also use AbsoluteLayout as an editor for components.