JavaFX 문서 (11) FXML 파악 - 3 FXML 을 사용 하여 주소록 애플 리 케 이 션 만 들 기

16024 단어 JavaFX
성명: 전재 가 필요 하 시 면 출처 를 밝 혀 주 십시오.http://blog.csdn.net/originer
원본 주소:http://docs.oracle.com/javase/8/javafx/fxml-tutorial/fxml_tutorial_intermediate.htm
이 장 에 서 는 이름과 메 일 주소 가 있 는 표를 포함 하여 주소록 프로그램 을 만 들 것 입 니 다.이 튜 토리 얼 은 데이터 정렬, 셀 의 데이터 정렬 을 포함 하여 표 에 줄 을 추가 하 는 방법 을 보 여 줍 니 다.
시작 하기 전에 우 리 는 당신 이 FXML 과 관련 된 지식 에 대해 상당 한 이 해 를 가지 고 있다 고 가정 합 니 다. 적어도 당신 은 공식 문서 의 '자바 FX 여행 시작' ('Getting Started') 시리즈 과정 을 마 쳤 습 니 다. 특히 다음 지식 에 대해 서 는 이미 파악 해 야 합 니 다.
  • FXML 공정 의 기본 구조 (. java, jfxml 와 제어 류)
  • IDE 에서 자바 FXFXML 프로젝트 를 만 들 고 실행 하 는 방법
  • 레이아웃 (layot) 과 컨트롤 에 대한 기본 지식
  •  이 튜 토리 얼 을 시작 하기 전에 IDE 버 전이 해당 버 전의 자바 FX 를 지원 하 는 지 확인 하 십시오.
    JavaFX文档(11)掌握FXML——3 使用FXML来创建地址簿应用_第1张图片
    프로젝트 생 성
    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" 이 있 는 표를 볼 수 있 습 니 다. 다음 그림:
    JavaFX文档(11)掌握FXML——3 使用FXML来创建地址簿应用_第2张图片
    표 의 열 추가
    TableColumn 클래스 를 사용 하여 표 에 3 열 을 추가 합 니 다. 각각 First Name, Last Name, Email Address 를 표시 합 니 다.코드 는 다음 과 같 습 니 다:
    
         
              
              
              
              
              
              
             
    
    

    API 문 서 를 참고 하면 더 많은 정 보 를 얻 을 수 있 습 니 다.
     다음 그림 은 운행 효 과 를 보 여 줍 니 다.
    JavaFX文档(11)掌握FXML——3 使用FXML来创建地址簿应用_第3张图片
     정의 데이터 모델
    자바 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 가 아 닐 수도 있 기 때 문 입 니 다)
             다음 그림 은 이 프로그램의 운행 상황 을 보 여 줍 니 다.
    JavaFX文档(11)掌握FXML——3 使用FXML来创建地址簿应用_第4张图片
    이 때 TableView 류 의 내 장 된 기능 특징 을 시도 해 볼 수 있 습 니 다.
  • 열 두 구분자 드래그 를 통 해 열 폭 변경
  • 열 머리 를 끌 어 다 놓 아 열의 순 서 를 바꾼다
  • 열 머리 를 누 르 면 열 데이터 에 따라 정렬 합 니 다.첫 번 째 단 추 를 누 르 면 오름차 순 으로 배열 하고 두 번 째 는 내림차 순 으로 배열 하 며 세 번 째 회복 기본 상황 은 정렬 하지 않 습 니 다.기본적으로 정렬 을 하지 않 습 니 다.

  • 시작 할 때 정렬 하기
    이 절 에 서 는 First Name 열 을 시작 할 때 알파벳 순 으로 정렬 할 수 있 도록 정렬 순 서 를 설정 합 니 다.우선 해당 열 에 ID 를 만 들 고 reference 를 만들어 서 사용 해 야 합 니 다.
    1. First Name 열 에 ID 추가:

    2. 정렬 순 서 를 지정 하고 두 태그 사이 에 코드 를 추가 합 니 다.
    
         
              
          
    
    

    실행 후 화면 은 다음 과 같 습 니 다:
    JavaFX文档(11)掌握FXML——3 使用FXML来创建地址簿应用_第5张图片
     열 폭 을 정의 합 니 다. 아래 는 각 열 에 prefWidth 속성 을 추가 하여 열 폭 을 증가 합 니 다. 다음 과 같 습 니 다.
     prefWidth="100">
            
            
         
          prefWidth="100">
            
            
         
         prefWidth="200">
            
            
         
    

    운행 효 과 는 다음 그림 에서 보 듯 이 열 폭 이 확대 되면 모든 데이터 가 표 시 됩 니 다.
    JavaFX文档(11)掌握FXML——3 使用FXML来创建地址簿应用_第6张图片
     표 셀 정렬 방식 설정
    셀 의 데이터 정렬 방식 은 맞 춤 형 으로 만 들 수 있 습 니 다.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 를 통 해 서로 다른 정렬 방식 을 지정 할 수 있 습 니 다.
    실행 결 과 는 다음 과 같 습 니 다.
    JavaFX文档(11)掌握FXML——3 使用FXML来创建地址簿应用_第7张图片
    표 에 줄 추가
    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"/>
    실행 후 화면 은 다음 과 같 습 니 다:
    JavaFX文档(11)掌握FXML——3 使用FXML来创建地址簿应用_第8张图片
    확장 학습
    다음 에 이 내용 들 을 시도 해 볼 수 있 습 니 다.
    1.        입력 한 데이터 형식의 정확성 을 검증 하기 위해 filter 를 제공 합 니 다.
    2.        CSS 를 사용 하여 표 의 외관 을 정의 하고 빈 줄 과 비 빈 줄 을 구분 합 니 다.공식 문서 의 'Styling UIControls with CSS' 를 참고 할 수 있 습 니 다.
    3.        표 에서 데 이 터 를 편집 할 수 있 습 니 다.공식 문서 의 'Editing Data in the Table' 을 참고 하여 Introduction to FXML document 을 살 펴 보면 FXML 에 대한 정 보 를 더 많이 제공 합 니 다.이 글 은 API 문서 의 javafx. fxml 패키지 에 있 습 니 다.

    좋은 웹페이지 즐겨찾기