하위^^

이번에는 http://qdgbjsdnb.tistory.com/52 게시글을 따라서 프로젝트를 생성하자.

Java FX부터는 프로젝트 하나에 프로그램 하나라고 생각하고 프로젝트를 하나씩 생성해준다.

프로젝트가 생성됫다면 먼저 Main클래스의 BorderPane root = (BorderPane)FXMLLoader.load(getClass().getResource("main.fxml")); 라인을

지우거나 주석처리 하고 Parent root = FXMLLoader.load(getClass().getResource("main.fxml")); 를 써준다.

boderpan은 사용하지 않는다. 그리고 나서 파일들중 .fxml 파일을 오른쪽 클릭하고 Scene Builder로 열어준다.

먼저 아까 코드에서 지운 BorderPane이 화면에 떠있는데 화면 왼쪽 아래에 Hierarchy에서 클릭하고 Delete를 눌러서 삭제하자.

그리고 AnchorPane을 좌측의 상단의 노드 Library에 검색하여 드래그 앤 드롭, 클릭해서 끌어다가 놔주자

※ Border Pane은 단순 배치를 하는 pane, AnchorPane은 단순 배치도 가능하고 창의 비율에 맞게 자동 조정되게끔 설정 가능

그리고 나서 등록된 AnchorPane을 클릭하면 우측에 Properties, Layout, code를 설정할 수 있는데 (항목을 클릭하면 펴지고 접혀짐)

Layout에서 Pref Width, Pref Height 항목을 300으로 설정하면 크기가 조절이 된다.

더 크게, 작게해도 상관은 없다.

다음으로는 좌측 상단의 Library 검색에 Label과 Button을 추가 할 수 있다.

Label과 Button은 우측 Layout에서 숫자를 입력할 수 있는 정사각 도형으로 바탕에서 차지하는 비율을 설정 할 수 있다.

크기를 AnchorPane처럼 설정하면 크기가 변하지 않지만

정사각 도형을 통해서 바꾼다면 창의 크기에 따라서 노드의 크기가 변한다.

전부 올렸다면 Ctrl + P 를 눌러서 확인해보자.

마지막으로 java 파일과 연결하기 위해 연결할 이름을 설정하는것으로 화면 왼쪽 하단에 Hierarchy, Controller 중 Controller을 눌러

Controller class에 단추에서 원하는 [패키지명].[Controller클래스] 골라서 선택한다.

그리고 나서 꼭 저장 (Ctrl + S)을 해야한다. 저장을 안해서 오류가 자주 발생한다.

이렇게 디자인과 설정은 끝난다.

처음이라서 장황하게 설명했지만 다음부터는 결과만 봐도 바로바로 만들 수 있을것이다.

다음으로는 우측 리스트의 Code 부분의 설정이다.

Label을 누르고 code 부분에서 fx:id에 msgLabel을 입력한다.

Code 부분에 입력하는것은 java 파일로 기능이나 변수 선언시에 노드들을 구분하기 위해서 설정하는 것으로 철자하나 틀리면 인식을 

못하니 오타에 특히 주의를 두어야 한다.

다음은 버튼에 기능을 부여하기 위한 작업이다.

On Action에 이름을 부여하고 저장을 하면 된다.

정리하면 fx:id에 부여한 이름으로 변수 선언하고 On XXXXX에 부여한 이름으로 메소드를 선언한다.

package app;

import java.net.URL;
import java.util.ResourceBundle;

import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.Label;

public class MainController implements Initializable{ // 시작하는 인터페이스
	int i = 0;
	
	// fx:id와 변수명이 일치해야 알아먹기 때문에 주의, 어노테이션 @FXML을 써주어 FXML 노드임을 명시
	@FXML
	private Label msgLabel;
	
	
	// FXML 로드 완료시 제일 먼저 실행되는 메소드 (생성자 느낌)
	@Override
	public void initialize(URL location, ResourceBundle resources) { // implement의 생성자 오버라이딩
		System.out.println("FXML Load Complete"); // java 코드까지 무사히 로드 되었는지 확인
	}
	
	// OnAction과 연결되는 메소드, OnAction Id와 맞춰주자
	public void printMsg() {
		i++;
		msgLabel.setText("버튼 클릭!! " + i + "번");
		System.out.println("버튼 클릭!..!");
	}
	
}

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

1.JavaFX 프로젝트 생성

먼저 사진을 보자

자바 프로젝트와 똑같이 Project를 눌러 리스트를 불러오자

JavaFX Project를 누르고 Next>를 누르자.

프로젝트 명을 입력하고 Next>

이 화면에선 아무것도 건드리지 말고 Next>

Application type : Desktop / Mobile 지금은 Pc환경으로 만들것이므로 Desktop 설정

Package Name : Java 프로젝트에서 만들던 Package와 동일한 개념

Language : NONE, FXML 등이 있는데 우리가 사용할 언어는 FXML

Root-Type : UI에 사용할 Pane을 말함

FileName : Scene Builder , UI 파일의 이름

Controller Name : UI의 노드(버튼, 라벨, 라디오 버튼 등 인자)들의 기능을 구현 할 자바파일

마음에 드는대로 설정을 하고 Finish를 눌러 마무리 하면 된다.

2.Scene Builder 실행

위에서 설정한 FileName 파일을 src에서 찾아 오른쪽 클릭을 하고

Open with SceneBuilder을 누르면 실행이 된다.