개발 환경 설정
- JavaFX 개발 환경 설정(넷빈즈 8.2, 오라클 JDK 1.8, Scene Builder)
- Scene Builder에 라이브러리 추가 하는 방법(JFoeniX, FontAwesomeFX)
- 넷빈즈 프로젝트 외부 라이브러리(jar) 등록하는 방법
설명
서로 겹쳐진 Pane 를 버튼을 누를때마다, 특정 Pane를 최상위로 올려서 화면전환 효과를 주는 예제 입니다.
결과
프로젝트 다운로드
프로젝트 구조
소스 코드
JavaFXAppIntelUI.java
package com.ozxexe.intelui;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;
public class JavaFXAppIntelUI extends Application {
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("FXMLDocument.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
FXMLDocumentController.java
package com.ozxexe.intelui;
import com.jfoenix.controls.JFXButton;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.layout.Pane;
public class FXMLDocumentController implements Initializable {
@FXML
private JFXButton btn_all;
@FXML
private JFXButton btn_xeon;
@FXML
private JFXButton btn_core;
@FXML
private JFXButton btn_atom;
@FXML
private Pane pnl_xeon;
@FXML
private Pane pnl_core;
@FXML
private Pane pnl_atom;
@FXML
private Pane pnl_all;
@FXML
private void handleButtonAction(ActionEvent event) {
if (event.getSource() == btn_all) {
pnl_all.toFront();
} else if (event.getSource() == btn_xeon) {
pnl_xeon.toFront();
} else if (event.getSource() == btn_core) {
pnl_core.toFront();
} else if (event.getSource() == btn_atom) {
pnl_atom.toFront();
}
}
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
}
FXMLDocument.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import de.jensd.fx.glyphs.fontawesome.FontAwesomeIconView?>
<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.Pane?>
<AnchorPane id="AnchorPane" prefHeight="430.0" prefWidth="700.0" style="-fx-background-color: #fff;" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/11.0.1" fx:controller="com.ozxexe.intelui.FXMLDocumentController">
<children>
<AnchorPane prefHeight="430.0" prefWidth="200.0" style="-fx-background-color: #F0F7ff;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<AnchorPane prefHeight="430.0" prefWidth="40.0" style="-fx-background-color: #fff;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.topAnchor="0.0">
<effect>
<DropShadow />
</effect>
</AnchorPane>
<JFXButton fx:id="btn_all" alignment="CENTER" graphicTextGap="35.0" layoutY="74.0" nodeOrientation="LEFT_TO_RIGHT" onAction="#handleButtonAction" prefHeight="45.0" prefWidth="200.0" text="All Processors" />
<JFXButton fx:id="btn_xeon" alignment="CENTER" graphicTextGap="35.0" layoutY="216.0" nodeOrientation="LEFT_TO_RIGHT" onAction="#handleButtonAction" prefHeight="45.0" prefWidth="200.0" text="Intel Xeon" />
<JFXButton fx:id="btn_core" alignment="CENTER" graphicTextGap="35.0" layoutY="130.0" nodeOrientation="LEFT_TO_RIGHT" onAction="#handleButtonAction" prefHeight="45.0" prefWidth="200.0" text="Intel Core" />
<JFXButton fx:id="btn_atom" alignment="CENTER" graphicTextGap="35.0" layoutY="175.0" nodeOrientation="LEFT_TO_RIGHT" onAction="#handleButtonAction" prefHeight="45.0" prefWidth="200.0" text="Intel Atom" />
<FontAwesomeIconView layoutX="11.0" layoutY="100.0" size="15" />
<FontAwesomeIconView layoutX="11.0" layoutY="156.0" size="15" />
<FontAwesomeIconView layoutX="11.0" layoutY="201.0" size="15" />
<FontAwesomeIconView layoutX="11.0" layoutY="242.0" size="15" />
</children>
<effect>
<DropShadow />
</effect>
</AnchorPane>
<AnchorPane layoutX="200.0" prefHeight="430.0" prefWidth="500.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="200.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
<children>
<FontAwesomeIconView glyphName="CLOSE" layoutX="480.0" layoutY="18.0" size="15" />
<Pane fx:id="pnl_xeon" prefHeight="430.0" prefWidth="500.0" style="-fx-background-color: #23CE6B;" AnchorPane.bottomAnchor="3.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="0.0" />
<Pane fx:id="pnl_core" prefHeight="430.0" prefWidth="500.0" style="-fx-background-color: #272D2D;" AnchorPane.bottomAnchor="3.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="0.0" />
<Pane fx:id="pnl_atom" prefHeight="430.0" prefWidth="500.0" style="-fx-background-color: #0055B9;" AnchorPane.bottomAnchor="3.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="0.0" />
<Pane fx:id="pnl_all" layoutX="-1.0" prefHeight="430.0" prefWidth="500.0" style="-fx-background-color: #FFF;" AnchorPane.bottomAnchor="3.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="1.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>
</children>
</AnchorPane>
참고사이트
'Java | JavaFX' 카테고리의 다른 글
JavaFX 위치 네비게이션(BreadCrumbBar) 구현하기 예제 (0) | 2020.01.02 |
---|---|
JavaFX 네비게이션 메뉴 클릭할때 마다 컨텐츠(*.fxml) 페이지 불러오기 예제 (0) | 2019.12.28 |
JavaFX 페이스북 디자인의 로그인(TimeLine를 활용한 화면 전환 애니메이션) (0) | 2019.12.27 |
JavaFX 윈도우(stage) 드래그 창 이동 및 최대화, 최소화, 닫기 기능 구현 예제 (0) | 2019.12.27 |
JavaFX AnimateFX 데모 예제 (0) | 2019.12.26 |