I'm creating a custom header for my TableColumns that is the label of the column plus a TextField that will allow users to perform searches. I'm setting the column headers like so:
getColumns().addListener(new ListChangeListener<TableColumn<S, ?>>() {
#Override
public void onChanged(final ListChangeListener.Change<? extends TableColumn<S, ?>> change) {
while (change.next()) {
Label label;
TextField search;
VBox graphic;
for (TableColumn<S, ?> column : change.getAddedSubList()) {
label = new Label(column.getText());
search = new TextField();
graphic = new VBox();
graphic.getStyleClass().add("k-column-graphic");
graphic.getChildren().addAll(label, search);
column.setGraphic(graphic);
}
}
}
});
So the column's graphic is what is displayed. I'm using the following CSS (the graphic itself has a "k-column-graphic" CSS class, while the TableView has a "k-table-view" CSS class)
/** Hide default text label in KTableView */
.k-table-view .column-header > .label {
-fx-content-display: graphic-only;
}
.k-column-graphic {
-fx-alignment: center-left;
-fx-spacing: 5;
-fx-padding: 2;
}
This works great, but I'm also allowing the columns to be hidden by enabling the TableView.setTableMenuButtonVisible(true); property, which adds a button to easily hide columns.
Whenever I try to hide a column, it hides successfully, but the graphic (the Label/TextField) remain. Both seem to have a width of 0 or 1, and are very small, but you can still see them.
How, either through CSS or somewhere in my code, do I make it to where the graphic Node for the TableColumn will hide as well?
When you toggle the CheckMenuItem to show/hide the column, your customized controls won't automatically change their values of VisibleProperty. So what you need to do is simply bind the VisibleProperty of your own controls to the TableColumn's VisibleProperty.
Following sample is based on your code. Hoping it can help.
getColumns().addListener(new ListChangeListener<TableColumn<S, ?>>() {
#Override
public void onChanged(final ListChangeListener.Change<? extends TableColumn<S, ?>> change) {
while (change.next()) {
Label label;
TextField search;
VBox graphic;
for (TableColumn<S, ?> column : change.getAddedSubList()) {
label = new Label(column.getText());
search = new TextField();
graphic = new VBox();
graphic.getStyleClass().add("k-column-graphic");
graphic.getChildren().addAll(label, search);
column.setGraphic(graphic);
/* ======= add the following two lines ============== */
label.visibleProperty().bind(column.visibleProperty());
search.visibleProperty().bind(column.visibleProperty());
}
}
}
});
Related
In order for the end-user to constrain a search to some columns of the main TableView, I needed a treeview with checkboxes.
I decided to embed this TreeView in a popup, showing on click on a custom button.
I have created the following class, inspired from the question:
Java FX8 TreeView in a table cell
public class CustomTreeMenuButton extends MenuButton {
private PopupControl popup = new PopupControl();
private TreeView<? extends Object> tree;
private CustomTreeMenuButton me = this;
public void setTree(TreeView<? extends Object> tree) {
this.tree = tree;
}
public CustomTreeMenuButton() {
super();
this.addEventHandler(MouseEvent.MOUSE_CLICKED, new EventHandler<MouseEvent>() {
#Override
public void handle(MouseEvent event) {
if (!popup.isShowing()) {
Bounds b = me.localToScreen(me.getBoundsInLocal());
double x = b.getMinX();
double y = b.getMaxY();
popup.setAutoHide(true);
// popup.setAutoFix(true);
popup.setAnchorX(x);
popup.setAnchorY(y);
popup.setSkin(new Skin<Skinnable>() {
#Override
public void dispose() {
}
#Override
public Node getNode() {
return tree;
}
#Override
public Skinnable getSkinnable() {
return null;
}
});
popup.show(me.getScene().getWindow());
}
}
});
}
}
The tree I am working with contains CheckBoxTreeItem objects, and while the popup is working, there is some weird blur on all checkboxes, whenever the focus is not on a checkbox. (See GIF below)
First, I was thinking it was maybe an antialiasing problem, but popup.getScene().getAntiAliasing().toString() returns DISABLED
Then, I saw that non integer anchor points could cause problems. However popup.setAutoFix(true) did nothing, nor did the following:
popup.setAnchorX(new Double(x).intValue());
popup.setAnchorY(new Double(y).intValue());
It might be worth noting that I am working with FXML.
How can I get sharp checkboxes regardless of their focus ?
I would suggest a built-in control, CustomMenuItem, rather than reinventing the wheel:
A MenuItem that allows for arbitrary nodes to be embedded within it,
by assigning a Node to the content property.
An example
// Create the tree
CheckBoxTreeItem<String> rootItem = new CheckBoxTreeItem<String>("All stuff");
rootItem.setExpanded(true);
final TreeView<String> tree = new TreeView<String>(rootItem);
tree.setEditable(true);
tree.setCellFactory(CheckBoxTreeCell.<String>forTreeView());
for (int i = 0; i < 8; i++) {
final CheckBoxTreeItem<String> checkBoxTreeItem =
new CheckBoxTreeItem<String>("Stuff" + (i+1));
rootItem.getChildren().add(checkBoxTreeItem);
}
tree.setRoot(rootItem);
tree.setShowRoot(true);
// Create a custom menu item
CustomMenuItem customMenuItem = new CustomMenuItem(tree);
customMenuItem.setHideOnClick(false);
// Create the menu button
MenuButton mb = new MenuButton("Stuffs");
mb.getItems().add(customMenuItem);
And the output
Note: It is important to set the hideOnClickProperty to true, to avoid closing when the user clicks in the tree, which can be even done in the contructor, so you can shorten the initialization to:
CustomMenuItem customMenuItem = new CustomMenuItem(tree, false);
If you want to remove the hover glow, you can add the following CSS class:
.menu-item {
-fx-padding: 0;
}
Hi everyone I have this layout:
Here is the class MainLayout:
public class MainLayout extends VerticalLayout {
/**
*
*/
private static final long serialVersionUID = 1L;
private VerticalLayout upperSection = new VerticalLayout();
private HorizontalSplitPanel lowerSection = new HorizontalSplitPanel();
private VerticalLayout menuLayout = new VerticalLayout();
private VerticalLayout contentLayout = new VerticalLayout();
public MainLayout() {
upperSection.addComponent(new Label("Header"));
menuLayout.addComponent(new Label("Menu"));
contentLayout.addComponent(new Label("Content"));
lowerSection.addComponent(menuLayout);
lowerSection.addComponent(contentLayout);
addComponent(upperSection);
addComponent(lowerSection);
showBorders();
setSizeFull();
lowerSection.setSizeFull();
// menuLayout.setSizeFull();
contentLayout.setSizeFull();
setExpandRatio(lowerSection, 1);
//lowerSection.setSplitPosition(30);
}
private void showBorders() {
String style = "v-ddwrapper-over";
setStyleName(style);
upperSection.setStyleName(style);
lowerSection.setStyleName(style);
menuLayout.setStyleName(style + "-menu");
contentLayout.setStyleName(style + "-content");
}
#SuppressWarnings("serial")
public void addMenuOption(String caption, final Component component) {
Button button = new Button(caption);
menuLayout.addComponent(button);
button.addClickListener(new ClickListener() {
#Override
public void buttonClick(ClickEvent event) {
contentLayout.removeAllComponents();
contentLayout.addComponent(component);
}
});
}
}
This layout class extends VerticalLayout and constructs the basic structure of the layout, the addMenuOption method adds a button to the left menu column and a click listener to it so that when the user clicks on the button the content layout on the right should switch its content from the current to the one bound with the button, now inside the init method of the UI:
protected void init(VaadinRequest request) {
MainLayout layout = new MainLayout();
layout.addMenuOption("Option 1", new Label("Component 1"));
layout.addMenuOption("Option 2", new Label("Component 2"));
setContent(layout);
}
Actually the result I obtain is this:
But my problem is that neither of the two buttons (Option 1, Option 2) are clickable.
Where is the problem?
Thanks for the attention!
You are right. Adding style "v-ddwrapper-over" to one of the components makes the buttons non-clickable. Lets take a look at definition of this style in style.css file.
.appName .v-ddwrapper-over:before, .so5 .v-ddwrapper-over:after {
content: "";
position: absolute;
z-index: 10;
top: -1px;
right: -1px;
bottom: -1px;
left: -1px;
border: 0 solid #197de1;
}
What's important is the fourth line with z-index. This brings a component (more specifficaly div in DOM) to the front covering all others components with less z-index value (usually they have 0).
If you really need this style to be applied to all your components (seems weird to me) consider adding additional style to the buttons with higher z-index value.
Learn more about z-index property here.
In a JavaFX TableView, how can I
Create a multiline column?
Center its content?
And set background color for each (entire) line?
I managed to create a multiline column using a custom CellFactory. I'm also aware of setAlignment(Pos.CENTER) and setTextAlignment(TextAlignment.CENTER) to center text. However, the text in my sample app is not centered properly per line. Furthermore, I did not manage to set a background color on the Text objects. Now my approach is to add a Pane for each line, which works fine. But how do I make the Pane fill the column's entire width and 1/3rd of its height?
As a starting point, this is how I would expect the code to be (though, I'm aware it's not doing what I want):
multiCol.setCellFactory(new Callback<TableColumn<Person, Person>, TableCell<Person, Person>>() {
#Override public TableCell<Person, Person> call(TableColumn<Person, Person> multiCol) {
return new TableCell<Person, Person>() {
private Group grp = null;
#Override public void updateItem(final Person person, boolean empty) {
super.updateItem(person, empty);
this.setAlignment(Pos.CENTER);
if (!isEmpty()) {
Text text = new Text(person.getFirstName());
text.setX(0);
text.setY(0);
text.setTextAlignment(TextAlignment.CENTER); // Center text?
Pane pane = new Pane();
pane.setStyle("-fx-background-color: #66BB66;");
pane.setLayoutX(0);
pane.setLayoutY(0);
pane.setPrefHeight(20);
pane.setPrefWidth(this.prefWidth(-1)); // Column width?
// -----
Text text2 = new Text(person.getLastName());
text2.setX(0);
text2.setY(20);
text2.setTextAlignment(TextAlignment.CENTER); // Center text?
Pane pane2 = new Pane();
pane2.setStyle("-fx-background-color: #79A8D8;");
pane2.setLayoutX(0);
pane2.setLayoutY(20);
pane2.setPrefHeight(20);
pane2.setPrefWidth(this.prefWidth(-1)); // Column width?
// -----
Text text3 = new Text(person.getEmail());
text3.setX(0);
text3.setY(40);
text3.setTextAlignment(TextAlignment.CENTER); // Center text?
Pane pane3 = new Pane();
pane3.setStyle("-fx-background-color: #FF8888;");
pane3.setLayoutX(0);
pane3.setLayoutY(40);
pane3.setPrefHeight(20);
pane3.setPrefWidth(this.prefWidth(-1)); // Column width?
// -----
Group grp = new Group();
grp.getChildren().add(pane);
grp.getChildren().add(text);
grp.getChildren().add(pane2);
grp.getChildren().add(text2);
grp.getChildren().add(pane3);
grp.getChildren().add(text3);
setGraphic(grp);
setStyle("-fx-padding: 0 0 0 0;");
}
}
};
}
});
I'm expecting an output like this:
For a full, compilable code sample please check out this pastebin.
Use a suitable layout pane (e.g. a VBox), and add Labels to it. You can configure the labels to fill the width of a VBox using VBox.setHgrow(...). You also need to set the maximum width of the label to allow it to grow.
As an aside, it is not good practice to re-create the controls every time the updateItem(...) method is called. Create them once and then just configure them in the updateItem(...) method with the required data.
Example:
TableColumn<Person, Person> multiCol = new TableColumn<>("Multiline");
multiCol.setCellValueFactory(cellData ->
new ReadOnlyObjectWrapper<Person>(cellData.getValue()));
multiCol.setCellFactory(column -> new TableCell<Person, Person>() {
private VBox graphic ;
private Label firstNameLabel ;
private Label lastNameLabel ;
private Label emailLabel ;
// Anonymous constructor:
{
graphic = new VBox();
firstNameLabel = createLabel("#66BB66");
lastNameLabel = createLabel("#79A8D8");
emailLabel = createLabel("#FF8888");
graphic.getChildren().addAll(firstNameLabel,
lastNameLabel, emailLabel);
setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
}
private final Label createLabel(String color) {
Label label = new Label();
VBox.setVgrow(label, Priority.ALWAYS);
label.setMaxWidth(Double.MAX_VALUE);
label.setStyle("-fx-background-color: "+color+" ;");
label.setAlignment(Pos.CENTER);
return label ;
}
#Override
public void updateItem(Person person, boolean empty) {
if (person == null) {
setGraphic(null);
} else {
firstNameLabel.setText(person.getFirstName());
lastNameLabel.setText(person.getLastName());
emailLabel.setText(person.getEmail());
setGraphic(graphic);
}
}
});
I have a TableView Column set up as follows, with some text in a Text node. I wanted to style up the text, but the only css property being picked up is the italics. How can I associate the text with other properties such as color.
I've tried text.getStyleClass().add("table-text-allign-top-left"); but only italics gets picked up.
I'd also like to add some kind of spacing, like padding, but I don't know how to add such to an item in a TableCell.
The other problem is how to align items: to the left' right in a TableCell.
Would appreciate it a lot if anyone could help. Thank you all in advance.
This is an extract of the TableView:
clientNames.setCellFactory(new Callback<TableColumn<NewClientPOJO, String>, TableCell<NewClientPOJO, String>>() {
#Override
public TableCell<NewClientPOJO, String> call(TableColumn<NewClientPOJO, String> param) {
final TableCell<NewClientPOJO, String> cell = new TableCell<NewClientPOJO, String>() {
private Text text;
private Text emails;
private Text emails2;
#Override
public void updateItem(String item, boolean empty) {
super.updateItem(item, empty);
if (!isEmpty()) {
text = new Text(item.toString());
// Setting the wrapping width to the Text
text.setWrappingWidth(410);
text.getStyleClass().add("table-text-allign-top-left");
emails = new Text("Good DW TV");
emails.getStyleClass().add("lower");
emails2 = new Text("Scandinavia - Lines cold weather");
emails2.getStyleClass().add("lower");
VBox vbTable = new VBox();
vbTable.getChildren().add(text);
vbTable.getChildren().add(emails);
vbTable.getChildren().add(emails2);
setGraphic(vbTable);
}
}
};
return cell;
}
});
Thanks brian for the reply. I got it to work by changing the Node from Text to a Label. The Label picks up the style class.
I want to bind two tableviews together such that they scroll in sync. How do I do that? I am unable to find out how to access the scrollbar of a tableview.
I've made a CSS hack to bind a Tableview with an external scrollbar. One scrollbar controls both tableviews.
An overview of my idea:
Create two tableviews
Make one Vertical scrollbar. Let's call it myScrollbar in this example
Set the min and max of myScrollbar to size of min=0, max=TableView.Items.size()
When the value of myScrollbar changes then call both tableview's scrollTo(int) function
Disable the native vertical scrollbar of the tableview implemented with CSS.
This will give you two tables, both controlled by one external scrollbar (myScrollbar).
Here is the code to hide the scrollbar of a tableview using css:
/* The main scrollbar **track** CSS class */
.mytableview .scroll-bar:vertical .track{
-fx-padding:0px;
-fx-background-color:transparent;
-fx-border-color:transparent;
-fx-background-radius: 0em;
-fx-border-radius:2em;
}
/* The increment and decrement button CSS class of scrollbar */
.mytableview .scroll-bar:vertical .increment-button ,
.mytableview .scroll-bar:vertical .decrement-button {
-fx-background-color:transparent;
-fx-background-radius: 0em;
-fx-padding:0 0 0 0;
}
.mytableview .scroll-bar:vertical .increment-arrow,
.mytableview .scroll-bar:vertical .decrement-arrow
{
-fx-shape: " ";
-fx-padding:0;
}
/* The main scrollbar **thumb** CSS class which we drag every time (movable) */
.mytableview .scroll-bar:vertical .thumb {
-fx-background-color:transparent;
-fx-background-insets: 0, 0, 0;
-fx-background-radius: 2em;
-fx-padding:0px;
}
Then we need to set how to scroll the tableview by using the scrollbar.
scroll.setMax(100); //make sure the max is equal to the size of the table row data.
scroll.setMin(0);
scroll.valueProperty().addListener(new ChangeListener(){
#Override
public void changed(ObservableValue ov, Number t, Number t1) {
//Scroll your tableview according to the table row index
table1.scrollTo(t1.intValue());
table2.scrollTo(t1.intValue());
}
});
http://blog.ngopal.com.np/2012/09/25/how-to-bind-vertical-scroll-in-multi-tableview/
I don't think this is currently possible. TableViewSkin inherits from VirtualContainerBase which has a VirtualFlow field. The VirtualFlow object has two VirtualScrollBar fields, hbar and vbar which is what you're after. I can't see any way of getting to it though.
Interestingly, there is also a private contentWidth field in TableView although this is private. I'm sure that the JFX team are being ultra cautious about opening up too much of the API which is understandable. You could ask to get the contentWidth field opened up as an int property as a feature requestion on the JFX JIRA or openjfx-dev mailing list.
A stop gap measure would be to bind the selected item or index property of the table views selection model.
The easiest way I've found to solve the problem is to bind the valueProperty of the visible an the hidden scrollbars.
// Controller
#FXML private TableView<MyBean> tableLeft;
#FXML private TableView<MyBean> tableRight;
#FXML private ScrollBar scrollBar;
#SuppressWarnings("rawtypes")
private void bindScrollBars(TableView<?> tableView1, TableView<?> tableView2,
ScrollBar scrollBar, Orientation orientation) {
// Get the scrollbar of first table
VirtualFlow vf = (VirtualFlow)tableView1.getChildrenUnmodifiable().get(1);
ScrollBar scrollBar1 = null;
for (final Node subNode: vf.getChildrenUnmodifiable()) {
if (subNode instanceof ScrollBar &&
((ScrollBar)subNode).getOrientation() == orientation) {
scrollBar1 = (ScrollBar)subNode;
}
}
// Get the scrollbar of second table
vf = (VirtualFlow)tableView2.getChildrenUnmodifiable().get(1);
ScrollBar scrollBar2 = null;
for (final Node subNode: vf.getChildrenUnmodifiable()) {
if (subNode instanceof ScrollBar &&
((ScrollBar)subNode).getOrientation() == orientation) {
scrollBar2 = (ScrollBar)subNode;
}
}
// Set min/max of visible scrollbar to min/max of a table scrollbar
scrollBar.setMin(scrollBar1.getMin());
scrollBar.setMax(scrollBar1.getMax());
// bind the hidden scrollbar valueProterty the visible scrollbar
scrollBar.valueProperty().bindBidirectional(scrollBar1.valueProperty());
scrollBar.valueProperty().bindBidirectional(scrollBar2.valueProperty());
}
/*
* This method must be called in Application.start() after the stage is shown,
* because the hidden scrollbars exist only when the tables are rendered
*/
public void setScrollBarBinding() {
bindScrollBars(this.tableLeft, this.tableRight, this.scrollBar, Orientation.VERTICAL);
}
Now you have to call the binding from Application after the stage is shown and the tables are rendered:
// Application
private MyController controller;
#Override
public void start(Stage primaryStage) {
try {
FXMLLoader fxmlLoader = new FXMLLoader(SalesApp.class.getResource("scene.fxml"));
BorderPane root = (BorderPane) fxmlLoader.load();;
Scene scene = new Scene(root);
scene.getStylesheets().add(getClass().getResource("app.css").toExternalForm());
primaryStage.setScene(scene);
primaryStage.show();
controller = (MyController) fxmlLoader.getController();
controller.setScrollBarBinding();
} catch(Exception e) {
e.printStackTrace();
}
}
Now the tables should scroll synchronously via mouse, key, or scrollbar.
Have fun, Olaf