The Link component allows making hyperlinks. References to locations are represented as resource objects, explained in Section 4.5, “Referencing 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:

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


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 native popup window. 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”.


With the _blank target, a normal new browser window is opened. If you wish to open it in a popup window, you need to give a size for the window with setTargetWidth() and setTargetHeight(). You can control the window border style with setTargetBorder(), which takes any of the defined border styles TARGET_BORDER_DEFAULT, TARGET_BORDER_MINIMAL, and TARGET_BORDER_NONE. The exact result depends on the browser.

// Open the URL in a popup
link.setTargetName("_blank");
link.setTargetBorder(Link.TARGET_BORDER_NONE);
link.setTargetHeight(300);
link.setTargetWidth(400);

In addition to the Link component, Vaadin allows alternative ways to make hyperlinks. The Button component has a Reindeer.BUTTON_LINK style name that makes it look like a hyperlink, while handling clicks in a server-side click listener instead of in the browser. Also, you can make hyperlinks (or any other HTML) in a Label in XHTML content mode.