개발 환경 설정
- JavaFX 개발 환경 설정(넷빈즈 8.2, 오라클 JDK 1.8, Scene Builder)
- Scene Builder에 라이브러리 추가 하는 방법(JFoeniX, FontAwesomeFX)
- 넷빈즈 프로젝트 외부 라이브러리(jar) 등록하는 방법
설명
페이스북 디자인의 로그인 및 회원가입 디자인입니다. 각각의 화면을 독립적으로 FXML파일로 생성하고, 화면전환을 할때마다 TimeLine으로 애니메이션 효과를 주었습니다.
결과
프로젝트 다운로드
프로젝트 구조
소스 코드
Launcher.java
package com.ozxexe.facebook.main;
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 Launch extends Application {
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("/com/ozxexe/facebook/views/Start.fxml"));
Scene scene = new Scene(root);
stage.initStyle(StageStyle.UTILITY);
stage.setScene(scene);
stage.setTitle("Facebook");
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
LoginController.java
package com.ozxexe.facebook.controllers;
import com.jfoenix.controls.JFXButton;
import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.StackPane;
import javafx.util.Duration;
public class LoginController implements Initializable {
@FXML
private AnchorPane container;
@FXML
private JFXButton loginButton;
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
@FXML
private void open_registration_form(MouseEvent event) throws IOException {
Parent root = FXMLLoader.load(getClass().getResource("/com/ozxexe/facebook/views/Register.fxml"));
Scene scene = loginButton.getScene();
root.translateXProperty().set(scene.getWidth());
StackPane parentContainer = (StackPane) scene.getRoot();
parentContainer.getChildren().add(root);
Timeline timeline = new Timeline();
KeyValue kv = new KeyValue(root.translateXProperty(), 0, Interpolator.EASE_IN);
KeyFrame kf = new KeyFrame(Duration.seconds(1), kv);
timeline.getKeyFrames().add(kf);
timeline.setOnFinished(event1 -> {
parentContainer.getChildren().remove(container);
});
timeline.play();
}
}
RegisterController.java
package com.ozxexe.facebook.controllers;
import com.jfoenix.controls.JFXButton;
import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.StackPane;
import javafx.util.Duration;
public class RegisterController implements Initializable {
@FXML
private AnchorPane container;
@FXML
private JFXButton createAccountButton;
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
@FXML
private void open_login_form(MouseEvent event) throws IOException {
Parent root = FXMLLoader.load(getClass().getResource("/com/ozxexe/facebook/views/Login.fxml"));
Scene scene = createAccountButton.getScene();
root.translateYProperty().set(scene.getHeight());
StackPane parentContainer = (StackPane) scene.getRoot();
parentContainer.getChildren().add(root);
Timeline timeline = new Timeline();
KeyValue kv = new KeyValue(root.translateYProperty(), 0, Interpolator.EASE_IN);
KeyFrame kf = new KeyFrame(Duration.seconds(1), kv);
timeline.getKeyFrames().add(kf);
timeline.setOnFinished(event1 -> {
parentContainer.getChildren().remove(container);
});
timeline.play();
}
}
StartController.java
package com.ozxexe.facebook.controllers;
import com.jfoenix.controls.JFXButton;
import java.io.IOException;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.animation.Interpolator;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.fxml.Initializable;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.StackPane;
import javafx.util.Duration;
public class StartController implements Initializable {
@FXML
private StackPane parentContainer;
@FXML
private AnchorPane container;
@FXML
private JFXButton getStartedButton;
@Override
public void initialize(URL url, ResourceBundle rb) {
}
@FXML
private void open_login(ActionEvent event) throws IOException {
Parent root = FXMLLoader.load(getClass().getResource("/com/ozxexe/facebook/views/Login.fxml"));
Scene scene = getStartedButton.getScene();
root.translateYProperty().set(scene.getHeight());
parentContainer.getChildren().add(root);
Timeline timeline = new Timeline();
KeyValue kv = new KeyValue(root.translateYProperty(), 0, Interpolator.EASE_IN);
KeyFrame kf = new KeyFrame(Duration.seconds(1), kv);
timeline.getKeyFrames().add(kf);
timeline.setOnFinished(event1 -> {
parentContainer.getChildren().remove(container);
});
timeline.play();
}
}
Login.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.effect.DropShadow?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Font?>
<AnchorPane id="AnchorPane" fx:id="container" prefHeight="545.0" prefWidth="780.0" styleClass="white-bg" stylesheets="@../css/Stylesheet.css" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.ozxexe.facebook.controllers.LoginController">
<children>
<ImageView fitHeight="70.0" fitWidth="70.0" layoutX="354.0" layoutY="135.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../images/icons8_facebook_96px.png" />
</image>
</ImageView>
<TextField layoutX="239.0" layoutY="226.0" prefHeight="35.0" prefWidth="300.0" promptText="Enter Email" styleClass="text-field">
<font>
<Font name="Arial" size="14.0" />
</font>
<effect>
<DropShadow blurType="ONE_PASS_BOX" color="#c6c0c0" height="14.83" radius="8.4575" />
</effect>
</TextField>
<PasswordField layoutX="239.0" layoutY="272.0" prefHeight="35.0" prefWidth="300.0" promptText="Enter Password">
<font>
<Font name="Arial" size="14.0" />
</font>
<effect>
<DropShadow blurType="ONE_PASS_BOX" color="#c6c0c0" height="14.83" radius="8.4575" />
</effect>
</PasswordField>
<JFXButton fx:id="loginButton" buttonType="RAISED" layoutX="239.0" layoutY="319.0" prefHeight="35.0" prefWidth="300.0" ripplerFill="#0090ff" styleClass="loginButton" text="Login">
<font>
<Font name="Arial Black" size="12.0" />
</font>
</JFXButton>
<Label layoutX="432.0" layoutY="366.0" text="Foroget Password?" textFill="#646464">
<font>
<Font name="System Bold" size="12.0" />
</font>
</Label>
<HBox layoutX="310.0" layoutY="394.0">
<children>
<Label text="Don't have an account?" textFill="#646464">
<font>
<Font name="System Bold" size="12.0" />
</font>
</Label>
<Label onMouseClicked="#open_registration_form" text="Create Account" textFill="#4747f5">
<font>
<Font name="System Bold" size="12.0" />
</font>
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Label>
</children>
</HBox>
</children>
</AnchorPane>
Register.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import com.jfoenix.controls.JFXCheckBox?>
<?import javafx.geometry.Insets?>
<?import javafx.scene.control.DatePicker?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.control.PasswordField?>
<?import javafx.scene.control.TextField?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.text.Font?>
<AnchorPane id="AnchorPane" fx:id="container" prefHeight="545.0" prefWidth="780.0" styleClass="blue-bg" stylesheets="@../css/Stylesheet.css" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8.0.171" fx:controller="com.ozxexe.facebook.controllers.RegisterController">
<children>
<ImageView fitHeight="62.0" fitWidth="64.0" layoutX="357.0" layoutY="34.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../images/icons8_facebook_filled_100px_1.png" />
</image>
</ImageView>
<TextField layoutX="238.0" layoutY="131.0" prefHeight="35.0" prefWidth="300.0" promptText="Full Name">
<font>
<Font name="Arial" size="14.0" />
</font>
</TextField>
<TextField layoutX="238.0" layoutY="176.0" prefHeight="35.0" prefWidth="300.0" promptText="Email">
<font>
<Font name="Arial" size="14.0" />
</font>
</TextField>
<DatePicker layoutX="238.0" layoutY="221.0" prefHeight="35.0" prefWidth="300.0" promptText="Date Of Bith" style="-fx-background-color: transparent;" />
<PasswordField layoutX="238.0" layoutY="266.0" prefHeight="35.0" prefWidth="300.0" promptText="Password">
<font>
<Font size="14.0" />
</font>
</PasswordField>
<PasswordField layoutX="238.0" layoutY="311.0" prefHeight="35.0" prefWidth="300.0" promptText="Confirm Password">
<font>
<Font size="14.0" />
</font>
</PasswordField>
<JFXCheckBox layoutX="238.0" layoutY="376.0" prefWidth="270.0" text="I have read and agree to terms and conditions and privacy policy." textFill="WHITE" unCheckedColor="WHITE" wrapText="true">
<font>
<Font name="Arial" size="14.0" />
</font>
</JFXCheckBox>
<JFXButton fx:id="createAccountButton" buttonType="RAISED" layoutX="238.0" layoutY="425.0" prefHeight="35.0" prefWidth="300.0" ripplerFill="WHITE" style="-fx-background-color: #159F5C;" text="Create Account" textFill="WHITE">
<font>
<Font name="Arial Bold" size="12.0" />
</font>
</JFXButton>
<HBox layoutX="274.0" layoutY="499.0">
<children>
<Label text="Already have an account" textFill="WHITE">
<font>
<Font name="System Bold" size="12.0" />
</font>
</Label>
<Label onMouseClicked="#open_login_form" text="Login" textFill="WHITE">
<font>
<Font name="System Bold" size="12.0" />
</font>
<HBox.margin>
<Insets left="10.0" />
</HBox.margin>
</Label>
</children>
</HBox>
</children>
</AnchorPane>
Start.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import com.jfoenix.controls.JFXButton?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.text.Font?>
<StackPane fx:id="parentContainer" xmlns="http://javafx.com/javafx/8.0.171" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.ozxexe.facebook.controllers.StartController">
<children>
<AnchorPane id="AnchorPane" fx:id="container" prefHeight="540.0" prefWidth="780.0" styleClass="blue-bg" stylesheets="@../css/Stylesheet.css">
<children>
<ImageView fitHeight="61.0" fitWidth="60.0" layoutX="360.0" layoutY="188.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@../images/icons8_facebook_filled_100px_1.png" />
</image>
</ImageView>
<JFXButton fx:id="getStartedButton" buttonType="RAISED" layoutX="339.0" layoutY="323.0" onAction="#open_login" prefHeight="30.0" ripplerFill="WHITE" styleClass="get-started-btn" text="GET STARTED" textFill="WHITE">
<font>
<Font name="Arial Bold" size="12.0" />
</font>
</JFXButton>
</children>
</AnchorPane>
</children>
</StackPane>
참고사이트
'Java | JavaFX' 카테고리의 다른 글
JavaFX 메뉴(버튼) 클릭 마다, 겹쳐진 Pane 최상위로 올리기(정렬하기) 예제 (0) | 2019.12.30 |
---|---|
JavaFX 네비게이션 메뉴 클릭할때 마다 컨텐츠(*.fxml) 페이지 불러오기 예제 (0) | 2019.12.28 |
JavaFX 윈도우(stage) 드래그 창 이동 및 최대화, 최소화, 닫기 기능 구현 예제 (0) | 2019.12.27 |
JavaFX AnimateFX 데모 예제 (0) | 2019.12.26 |
JavaFX 제목표시줄(타이틀바) 없애는 방법 예제 (0) | 2019.12.26 |