하위^^

전과 같이 먼저 Main.java

Parent root = FXMLLoader.load(getClass().getResource("main.fxml"));

primaryStage.setTitle("ListView Example");

추가 수정하고 

fxml파일을 열자.

이번에는 BorderPane을 사용하는데 기본 BorderPane을 좌측 아래에서 선택해 delete를 눌러 지워주고 다시 리스트에서

BorderPane을 검색하여 추가하자

BorderPane은 영역을 Top Left Right Center Bottom으로 나뉜다.

탑에는 Label, 센터에는 ListView, 바텀에는 ComboBox를 추가하자

Label : Properties : Text - SELECT, Font - 34px, Node Alignment - CENTER(Text Alignment가 아니고 아래의 Node)

          Code fx:id - msg

ListView : fx:id - listView

Prompt Text : Properties : Text - --선택하세요--

                   Code : fx:id - combo, On Action : choose

이번에는 리스트를 초기화 하고 콤보박스에서 선택한 것을 리스트에 추가해본다.

그리고 Controller class 설정을 잊지말자

Observable이란 리스트를 사용한다. 거의 ArrayList랑 비슷한 기능을 가지고 있다.

package app;

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

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ComboBox;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.SelectionMode;

public class MainController implements Initializable {
	@FXML private Label msg;
	@FXML private ListView listView;
	@FXML private ComboBox combo;
	
	@Override
	public void initialize(URL location, ResourceBundle resources) {
		System.out.println("FXML Load Complete");
		// 콤보 박스
		ObservableListitem = FXCollections.observableArrayList("a", "b", "c");
		combo.setItems(item);
		// 리스트 뷰
		item = FXCollections.observableArrayList();
		item.add("Java FX 8");
		item.add("Java FX 9");
		item.add("AWT");
		item.add("SWING");
		item.add("GWT");
		item.add("FRONT-END");
		listView.setItems(item);
		// 리스트 여러개 선택할 수 있게 활성화
		listView.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
//		listView.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
	}
	
	// 콤보박스에 선택한 내용을 msg Label에 표현
	ObservableList list = FXCollections.observableArrayList(); // 전역 변수로 선언한다면
																					  // 기존의 리스트 자리를 유지하고 값이 추가됨
	public void choose() {
//		msg.setText(combo.getValue());
		// 콤보박스에 선택한 내용을 listView에 추가
		list.add(combo.getValue());
		listView.setItems(list);
	}
	
	public void selected() {
//		String item = listView.getSelectionModel().getSelectedItem();
//		System.out.println(item);
		
		// 복수, multi select 구현
		ObservableList list = listView.getSelectionModel().getSelectedItems();
		for(String selecteditem : list) {
			System.out.println(selecteditem);
		}
		// 원래는 복수 선택시 별도 버튼 필요
	}
}
//

저번과 똑같이 Parent root = FXMLLoader.load(getClass().getResource("main.fxml"));로 변경하고

primaryStage.setTitle("Input Controls");과 같이 임의의 이름을 설정하고 난 뒤

gridpane은 행과 Pane을 행과 열로 구분하여 영역을 배분하는 판이다.

ComboBox는 아래의 공개여부 항목의 단추를 눌러 선택하는 노드이다.

이번에는 Label은 바꿀 필요가 없으므로 따로 설정은 이름말고는 없다.

그리고 좌측 하단에 보면 (X, X)식으로 행과 열의 위치가 알맞게 쓰여있음을 확인 할 수 있다.

margin 바깥 여백, padding 안 여백 두가지를 사용하면 TextField같이 우측에 조금 튀어나온 부분을 수정할 수 있다.

TextField(한 줄), fx:id : title

PasswordField, fx:id : pass

ComboBox, fx:id : comboList

DatePicker, fx:id : endDate

TextArea(여러 줄), fx:id : note

Button(저장), OnAction : save

마지막으로 Controller의 Controller class를 잊지말자

다음은 코드이다.

package app;

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

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.control.ComboBox;
import javafx.scene.control.DatePicker;
import javafx.scene.control.PasswordField;
import javafx.scene.control.TextArea;
import javafx.scene.control.TextField;

// FXML 파일(main.fxml)이 대문자가 아닌것은 class파일이 아니기때문
public class MainController implements Initializable{
	@FXML private ComboBox comboList;
	@FXML private TextField title;
	@FXML private PasswordField pass;
	@FXML private DatePicker endDate;
	@FXML private TextArea note;
	
	@Override // 거의 생성자와 비슷하다고 생각하면 된다.
	public void initialize(URL location, ResourceBundle resources) {
		System.out.println("FXML Load Complete");
		// 콤보 박스에 값 추가, 콤보박스는 처음 생성 시 따로 값이 없기 때문에
		// 파일 로드할 때 값을 추가해준다.
		ObservableList combo = FXCollections.observableArrayList("공개", "회원 공개", "비공개");
		comboList.setItems(combo);
	}
	
