JavaFX 네비게이션 메뉴 클릭할때 마다 컨텐츠(*.fxml) 페이지 불러오기 예제

개발 환경 설정

• JavaFX 개발 환경 설정(넷빈즈 8.2, 오라클 JDK 1.8, Scene Builder)
• Scene Builder에 라이브러리 추가 하는 방법(JFoeniX, FontAwesomeFX)
• 넷빈즈 프로젝트 외부 라이브러리(jar) 등록하는 방법

 

설명

좌측에 메뉴를 클릭 할때 마다 컨텐츠 영역에 독립적으로 생성된 FXML파일을 읽어들여 화면에 출력합니다.

 

결과

 

프로젝트 다운로드

JavaFXSideNavigation.zip

0.04MB

 

프로젝트 구조

 

소스 코드

JavaFXSideNavigation.java

package com.ozxexe.sidebar;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class JavaFXSideNavigation extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {
        Parent root = FXMLLoader.load(getClass().getResource("SideBar.fxml"));
        
        Scene scene = new Scene(root);
        
        stage.setScene(scene);
        stage.show();
    }

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

 

SideBarController.java

package com.ozxexe.sidebar;

import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import java.util.logging.Level;
import java.util.logging.Logger;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Parent;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;

public class SideBarController implements Initializable {

    @FXML
    private BorderPane bp;
    @FXML
    private AnchorPane ap;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        // TODO
    }

    @FXML
    private void homeClick(MouseEvent event) {
        bp.setCenter(ap);
    }

    @FXML
    private void page01Click(MouseEvent event) {
        loadPage("page01");
    }

    @FXML
    private void page02Click(MouseEvent event) {
        loadPage("page02");
    }

    @FXML
    private void page03Click(MouseEvent event) {
        loadPage("page03");
    }

    private void loadPage(String page) {
        try {
            Parent root = FXMLLoader.load(getClass().getResource(page + ".fxml"));
            bp.setCenter(root);
        } catch (IOException ex) {
            Logger.getLogger(SideBarController.class.getName()).log(Level.SEVERE, null, ex);
        }

    }

}

 

SideBar.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>

<AnchorPane id="AnchorPane" prefHeight="400.0" prefWidth="700.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/11.0.1" fx:controller="com.ozxexe.sidebar.SideBarController">
   <children>
      <BorderPane fx:id="bp" prefHeight="400.0" prefWidth="700.0">
         <left>
            <VBox prefHeight="400.0" prefWidth="120.0" style="-fx-background-color: #0D1824;" BorderPane.alignment="CENTER">
               <children>
                  <Button mnemonicParsing="false" onMouseClicked="#homeClick" prefHeight="58.0" prefWidth="120.0" style="-fx-background-color: transparent; -fx-border-color: white; -fx-border-width: 0px 0px 2px 0px;" text="Home" textFill="WHITE">
                     <font>
                        <Font size="16.0" />
                     </font>
                  </Button>
                  <Button layoutX="10.0" layoutY="10.0" mnemonicParsing="false" onMouseClicked="#page01Click" prefHeight="58.0" prefWidth="120.0" style="-fx-background-color: transparent; -fx-border-color: white; -fx-border-width: 0px 0px 2px 0px;" text="Page 01" textFill="WHITE">
                     <font>
                        <Font size="16.0" />
                     </font>
                  </Button>
                  <Button layoutX="10.0" layoutY="68.0" mnemonicParsing="false" onMouseClicked="#page02Click" prefHeight="58.0" prefWidth="120.0" style="-fx-background-color: transparent; -fx-border-color: white; -fx-border-width: 0px 0px 2px 0px;" text="Page 02" textFill="WHITE">
                     <font>
                        <Font size="16.0" />
                     </font>
                  </Button>
                  <Button layoutX="10.0" layoutY="126.0" mnemonicParsing="false" onMouseClicked="#page03Click" prefHeight="58.0" prefWidth="120.0" style="-fx-background-color: transparent; -fx-border-color: white; -fx-border-width: 0px 0px 2px 0px;" text="Page 03" textFill="WHITE">
                     <font>
                        <Font size="16.0" />
                     </font>
                  </Button>
               </children>
            </VBox>
         </left>
         <center>
            <AnchorPane fx:id="ap" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #14242B;" BorderPane.alignment="CENTER">
               <children>
                  <Text fill="WHITE" layoutX="230.0" layoutY="211.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Home">
                     <font>
                        <Font size="45.0" />
                     </font>
                  </Text>
               </children>
            </AnchorPane>
         </center>
      </BorderPane>
   </children>
</AnchorPane>

 

page01.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>


<HBox alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" style="-fx-background-color: #14242B;" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Text fill="WHITE" strokeType="OUTSIDE" strokeWidth="0.0" text="Page01">
         <font>
            <Font size="48.0" />
         </font>
      </Text>
   </children>
</HBox>

 

page02.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>

<HBox alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" style="-fx-background-color: #14242B;" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Text fill="WHITE" strokeType="OUTSIDE" strokeWidth="0.0" text="Page02">
         <font>
            <Font size="48.0" />
         </font>
      </Text>
   </children>
</HBox>

 

page03.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>

<HBox alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" minHeight="-Infinity" minWidth="-Infinity" style="-fx-background-color: #14242B;" xmlns="http://javafx.com/javafx/11.0.1" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <Text fill="WHITE" strokeType="OUTSIDE" strokeWidth="0.0" text="Page02">
         <font>
            <Font size="48.0" />
         </font>
      </Text>
   </children>
</HBox>

 

참고사이트

• JavaFx Side Navigation Panel | Scene Builder | Netbeans IDE