Managing Layout

Figure 6.14. A TabSheet with Hidden and Disabled Tabs

CSS Style Rules

.v-tabsheet {}

.v-tabsheet-tabs {}

.v-tabsheet-content {}

.v-tabsheet-deco {}

.v-tabsheet-tabcontainer {}

.v-tabsheet-tabsheetpanel {}

.v-tabsheet-hidetabs {}

.v-tabsheet-scroller {}

.v-tabsheet-scrollerPrev {}

.v-tabsheet-scrollerNext {}

.v-tabsheet-scrollerPrev-disabled{}

.v-tabsheet-scrollerNext-disabled{}

.v-tabsheet-tabitem {}

.v-tabsheet-tabitem-selected {}

.v-tabsheet-tabitemcell {}

.v-tabsheet-tabitemcell-first {}

.v-tabsheet-tabs td {}

.v-tabsheet-spacertd {}

The entire tabsheet has the v-tabsheet style. A tabsheet consists of three main parts: the tabs on the top, the main content pane, and decorations around the tabsheet.

The tabs area at the top can be styled with v-tabsheet-tabs, v-tabsheet-tabcontainer and v-tabsheet-tabitem*.

The style v-tabsheet-spacertd is used for any empty space after the tabs. If the tabsheet has too little space to show all tabs, scroller buttons enable browsing the full tab list. These use the styles v-tabsheet-scroller*.

The content area where the tab contents are shown can be styled with v-tabsheet-content, and the surrounding decoration with v-tabsheet-deco.

6.10. Accordion

Accordion is a multicomponent container similar to TabSheet, except that the "tabs" are arranged vertically. Clicking on a tab opens its contained component in the space between the tab and the next one. You can use an Accordion identically to a TabSheet, which it actually inherits. See Section 6.9, “TabSheet” for more information.

The following example shows how you can create a simple accordion. As the Accordion is rather naked alone, we put it inside a Panel that acts as its caption and provides it a border.

// Create the Accordion.

Accordion accordion = new Accordion();

// Have it take all space available in the layout. accordion.setSizeFull();

CSS Style Rules

195

Managing Layout

// Some components to put in the Accordion.

Label l1 = new Label("There are no previously saved actions."); Label l2 = new Label("There are no saved notes.");

Label l3 = new Label("There are currently no issues.");

//Add the components as tabs in the Accordion. accordion.addTab(l1, "Saved actions", null); accordion.addTab(l2, "Notes", null); accordion.addTab(l3, "Issues", null);

//A container for the Accordion.

Panel panel = new Panel("Tasks"); panel.setWidth("300px"); panel.setHeight("300px"); panel.addComponent(accordion);

// Trim its layout to allow the Accordion take all space. panel.getLayout().setSizeFull(); panel.getLayout().setMargin(false);

Figure 6.15, “An Accordion” shows what the example would look like with the default theme.

Figure 6.15. An Accordion

CSS Style Rules

.v-accordion {}

.v-accordion-item {}

.v-accordion-item-open {}

.v-accordion-item-first {}

.v-accordion-item-caption {}

.v-accordion-item-caption .v-caption {}

.v-accordion-item-content {}

The top-level element of Accordion has the v-accordion style. An Accordion consists of a sequence of item elements, each of which has a caption element (the tab) and a content area element.

The selected item (tab) has also the v-accordion-open style. The content area is not shown for the closed items.

196	CSS Style Rules

Managing Layout

6.11. AbsoluteLayout

AbsoluteLayout allows placing components in arbitrary positions in the layout area.The positions are specified in the addComponent() method with horizontal and vertical coordinates relative to an edge of the layout area. The positions can include a third depth dimension, the z-index, which specifies which components are displayed in front and which behind other components.

The positions are specified by a CSS absolute position string, using the left, right, top, bottom, and z-index properties known from CSS. In the following example, we have a 300 by 150 pixels large layout and position a text field 50 pixels from both the left and the top edge:

//A 400x250 pixels size layout AbsoluteLayout layout = new AbsoluteLayout(); layout.setWidth("400px"); layout.setHeight("250px");

//A component with coordinates for its top-left corner TextField text = new TextField("Somewhere someplace"); layout.addComponent(text, "left: 50px; top: 50px;");

The left and top specify the distance from the left and top edge, respectively. The right and bottom specify the distances from the right and top edge.

// At the top-left corner

Button button = new Button( "left: 0px; top: 0px;"); layout.addComponent(button, "left: 0px; top: 0px;");

// At the bottom-right corner

Button buttCorner = new Button( "right: 0px; bottom: 0px;"); layout.addComponent(buttCorner, "right: 0px; bottom: 0px;");

// Relative to the bottom-right corner

Button buttBrRelative = new Button( "right: 50px; bottom: 50px;"); layout.addComponent(buttBrRelative, "right: 50px; bottom: 50px;");

// On the bottom, relative to the left side

Button buttBottom = new Button( "left: 50px; bottom: 0px;"); layout.addComponent(buttBottom, "left: 50px; bottom: 0px;");

// On the right side, up from the bottom

Button buttRight = new Button( "right: 0px; bottom: 100px;"); layout.addComponent(buttRight, "right: 0px; bottom: 100px;");

The result of the above code examples is shown in Figure 6.16, “Components Positioned Relative to Various Edges”.

AbsoluteLayout

197

Managing Layout

Figure 6.16. Components Positioned Relative to Various Edges

In the above examples, we had components of undefined size and specified the positions of components by a single pair of coordinates. The other possibility is to specify an area and let the component fill the area by specifying a proportinal size for the component, such as "100%". Normally, you use setSizeFull() to take the entire area given by the layout.

// Specify an area that a component should fill Panel panel = new Panel("A Panel filling an area"); panel.setSizeFull(); // Fill the entire given area

layout.addComponent(panel, "left: 25px; right: 50px; "+ "top: 100px; bottom: 50px;");

The result is shown in Figure 6.17, “Component Filling an Area Specified by Coordinates”

Figure 6.17. Component Filling an Area Specified by Coordinates

You can also use proportional coordinates to specify the coordinates:

//A panel that takes 30% to 90% horizontally and

//20% to 80% vertically

Panel panel = new Panel("A Panel"); panel.setSizeFull(); // Fill the specified area layout.addComponent(panel, "left: 30%; right: 10%;" +

"top: 20%; bottom: 20%;");

The result is shown in Figure 6.18, “Specifying an Area by Proportional Coordinates”

198	AbsoluteLayout