Vaadin Link tutorial

last modified July 4, 2017

In Vaadin Link tutorial we learn the basics of the Vaadin Link component. In the Vaadin Link example we create a link component that will transfer us to an external web page.

Vaadin

Vaadin is a popular Java web development framework. It is used for building single page web applications.

Vaadin Link

Link component allows making hyperlinks. It is a regular HTML hyperlink (<a href>) 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 ExternalResource.

Vaadin Link example

The following program demonstrates the usage of a Vaadin Link component. The link contains text and image.

We can let the page be opened in a new window with setTargetName("_blank").

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-INF/images/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 {
    }
}

The example creates a link component that will redirect to an external web page.

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

A Link component is created; the web page is specified with ExternalResource.

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

With the getBaseDirectory() we retrieve the application context directory. It is needed to get the path to the icon image.

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

The image is a FileResource, located in the /WEB-INF/images/ directory.

In this tutorial, we have showed the basics of the Vaadin Link component. You might also be interested in the related tutorials: Vaadin Grid tutorial, Vaadin DateField tutorial, Vaadin Button tutorial, Vaadin Slider tutorial, Vaadin CheckBox tutorial, Java tutorial.