Question

I was working on a small application using a simple binding in JavaFx 2.1 using java 1.7.0_04-b21 on MacOSX. Actually I currently compare the bind mechanisms of Cocoa on Mac OSX to the JavaFx and face several problems:

The application uses a model holding an observableArrayList (called messageList) which is set as the items of a TableView. Adding a new Entry to the list works. The entry appears in the TableView.

Issue 1: Deleting a selected item does not work. When I remove an item from the observable list it does not disappear.

Issue 2: I want to fill a textField with the value stored in one field of the object that is selected in the TableView.
Actually for this in Cocoa one can define a binding to a selection even if this is empty (so nothing is selected) at the point in time of the definition of the binding. This is actually a very useful concept and I did not find how this could be possible in JavaFX.

Issue 3: Only if already an object is selected a binding can be established so that i finally wrote an EventHandler reacting on a changing selection and re-establishing always a correct binding of my textfield to the models field. But also for this approach my application destroys the model for some reason which i do not understand by now.

Simply click three or four times the add Button, then select the entries and see the updates of the textField. The data in the model get destroyed and overwritten – and the entries normally get shorter… Explanations of the effect are welcome.

Till now I could not find a binding example on a TableView so any input is welcome.

The code of my demo project is included in the following files. All are in the same package com.es.javaFxTest.

MainWindowController.java:

/*
 * Created on 19.05.2012
 */
package com.es.javaFxTest;

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

import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.Initializable;
import javafx.scene.control.Button;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.TextField;
import javafx.scene.control.cell.PropertyValueFactory;

public class MainWindowController implements Initializable
{

  public Model                         model;

  public TableView<Message>            messageListTableView;

  public TableColumn<Message, String>  messageTableMessageNameColumn;

  public Button                        addMessageButton;

  public Button                        deleteMessageButton;

  public TextField                     messageNameTextField;

  public SimpleObjectProperty<Message> selectedMessage;

  /* (non-Javadoc)
   * @see javafx.fxml.Initializable#initialize(java.net.URL, java.util.ResourceBundle)
   */
  @Override
  public void initialize(URL arg0, ResourceBundle arg1)
  {
    model = new Model();

    messageTableMessageNameColumn.setCellValueFactory(new PropertyValueFactory<Message, String>("messageName"));
    messageListTableView.setItems(model.getMessageList());

    addMessageButton.setOnAction(new EventHandler<ActionEvent>() {
      StringBuffer str = new StringBuffer("a"); // to fill some dummy data

      @Override
      public void handle(ActionEvent e)
      {
        // adding an object to the observed list works and the result is shown in the tableView
        model.getMessageList().add(new Message(str.toString()));
        str.append("x");
      }
    });
    deleteMessageButton.setOnAction(new EventHandler<ActionEvent>() {
      @Override
      public void handle(ActionEvent event)
      { // observation does not work here; also the following code does not work. 
        ObservableList<Integer> selectedIndices = messageListTableView.getSelectionModel().getSelectedIndices();
        ArrayList<Integer> selectedIndices2 = new ArrayList<Integer>(selectedIndices);
        Collections.sort(selectedIndices2);
        for (int i = selectedIndices2.size() - 1; i >= 0; i--)
        {
          model.getMessageList().remove(selectedIndices2.get(i));
        }
      }
    });

    selectedMessage = new SimpleObjectProperty<Message>();
    selectedMessage.bind(messageListTableView.getSelectionModel().selectedItemProperty());

    selectedMessage.addListener(new ChangeListener<Message>() {

      @Override
      public void changed(ObservableValue< ? extends Message> observable, Message oldValue, Message newValue)
      {
        System.out.format("ObservableValue %s, \n  oldValue %s\n  newValue %s\n\n", observable, oldValue, newValue);
        if (oldValue != null)
        {
          messageNameTextField.textProperty().unbind();
          oldValue.messageName.unbind();
        }
        if (newValue != null)
        {
          messageNameTextField.textProperty().set(newValue.getMessageName());
          newValue.messageName.bindBidirectional(messageNameTextField.textProperty());
        }
      }
    });
  }
}

MainWindowLayout.java

package com.es.javaFxTest;

/*
 * Created on 18.05.2012
 */
import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

public class MainWindowLayout extends Application
{

  @Override
  public void start(Stage stage)
  {

    try
    {
      FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("MainWindowLayout.fxml"));
      Pane root = (Pane) fxmlLoader.load();
      MainWindowController controller = (MainWindowController) fxmlLoader.getController();

      Scene scene = new Scene(root);
      stage.setTitle("Config");
      stage.setScene(scene);
      stage.show();

    }
    catch (IOException e)
    {
      e.printStackTrace();
    }
  }

  public static void main(String[] args)
  {
    launch(args);
  }

}

