# Vaadin `Link`教程

> 原文： [http://zetcode.com/vaadin/link/](http://zetcode.com/vaadin/link/)

在 Vaadin `Link`教程中，我们学习 Vaadin `Link`组件的基础。 在 Vaadin 链接示例中，我们创建一个链接组件，该组件会将我们转移到外部网页。

## Vaadin

Vaadin 是流行的 Java Web 开发框架。 它用于构建单页 Web 应用。

## Vaadin `Link`

`Link`组件允许建立超链接。 这是浏览器本地处理的常规 HTML 超链接（`<a href>`）。 与单击`Button`时不同，单击`Link`不会在服务器端引起事件。 可以使用`ExternalResource`链接到任意 URL。

## Vaadin `Link`示例

以下程序演示了 Vaadin `Link`组件的用法。 该链接包含文本和图像。

我们可以使用`setTargetName("_blank")`在新窗口中打开页面。

`MyUI.java`

```java
package com.zetcode;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.ExternalResource;
import com.vaadin.server.FileResource;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinService;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Link;
import com.vaadin.ui.UI;
import java.io.File;

@Theme("mytheme")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {

        HorizontalLayout layout = new HorizontalLayout();

        Link link = new Link("Go to stackoverflow.com",
                new ExternalResource("https://stackoverflow.com/"));

        String basepath = VaadinService.getCurrent()
                .getBaseDirectory().getAbsolutePath();

        FileResource resource = new FileResource(new File(basepath
                + "/WEB-Iimg/web.png"));

        link.setIcon(resource);
        layout.setMargin(true);

        layout.addComponents(link);
        setContent(layout);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

```

该示例创建一个链接组件，该组件将重定向到外部网页。

```java
Link link = new Link("Go to stackoverflow.com",
        new ExternalResource("https://stackoverflow.com/"));

```

创建了`Link`组件； 该网页由`ExternalResource`指定。

```java
String basepath = VaadinService.getCurrent()
        .getBaseDirectory().getAbsolutePath();

```

使用`getBaseDirectory()`，我们检索应用上下文目录。 需要获取图标图像的路径。

```java
FileResource resource = new FileResource(new File(basepath
        + "/WEB-Iimg/web.png"));

```

该图像是`FileResource`，位于`/WEB-Iimg/`目录中。

![Vaadin Link](img/db77ac9a0b9e21efb1f3047f360489d1.jpg)

图：Vaadin `Link`

在本教程中，我们展示了 Vaadin `Link`组件的基础。 您可能也对相关教程感兴趣： [Vaadin 网格教程](/vaadin/grid/)， [Vaadin `DateField`教程](/vaadin/datefield/)， [Vaadin `Button`教程](/vaadin/button/)， [Vaadin 滑块教程](/vaadin/slider/)， [Vaadin `CheckBox`教程](/vaadin/checkbox/)， [Java 教程](/lang/java/)。