결과
해당 효과를 사용하기 위해서는 AnimateFX
라이브러리가 필요합니다. 아래의 압축 파일을 다운받아 주세요. 또는 레포지토리 사이트에서 다운받아 주세요. 예제는 1.2.0
버전이지만, 최신 버전 1.2.1
으로 업로드 합니다.
프로젝트 구조
위의 프로젝트 구조처럼 Libraries에 AnimateFX-1.2.0.jar
파일이 추가되였습니다. 업로드된 프로젝트 압축파일의 lib
폴더에 해당 라이브러리 파일이 있습니다. Add JAR/Foler...
메뉴를 통하여 추가 등록하면 됩니다.
소스 코드
JavaFXAceInvoice.java
package com.ozxexe.aceinvoice;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.stage.Stage;
import javafx.stage.StageStyle;
public class JavaFXAceInvoice extends Application {
//define your offsets here
private double xOffset = 0;
private double yOffset = 0;
@Override
public void start(Stage stage) throws Exception {
Parent root = FXMLLoader.load(getClass().getResource("Login.fxml"));
Scene scene = new Scene(root);
stage.setScene(scene);
stage.initStyle(StageStyle.TRANSPARENT);
//grab your root here
root.setOnMousePressed((MouseEvent event) -> {
xOffset = event.getSceneX();
yOffset = event.getSceneY();
});
//move around here
root.setOnMouseDragged((MouseEvent event) -> {
stage.setX(event.getScreenX() - xOffset);
stage.setY(event.getScreenY() - yOffset);
});
stage.setScene(scene);
new animatefx.animation.FadeIn(root).play();
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
Login.fxml
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.Button?>
<?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.BorderPane?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.shape.Circle?>
<?import javafx.scene.text.Font?>
<AnchorPane id="AnchorPane" fx:id="archRoot" prefHeight="400.0" prefWidth="800.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/11.0.1" fx:controller="com.ozxexe.aceinvoice.LoginController">
<children>
<BorderPane prefHeight="400.0" prefWidth="800.0" style="-fx-background-color: #fff;">
<left>
<Pane prefHeight="400.0" prefWidth="400.0" styleClass="linear-grad" stylesheets="@css/fullpackstyling.css" BorderPane.alignment="CENTER">
<children>
<ImageView fitHeight="100.0" fitWidth="100.0" layoutX="150.0" layoutY="100.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@icons/icons8_invoice_100px.png" />
</image>
</ImageView>
<Label layoutX="143.0" layoutY="200.0" text="AceInvoice" textFill="#e8e8e8">
<font>
<Font size="24.0" />
</font>
</Label>
<Label layoutX="122.0" layoutY="229.0" text="Time Traking and Invoicing" textFill="#c9c9c9">
<font>
<Font size="13.0" />
</font>
</Label>
<HBox layoutX="14.0" layoutY="14.0" spacing="5.0">
<children>
<Circle fx:id="btnClose" fill="#fc5d57" onMouseClicked="#handleMouseEvent" radius="6.0" stroke="WHITE" strokeType="INSIDE" />
<Circle fill="#fdbb2d" radius="6.0" stroke="WHITE" strokeType="INSIDE" />
<Circle fill="#27c941" radius="6.0" stroke="WHITE" strokeType="INSIDE" />
</children>
</HBox>
</children>
</Pane>
</left>
<center>
<StackPane fx:id="pnlStack" prefHeight="150.0" prefWidth="200.0" BorderPane.alignment="CENTER">
<children>
<Pane fx:id="pnlSignUp" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #fff;">
<children>
<Button layoutX="203.0" layoutY="229.0" mnemonicParsing="false" prefHeight="35.0" prefWidth="120.0" styleClass="button1" stylesheets="@css/fullpackstyling.css" text="Get Started" />
<TextField layoutX="78.0" layoutY="173.0" prefHeight="35.0" prefWidth="245.0" promptText="Email" />
<Label layoutX="78.0" layoutY="136.0" text="Sign in">
<font>
<Font name="System Bold" size="18.0" />
</font>
</Label>
<ImageView fx:id="btnBack" fitHeight="30.0" fitWidth="30.0" layoutX="63.0" layoutY="35.0" onMouseClicked="#handleMouseEvent" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="@icons/icons8_back_30px.png" />
</image>
</ImageView>
</children>
</Pane>
<Pane fx:id="pnlSignIn" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: #fff;">
<children>
<TextField layoutX="76.0" layoutY="130.0" prefHeight="35.0" prefWidth="245.0" promptText="Email" />
<PasswordField layoutX="78.0" layoutY="183.0" prefHeight="35.0" prefWidth="245.0" promptText="Password" />
<Button layoutX="201.0" layoutY="238.0" mnemonicParsing="false" prefHeight="35.0" prefWidth="120.0" styleClass="button1" stylesheets="@css/fullpackstyling.css" text="Sign in" />
<Button fx:id="btnSignUp" layoutX="78.0" layoutY="288.0" mnemonicParsing="false" onAction="#handleButtonAction" opacity="0.6" prefHeight="35.0" prefWidth="245.0" styleClass="button2" stylesheets="@css/fullpackstyling.css" text="Don't have an account? Sign up" />
<Label layoutX="87.0" layoutY="249.0" text="Forgort Password?" textFill="#908b8b" />
<Label layoutX="74.0" layoutY="92.0" text="Sign in">
<font>
<Font name="System Bold" size="18.0" />
</font>
</Label>
</children>
</Pane>
</children>
</StackPane>
</center>
</BorderPane>
</children>
</AnchorPane>
LoginController.java
package com.ozxexe.aceinvoice;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.shape.Circle;
import animatefx.animation.*;
import javafx.scene.layout.AnchorPane;
public class LoginController implements Initializable {
@FXML
private Circle btnClose;
@FXML
private StackPane pnlStack;
@FXML
private Pane pnlSignUp;
@FXML
private ImageView btnBack;
@FXML
private Button btnSignUp;
@FXML
private Pane pnlSignIn;
@FXML
private AnchorPane archRoot;
@FXML
private void handleButtonAction(ActionEvent event) {
if(event.getSource().equals(btnSignUp)) {
new ZoomIn(pnlSignUp).play();
pnlSignUp.toFront();
}
}
@FXML
private void handleMouseEvent(MouseEvent event) {
if(event.getSource() == btnClose) {
new animatefx.animation.FadeOut(archRoot).play();
System.exit(0);
}
if(event.getSource().equals(btnBack)) {
new ZoomIn(pnlSignIn).play();
pnlSignIn.toFront();
}
}
@Override
public void initialize(URL url, ResourceBundle rb) {
// TODO
}
}
fullpackstyling.css
.button1
{
-fx-background-color : #6F4CBB;
-fx-text-fill : #FFFFFF;
}
.button1:hover
{
-fx-text-fill : #432FA0;
}
.button1:pressed
{
-fx-background-color : #2F2B43 ;
-fx-background-radius : 30 0 0 30;
}
.button2
{
-fx-background-color : #D5CBEB;
-fx-background-radius : 5;
-fx-text-fill : #371897;
-fx-border-color : #6F4CBB;
-fx-border-radius : 5;
}
.button2:hover
{
-fx-background-color : #524A7B ;
}
.button2:pressed
{
-fx-background-color : #2F2B43 ;
}
.linear-grad
{
-fx-background-color: linear-gradient(to bottom left, #6F4CBB, #432FA0);
}
프로젝트 다운로드
참고 사이트
avafx ui 2019 - aceinvoice login and sign up ui
'Java | JavaFX' 카테고리의 다른 글
JavaFX 폰트 적용하기 (0) | 2019.12.25 |
---|---|
JavaFX 애플리케이션(프로그램) 아이콘 설정하기 (0) | 2019.12.25 |
넷빈즈 프로젝트 외부 라이브러리(jar) 등록하는 방법 (0) | 2019.12.25 |
JavaFX 스플래쉬 및 네비게이션 메뉴 구현하기 예제(drawer) (0) | 2019.12.25 |
JavaFX 대쉬보드 디자인 예제 (0) | 2019.12.23 |