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:

1. Let's create a new project and name the main UI class as Demo.

   public class Demo extends UI{…}

2. We begin with the creation of a ComponentCollection class that extends the Accordion layout.

   public class ComponentCollection extends Accordion {…}

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