Java Fx 작성시 UI가 핵심인데 UI 정보를 손으로 직접 입력하고 생각 하는것은 정말 어려운 일이다.
그러기 위해서 Scene Builder를 사용하여 디자인 하는것인데
그 전에 UI가 어떠한 느낌으로 작성되는지 알아보기 위해 한번 사용하지 않고 작성해보자
먼저 프로젝트를 만들 때 project name을 설정하고 바로 finish를 눌러서 생성하자
http://qdgbjsdnb.tistory.com/52 게시글의 3번째까지만 진행하면 된다.
프로젝트가 생성이 되면 src폴더가 생성이 되는데 그 안의 패키지와 java파일 css파일 중에서 java 파일만 사용한다.
생성하면 Main에 기본 틀이 만들어져 있는데 아래 예제의 주석문을 통해 설명한다.
package application;
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
// 컨트롤 -> 레이아웃 -> 씬으로 촬영 -> 특수효과 -> 제목 -> 상영
// 자신을 -> 셀카구도 -> 촬영 -> 포토샵 -> 제목 -> SNS 게시
try {
// 먼저 바닥이 될 판을 선언
// 빈 판자 레이아웃
BorderPane root = new BorderPane();
// 촬영(구도, 크기), 작업 할 공간을 판에 넣고 크기 설정
Scene scene = new Scene(root,400,400);
// 특수효과 또는 포토샵, css파일은 그래픽 작업이나 특수 기능을 넣는데 따로 다루지 않을 계획
scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
// 제목 + 업로드(홍보), stage의 제목을 설정하고 scene을 올림.
primaryStage.setTitle("Hello JavaFX");
primaryStage.setScene(scene);
// 상영하기, scene이 시작된다.
primaryStage.show();
} catch(Exception e) {
e.printStackTrace();
}
}
public static void main(String[] args) {
launch(args);
}
}
위의 코드를 실행시키면 java 프로그램이 하나 실행되고 그 제목은 Hello JavaFX일 것이다.
java fx의 기본 틀은 이러한 느낌으로 구성이 된다.
다음으로는 버튼을 하나 만들어보자
package application;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
// 자신을 - 구도 및 촬영 - 뽀샵 - 게시
// 1. 컨트롤, 버튼을 생성하여
Button btn = new Button(); // 버튼에 띄울 메세지는 클릭이며
btn.setText("클릭");
// 버튼에 이벤트 추가, 버튼을 눌렀을때 작동하는 함수는 이러하다.
btn.setOnAction(new EventHandler<ActionEvent>() {
int i = 0;
@Override
public void handle(ActionEvent event) {
System.out.println("Hello javaFX");
i++;
btn.setText(i + "번");
}
});
// 2. 레이아웃 + 컨트롤
StackPane root = new StackPane();
root.getChildren().add(btn); // 버튼을 판에 올려준다.
// 3. 씬
Scene sc = new Scene(root, 300, 200);
// 4. 특수효과(생략)
// 5. 제목(stage)
primaryStage.setTitle("버튼 테스트");
// 6. 상영(stage)
primaryStage.setScene(sc);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
다음으로는 라벨과 텍스트필드 등을 이용하여 로그인 화면을 구현해보자
package application;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.stage.Stage;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextField;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
public class Main extends Application {
@Override
public void start(Stage primaryStage) {
// Control
// 제목
Text txt = new Text("로그인");
txt.setFont(Font.font(20));
// 라벨과 텍스트 입력 필드
Label userId = new Label("ID : ");
TextField inputId = new TextField();
// 라벨과 비밀번호 입력 필드
Label userPw = new Label("PW : ");
PasswordField inputPw = new PasswordField();
// 버튼 추가
Button btn = new Button("log in");
HBox hbBtn = new HBox(10);
hbBtn.setAlignment(Pos.BOTTOM_RIGHT);
hbBtn.getChildren().add(btn);
// 경고 메세지가 나올 위치
Text actionTarget = new Text();
// 버튼에 이벤트 추가
btn.setOnAction(new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent arg0) {
actionTarget.setFill(Color.RED);
actionTarget.setText("회원 가입 해 주세요.");
}
});
// 2. layout
GridPane grid = new GridPane();
grid.setAlignment(Pos.CENTER);
grid.setHgap(10);
grid.setVgap(10);
grid.setPadding(new Insets(25,25,25,25));
grid.add(txt, 0, 0, 2, 1); // cols, rows, colspan, rowspan
grid.add(userId, 0, 1);
grid.add(inputId, 1, 1);
grid.add(userPw, 0, 2);
grid.add(inputPw, 1, 2);
// 6. 버튼을 레이아웃에 추가
grid.add(hbBtn, 1, 3);
grid.add(actionTarget, 1, 4);
// 3. scene
Scene scene = new Scene(grid, 300, 275);
primaryStage.setTitle("로그인 화면");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
위와 같이 정말 간단한 ui이지만 써야할게 정말 많다.
일반적인 프로그램에 있는 ui를 생각해보자.
ui만 만드는데 꼬박 3일은 걸릴것만 같다.
그래서 이제부터 사용하게될 Scene Builder를 배워보자
'JavaFX > 00.Scene Builder 설치 등 기타 설정, 사용법' 카테고리의 다른 글
| [JAVA FX]00-02.JavaFX 프로젝트 생성 및 SceneBuilder 실행 (0) | 2018.09.07 |
|---|---|
| [JAVA FX]00-01.Ui 디자인을 위한 Scene Builder 설치 및 설정 (0) | 2018.09.07 |
| [JAVA FX]00-00.Workspace 재설정, JavaFx 다운로드 (0) | 2018.09.07 |
