How-To's > How do I add a hyperlink to a node?

If you are deploying to a browser applet, you can add a hyperlink to a node by using the AppletStageExtension.showDocument() function in a mouse event.

Example Code 1: Add a Hyperlink and Change the Cursor Type

In the following example, the AppletStageExtension.showDocument() function is embedded in an onMouseClicked event.

To indicate the presence of a hyperlink, the cursor changes to a hand when entering the node and back to the default when exiting the node. The mouse cursor type is controlled by using a Cursor class instance in the onMouseEntered and onMouseExited events, then binding the value in the cursor variable of the node.

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.stage.AppletStageExtension;
import javafx.scene.Cursor;
import javafx.scene.image.ImageView;

// Define the default cursor type
var cursor = Cursor.DEFAULT;

Stage {
    title: "Hyperlink and Cursor Change"
    scene: Scene {
        content: [
            ImageView {
                x: 80
                y: 10
                image: Image{url:"{__DIR__}someImage.jpg"},
                preserveRatio: true
                fitWidth: 300
                // Bind the cursor value
                cursor: bind cursor
                // Change the cursor type to a hand when cursor enters the node area
                onMouseEntered: function(handcursor: MouseEvent): Void
                    {cursor = Cursor.HAND}
                onMouseExited: function(defaultcursor: MouseEvent): Void
                    {cursor = Cursor.DEFAULT}
                // Activate hyperlink when mouse button is clicked
                onMouseClicked: function(link: MouseEvent): Void
                    {AppletStageExtension.showDocument("http://javafx.com/")
                }
            }
        ]
    }
}

Example Code 2: Add a Hyperlink and Change the Button Size

The following example is also for browser applet deployment only. It adds a hyperlink to the node, which is activated with an onMousePressed event. The size of the node increases slightly when you mouse over the node, to signal the presence of the hyperlink. The change in size of the node is implemented by creating two ImageView objects of different sizes and binding the hover and NOT hover state of the node to control the visibility of each version of the image.

import javafx.scene.Scene;
import javafx.stage.Stage;
import javafx.scene.image.Image;
import javafx.scene.input.MouseEvent;
import javafx.stage.AppletStageExtension;
import javafx.scene.image.ImageView;
import javafx.scene.Group;

var sideBarButton = Image {
                   url: "{__DIR__}someImage.jpg"
   }
var panelWebAppButton: Group = Group {
           translateX: 140
           translateY: 100
           onMousePressed: function (s: MouseEvent): Void {
               var currentUrl = "http://javafx.com";
               //Activate hyperlink when primary mouse button is pressed
               if (s.primaryButtonDown) {
                   AppletStageExtension.showDocument(currentUrl);
               }
           }
           content: [
               ImageView {
                   image: sideBarButton
                   fitWidth: 24
                   fitHeight: 24
                   // Make this node visible when the cursor hovers over the node
                   visible: bind panelWebAppButton.hover
               },
               ImageView {
                   image: sideBarButton
                   fitWidth: 20
                   fitHeight: 20
                   // Make this node visible when the cursor is not hovering over the node
                   visible: bind not panelWebAppButton.hover
               } 
           ]
}

Stage {
    title: "Hyperlink and Button Size Change"
    scene: Scene {
        content: [
            panelWebAppButton
        ]
    }
}

Tips

• To test the hyperlink, make sure you run the application in a browser.

API Documentation

• Node
• Cursor

Related How-To Topics

• How do I use nodes?

Last Updated: April 2010
[Return to How-To's Home]

---