Sync scrollbars for two TableViews not working with empty table

Question

Using this example here:

Works great to create multiple tables for summation rows. I also needed the scrollbar visible on the bottom table as well. However, the bottom table's scrollbar doesn't sync with the main table (at first with empty content). When there is data, the scrollbar syncs properly.

When you add data to the table, then remove the data, again, scroll bars sync properly. So I know they can still be synced with a table with empty content.

Here is the example code (with two buttons on the top to add and clear items)

package testsummary;

import java.text.Format;
import java.time.LocalDate;
import java.time.Month;
import java.util.Set;

import javafx.application.Application;
import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.scene.Group;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollBar;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.PropertyValueFactory;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;
import javafx.util.Callback;

/**
 * Table with a summary table. The summary table is a 2nd table which is
 * synchronized with the primary table.
 *
 * TODO: + always show vertical bars for both the primary and the summary table,
 * otherweise the width of both tables wouldn't be the same + hide the
 * horizontal scrollbar of the summary table
 *
 */
public class SummaryTableDemo extends Application
{

    private TableView mainTable = new TableView<>();
    private TableView sumTable = new TableView<>();

    private final ObservableList data
            = FXCollections.observableArrayList();

    // TODO: calculate values
    private final ObservableList sumData
            = FXCollections.observableArrayList(
                    new SumData("Sum", 0.0, 0.0, 0.0),
                    new SumData("Min", 0.0, 0.0, 0.0),
                    new SumData("Max", 0.0, 0.0, 0.0)
            );

    final HBox hb = new HBox();

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

    @Override
    public void start(Stage stage)
    {

        Scene scene = new Scene(new Group());

        // load css
        //  scene.getStylesheets().addAll(getClass().getResource("application.css").toExternalForm());
        stage.setTitle("Table View Sample");
        stage.setWidth(250);
        stage.setHeight(550);

        // setup table columns
        setupMainTableColumns();
        setupSumTableColumns();

        // fill tables with data
        mainTable.setItems(data);
        sumTable.setItems(sumData);

        // set dimensions
        sumTable.setPrefHeight(90);

        // bind/sync tables
        for (int i = 0; i < mainTable.getColumns().size(); i++)
        {

            TableColumn mainColumn = mainTable.getColumns().get(i);
            TableColumn sumColumn = sumTable.getColumns().get(i);

            // sync column widths
            sumColumn.prefWidthProperty().bind(mainColumn.widthProperty());

            // sync visibility
            sumColumn.visibleProperty().bindBidirectional(mainColumn.visibleProperty());

        }

        // allow changing of column visibility
        //mainTable.setTableMenuButtonVisible(true);
        // hide header (variation of jewelsea's solution: http://stackoverflow.com/questions/12324464/how-to-javafx-hide-background-header-of-a-tableview)
        sumTable.getStyleClass().add("tableview-header-hidden");

        // hide horizontal scrollbar via styles
        //   sumTable.getStyleClass().add("sumtable");
        // create container
        BorderPane bp = new BorderPane();

        Button addButton = new Button("+");
        Button clearButton = new Button("X");

        addButton.setOnAction((ActionEvent c) ->
        {
            data.add(new Data(LocalDate.of(2015, Month.JANUARY, 11), 40.0, 50.0, 60.0));
        });
        clearButton.setOnAction((ActionEvent c) ->
        {
            data.clear();
        });

        HBox buttonBar = new HBox(clearButton, addButton);
        bp.setTop(buttonBar);
        bp.setCenter(mainTable);
        bp.setBottom(sumTable);

        // fit content
        bp.prefWidthProperty().bind(scene.widthProperty());
        bp.prefHeightProperty().bind(scene.heightProperty());

        ((Group) scene.getRoot()).getChildren().addAll(bp);

        stage.setScene(scene);
        stage.show();

        // synchronize scrollbars (must happen after table was made visible)
        ScrollBar mainTableHorizontalScrollBar = findScrollBar(mainTable, Orientation.HORIZONTAL);
        ScrollBar sumTableHorizontalScrollBar = findScrollBar(sumTable, Orientation.HORIZONTAL);
        mainTableHorizontalScrollBar.valueProperty().bindBidirectional(sumTableHorizontalScrollBar.valueProperty());

    }

