하위^^

이번에는 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을 누르면 실행이 된다.

1.Scene Builder 설치 및 설정

UI를 직접 손으로 코딩하는일은 매우 번거롭고 위치 지정하기도 어렵다.

그러므로 UI를 간편하게 만들고 위치도 잡아주는 툴을 이용하여 만들것인데 SceneBuilder를 이용하여 만들것이다.

다음 사이트로 접속하면 쉽게 다운 받을 수 있는데

주의할점은 Java 8버전으로 받는것이다. 자신이 설치한 JDK 버젼에 맞추면 된다.

http://gluonhq.com/products/scene-builder/

사이트로 들어가면 위 화면이 나오는데 마우스 휠을 이용하여 아래로 내리면

Java 8버전 전용으로 나온것을 'Download'하면 된다.

설치에는 따로 어려운 부분이 없고 다음 다음만 누르면 되는데

그 중 경로 설정이 나올 경우에는 꼭 기억해두자.

default 경로는 C:\Program Files\Scene Builder이다.

2.Eclipse에 Scene Builder 적용

이클립스를 먼저 실행시키고 상단 메뉴바를 보자

상단 메뉴바의 Window - Preferences 설정을 누르고

JavaFX의 SceneBuilder executable이 비어있을 것이다.

Browse...를 눌러서 아까 Scene Builder를 설치할 때 설정한 경로를 찾아

SceneBuilder.exe를 설정해주고 Apply 버튼을 누르고 재시작 하면 적용이 끝난다.

0.Workspace 재설정

Java FX는 새로운 파트이고 여태껏 java 공부를 하느라 가득찬 workspace를 새로 만들면 프로젝트 성격별로 구분하기도 좋다.

workspace 재설정에는 두 가지 방법이 있다.

-  0-1 -

Eclipse 처음 시작시에 'Use this as the default and do not ask again'을 체크하지 않은 사용자의 경우는

경로만 새로 입력하고 Launch를 누르면 새로운 workspace가 만들어진다.

-  0-2 -

'Use this as the default and do not ask again'를 체크하였거나 이클립스 사용 도중에 workspace를 바꾸고 싶을 때

상단 메뉴바 - File - Switch Workspace

목록을 보면 위에는 최근에 사용했던 workspace가 나오고 Other라는 목록이 또 있다.

전자는 예전에 사용한 workspace를 바로 여는것이고 후자는 0-1의 사진에서 나오는 처음 시작 했을때의 박스가 나오고 새로운 경로를 입력하면 된다.

workspace를 새로 만든다면 설정도 새로 해줘야 한다.

workspace마다 설정이 별개로 등록되기 때문에 각각 설정을 따로 해주어야 한다.

설정의 경우 한번 해 놓으면 다시 안보기 때문에 기억이 안 날수도 있다.

특히 인코딩 설정(UTF-8)은 필수이므로 꼭 다시 해놓아야 한다.

http://qdgbjsdnb.tistory.com/5?category=714965

예전에 올렸었던 게시글을 참조하자.

1.JavaFX 다운로드

workspace를 새로 만들고 인코딩 설정을 끝냈다면 다음은 UI 작업을 위한 JavaFx 다운로드를 해야한다.

Eclipse 상단 메뉴바의 Help - Eclipse Marketplace... 를 클릭하면 아래 사진의 박스가 나오는데

Search 탭의 Find에 fx라고 검색하면

목록에 e(fx)clipse 3.0.0 (버젼은 바뀔수도 있다.)이 검색되는데 Install 버튼을 눌러 설치하면 된다.