Создание динамического пользовательского элемента управления в JavaFX

Question

Моя цель состоит в том, чтобы представить это:

Это GridPane 3 колонки:

• Первый Колум содержит Label что имя файла, который я только что открыл
• Вторая колонка содержит TextField для представления т частота обновления
• Третий Колум содержит CheckBox и 2 Button

Если пользователь открывает файл, я должен добавить строку в этом таможенном контроле, если нет файла открыт, GridPane пуст. я начинаю свой код с этим:

класс управления

package view.component.fileView; 

import javafx.scene.control.Control; 
import javafx.scene.control.Skin; 

public class FileViewGrid extends Control{ 

    @Override 
    protected Skin<?> createDefaultSkin(){ 
     return new FileViewGridSkin(this); 
    } 
} 

класс кожи

package view.component.fileView; 

import javafx.scene.control.SkinBase; 
import javafx.scene.layout.GridPane; 

public class FileViewGridSkin extends SkinBase<FileViewGrid>{ 

    protected FileViewGridSkin(FileViewGrid control) { 
     super(control); 
     // TODO Auto-generated constructor stub 
    } 
} 

Но тот факт, что линии добавляются динамически запутать меня. Если бы это было статично, я добавлю все свои элементы в свой класс skin и их поведение в классе управления, но сейчас это мне не представляется возможным.

Это правильный способ сделать это? Должен ли я использовать метод FXML для создания элемента управления custome?

Answer 1

This is a GridPane of 3 columns : 

The first colum contains a Label that is the name of the file I just open 
The second column contains a TextField to represent the refresh rate 
The third colum contains a CheckBox and 2 Button 

Это изображение ячейки ListView?

если да, у вас есть хорошее начало. Секрет состоит в том, чтобы играть с Property и Bindings

В вашем контроле вы должны поставить то, что хотите выставить на улицу. Например, текстовое поле имеет textProperty().

В вашем случае вы, вероятно, захотите открыть список своего объекта, который будет находиться внутри вашего ListView.

Ваш контроль будет что-то вроде:

package view.component.fileView; 

import javafx.scene.control.Control; 
import javafx.scene.control.Skin; 

public class FileViewGrid extends Control{ 

ListProperty<YourBean> list = new SimpleListProperty(FXCollection.emptyObservableList()) 

    @Override 
    protected Skin<?> createDefaultSkin(){ 
     return new FileViewGridSkin(this); 
    } 
} 

и кожи:

package view.component.fileView; 

import javafx.scene.control.SkinBase; 
import javafx.scene.layout.GridPane; 

public class FileViewGridSkin extends SkinBase<FileViewGrid>{ 

FileViewGrid control; 
Node root; 
    protected FileViewGridSkin(FileViewGrid control) { 
     super(control); 
     this.control = control; 
    } 

     @Override 
    public Node getNode() { 
     if (root == null) { 
      root = createRootNode(); 
     } 
     return root; 
    } 

    public Node createRootNode(){ 
    //create your root node with something like: root = new Hbox() or whatever you want. Also you can load a FXML here. 
     root = new Hbox(); 
    ListView<MyBean> listView = new ListView(); 
    listView.itemProperty().bind(control.list); //Here bind the listview items to your control list 
    root.getChildrens().add(listView); 
    } 
} 

и finnaly когда вы используете свой контроль где-то в вашем приложении:

FileViewGrid fileViewGrid = new FileViewGrid(); 
fileViewGrid.list.add(elem); //Here the listview in your control should be refreshed automaticaly cause of bindings. 

И это одинаково для всех типов компонентов.

Кроме того, вы можете проверить source проекта ControlFX, который содержит много примеров.