JavaFX | Using JavaFX UI Controls | Working With Hyperlinks

Hyperlink

The Hyperlink class represents another type of Labeled control, and it is aimed mainly for formatting text as a hyperlink. However, the Hyperlink class has all the instance variables of the Control class, and thus can behave as a typical UI control. As an entry-level task, try implementing the following example.

Source Code

import javafx.scene.control.Hyperlink;

Hyperlink{
    text: "http://example.com"
    action: function () {
        println("The link is clicked");
    }					
}

The text instance variable defines the text caption for the hyperlink, while the action function sets the specific action, which is invoked whenever the hyperlink is clicked. In the entry-level task, this action is limited to printing the string. However, in your application, you might want to implement more common tasks. Look at the following application. It renders images from the remote locations defined by hyperlinks.

An application that uses hyperlink

Review the source code of the application.

Source Code

package hyperlinksample;

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.scene.control.Hyperlink;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollView;
import javafx.scene.control.Tooltip;
import javafx.geometry.Insets;

def imageURLs = [
    "http://javafx.com/docs/howto/images/fig2.png",
    "http://javafx.com/docs/howto/images/fig3.png",
    "http://javafx.com/docs/howto/images/fig4.png",
    "http://javafx.com/docs/howto/images/fig5.png"
];

def tooltips = [
    "Getting Started",
    "User Interface",
    "Animation",
    "Graphics"
 ];
 
def images = for (imageURL in imageURLs) Image {url: imageURL };
var selectedImage: Image;
var hyperlinks: Hyperlink[];
var scrollView: ScrollView;

Stage {
    title: "Hyperlink Sample"
    width: 600
    height: 400
    scene: Scene {
        content: VBox {
            padding: Insets {top: 10 left: 10 }
            content: [
                HBox {
                    spacing: 20
                    content: [
                        scrollView = ScrollView {
                           node: VBox {
                               content: hyperlinks = for (imageURL in imageURLs)
                                   Hyperlink {
                                       text: imageURL
                                       action: function () {
                                           selectedImage = 
                                               images[indexof imageURL];
                                       }
                                       tooltip: Tooltip {
                                           text: tooltips[indexof imageURL]
                                       }
                                   }
                            }
                        },
                        ImageView {image: bind selectedImage }
                    ]
                },
                Button {
                    layoutInfo: LayoutInfo {width: bind scrollView.width }
                    text: "Refresh links"
                    action: function () {
                        for (hyperlink in hyperlinks) hyperlink.visited = false

                    }
                }
            ]
        }
    }
}

The simplest way to create several Hyperlink objects is to declare them within a cycle construction. The text variable contains the URL of an image, the action function specifies the image to render by its URL, and the tooltip variable defines a tooltip caption that corresponds to the rendered image.

In this application, the hyperlinks are arranged by using the HBox layout container. The container is put inside the ScrollView to enable horizontal scrolling.

When a user clicks a hyperlink, it becomes visited. You can use the corresponding Boolean instance variable of the Hyperlink class to refresh the links.

Source Code

Button {
    layoutInfo: LayoutInfo {width: bind scrollView.width }
    text: "Refresh links"
    action: function () {
        for (hyperlink in hyperlinks) hyperlink.visited = false
    }
}

When pressed, this button refreshes all the hyperlinks. Note that the width of the button was bound to the width of the ScrollView control by using the LayoutInfo class.

The button that refreshes the hyperlinks

Because the Hyperlink class is an extension of the Labeled class, you can specify not only a text caption but also an image, or both image and text. To further enhance this application, you can use the graphic, graphicVPos, hpos, and vpos variables. These variables add graphical contents to the hyperlink and define its position relative to the hyperlink text and borders.

You can change the visual appearance of hyperlinks in your application by using various CSS styles (see Applying CSS to UI Controls).

Samples That Use Hyperlinks

Style Editor

Hyperlink

Related Documents

Samples That Use Hyperlinks