	public void save() { // 선택한 값과 입력한 값을 모두 출력
		System.out.println("제목 : " + title.getText());
		System.out.println("비밀번호 : " + pass.getText());
		System.out.println("공개 여부 : " + comboList.getValue()); // value는 시스템에서 임의로 부여한 값을 가져올 때 사용
		System.out.println("게시 종료 : " + endDate.getValue());
		System.out.println("내용 : " + note.getText());
	}
}
//

먼저 main의 pane 부분을

Parent root = FXMLLoader.load(getClass().getResource("Main.fxml"));

위와 같이 바꾸고 primaryStage.setTitle("buttons"); 추가해서 마음에 드는 제목을 설정한다.

위와 같이 디자인 하고 한가지 다른점은 Radio 버튼을 group으로 묶어서 다중 선택을 막는것이다.

ToggleButton : Button, Code - OnAction : toggle, Properties : group

선택 : Button, Code - OnAction : genderSel, hobbySel

남자, 여자 : RadioButton, Code - fx:id : male, female

영화, 게임, 낚시하기 : CheckBox, Code - fx:id : movie, game, fishing

성별, 취미 : Label, Code - fx:id : gender, hobby

위의 공통점을 본다면 보통 값을 읽거나 쓰기 위해선 fx:id라는 이름을 주는것과

함수에 어떠한 기능을 할 지를 설정하기 위한 노드들은 Code에 OnAction으로 설정한다는것.

마지막으로 좌측 하단의 Controller 의 Controller class 설정도 잊지말자

본인이 만든 class 파일을 설정하는 것으로 이름은 각각 다르니 알아서 찾아야함

다음은 Controller에 기능을 구현한 예제이다.

Java에 작성할 때와 같으며 사용하던 클래스 함수 등 역시 사용 가능하다.

package app;

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

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

public class MainController implements Initializable{
	@FXML private Label toggle; // @fxml 어노테이션을 기입하여 FXML의 노드임을 명시
	@FXML private Label gender;// FXML에 지정한 fx:id와 철자 하나 틀리지 않고 같이 명시를 해야함
	@FXML private Label hobby; // 대소문자도 구분
	@FXML private RadioButton male;
	@FXML private RadioButton female;
	@FXML private CheckBox movie;
	@FXML private CheckBox game;
	@FXML private CheckBox fishing;

	boolean settxt = false;
	
	@Override
	public void initialize(URL location, ResourceBundle resourceBundle) {
		System.out.println("FXML Load Complete"); // 이 문구를 꼭 입력하여 오류가 어디서 났는지 판단 기준을 잡자.
															   // FXML을 로딩하고 java를 읽는다.
	}
	
	// 라벨 아래의 버튼, 역시 OnAction에 기입한 글자와 철자하나 틀리지 않고 같이 써야함
	public void toggle() {
		String flag = toggle.getText();
		System.out.println("눌렀을 때 상태 : " + flag);
		// 누를 때 마다 ON|OFF 바꾸기
		if(settxt) {
			toggle.setText("Off");
			settxt = false;
		}else {
			toggle.setText("On");
			settxt = true;
		}
	}
	
	// 라디오 아래의 버튼
	public void genderSel() {
		if(male.isSelected()) {
			gender.setText(male.getText());
		}
		if(female.isSelected()) {
			gender.setText(female.getText());
		}
	}
	
	ArrayList list = new ArrayList();
	// 체크박스 아래의 버튼
	public void hobbySel() {
		if(movie.isSelected()) {
			list.add(movie.getText());
		}
		if(game.isSelected()) {
			list.add(game.getText());
		}
		if(fishing.isSelected()) {
			list.add(fishing.getText());
		}
		System.out.println("취미 갯수 : " + list.size() + "개");
		for(String selected : list) {
			System.out.println("선택 항목 : " + selected);
		}
		list.clear();
	}
}
//

그리고 Swing이나 awt를 사용하는게 아니기 때문에 자동완성 사용시 주의하여야 한다.

FXLM을 사용하기 때문에 꼭 JavaFx를 사용해야함

JavaFX에서 오류가 나온다면 일단 javaFX를 지정하였는지 Code에 지정한 이름들의 철자를 틀리지 않았는지부터 확인하자.

  ※ 실행 테스트를 여러번 하거나 여러개의 프로젝트를 테스트 할 때 주의점.

테스트를 하다보면 자꾸 전에 했던 프로젝트가 실행되거나 FXML의 변경사항이 저장이 안되고 실행이 될 때가 있다.

아래와 같이 해결해보자

Eclipse와 Scene Builder는 별개의 프로그램이기 때문에 수정을 했을때 서로 바로바로 적용이 되지않는다.

따로 fxml파일을 한번 열어서 저장(Ctrl + S)를 눌러주면 된다.

이클립스 좌측에서 실행하고자 하는 프로젝트를 우클릭 - Run As - Java Application을 누르면 정상적으로 실행이 된다.