Mittwoch, 29. Mai 2013

Nodes in Tabellen (Combobox, Textfield, ToggleButton)

Ich hatte vor einigen Tagen Probleme mit dem Einfügen von TextFields und Comboboxen in einer Tabelle. Man findet dazu einiges im Netz, was jedoch schnell unübersichtlich wird.

Hier ein kleines einfaches Beispiel, wie es ganz einfach realisiert werden kann:

Zuerst wird Datenmodell für die Tabelle entworfen:


public class Datamodel {
 
 private SimpleObjectProperty<ComboBox<String>> combobox;
 
 private SimpleObjectProperty<TextField> textfield;
 
 private SimpleObjectProperty<ToggleButton> toggleButton;
 
 public Datamodel(){
  combobox = new SimpleObjectProperty<ComboBox<String>>();
  textfield = new SimpleObjectProperty<TextField>();
  toggleButton = new SimpleObjectProperty<ToggleButton>();
 }

 public ComboBox<String&gt getCombobox() {
  return combobox.get();
 }

 public void setCombobox(ComboBox<String&gt combobox) {
  this.combobox.set(combobox);
 }

 public TextField getTextfield() {
  return textfield.get();
 }

 public void setTextfield(TextField textfield) {
  this.textfield.set(textfield);
 }

 public ToggleButton getToggleButton() {
  return toggleButton.get();
 }

 public void setToggleButton(ToggleButton togglebutton) {
  this.toggleButton.set(togglebutton);
 }
 
}

Das Datenmodell enthält hier SimpleObjectProperties in denen die jeweiligen Nodes gespeichert werden.
Wichtig hierbei ist, dass die Variablenbezeichnungen in der Bezeichnungen der Getter- und Setter-Methoden auftreten - also diese am besten generieren lassen. Nachdem die Zugriffsmethoden automatisch erzeugt wurden, müssen die noch etwas umgeschrieben werden, damit auch die entsprechenden Nodes gesetzt bzw. zurückgegeben werden und nicht die Properties.

Da das Datenmodell implementiert ist, kann es nun an eine Tabelle gebunden werden. Hierzu wird erst einmal eine Tabelle mit den entsprechenden Spalten erstellt werden:


public class TableExample extends Application{
 
 private TableView<Datamodel> table;
 private TableColumn<Datamodel, ComboBox<String>> columnWithCombobox;
 private TableColumn<Datamodel, TextField> columnWithTextfield;
 private TableColumn<Datamodel, ToggleButton> columnWithTogglebutton;
 private Button bt;

 @Override
 public void start(Stage primeStage) throws Exception {
  Group group = new Group();
  Scene scene = new Scene(group, 500, 430);
  
  BorderPane pane = new BorderPane();
  pane.setCenter(initTable());
  pane.setBottom(initButton());
  group.getChildren().add(pane);
  
  primeStage.setScene(scene);
  primeStage.show();
 }
 
 private Node initTable() {
  table = new TableView<Datamodel>();
  columnWithCombobox = new TableColumn<Datamodel, ComboBox&ltString>>("1");
  columnWithCombobox.setCellValueFactory(new PropertyValueFactory<Datamodel, ComboBox<String>>("combobox"));
  columnWithCombobox.setMinWidth(200);
  columnWithTextfield = new TableColumn<Datamodel, TextField>("2");
  columnWithTextfield.setCellValueFactory(new PropertyValueFactory<Datamodel, TextField>("textfield"));
  columnWithTogglebutton = new TableColumn<Datamodel, ToggleButton>("3");
  columnWithTogglebutton.setCellValueFactory(new PropertyValueFactory<Datamodel, ToggleButton>("toggleButton"));
  columnWithTogglebutton.setMaxWidth(50);
  
  table.getColumns().addAll(columnWithCombobox, columnWithTextfield, columnWithTogglebutton);
  
  return table;
 }

In der Methode "initTable" wird die Tabelle dementsprechend konfiguriert. Wichtig dabei ist das setzten der CellValueFactory. Die dazugehörige PropertyValueFactory wird durch das Datenmodell und dem Typ bestimme, den die Zelle verkörpern soll - also ComboBox, TextField, oder ToggleButton. Weiterhin muss die Variablenbezeichnung aus dem Datenmodel angegeben werden, um mit den Getter- und Setter-Methoden arbeiten zu können.


Um dann eine neue Zeile in die Tabelle einfügen zu können habe ich einen Button zu Hilfe genommen:

private Node initButton() {
  bt = new Button("Zeile hinzufügen");
  
  bt.setOnAction(new EventHandler<ActionEvent>() {
   
   @Override
   public void handle(ActionEvent paramT) {
    addNewLineInTable();
   }

  });
  
  return bt;
 }



 private void addNewLineInTable() {
  ComboBox<String> combobox = new ComboBox<String>();
  combobox.setMinWidth(190);
  combobox.setPromptText("PromtText");
  TextField textfield = new TextField();
  ToggleButton togglebutton = new ToggleButton();
  
  Datamodel datamodel = new Datamodel();
  datamodel.setCombobox(combobox);
  datamodel.setTextfield(textfield);
  datamodel.setToggleButton(togglebutton);
  
  table.getItems().add(datamodel);
 }
Der Button ruft beim Klick "addNewLineInTable" auf. In dieser Methode werden die gewünschten Nodes instantiiert und an den entsprechenden Variablen des Datenmodells gesetzt. Zum Schluss wird das neue Exemplar des Datenmodells als neues Item in der Tabelle hinzugefügt.