    /**
     * Primary table column mapping.
     */
    private void setupMainTableColumns()
    {

        TableColumn dateCol = new TableColumn<>("Date");
        dateCol.setPrefWidth(120);
        dateCol.setCellValueFactory(new PropertyValueFactory<>("date"));

        TableColumn value1Col = new TableColumn<>("Value 1");
        value1Col.setPrefWidth(90);
        value1Col.setCellValueFactory(new PropertyValueFactory<>("value1"));
        value1Col.setCellFactory(new FormattedTableCellFactory<>(TextAlignment.RIGHT));

        TableColumn value2Col = new TableColumn<>("Value 2");
        value2Col.setPrefWidth(90);
        value2Col.setCellValueFactory(new PropertyValueFactory<>("value2"));
        value2Col.setCellFactory(new FormattedTableCellFactory<>(TextAlignment.RIGHT));

        TableColumn value3Col = new TableColumn<>("Value 3");
        value3Col.setPrefWidth(90);
        value3Col.setCellValueFactory(new PropertyValueFactory<>("value3"));
        value3Col.setCellFactory(new FormattedTableCellFactory<>(TextAlignment.RIGHT));

        mainTable.getColumns().addAll(dateCol, value1Col, value2Col, value3Col);

    }

    /**
     * Summary table column mapping.
     */
    private void setupSumTableColumns()
    {

        TableColumn textCol = new TableColumn<>("Text");
        textCol.setCellValueFactory(new PropertyValueFactory<>("text"));

        TableColumn value1Col = new TableColumn<>("Value 1");
        value1Col.setCellValueFactory(new PropertyValueFactory<>("value1"));
        value1Col.setCellFactory(new FormattedTableCellFactory<>(TextAlignment.RIGHT));

        TableColumn value2Col = new TableColumn<>("Value 2");
        value2Col.setCellValueFactory(new PropertyValueFactory<>("value2"));
        value2Col.setCellFactory(new FormattedTableCellFactory<>(TextAlignment.RIGHT));

        TableColumn value3Col = new TableColumn<>("Value 3");
        value3Col.setCellValueFactory(new PropertyValueFactory<>("value3"));
        value3Col.setCellFactory(new FormattedTableCellFactory<>(TextAlignment.RIGHT));

        sumTable.getColumns().addAll(textCol, value1Col, value2Col, value3Col);

    }

    /**
     * Find the horizontal scrollbar of the given table.
     *
     * @param table
     * @return
     */
    private ScrollBar findScrollBar(TableView table, Orientation orientation)
    {

        // this would be the preferred solution, but it doesn't work. it always gives back the vertical scrollbar
        //      return (ScrollBar) table.lookup(".scroll-bar:horizontal");
        //      
        // => we have to search all scrollbars and return the one with the proper orientation
        Set set = table.lookupAll(".scroll-bar");
        for (Node node : set)
        {
            ScrollBar bar = (ScrollBar) node;
            if (bar.getOrientation() == orientation)
            {
                return bar;
            }
        }

        return null;

    }

    /**
     * Data for primary table rows.
     */
    public static class Data
    {

        private final ObjectProperty date;
        private final SimpleDoubleProperty value1;
        private final SimpleDoubleProperty value2;
        private final SimpleDoubleProperty value3;

        public Data(LocalDate date, double value1, double value2, double value3)
        {

            this.date = new SimpleObjectProperty(date);

            this.value1 = new SimpleDoubleProperty(value1);
            this.value2 = new SimpleDoubleProperty(value2);
            this.value3 = new SimpleDoubleProperty(value3);
        }

        public final ObjectProperty dateProperty()
        {
            return this.date;
        }

        public final LocalDate getDate()
        {
            return this.dateProperty().get();
        }

        public final void setDate(final LocalDate date)
        {
            this.dateProperty().set(date);
        }

        public final SimpleDoubleProperty value1Property()
        {
            return this.value1;
        }

        public final double getValue1()
        {
            return this.value1Property().get();
        }

        public final void setValue1(final double value1)
        {
            this.value1Property().set(value1);
        }

        public final SimpleDoubleProperty value2Property()
        {
            return this.value2;
        }

        public final double getValue2()
        {
            return this.value2Property().get();
        }

        public final void setValue2(final double value2)
        {
            this.value2Property().set(value2);
        }

        public final SimpleDoubleProperty value3Property()
        {
            return this.value3;
        }

        public final double getValue3()
        {
            return this.value3Property().get();
        }

        public final void setValue3(final double value3)
        {
            this.value3Property().set(value3);
        }

    }

    /**
     * Data for summary table rows.
     */
    public static class SumData
    {

        private final SimpleStringProperty text;
        private final SimpleDoubleProperty value1;
        private final SimpleDoubleProperty value2;
        private final SimpleDoubleProperty value3;

        public SumData(String text, double value1, double value2, double value3)
        {

            this.text = new SimpleStringProperty(text);

            this.value1 = new SimpleDoubleProperty(value1);
            this.value2 = new SimpleDoubleProperty(value2);
            this.value3 = new SimpleDoubleProperty(value3);
        }

