User Interface Components

height. The same goes for a label with only whitespace as the label text. You need to use a nonbreaking space character, either   or  :

layout.addComponent(new Label(" ", Label.ContentMode.XHTML));

Using the Label.ContentMode.PREFORMATTED mode has the same effect; preformatted spaces do not collapse in a vertical layout. In a HorizontalLayout, the width of a space character may be unpredictable if the label font is proportional, so you can use the preformatted mode to add em-width wide spaces.

If you want a gap that has adjustable width or height, you can use an empty label if you specify a height or width for it. For example, to create vertical space in a VerticalLayout:

Label gap = new Label(); gap.setHeight("1em"); verticalLayout.addComponent(gap);

You can make a flexible expanding spacer by having a relatively sized empty label with 100% height or width and setting the label as expanding in the layout.

// A wide component bar

HorizontalLayout horizontal = new HorizontalLayout(); horizontal.setWidth("100%");

//Have a component before the gap (a collapsing cell) Button button1 = new Button("I'm on the left"); horizontal.addComponent(button1);

//An expanding gap spacer

Label expandingGap = new Label(); expandingGap.setWidth("100%"); horizontal.addComponent(expandingGap); horizontal.setExpandRatio(expandingGap, 1.0f);

// A component after the gap (a collapsing cell) Button button2 = new Button("I'm on the right"); horizontal.addComponent(button2);

5.5.4. CSS Style Rules

The Label component has a v-label overall style.

The Reindeer theme includes a number of predefined styles for typical formatting cases. These include "h1" (Reindeer.LABEL_H1) and "h2" (Reindeer.LABEL_H2) heading styles and "light" (Reindeer.LABEL_SMALL) style.

5.6. Link

The Link component allows making hyperlinks. References to locations are represented as resource objects, explained in Section 4.4, “Images and Other Resources”. The Link is a regular HTML hyperlink, that is, an <a href> anchor element that is handled natively by the browser. Unlike when clicking a Button, clicking a Link does not cause an event on the server-side.

Links to an arbitrary URL can be made by using an ExternalResource as follows:

// Textual link

Link link = new Link("Click Me!",

new ExternalResource("http://vaadin.com/"));

You can use setIcon() to make image links as follows:

110	CSS Style Rules

User Interface Components

// Image link

Link iconic = new Link(null,

new ExternalResource("http://vaadin.com/")); iconic.setIcon(new ThemeResource("img/nicubunu_Chain.png"));

// Image + caption

Link combo = new Link("To appease both literal and visual", new ExternalResource("http://vaadin.com/")); combo.setIcon(new ThemeResource("img/nicubunu_Chain.png"));

The resulting links are shown in Figure 5.19, “Link Example”. You could add a "display: block" style for the icon element to place the caption below it.

Figure 5.19. Link Example

With the simple constructor used in the above example, the resource is opened in the current window. Using the constructor that takes the target window as a parameter, or by setting the target window with setTargetName(), you can open the resource in another window, such as a popup browser window/tab. As the target name is an HTML target string managed by the browser, the target can be any window, including windows not managed by the application itself. You can use the special underscored target names, such as _blank to open the link to a new browser window or tab.

// Hyperlink to a given URL

Link link = new Link("Take me a away to a faraway land", new ExternalResource("http://vaadin.com/"));

//Open the URL in a new window/tab link.setTargetName("_blank");

//Indicate visually that it opens in a new window/tab link.setIcon(new ThemeResource("icons/external-link.png")); link.addStyleName("icon-after-caption");

Normally, the link icon is before the caption. You can have it right of the caption by reversing the text direction in the containing element.

/* Position icon right of the link caption. */

.icon-after-caption { direction: rtl;

}

/* Add some padding around the icon. */

.icon-after-caption .v-icon { padding: 0 3px;

}

The resulting link is shown in Figure 5.20, “Link That Opens a New Window”.

Figure 5.20. Link That Opens a New Window

Link

111