Using JavaFX Step by Step to Design User Interface (UI).

In this tutorial you will learn about how to design nice User Interface (UI) using JavaFx. This lesson explains how to use JavaFx to design GUI of your desktop application. Watch previous part of JavaFx tutorial to understand how to configure your IDE.

To get started, set up your workspace as follows;

  1. Open NetBeans IDE
  2. Click File to open new project
  3. New Project >JavaFx > JavaFx Application
  4. Click Next
  5. Name your Project (i.e Design)
  6. Click Finish.
  7. Design, right click >New >Java Package > name it “Resources

Inside Resources folder add icons,

Icons: https://material.io/resources/icons/?style=baseline

Logo: You may use any jpg image.

Inside your main java class (Design.java) write the following code;

Design.java

package design;
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

/**
 *
 * @author ponsi
 */
public class Design extends Application {

    StackPane root = new StackPane();
    BorderPane mainHomePane = new BorderPane();

    @Override
    public void start(Stage stage) {
        MainHome();
        Scene scene = new Scene(root, 1000, 600);
        stage.setTitle("Java FX Material Design");
        stage.setScene(scene);
        stage.show();
    }

    private Pane MainHome() {

        //=============HBOX TOP======================================================
        HBox topHBox = new HBox();
        topHBox.setStyle("-fx-background-color:#333333");
        topHBox.setPrefHeight(50);
        topHBox.prefWidthProperty().bind(mainHomePane.widthProperty());
        BorderPane.setMargin(topHBox, new Insets(8, 14, 8, 10));
        //==============================XXXXXXXXXXXXXXXXX============================

        //=============HBOX LEFT=====================================================
        HBox leftMenueHBox = new HBox();
        leftMenueHBox.setStyle("-fx-background-color:#333333");
        leftMenueHBox.prefHeightProperty().bind(mainHomePane.heightProperty());
        leftMenueHBox.setPrefWidth(150);
        BorderPane.setMargin(leftMenueHBox, new Insets(0, 8, 0, 10));
        //==============================XXXXXXXXXXXXXXXXX============================

        //=============HBOX RIGHT====================================================
        VBox rightVBox = new VBox(8);
        rightVBox.setStyle("-fx-background-color:#333333");
        rightVBox.prefHeightProperty().bind(mainHomePane.heightProperty());
        rightVBox.setPrefWidth(150);
        BorderPane.setMargin(rightVBox, new Insets(0, 14, 0, 8));
        //==============================XXXXXXXXXXXXXXXXX============================

        //=============HBOX BOTTOM===================================================
        HBox bottomHBox = new HBox();
        bottomHBox.setStyle("-fx-background-color:#333333");
        bottomHBox.setPrefHeight(100);
        BorderPane.setMargin(bottomHBox, new Insets(8, 14, 8, 10));
        //==============================END==========================================

        //===============LABEL LOGO==================================================
        Image logo = new Image(Design.class.getResource("/Resources/logo.jpg").toExternalForm());
        ImageView viewLogo = new ImageView(logo);

        Label logoLabel = new Label();
        logoLabel.prefWidthProperty().bind(leftMenueHBox.widthProperty());
        logoLabel.setPrefHeight(158);

        viewLogo.fitWidthProperty().bind(logoLabel.widthProperty());
        viewLogo.fitHeightProperty().bind(logoLabel.heightProperty());
        logoLabel.setGraphic(viewLogo);
        leftMenueHBox.getChildren().add(logoLabel);

        //===============Button======================================================
        Button btnUser = new Button();
        Image userBtn = new Image(Design.class.getResource("/Resources/ic_account_circle.png").toExternalForm());
        ImageView viewUser = new ImageView(userBtn);

        btnUser.setGraphic(viewUser);
        btnUser.setStyle("-fx-background-color:#333333");
        btnUser.prefHeightProperty().bind(topHBox.heightProperty());
        btnUser.setOnMouseEntered(value -> {
            btnUser.setStyle("-fx-background-color:red");
        });
        btnUser.setOnMouseExited(v -> {
            btnUser.setStyle("-fx-background-color:#333333");
        });

        Button messageBtn = new Button();
        Image messageImage = new Image(Design.class.getResource("/Resources/ic_message_white.png").toExternalForm());
        ImageView viewMessage = new ImageView(messageImage);

        messageBtn.setGraphic(viewMessage);
        messageBtn.setStyle("-fx-background-color:#333333");
        messageBtn.prefHeightProperty().bind(topHBox.heightProperty());

        messageBtn.setOnMouseEntered((MouseEvent value) -> {
            messageBtn.setStyle("-fx-background-color:red");
        });

        messageBtn.setOnMouseExited((MouseEvent v) -> {

            messageBtn.setStyle("-fx-background-color:#333333");

        });

        topHBox.getChildren().addAll(btnUser, messageBtn);

        //====================XXXXXXXXXXXXXXXX=======================================
        mainHomePane.setStyle("-fx-background-color:#000000");
        root.getChildren().add(mainHomePane);
        mainHomePane.setTop(topHBox);
        mainHomePane.setBottom(bottomHBox);
        mainHomePane.setRight(rightVBox);
        mainHomePane.setLeft(leftMenueHBox);
        return mainHomePane;
    }

    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        launch(args);
    }

}

Save the Project > Clean and Build the Project > Run Project. You will see as a picture above.


Login to comment


Comments