user interface - How to have menus (website style navigation links) in java desktop application

Question

I am using Netbeans and i want to develop a java desktop application. The application should be like a website somehow, i mean i want to have some menus in my java desktop application which by clicking on each one of those menus i should be able to access some different pages with different contains(like having main-menu, report-menu….). Any idea will be highly appreciated.

Answer 1

Here is a JavaFX based sample, which generates a menu based on a set of hyperlinks to different content items. This is quite similar to how a lot of web pages work. The sample is styled via css, similar to a web page.

The sample creates the scene content in Java code, but you could construct the layouts and define the content items in fxml generated by the SceneBuilder tool if you prefer.

JavaFX also has traditional application menu bars as well (not demonstrated in this sample).

Sample program output, with some different links clicked:

Sample code:

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.*;
import javafx.stage.Stage;

/**
 * Displays content panes activated by a hyper-link based navigation bar
 */
public class HyperlinkedNavMenu extends Application {
    private LinkContent[] linkContent;

    private final StackPane content = new StackPane();

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) {
        linkContent = createLinkContent();

        content.setPrefWidth(200);
        HBox.setHgrow(content, Priority.ALWAYS);

        stage.setTitle("Capello Pazzo");
        stage.setScene(new Scene(createLayout()));
        stage.show();
    }

    private Pane createLayout() {
        HBox layout = new HBox(
                10,
                createNavBar(), 
                content
        );

        layout.getStylesheets().add(
                getClass().getResource("nav.css").toExternalForm()
        );

        return layout;
    }

    private VBox createNavBar() {
        VBox nav = new VBox();
        nav.setMinWidth(100);
        nav.getStyleClass().add("navbar");

        for (int i = 0; i < linkContent.length; i++) {
            Hyperlink link = createLink(
                    linkContent[i].linkText, 
                    createContentNode(linkContent[i])
            );
            nav.getChildren().add(link);
            if (i == 0) {
                link.fire();
            }
        }

        return nav;
    }

    private Node createContentNode(LinkContent linkContent) {
        Label label = new Label(linkContent.contentText);
        label.setWrapText(true);

        VBox contentNode = new VBox(
                10,
                new ImageView(linkContent.image),
                label
        );
        contentNode.getStyleClass().add("contentnode");

        return contentNode;
    }

    private Hyperlink createLink(final String linkText, final Node contentNode) {
        Hyperlink link = new Hyperlink(linkText);
        link.setOnAction(t -> content.getChildren().setAll(
                contentNode
        ));

        return link;
    }

    private static class LinkContent {
        final String linkText, contentText;
        final Image image;

        LinkContent(String linkText, String contentText, String imageLoc) {
            this.linkText = linkText;
            this.contentText = contentText;
            this.image = new Image(imageLoc);
        }
    }

    // icon license:     http://creativecommons.org/licenses/by-nc-nd/3.0/
    // icon attribution: http://www.iconarchive.com/artist/archigraphs.html
    private LinkContent[] createLinkContent() {
        return new LinkContent[] {
                new LinkContent(
                        "Lorem",
                        "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                        "http://icons.iconarchive.com/icons/archigraphs/tea-party/128/Sugar-Cubes-icon.png"
                ),
                new LinkContent(
                        "Vestibulum",
                        "Vestibulum a dui et massa laoreet vehicula.",
                        "http://icons.iconarchive.com/icons/archigraphs/tea-party/128/Tea-Cake-icon.png"
                ),
                new LinkContent(
                        "Donec",
                        "Donec sed euismod risus.",
                        "http://icons.iconarchive.com/icons/archigraphs/tea-party/128/Tea-Cup-icon.png"
                ),
                new LinkContent(
                        "Duis",
                        "Duis semper porttitor leo ac posuere.",
                        "http://icons.iconarchive.com/icons/archigraphs/tea-party/128/Tea-Pot-icon.png"
                )
        };
    }
}

Sample css:

/** file: nav.css
 * place in same directory as HyperlinkedNavMenu.java and have your build system copy it
 * to the same location as HyperlinkedNavMenu.java.class */

.root {
    -fx-background-image: url("http://images.all-free-download.com/images/graphiclarge/linen_fabric_background_04_hd_picture_169825.jpg");
    -fx-padding: 15; 
    -fx-font-size: 15;
}

.navbar {
    -fx-background-color: burlywood, peachpuff; 
    -fx-background-radius: 10, 10; 
    -fx-background-insets: 0, 2; 
    -fx-font-style: italic; 
    -fx-padding: 10 15 15 10; 
}

.contentnode {
    -fx-background-color: aliceblue; 
    -fx-padding: 15 20 20 15;
    -fx-effect: dropshadow(gaussian, slategrey, 10, 0, 5, 5);  
}