A CSS newbie question.
I'm displaying a wide set of data in two adjacent TableViews and have bi-directionally bound their ScrollBars, FocusModels and SelectionModels to keep them in synch.
I'm now trying to get the two TableViews to look like one and would like to have:
- The default blue border around both
TableViews when eitherTableViewhas focus. - The default grey border around both
TableViews when neither has focus. - No borders where the
TableViews meet.
How would I go about doing that?
Something like this would be great:
Thus far, I've been able to remove the "meet" borders by doing this:
tvLeft.getStyleClass().add("my-table-view-left");
tvRight.getStyleClass().add("my-table-view-right");
with CSS like this:
.my-table-view-left:focused {
-fx-background-insets: -1.4 0 -1.4 -1.4, -0.3 0 -0.3 -0.3, 1 0 1 1;
}
.my-table-view-right:focused {
-fx-background-insets: -1.4 -1.4 -1.4 0, -0.3 -0.3 -0.3 0, 1 1 1 0;
}
This also correctly sets the border on a single TableView when one of its rows is selected.
However, I can't figure out how to get the border around both TableViews when either has focus.
Here is a MVCE. Apologies for its length but I needed to include the synchronisation code in order to have a test case.
I'm using the 11.0.2 versions of OpenJDK and OpenJFX, running in Netbeans 10.0 on Windows 7.
MyTableViewCSS.css
/************************************************************************************************************
Trying to set the borders of the synchronised tableviews
*/
.my-table-view-left:focused {
-fx-background-insets: -1.4 0 -1.4 -1.4, -0.3 0 -0.3 -0.3, 1 0 1 1;
-fx-focus-color: red; /* for testing only */
}
.my-table-view-right:focused {
-fx-background-insets: -1.4 -1.4 -1.4 0, -0.3 -0.3 -0.3 0, 1 1 1 0;
-fx-focus-color: red; /* for testing only */
}
/************************************************************************************************************
The following section hides the horizontal and vertical tableview scrollbars.
They are replaced by scrollbars manually added to the form.
Source: https://stackoverflow.com/questions/26713162/javafx-disable-horizontal-scrollbar-of-tableview
*/
.my-table-view *.scroll-bar:horizontal *.increment-button,
.my-table-view *.scroll-bar:horizontal *.decrement-button {
-fx-background-color: null;
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-padding: 0;
}
.my-table-view *.scroll-bar:horizontal *.increment-arrow,
.my-table-view *.scroll-bar:horizontal *.decrement-arrow {
-fx-background-color: null;
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-padding: 0;
-fx-shape: null;
}
.my-table-view *.scroll-bar:vertical *.increment-button,
.my-table-view *.scroll-bar:vertical *.decrement-button {
-fx-background-color: null;
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-padding: 0;
}
.my-table-view *.scroll-bar:vertical *.increment-arrow,
.my-table-view *.scroll-bar:vertical *.decrement-arrow {
-fx-background-color: null;
-fx-background-radius: 0;
-fx-background-insets: 0;
-fx-padding: 0;
-fx-shape: null;
}
Test014.java
package test014;
import java.util.Arrays;
import java.util.function.Function;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.application.Platform;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.geometry.Insets;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.geometry.VPos;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollBar;
import javafx.scene.control.SelectionMode;
import javafx.scene.control.TableColumn;
import javafx.scene.control.TableView;
import javafx.scene.control.cell.TextFieldTableCell;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;
import javafx.util.converter.DefaultStringConverter;
public class Test014 extends Application {
private final ObservableList<DataModel> ol = FXCollections.observableArrayList();
private final TableView<DataModel> tvLeft = new TableView();
private final TableView<DataModel> tvRight = new TableView();
//Show a tableview that should continue to use the default Modena style. That way I'll know
//if I've messed anything up!
private final ObservableList<DataModel> olDefaultStyle = FXCollections.observableArrayList();
private final TableView<DataModel> tvDefaultStyle = new TableView();
private final ScrollBar vScroll = new ScrollBar();
private final ScrollBar hScroll = new ScrollBar();
private Parent createContent() {
loadDummyData();
createTableColumns();
tvLeft.setItems(ol);
tvRight.setItems(ol);
tvLeft.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
tvRight.getSelectionModel().setSelectionMode(SelectionMode.MULTIPLE);
//Bi-directionally bind the selection and focus models of the two tables.
tvLeft.selectionModelProperty().bindBidirectional(tvRight.selectionModelProperty());
tvLeft.focusModelProperty().bindBidirectional(tvRight.focusModelProperty());
tvLeft.getSelectionModel().selectFirst();
vScroll.setOrientation(Orientation.VERTICAL);
hScroll.setOrientation(Orientation.HORIZONTAL);
tvLeft.getStyleClass().add("my-table-view");
tvRight.getStyleClass().add("my-table-view");
tvLeft.getStyleClass().add("my-table-view-left");
tvRight.getStyleClass().add("my-table-view-right");
Platform.runLater(() -> {
Scene scene = tvLeft.getScene();
String appStyleSheet = "MyTableViewCSS.css";
scene.getStylesheets().add(this.getClass().getResource(appStyleSheet).toString());
//Do the bindings necesary to synchronise the tableviews
synchroniseTheTableViews();
});
//Load the tableviews in a gridpane so I can control the width of the left-hand tableview
GridPane gp = new GridPane();
ColumnConstraints cc1 = new ColumnConstraints();
cc1.setPrefWidth(130D);
cc1.setMaxWidth(130D);
cc1.setMinWidth(130D);
gp.getColumnConstraints().addAll(Arrays.asList(cc1));
gp.add(tvLeft, 0, 0);
gp.add(tvRight, 1, 0);
GridPane.setValignment(tvLeft, VPos.TOP);
GridPane.setVgrow(tvRight, Priority.ALWAYS);
//Put the gridpane in a borderpane so I can then add vScroll and hScroll
BorderPane content = new BorderPane();
gp.prefHeightProperty().bind(content.heightProperty());
gp.prefWidthProperty().bind(content.widthProperty());
content.setCenter(gp);
content.setRight(vScroll);
content.setBottom(hScroll);
//Add buttons to show and hide the tableview that should continue to have the default Modena style
Button btnShowTvDefaultStyle = new Button("Show TV with default style");
btnShowTvDefaultStyle.setOnAction(event -> {
content.setLeft(tvDefaultStyle);
});
Button btnHideTvDefaultStyle = new Button("Hide TV with default style");
btnHideTvDefaultStyle.setOnAction(event -> {
content.setLeft(null);
});
HBox hb = new HBox();
hb.setSpacing(20D);
hb.setPadding(new Insets(20D));
hb.setAlignment(Pos.CENTER);
hb.getChildren().addAll(Arrays.asList(btnShowTvDefaultStyle, btnHideTvDefaultStyle));
content.setTop(hb);
return content;
}
private void synchroniseTheTableViews() {
//Bind the first table's header row height to that of the second
Pane header1 = (Pane) tvLeft.lookup("TableHeaderRow");
Pane header2 = (Pane) tvRight.lookup("TableHeaderRow");
header1.prefHeightProperty().bind(header2.heightProperty());
//Now synchronise the scrollbars
ScrollBar scrollBarLeftTv;
ScrollBar scrollBarRightTv;
for ( Node node1: tvLeft.lookupAll(".scroll-bar") ) {
if ( node1 instanceof ScrollBar && ((ScrollBar) node1).getOrientation() == Orientation.VERTICAL ) {
scrollBarLeftTv = (ScrollBar) node1;
for ( Node node2: tvRight.lookupAll(".scroll-bar") ) {
if ( node2 instanceof ScrollBar && ((ScrollBar) node2).getOrientation() == Orientation.VERTICAL ) {
scrollBarRightTv = (ScrollBar) node2;
scrollBarRightTv.valueProperty().bindBidirectional(scrollBarLeftTv.valueProperty());
scrollBarRightTv.maxProperty().bindBidirectional(scrollBarLeftTv.maxProperty());
scrollBarRightTv.minProperty().bindBidirectional(scrollBarLeftTv.minProperty());
scrollBarRightTv.unitIncrementProperty().bindBidirectional(scrollBarLeftTv.unitIncrementProperty());
scrollBarRightTv.visibleAmountProperty().bindBidirectional(scrollBarLeftTv.visibleAmountProperty());
vScroll.valueProperty().bindBidirectional(scrollBarLeftTv.valueProperty());
vScroll.maxProperty().bindBidirectional(scrollBarLeftTv.maxProperty());
vScroll.minProperty().bindBidirectional(scrollBarLeftTv.minProperty());
vScroll.unitIncrementProperty().bindBidirectional(scrollBarLeftTv.unitIncrementProperty());
vScroll.visibleAmountProperty().bindBidirectional(scrollBarLeftTv.visibleAmountProperty());
}
}
}
}
for ( Node node: tvRight.lookupAll(".scroll-bar") ) {
if ( node instanceof ScrollBar && ((ScrollBar) node).getOrientation() == Orientation.HORIZONTAL ) {
ScrollBar scrollBar = (ScrollBar) node;
hScroll.valueProperty().bindBidirectional(scrollBar.valueProperty());
hScroll.maxProperty().bindBidirectional(scrollBar.maxProperty());
hScroll.minProperty().bindBidirectional(scrollBar.minProperty());
hScroll.unitIncrementProperty().bindBidirectional(scrollBar.unitIncrementProperty());
hScroll.visibleAmountProperty().bindBidirectional(scrollBar.visibleAmountProperty());
}
}
}
private void createTableColumns() {
for ( int i=0; i<2; i++ ) {
TableColumn<DataModel, String> col = createColumn(i, DataModel::field1Property);
tvLeft.getColumns().add(col);
}
for ( int i=0; i<12; i++ ) {
TableColumn<DataModel, String> col = createColumn(i, DataModel::field2Property);
tvRight.getColumns().add(col);
}
for ( int i=0; i<3; i++ ) {
TableColumn<DataModel, String> col = createColumn(i, DataModel::field1Property);
tvDefaultStyle.getColumns().add(col);
}
tvDefaultStyle.setItems(olDefaultStyle);
tvDefaultStyle.setPrefWidth(100D);
tvDefaultStyle.setMaxWidth(100D);
tvDefaultStyle.setMinWidth(100D);
}
private TableColumn<DataModel, String> createColumn (int colNum, Function<DataModel, StringProperty> property) {
TableColumn<DataModel,String> col = new TableColumn<>("field" + colNum);
col.setCellValueFactory(cellData -> property.apply(cellData.getValue()));
col.setCellFactory(TextFieldTableCell.<DataModel, String>forTableColumn(new DefaultStringConverter()));
return col;
}
private void loadDummyData() {
for ( int i=0; i<20; i++ ) {
ol.add(new DataModel(Integer.toString(i), "a"));
}
for ( int i=0; i<30; i++ ) {
olDefaultStyle.add(new DataModel(Integer.toString(i), "a"));
}
}
private class DataModel {
private final StringProperty field1;
private final StringProperty field2;
public DataModel(
String field1,
String field2
) {
this.field1 = new SimpleStringProperty(field1);
this.field2 = new SimpleStringProperty(field2);
}
public String getField1() {return field1.get().trim();}
public void setField1(String field1) {this.field1.set(field1);}
public StringProperty field1Property() {return field1;}
public String getField2() {return field2.get().trim();}
public void setField2(String field2) {this.field2.set(field2);}
public StringProperty field2Property() {return field2;}
}
@Override
public void start(Stage stage) throws Exception {
stage.setScene(new Scene(createContent()));
stage.setTitle("OpenJFX11 - Synchronise two TableViews");
stage.setWidth(700D);
stage.setHeight(400D);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
