JavaFX 문서 (11) FXML 파악 - 3 FXML 을 사용 하여 주소록 애플 리 케 이 션 만 들 기
16024 단어 JavaFX
원본 주소:http://docs.oracle.com/javase/8/javafx/fxml-tutorial/fxml_tutorial_intermediate.htm
이 장 에 서 는 이름과 메 일 주소 가 있 는 표를 포함 하여 주소록 프로그램 을 만 들 것 입 니 다.이 튜 토리 얼 은 데이터 정렬, 셀 의 데이터 정렬 을 포함 하여 표 에 줄 을 추가 하 는 방법 을 보 여 줍 니 다.
시작 하기 전에 우 리 는 당신 이 FXML 과 관련 된 지식 에 대해 상당 한 이 해 를 가지 고 있다 고 가정 합 니 다. 적어도 당신 은 공식 문서 의 '자바 FX 여행 시작' ('Getting Started') 시리즈 과정 을 마 쳤 습 니 다. 특히 다음 지식 에 대해 서 는 이미 파악 해 야 합 니 다.
프로젝트 생 성
IDE 에서 프로젝트 를 만 들 고 FXMLtable View. java, FXMLtable View Controller. java, fxml 를 만 듭 니 다.tableview. fxml 세 파일.NetBeansIDE 를 사용 하여 만 들 었 다 면 FXMLtableView 프로젝트 를 만 들 고 해당 하 는 파일 의 이름 을 바 꿔 야 합 니 다.현재 FXMLtable View 클래스 의 코드 는 다음 과 같 습 니 다.
public class FXMLTableView extends Application {
@Override
public void start(Stage primaryStage) throws Exception {
primaryStage.setTitle("FXML TableView Example");
Pane myPane = (Pane)FXMLLoader.load(getClass().getResource
("fxml_tableview.fxml"));
Scene myScene = new Scene(myPane);
primaryStage.setScene(myScene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
현재 자바 클래스 에는 필드 를 만 드 는 관련 코드 가 포함 되 어 있 지 않 습 니 다.튜 토리 얼 의 다음 부분 에 서 는 FXML 파일 에서 장면 을 만 드 는 방법 을 알려 줄 것 이다.
기본 사용자 인터페이스 만 들 기
지금부터 사용자 인터페이스 를 만 들 고 GridPane 레이아웃 용 기 를 장면 의 루트 노드 로 만 듭 니 다.그리고 라벨 과 TableView 컨트롤 을 하위 노드 로 추가 합 니 다.
1. fxmltableview. fxml 파일 내용 을 다음 내용 으로 변경 합 니 다.
2. GridPane layot 레이아웃 용기 에 Label 과 TableView 를 추가 합 니 다. 코드 는 다음 과 같 습 니 다.
3. Inset 클래스 의 import 문 구 를 추가 합 니 다.
프로그램 을 실행 하면 텍스트 "Address Book" 이 있 는 레이 블 과 텍스트 "No columns in table" 이 있 는 표를 볼 수 있 습 니 다. 다음 그림:
표 의 열 추가
TableColumn 클래스 를 사용 하여 표 에 3 열 을 추가 합 니 다. 각각 First Name, Last Name, Email Address 를 표시 합 니 다.코드 는 다음 과 같 습 니 다:
API 문 서 를 참고 하면 더 많은 정 보 를 얻 을 수 있 습 니 다.
다음 그림 은 운행 효 과 를 보 여 줍 니 다.
정의 데이터 모델
자바 FX 에서 Table 을 사용 하 는 가장 좋 은 실천 중 하 나 는 데이터 모델 류 를 정의 하여 표를 조작 하 는 방법 과 속성 을 제공 하 는 것 이다.주소록 의 데 이 터 를 정의 하기 위해 Person 클래스 를 만 듭 니 다. 클래스 코드 는 다음 과 같 습 니 다.
package fxmltableview;
import javafx.beans.property.SimpleStringProperty;
public class Person {
private final SimpleStringProperty firstName = new SimpleStringProperty("");
private final SimpleStringProperty lastName = new SimpleStringProperty("");
private final SimpleStringProperty email = new SimpleStringProperty("");
public Person() {
this("", "", "");
}
public Person(String firstName, String lastName, String email) {
setFirstName(firstName);
setLastName(lastName);
setEmail(email);
}
public String getFirstName() {
return firstName.get();
}
public void setFirstName(String fName) {
firstName.set(fName);
}
public String getLastName() {
return lastName.get();
}
public void setLastName(String fName) {
lastName.set(fName);
}
public String getEmail() {
return email.get();
}
public void setEmail(String fName) {
email.set(fName);
}
}표 와 데이터 연결
각 줄 의 데 이 터 를 정의 하고 표 에 연결 합 니 다.
1. fxm 에서tableview. fxml 파일 에서 Observable List 목록 을 만 들 고 표 에 보 여 주 려 는 데 이 터 를 정의 합 니 다. 탭 과 코드 를 추가 합 니 다. 샘플 코드 는 다음 과 같 습 니 다.
2. 각 열 에 하나의 cell factory 를 지정 하여 데 이 터 를 연결 합 니 다. 코드 는 다음 과 같 습 니 다.
3. 필요 한 가방 도입
(번역자 주: 세 번 째 줄 은 실제 상황 에 따라 조정 해 야 합 니 다. 당신 이 만 든 프로젝트 의 가방 이름 이 fxmltableviview 가 아 닐 수도 있 기 때 문 입 니 다)
다음 그림 은 이 프로그램의 운행 상황 을 보 여 줍 니 다.
이 때 TableView 류 의 내 장 된 기능 특징 을 시도 해 볼 수 있 습 니 다.
시작 할 때 정렬 하기
이 절 에 서 는 First Name 열 을 시작 할 때 알파벳 순 으로 정렬 할 수 있 도록 정렬 순 서 를 설정 합 니 다.우선 해당 열 에 ID 를 만 들 고 reference 를 만들어 서 사용 해 야 합 니 다.
1. First Name 열 에 ID 추가:
2. 정렬 순 서 를 지정 하고 두 태그 사이 에 코드 를 추가 합 니 다.
실행 후 화면 은 다음 과 같 습 니 다:
열 폭 을 정의 합 니 다. 아래 는 각 열 에 prefWidth 속성 을 추가 하여 열 폭 을 증가 합 니 다. 다음 과 같 습 니 다.
prefWidth="100">
prefWidth="100">
prefWidth="200">
운행 효 과 는 다음 그림 에서 보 듯 이 열 폭 이 확대 되면 모든 데이터 가 표 시 됩 니 다.
표 셀 정렬 방식 설정
셀 의 데이터 정렬 방식 은 맞 춤 형 으로 만 들 수 있 습 니 다.Formatted TableCellFactory 라 는 종 류 를 만들어 서 해당 하 는 논 리 를 한 다음 FXML 탭 에 정렬 방식 을 설정 해 야 합 니 다.
1. IDE 에서 새로운 종류의 Formatted Table CellFactory and 를 만 듭 니 다. 2. Formatted Table CellFactory and 류 의 코드 를 수정 하여 Callback 인 터 페 이 스 를 실현 하고 그 중에서 TextAlignment 와 Formt 류 인 스 턴 스 를 만 듭 니 다.아래 코드 에서 매개 변수 S 는 TableView 범 형의 유형 이 고 매개 변수 T 는 셀 의 내용 의 유형 입 니 다.
public class FormattedTableCellFactory
implements Callback, TableCell> {
private TextAlignment alignment;
private Format format;
public TextAlignment getAlignment() {
return alignment;
}
public void setAlignment(TextAlignment alignment) {
this.alignment = alignment;
}
public Format getFormat() {
return format;
}
public void setFormat(Format format) {
this.format = format;
}
3. TabCell 과 TableColumn 인 터 페 이 스 를 실현 하고 다음 코드 를 클래스 에 추가 합 니 다.이 코드 는 TableCell 인터페이스의 updateItem 방법 을 실현 하고 셀 setTextAlign 방법 을 호출 합 니 다.
@Override
@SuppressWarnings("unchecked")
public TableCell call(TableColumn p) {
TableCell cell = new TableCell() {
@Override
public void updateItem(Object item, boolean empty) {
if (item == getItem()) {
return;
}
super.updateItem((T) item, empty);
if (item == null) {
super.setText(null);
super.setGraphic(null);
} else if (format != null) {
super.setText(format.format(item));
} else if (item instanceof Node) {
super.setText(null);
super.setGraphic((Node) item);
} else {
super.setText(item.toString());
super.setGraphic(null);
}
}
};
cell.setTextAlignment(alignment);
switch (alignment) {
case CENTER:
cell.setAlignment(Pos.CENTER);
break;
case RIGHT:
cell.setAlignment(Pos.CENTER_RIGHT);
break;
default:
cell.setAlignment(Pos.CENTER_LEFT);
break;
}
return cell;
}
}
4. 필요 한 import 문 구 를 추가 합 니 다.
5. fxml 에서tableview. fxml 의 노드 아래 FirstName 을 가운데 로 정렬 하기 위해 다음 문 구 를 추가 합 니 다.
다른 열 에서 left, right 또는 center 를 통 해 서로 다른 정렬 방식 을 지정 할 수 있 습 니 다.
실행 결 과 는 다음 과 같 습 니 다.
표 에 줄 추가
FXMLtable ViewController class 클래스 에 코드 논 리 를 추가 함으로써 사용자 가 표 에 데 이 터 를 추가 할 수 있 습 니 다.
1. FXMLtableViewController. java 파일 열기
2. 다음 코드 에 따라 FXMLtable ViewController 클래스 를 수정 합 니 다.
public class FXMLTableViewController {
@FXML private TableView tableView;
@FXML private TextField firstNameField;
@FXML private TextField lastNameField;
@FXML private TextField emailField;
@FXML
protected void addPerson(ActionEvent event) {
ObservableList data = tableView.getItems();
data.add(new Person(firstNameField.getText(),
lastNameField.getText(),
emailField.getText()
));
firstNameField.setText("");
lastNameField.setText("");
emailField.setText("");
}
}
3. 다음 코드 에 따라 import 요 소 를 수정 합 니 다.
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.TableView;
import javafx.scene.control.TextField;
4. fxml 에서tableview. fxml 파일 에 아래 코드 를 추가 합 니 다.
GridPane.rowIndex="2">
prefWidth="90"/>
prefWidth="90"/>
prefWidth="150"/>
실행 후 화면 은 다음 과 같 습 니 다:
확장 학습
다음 에 이 내용 들 을 시도 해 볼 수 있 습 니 다.
1. 입력 한 데이터 형식의 정확성 을 검증 하기 위해 filter 를 제공 합 니 다.
2. CSS 를 사용 하여 표 의 외관 을 정의 하고 빈 줄 과 비 빈 줄 을 구분 합 니 다.공식 문서 의 'Styling UIControls with CSS' 를 참고 할 수 있 습 니 다.
3. 표 에서 데 이 터 를 편집 할 수 있 습 니 다.공식 문서 의 'Editing Data in the Table' 을 참고 하여 Introduction to FXML document 을 살 펴 보면 FXML 에 대한 정 보 를 더 많이 제공 합 니 다.이 글 은 API 문서 의 javafx. fxml 패키지 에 있 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Eclipse에서 javaFX 도입 (2020-4 월)javaSE에 javaFX가 동봉되지 않게 되어, 기존의 방법으로는 잘 되지 않는 것이 있는 것 같고, 도입에 망설였으므로 나중의 참고가 된다고 생각. 초보자이므로 손 부드럽게. macOS Catalina Eclip...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