Message.java

/*
 * Created on 19.05.2012
 *
 */
package com.es.javaFxTest;

import javafx.beans.property.SimpleStringProperty;

public class Message 
{



  /**
   * @param canId
   * @param messageName
   */
  public Message(String messageName)
  {
    this.messageName = new SimpleStringProperty(messageName);
  }


  SimpleStringProperty messageName;
  /**
   * @return the messageName
   */
  public String getMessageName()
  {
    return messageName.getValue();
  }
  /**
   * @param messageName the messageName to set
   */
  public void setMessageName(String messageName)
  {
    this.messageName.set(messageName);
  }

  public String toString ()
  {
    return String.format("Name:%s",messageName); 
  }

}

Model.java

/*
 * Created on 20.05.2012
 */
package com.es.javaFxTest;

import javafx.beans.property.SimpleListProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

public class Model
{
  ObservableList<Message>     messageList;

  SimpleListProperty<Message> messageListProperty;

  public Model()
  {
    messageList = FXCollections.observableArrayList();
    messageListProperty = new SimpleListProperty<Message>(this,"messageList",messageList);
  }

  public final SimpleListProperty<Message> messageListProperty()
  {
    return messageListProperty;
  }

  public ObservableList<Message> getMessageList()
  {
    return messageListProperty.get();
  }

  public void setMessageList(ObservableList<Message> l)
  {
    messageListProperty.set(l);
  }
}

MainWindowLayout.xml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.collections.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>

<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="500.0" xmlns:fx="http://javafx.com/fxml" fx:controller="com.es.javaFxTest.MainWindowController">
  <children>
    <SplitPane id="splitPaneHorizontal1" dividerPositions="0.3614457831325301" focusTraversable="true" prefHeight="600.0" prefWidth="900.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
      <items>
        <AnchorPane id="anchorPane1" minHeight="0.0" minWidth="0.0" prefHeight="598.0" prefWidth="390.0">
          <children>
            <VBox id="VBox" alignment="CENTER" prefHeight="598.0" prefWidth="177.0" spacing="5.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
              <children>
                <TableView id="tableView1" fx:id="messageListTableView" editable="true" prefHeight="598.0" prefWidth="406.0">
                  <columns>
                    <TableColumn prefWidth="75.0" text="Name" fx:id="messageTableMessageNameColumn" />
                  </columns>
                </TableView>
                <HBox id="HBox" alignment="CENTER" spacing="5.0">
                  <children>
                    <Button id="button2" fx:id="addMessageButton" text="Add">
                      <HBox.margin>
                        <Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
                      </HBox.margin>
                    </Button>
                    <Button id="button1" fx:id="deleteMessageButton" text="Delete">
                      <HBox.margin>
                        <Insets bottom="5.0" right="5.0" top="5.0" />
                      </HBox.margin>
                    </Button>
                  </children>
                </HBox>
              </children>
            </VBox>
          </children>
        </AnchorPane>
        <AnchorPane id="anchorPane2" minHeight="0.0" minWidth="0.0" prefHeight="160.0" prefWidth="100.0">
          <children>
            <HBox id="HBox" alignment="CENTER" layoutX="44.0" layoutY="177.0" spacing="5.0">
              <children>
                <Label id="label2" text="Name:" />
                <TextField id="textField2" fx:id="messageNameTextField" prefWidth="200.0" text="TextField" />
              </children>
            </HBox>
          </children>
        </AnchorPane>
      </items>
    </SplitPane>
  </children>
</AnchorPane>

Answer 1

issue 1 — you stepped into one of famous Java autoboxing traps.

model.getMessageList().remove(selectedIndices2.get(i)); // get(i) returns Integer

calls List.remove(Object o) instead of List.remove(int idx) as you expected.

Use

model.getMessageList().remove(selectedIndices2.get(i).intValue());

instead.

issues 2-3

Just attach listener to selectedItem and rebind on change:

    messageListTableView.getSelectionModel().selectedItemProperty().addListener(new ChangeListener<Message>() {

        @Override
        public void changed(ObservableValue<? extends Message> ov, Message old, Message newM) {
            messageNameTextField.textProperty().unbindBidirectional(old.messageName);
            messageNameTextField.textProperty().bindBidirectional(newM.messageName);
        }
    });

and update your Message class. To work correctly with TableView it requires to be full FX “bean” and expose property through method:

public StringProperty messageNameProperty() {
    return messageName;
}