JavaFX 웹 스타일 네이게이션 메뉴 예제(TranslateTransition)

개발 환경 설정

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

 

TranslateTransition 클래스를 이용하여 네비게이션 메뉴를 구현한 예제입니다.

 

결과

 

프로젝트 구조

프로젝트 다운로드

JavaFXNavbarSlideLikeWeb.zip

3.07MB

 

소스 코드

JavaFXNavbarSlideLikeWeb.java

package com.ozxexe.navbarslidelikeweb;

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

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

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

 

FXMLDocumentController.java

package com.ozxexe.navbarslidelikeweb;

import com.jfoenix.controls.JFXButton;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.animation.TranslateTransition;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.util.Duration;

public class FXMLDocumentController implements Initializable {

    @FXML
    private AnchorPane paneslide;
    @FXML
    private JFXButton btnShowSlide;
    @FXML
    private JFXButton btnHideSlide;

    @Override
    public void initialize(URL url, ResourceBundle rb) {
        paneslide.setTranslateX(-140);
        btnShowSlide.setVisible(true);
        btnHideSlide.setVisible(false);
    }

    @FXML
    private void showSlide(MouseEvent event) {
        TranslateTransition slide = new TranslateTransition();
        slide.setDuration(Duration.seconds(0.4));
        slide.setNode(paneslide);

        slide.setToX(0);
        slide.play();

        paneslide.setTranslateX(-140);

        slide.setOnFinished((ActionEvent e) -> {
            btnShowSlide.setVisible(false);
            btnHideSlide.setVisible(true);
        });
    }

    @FXML
    private void hideSlide(MouseEvent event) {
        TranslateTransition slide = new TranslateTransition();
        slide.setDuration(Duration.seconds(0.4));
        slide.setNode(paneslide);

        slide.setToX(-140);
        slide.play();

        paneslide.setTranslateX(0);

        slide.setOnFinished((ActionEvent e) -> {
            btnShowSlide.setVisible(true);
            btnHideSlide.setVisible(false);
        });
    }

}

 

FXMLDocument.fxml

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

<?import com.jfoenix.controls.JFXButton?>
<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.Pane?>

<AnchorPane id="AnchorPane" prefHeight="450.0" prefWidth="700.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/11.0.1" fx:controller="com.ozxexe.navbarslidelikeweb.FXMLDocumentController">
   <children>
      <BorderPane prefHeight="450.0" prefWidth="700.0">
         <left>
            <AnchorPane fx:id="paneslide" prefHeight="400.0" prefWidth="140.0" style="-fx-background-color: yellow;" BorderPane.alignment="CENTER" />
         </left>
         <top>
            <AnchorPane prefHeight="50.0" prefWidth="700.0" BorderPane.alignment="CENTER">
               <children>
                  <JFXButton fx:id="btnShowSlide" alignment="CENTER" contentDisplay="CENTER" layoutX="8.0" layoutY="14.0" onMouseClicked="#showSlide" prefHeight="23.0" prefWidth="23.0">
                     <graphic>
                        <FontAwesomeIconView glyphName="BARS" size="15.0" />
                     </graphic>
                  </JFXButton>
                  <JFXButton layoutX="199.0" layoutY="14.0" styleClass="btnDashboard" stylesheets="@style.css" text="DASHBOARD">
                     <graphic>
                        <FontAwesomeIconView glyphName="DASHBOARD" size="15.0" />
                     </graphic>
                  </JFXButton>
                  <JFXButton layoutX="309.0" layoutY="14.0" styleClass="btnPayment" stylesheets="@style.css" text="PAYMENT">
                     <graphic>
                        <FontAwesomeIconView glyphName="DOLLAR" size="15.0" />
                     </graphic>
                  </JFXButton>
                  <JFXButton layoutX="405.0" layoutY="14.0" styleClass="btnMessage" stylesheets="@style.css" text="MESSAGE">
                     <graphic>
                        <FontAwesomeIconView glyphName="ENVELOPE_ALT" size="15.0" />
                     </graphic>
                  </JFXButton>
                  <JFXButton fx:id="btnHideSlide" alignment="CENTER" contentDisplay="CENTER" layoutX="8.0" layoutY="14.0" onMouseClicked="#hideSlide" prefHeight="23.0" prefWidth="23.0">
                     <graphic>
                        <FontAwesomeIconView glyphName="CHEVRON_LEFT" size="15.0" />
                     </graphic>
                  </JFXButton>
               </children>
            </AnchorPane>
         </top>
         <center>
            <Pane BorderPane.alignment="CENTER" />
         </center>
      </BorderPane>
   </children>
</AnchorPane>

 

style.css

.btnDashboard:hover{
    -fx-border-color: #990099;
    -fx-border-width: 0px 0px 3px 0px;
}
.btnPayment:hover{
    -fx-border-color: #009966;
    -fx-border-width: 0px 0px 3px 0px;
}
.btnMessage:hover{
    -fx-border-color: #cc0033;
    -fx-border-width: 0px 0px 3px 0px;
}

 

참고사이트

JavaFx Navbar Slide Simple Like Web