TableView Future/Enhancements

[Daniel Peintner]

All,

I would like to ask some questions (and provide feedback) w.r.t. the
current TableView control in JavaFX. If this is not the *right* place to
ask such questions please let me know and I apologize.

The desire of a table (spreadsheet) control is to be editable and usable
also with the keyboard. Moreover if using it with a mouse a focus loss is
also mostly likely seen as a commit by a user (and not a revert as it is
now)

Some of the afore mentioned points are not (yet) realized and people seem
to be aware of the issue (see [1]). I am not sure if there is work planned
w.r.t. JDK-8089514 given that the work seems stalled...

Attached is an EditableTableCell application that supports some of the
desired features (but far not all). It uses some very dirty hacks to
achieve for example editing and walking through a table (I tend to say some
(all?) features should be built-in already).

With this email I would like to

   1. Raise the question whether future work is planned in the area of
   TableView
   (e.g., TableView2 that used to be part of ControlsFX but I think belongs
   to the core TableView)
   2. Show some use cases people might have in mind when using a table
   control.

The attached example allows one to

   - walk through a table when in editing mode (up/down with cursor,
   left/right with tabs)
   e.g., double click in upper left corner and walk on with tab key
   - (optionally) register a callable that adds a *new* row if end is
   reached
   - skip some columns that are not editable (like pulldown boxes)


Missing features

   - better F2 edit support
   - use the keyboard also with combo boxes or other cell controls