        public final SimpleStringProperty textProperty()
        {
            return this.text;
        }

        public final java.lang.String getText()
        {
            return this.textProperty().get();
        }

        public final void setText(final java.lang.String text)
        {
            this.textProperty().set(text);
        }

        public final SimpleDoubleProperty value1Property()
        {
            return this.value1;
        }

        public final double getValue1()
        {
            return this.value1Property().get();
        }

        public final void setValue1(final double value1)
        {
            this.value1Property().set(value1);
        }

        public final SimpleDoubleProperty value2Property()
        {
            return this.value2;
        }

        public final double getValue2()
        {
            return this.value2Property().get();
        }

        public final void setValue2(final double value2)
        {
            this.value2Property().set(value2);
        }

        public final SimpleDoubleProperty value3Property()
        {
            return this.value3;
        }

        public final double getValue3()
        {
            return this.value3Property().get();
        }

        public final void setValue3(final double value3)
        {
            this.value3Property().set(value3);
        }

    }

    /**
     * Formatter for table cells: allows you to align table cell values
     * left/right/center
     *
     * Example for alignment form
     * http://docs.oracle.com/javafx/2/fxml_get_started/fxml_tutorial_intermediate.htm
     *
     * @param 
     * @param 
     */
    public static class FormattedTableCellFactory implements Callback, TableCell>
    {

        private TextAlignment alignment = TextAlignment.LEFT;
        private Format format;

        public FormattedTableCellFactory()
        {
        }

        public FormattedTableCellFactory(TextAlignment alignment)
        {
            this.alignment = alignment;
        }

        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;
        }

        @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;
        }
    }

}

kleopatra · Accepted Answer

No solution (which probably would require some real work in the bowels of VirtualFlow and/or TableViewSkin) but a dirty trick: add/remove data after wiring the scrollBars

addButton.fire();
Platform.runLater(( ) -> {
    clearButton.fire();
});

The drawback is a short but perceptible flicker ...

Update

After a bit of digging ("geht-nicht-gibt's-nicht" - don't know the English idiom, sry) I found a way to force the VirtualFlow into an initial layout pass even if there are no items: the basic idea is to temporarily set the flow's cellCount > 0 even if there are no items. The tricky part is to do it at the right time in the skin's life: only once, sometime early but only after the normal layout has happened.

The implementation below

has a flag to indicate whether or not to fake the itemCount
sets the flag in a listener to the containing window's showing property: this assumes a normal setting of the default skin while being added to the scenegraph
overridden getItemCount to return at least 1 if the flag is set
overridden layoutChildren that forces a fake layout if the flag is set
the forced layout is achieved by calling updateItemCount twice: once with and once without flag

Still dirty, but more fun :)

public static class TweakedTableSkin extends TableViewSkin {

    private boolean forceNotEmpty = false;

    ChangeListener showingListener = (src, ov, nv) -> {
        initForceNotEmpty(src);
    };

    public TweakedTableSkin(TableView control) {
        super(control);

        Window window = getSkinnable().getScene().getWindow();
        if (window != null)
            window.showingProperty().addListener(showingListener);
    }

    /**
     * Overridden to force a re-layout with faked itemCount after calling
     * super if the fake flag is true.
     */
    @Override
    protected void layoutChildren(double x, double y, double w, double h) {
        super.layoutChildren(x, y, w, h);
        if (forceNotEmpty) {
            forceNotEmptyLayout();
        }
    }

    /**
     * Callback from listener installed on window's showing property.
     * Implemented to set the forceNotEmpty flag and remove the listener.
     */
    private void initForceNotEmpty(ObservableValue src) {
        forceNotEmpty = true;
        src.removeListener(showingListener);
    }

    /**
     * Enforces a layout pass on the flow with at least one row.
     * Resets the forceNotEmpty flag and triggers a second
     * layout pass with the correct count.
     */
    private void forceNotEmptyLayout() {
        if (!forceNotEmpty) return;
        updateItemCount();
        forceNotEmpty = false;
        updateItemCount();
    }

    /**
     * Overridden to return at least 1 if forceNotEmpty is true.
     */
    @Override
    protected int getItemCount() {
        int itemCount = super.getItemCount();
        if (forceNotEmpty && itemCount == 0) {
            itemCount = 1;
        }
        return itemCount;
    }

}

Usage by extending TableView with an overridden createDefaultSkin:

private TableView mainTable = new TableView<>() {

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

};

Sync scrollbars for two TableViews not working with empty table

Answers (1)

Related Questions