[JAVA FX]00-03.Scene Builder를 사용하지 않은 Java Fx

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를 배워보자