Please let me know whether there is interest in having such capabilities in
the built-in TableView control and how I can help. I am open for
suggestions.
(i.e. I think  JDK-8089514 could be solved at least for TableView. Not sure
though about the other mentioned controls were I don't have the big picture)

Sorry again for the lengthy email and any feedback is welcome!

Thanks,

-- Daniel

[1] https://bugs.openjdk.java.net/browse/JDK-8089514


#############################

import javafx.application.Application;
import javafx.application.Platform;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.collections.transformation.SortedList;
import javafx.concurrent.Task;
import javafx.event.Event;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.stage.Stage;
import javafx.util.Pair;
import javafx.util.StringConverter;
import javafx.util.converter.DefaultStringConverter;
import javafx.util.converter.IntegerStringConverter;

import java.io.File;
import java.io.IOException;
import java.nio.file.Files;
import java.nio.file.Paths;
import java.util.ArrayList;
import java.util.List;
import java.util.concurrent.Callable;

public class EditableTableCellApplication extends Application {

    public class EditableTableCell<S, T> extends TableCell<S, T> {

        public final Object NOT_TRAVERSABLE = new Object();

        // Text field for editing
        // TODO: allow this to be a pluggable control
        final TextField textField = new TextField();

        // converter for converting the text in the text field to the user
type, and vice-versa
        final StringConverter<T> converter;

        // callable to create new row
        final Callable<Void> callableOnRowEnd;

        public EditableTableCell(StringConverter<T> converter) {
            this(converter, false);
        }

        public EditableTableCell(StringConverter<T> converter, boolean
traverseEditableCell) {
            this(converter, traverseEditableCell, null);
        }

        public EditableTableCell(StringConverter<T> converter, boolean
traverseEditableCell, Callable<Void> callableOnRowEnd) {
            this.converter = converter;
            this.callableOnRowEnd = callableOnRowEnd;

            itemProperty().addListener((obx, oldItem, newItem) -> {
                if (newItem == null) {
                    setText(null);
                } else {
                    setText(converter.toString(newItem));
                }
            });
            setGraphic(textField);
            setContentDisplay(ContentDisplay.TEXT_ONLY);

            textField.setOnAction(evt ->
commitEdit(this.converter.fromString(textField.getText())));
            textField.focusedProperty().addListener((obs, wasFocused,
isNowFocused) -> {
                if (!isNowFocused) {

commitEdit(this.converter.fromString(textField.getText()));
                }
            });
            textField.addEventFilter(KeyEvent.KEY_PRESSED, event -> {
                if (event.getCode() == KeyCode.ESCAPE) {
                    textField.setText(converter.toString(getItem()));
                    cancelEdit();
                    event.consume();
                } else if ((!event.isShiftDown() && event.getCode() ==
KeyCode.TAB)) {
                    event.consume();
                    getTableView().getSelectionModel().selectRightCell();
                    if (traverseEditableCell) {
                        Pair<TableColumn<S, ?>, Boolean> pairTcEnd =
getNextVisibleColumn(true);
                        if (pairTcEnd.getValue() != null &&
pairTcEnd.getValue()) {
                            // reached end -> new line
                            TableColumn<S, ?> tc0 =
getFirstTraversableColumn();
                            if (tc0 != null) {
                                //noinspection ConstantConditions
                                moveRowDown(tc0, event,
traverseEditableCell);
                            }
                        } else {
                            // move right in row
                            makeCellEditable(getTableRow().getIndex(),
getTableView(), pairTcEnd.getKey());
                        }
                    }
                } else if ((event.isShiftDown() && event.getCode() ==
KeyCode.TAB)) {
                    if (traverseEditableCell) {
                        Pair<TableColumn<S, ?>, Boolean> pairTcEnd =
getNextVisibleColumn(false);
                        if (pairTcEnd.getValue() != null &&
pairTcEnd.getValue()) {
                            // reached end -> new line
                            TableColumn<S, ?> tcLast =
getLastTraversableColumn();
                            if (tcLast != null) {
                                //noinspection ConstantConditions
                                moveRowUp(tcLast, event,
traverseEditableCell);
                            }
                        } else {
                            // move left in row
                            makeCellEditable(getTableRow().getIndex(),
getTableView(), pairTcEnd.getKey());
                        }
                    }
                } else if (event.getCode() == KeyCode.UP) {
                    moveRowUp(getTableColumn(), event,
traverseEditableCell);
                } else if (event.getCode() == KeyCode.DOWN) {
                    moveRowDown(getTableColumn(), event,
traverseEditableCell);
                }
            });
        }


        // set the text of the text field and display the graphic
        @Override
        public void startEdit() {
            if (!editableProperty().get()) {
                return;
            }

            super.startEdit();
            textField.setText(converter.toString(getItem()));
            setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
            textField.requestFocus();
        }

        // revert to text display
        @Override
        public void cancelEdit() {
            super.cancelEdit();
            setContentDisplay(ContentDisplay.TEXT_ONLY);
        }

        // commits the edit. Update property if possible and revert to text
display
        @Override
        public void commitEdit(T item) {
            // This block is necessary to support commit on losing focus,
because the baked-in mechanism
            // sets our editing state to false before we can intercept the
loss of focus.
            // The default commitEdit(...) method simply fails if we are
not editing...
            if (!isEditing() && item != null && !item.equals(getItem())) {
                TableView<S> table = getTableView();
                if (table != null) {
                    TableColumn<S, T> column = getTableColumn();
                    TableColumn.CellEditEvent<S, T> event = new
TableColumn.CellEditEvent<>(table,
                            new TablePosition<>(table, getIndex(), column),
                            TableColumn.editCommitEvent(), item);
                    Event.fireEvent(column, event);
                }
            }

            super.commitEdit(item);

            setContentDisplay(ContentDisplay.TEXT_ONLY);
        }

        private void makeCellEditable(int row2, TableView<S> tw,
TableColumn<S, ?> tc) {
            if (tc != null) {
                // HACK, JavaFX BUG!!!
                Task<Void> task = new Task<Void>() {
                    @Override
                    protected Void call() throws Exception {
                        Thread.sleep(10);
                        Platform.runLater(() -> {
                            if (row2 >= 0 && row2 < tw.getItems().size()) {
                                tw.getSelectionModel().clearAndSelect(row2,
tc);
                                tw.edit(row2, tc);
                            }
                        });
                        return null;
                    }
                };

                Thread th = new Thread(task);
                th.start();
            }
        }

        private TableColumn<S, ?> getFirstTraversableColumn() {
            for (TableColumn<S, ?> tc : getTableView().getColumns()) {
                if (isTraversable(tc)) {
                    return tc;
                }
            }
            return null;
        }

        private TableColumn<S, ?> getLastTraversableColumn() {
            for (int i = getTableView().getColumns().size() - 1; i >= 0;
i--) {
                TableColumn<S, ?> tc = getTableView().getColumns().get(i);
                if (isTraversable(tc)) {
                    return tc;
                }
            }
            return null;
        }

        private void moveRowDown(TableColumn<S, ?> tc, Event event, boolean
traverseEditableCell) {
            int row2 = getTableRow().getIndex() + 1;
            //noinspection StatementWithEmptyBody
            if (row2 < getTableView().getItems().size()) {
                // still ok --> normal select
            } else {
                // expand rows
                if (callableOnRowEnd != null) {
                    try {
                        callableOnRowEnd.call();
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                }
            }
            // select
            getTableView().getSelectionModel().clearAndSelect(row2, tc);

            commitEdit(converter.fromString(textField.getText())); //
needed (otherwise data lost)
            event.consume();

            if (traverseEditableCell) {
                makeCellEditable(row2, getTableView(), tc);
            }
        }

        private void moveRowUp(TableColumn<S, ?> tc, Event event, boolean
traverseEditableCell) {
            int row2 = getTableRow().getIndex() - 1;

            // select
            getTableView().getSelectionModel().clearAndSelect(row2, tc);

            commitEdit(converter.fromString(textField.getText())); //
needed (otherwise data lost)
            event.consume();

            if (traverseEditableCell) {
                makeCellEditable(row2, getTableView(), tc);
            }
        }

        private Pair<TableColumn<S, ?>, Boolean>
getNextVisibleColumn(boolean forward) {
            List<TableColumn<S, ?>> columns = new ArrayList<>();
            for (TableColumn<S, ?> column : getTableView().getColumns()) {
                columns.addAll(getLeaves(column));
            }
            int nextIndex = columns.indexOf(getTableColumn());

            TableColumn<S, ?> tc;
            boolean reachedEdge = false;
            do {
                if (forward) {
                    nextIndex++;
                    if (nextIndex > columns.size() - 1) {
                        nextIndex = columns.size() - 1;
                        reachedEdge = true;
                    }
                } else {
                    nextIndex--;
                    if (nextIndex < 0) {
                        nextIndex = 0;
                        reachedEdge = true;
                    }
                }

                tc = columns.get(nextIndex);

            } while (!tc.isVisible() && !reachedEdge);

            return new Pair<>(tc, reachedEdge);
        }

        private List<TableColumn<S, ?>> getLeaves(
                TableColumn<S, ?> root) {
            List<TableColumn<S, ?>> columns = new ArrayList<>();
            if (root.getColumns().isEmpty()) {
                // We only want the leaves that are editable / traversable
                if (isTraversable(root)) {
                    columns.add(root);
                }
            } else {
                for (TableColumn<S, ?> column : root.getColumns()) {
                    columns.addAll(getLeaves(column));
                }
            }
            return columns;
        }

        private boolean isTraversable(TableColumn<S, ?> tc) {
            if (tc != null) {
                return (tc.isEditable() && tc.getUserData() !=
NOT_TRAVERSABLE);
            }
            return false;
        }
    }

    public class Person {

        final StringProperty firstName;
        final StringProperty lastName;
        final ObjectProperty<Integer> age;

        public Person() {
            this.firstName = new SimpleStringProperty();
            this.lastName = new SimpleStringProperty();
            this.age = new SimpleObjectProperty<>();
        }

        public Person(String firstName, String lastName, int age) {
            this();
            this.firstName.set(firstName);
            this.lastName.set(lastName);
            this.age.set(age);
        }

        public StringProperty firstNameProperty() {
            return this.firstName;
        }

        public StringProperty lastNameProperty() {
            return this.lastName;
        }

        public ObjectProperty<Integer> ageProperty() {
            return this.age;
        }
    }

    class CallableAdd implements Callable<Void> {
        @Override
        public Void call() {
            detailData.add(new Person());
            return null;
        }
    }

    // The table's data
    ObservableList<Person> detailData = FXCollections.observableArrayList();

    @Override
    public void start(Stage primaryStage) throws IOException {
        TableView<Person> tableView = new TableView<>();
        tableView.setEditable(true);
        // without the following cell selection setting SHIFT+TAB does not
work
        tableView.getSelectionModel().setCellSelectionEnabled(true);

        boolean traversable = true;
        CallableAdd callableAdd = new CallableAdd();

        // remove empty row highlighting to better illustrate that *new*
rows are added by tabbing through
        File f = File.createTempFile("style", ".css");
        Files.write(Paths.get(f.getPath()), ".table-row-cell:empty
{-fx-background-color: white;} .table-row-cell:empty .table-cell
{-fx-border-width: 0px;}".getBytes());
        tableView.getStylesheets().add("file:///" +
f.getAbsolutePath().replace("\\", "/"));

        TableColumn<Person, String> columnFirstName = new
TableColumn<>("First Name");
        columnFirstName.setCellValueFactory(param ->
param.getValue().firstNameProperty());
        columnFirstName.setCellFactory(column -> new
EditableTableCell<>(new DefaultStringConverter(), traversable,
callableAdd));
        columnFirstName.setEditable(true);

        TableColumn<Person, String> columnLastName = new
TableColumn<>("Last Name");
        columnLastName.setCellValueFactory(param ->
param.getValue().lastNameProperty());
        columnLastName.setCellFactory(column -> new EditableTableCell<>(new
DefaultStringConverter(), traversable, callableAdd));
        columnLastName.setEditable(true);

        TableColumn<Person, Integer> columnAge = new TableColumn<>("Age");
        columnAge.setCellValueFactory(param ->
param.getValue().ageProperty());
        columnAge.setCellFactory(column -> new EditableTableCell<>(new
IntegerStringConverter(), traversable, callableAdd));
        columnAge.setEditable(true);

        tableView.getColumns().addAll(columnFirstName, columnLastName,
columnAge);

        SortedList<Person> sortedData = new SortedList<>(detailData);
        tableView.setItems(sortedData);
        detailData.add(new Person("John", "Doe", 25));
        detailData.add(new Person("Jane", "Deer", 30));

        // create and show scene
        Scene scene = new Scene(tableView, 600, 400);
        primaryStage.setTitle("Editable TableCell Application");
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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