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.
.v-link { } a { } .v-icon {} span {}
The overall style for the Link
component is
v-link
. The root element contains the <a
href>
hyperlink anchor. Inside the anchor are the icon, with
v-icon
style, and the caption in a text span.
Hyperlink anchors have a number of pseudo-classes
that are active at different times. An unvisited link has
a:link
class and a visited link
a:visited
. When the mouse pointer hovers over the link,
it will have a:hover
, and when the mouse button is
being pressed over the link, the a:active
class. When
combining the pseudo-classes in a selector, please notice that
a:hover
must come after an a:link
and a:visited
, and a:active
after
the a:hover
.