I have a TreeView which is empty at the start and I want to set a placeholder until it is empty. Like the one available for ListView (setPlaceholder())
My first thought was to wrap the TreeView into a BorderPane and just change the center based on the number of elements in the TreeView. The problem is though that I add elements to the TreeView through drag and drop and if I set a label to the center for substituting a placeholder, I won't be able to drag n drop my items in the TreeView anymore. Any suggestions would be much appreciated.
TreeView has no placeholder support - not entirely certain, why not, but could be that an empty tree (whatever that means: null root? root without children? root not showing?) is a rare species.
It's rather simple to implement, though, by following the implementation for a virtualized control that supports it, f.i. TableView. All we need is a custom TreeViewSkin that
manages (creates and adds to the tree's hierarchy, layouts as needed) the placeholder
listens to relevant state of the tree and updates the placeholder's visibilty as appropriate
An example, toggling the emptyness by toggling the tree's root between null/not null via a button:
public class TreeViewWithPlaceholder extends Application {
private static class TreeViewPlaceholderSkin<T> extends TreeViewSkin<T> {
private StackPane placeholderRegion;
private Label placeholderLabel;
public TreeViewPlaceholderSkin(TreeView<T> control) {
super(control);
installPlaceholderSupport();
}
private void installPlaceholderSupport() {
registerChangeListener(getSkinnable().rootProperty(), e -> updatePlaceholderSupport());
updatePlaceholderSupport();
}
/**
* Updating placeholder/flow visibilty depending on whether or not the tree
* is considered empty.
*
* Basically copied from TableViewSkinBase.
*/
private void updatePlaceholderSupport() {
if (isTreeEmpty()) {
if (placeholderRegion == null) {
placeholderRegion = new StackPane();
placeholderRegion.getStyleClass().setAll("placeholder");
getChildren().add(placeholderRegion);
placeholderLabel = new Label("No treeItems");
placeholderRegion.getChildren().setAll(placeholderLabel);
}
}
getVirtualFlow().setVisible(!isTreeEmpty());
if (placeholderRegion != null)
placeholderRegion.setVisible(isTreeEmpty());
}
#Override
protected void layoutChildren(double x, double y, double w, double h) {
super.layoutChildren(x, y, w, h);
if (placeholderRegion != null && placeholderRegion.isVisible()) {
placeholderRegion.resizeRelocate(x, y, w, h);
}
}
private boolean isTreeEmpty() {
return getSkinnable().getRoot() == null;
}
}
private Parent createContent() {
TreeView<String> tree = new TreeView<>() {
#Override
protected Skin<?> createDefaultSkin() {
return new TreeViewPlaceholderSkin<>(this);
}
};
Button toggle = new Button("toggleRoot");
toggle.setOnAction(e -> {
TreeItem<String> root = tree.getRoot();
tree.setRoot(root == null ? new TreeItem<>("root") : null);
});
BorderPane content = new BorderPane(tree);
content.setBottom(toggle);
return content;
}
#Override
public void start(Stage stage) throws Exception {
stage.setScene(new Scene(createContent()));
//stage.setTitle(FXUtils.version());
stage.show();
}
public static void main(String[] args) {
launch(args);
}
#SuppressWarnings("unused")
private static final Logger LOG = Logger
.getLogger(TreeViewWithPlaceholder.class.getName());
}
Related
I have some ObjectProperty in my class and I don't know how can I bind it to Node's children.
My code:
public class Base extends Parent {
private ObjectProperty<Panel> panel;
private final HBox foundation;
public Base() {
panel = new SimpleObjectProperty<>();
foundation = new HBox(20);
// ???
getChildren().add(foundation);
}
//------Properties below
public final ObjectProperty<Panel> panelProperty() {
return panel;
}
public final void setPanel(Panel value) {
panelProperty().setValue(value);
}
public final Panel getPanel() {
return panelProperty().getValue();
}
}
I want to have an automatic system working like that:
Setting panel property value -> adding the value (node) to foundation's children
EDIT:
I'm talking about adding the node via FXML, like that;
<?xml version="1.0" encoding="UTF-8"?>
<Base xmlns:fx="gui">
<panel>
<Panel/>
</panel>
</Base>
Assuming you just want foundation to contain a single element, which is the current value of panel, just add a listener to panel:
public Base() {
panel = new SimpleObjectProperty<>();
foundation = new HBox(20);
panel.addListener((obs, oldPanel, newPanel) -> {
if (newPanel == null) {
foundation.getChildren().clear();
} else {
// Assumes Panel is a subclass of Node:
foundation.getChildren().setAll(newPanel);
}
});
getChildren().add(foundation);
}
Note that there's no real reason to expose an observable property for panel here, unless you have some other pressing need to actually observe it and respond to changes externally to the class (which seems unlikely). You could simplify the whole thing to:
public class Base extends Parent {
private final HBox foundation;
public Base() {
foundation = new HBox(20);
getChildren().add(foundation);
}
public final void setPanel(Panel value) {
if (value == null) {
foundation.getChildren().clear();
} else {
foundation.getChildren().setAll(value);
}
}
public final Panel getPanel() {
if (foundation.getChildren().isEmpty()) {
return null ;
}
return (Panel) foundation.getChildren().get(0);
}
}
I am working on a project. In this project, I must have a shop that has a huge list of cards. I am also very new to JavaFX.
I made a custom class that inherits pane. It has an image view and some labels to show the name and description of card.
Know my problem is that how should I add them to scene to have an scrollable list of this items? What Components should my Scene have. (I omitted imports in the code below)
CardView.java ---- Custom component that loads an fxml
public class CardView extends Pane {
CardController cardController;
Node view;
public CardView() {
FXMLLoader fxmlLoader = new FXMLLoader(getClass().getResource("../FXMLFiles/Card.fxml"));
fxmlLoader.setControllerFactory(new Callback<Class<?>, Object>() {
#Override
public Object call(Class<?> param) {
return cardController = new CardController();
}
});
try {
view = (Node) fxmlLoader.load();
} catch (IOException ex) {
}
getChildren().add(view);
cardController.setNameAndDsc("Card", "This is A card", heroImg);
}
}
CardController.java
public class CardController {
#FXML
private Label name_lbl;
#FXML
private Label dsc_lbl;
#FXML
private ImageView card_img;
public void setNameAndDsc(String name, String dsc, Image img) {
name_lbl.setText(name);
dsc_lbl.setText(dsc);
card_img.setImage(img);
}
public void setName_lbl(Label name_lbl) {
this.name_lbl = name_lbl;
}
public void setDsc_lbl(Label dsc_lbl) {
this.dsc_lbl = dsc_lbl;
}
public void setCard_img(ImageView card_img) {
this.card_img = card_img;
}
}
Card.fxml
Overall View of Card.fxml:
Actually I want to have a huge list of this card that can be scrolled. How should I do that? What Components should I use. I must also note that I have access to JFoenix.
Use a listview. It's a virtual control so it only creates nodes that are in the visual bounds.
You can apply css to make background transparent.
I have a JavaFX table column which I would like to display a comma-separated list of strings, unless the text does not fit within the current bounds of the cell, at which point it would display, for example, "Foo and 3 others...", or "3 Bars", i.e. reflecting the number of elements in the list.
Is there a way to check, when building a CellValueFactory for a table column, whether the text would overrun the cell, so I could switch between these two behaviors?
You can specify an overrun style for Labeled controls like TableCells.
Overrun style ELLIPSIS will automatically add these ellipses as needed to indicate if the content would have extended outside of the label.
I recommend doing this in a cell factory, like so:
column.setCellFactory(() -> {
TableCell<?, ?> cell = new TableCell<>();
cell.setTextOverrun(OverrunStyle.ELLIPSIS);
return cell;
});
So you would need to use the cell factory instead of the cell value factory.
The reason I recommend cell factory is because the table creates and destroys cells on its own as needed, so you'd have a hard time getting all those instances and setting their overrun behavior if you didn't have control of those cells creation like you do with the cell factory.
New attempt
Try something along these lines, you might need to tweak the method to get the length of your string, and you might want to try to figure out the current length of the table cell whenever you update it, but this should get you started. Think it's a decent approach?
public class TestApplication extends Application {
public static void main(String[] args) {
Application.launch(args);
}
public void start(final Stage stage) {
stage.setResizable(true);
TestTableView table = new TestTableView();
ObservableList<String> items = table.getItems();
items.add("this,is,short,list");
items.add("this,is,long,list,it,just,keeps,going,on,and,on,and,on");
Scene scene = new Scene(table, 400, 200);
stage.setScene(scene);
stage.show();
}
/**
* Note: this does not take into account font or any styles.
* <p>
* You might want to modify this to put the text in a label, apply fonts and css, layout the label,
* then get the width.
*/
private static double calculatePixelWidthOfString(String str) {
return new Text(str).getBoundsInLocal().getWidth();
}
public class TestTableView extends TableView<String> {
public TestTableView() {
final TableColumn<String, CsvString> column = new TableColumn<>("COL1");
column.setCellValueFactory(cdf -> {
return new ReadOnlyObjectWrapper<>(new CsvString(cdf.getValue()));
});
column.setCellFactory(col -> {
return new TableCell<String, CsvString>() {
#Override
protected void updateItem(CsvString item, boolean empty) {
super.updateItem(item, empty);
if (item == null || empty) {
setText(null);
} else {
String text = item.getText();
// get the width, might need to tweak this.
double textWidth = calculatePixelWidthOfString(text);
// might want to compare against current cell width
if (textWidth > 100) {
// modify the text here
text = item.getNumElements() + " elements";
}
setText(text);
}
}
};
});
this.getColumns().add(column);
}
}
private static class CsvString {
private final String text;
private final String[] elements;
public CsvString(String string) {
Objects.requireNonNull(string);
this.text = string;
this.elements = string.split(" *, *");
}
public int getNumElements() {
return elements.length;
}
public String getText() {
return text;
}
}
}
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;
}
If we have a Stage then Scene includes 2 Panes
the 1st Pane contains Button and the 2nd Pane is empty
could we load other fxml file inside this 2nd Pane?
fxml1: VBox
|_Pane1-->Button
|_Pane2
///////////////
fxml2: Pane--> Welcome to fxml 2
"when we click the button load the fxml2 inside Pane2 of fxml1"
Then after click
====I finally found this works after trying !====Thank you guys
#FXML Pane secPane;
public void loadFxml (ActionEvent event) {
Pane newLoadedPane = FXMLLoader.load(getClass().getResource("/application/fxml2.fxml"));
secPane.getChildren().add(newLoadedPane);
}
I finally found this works after trying !
#FXML Pane secPane;
public void loadFxml (ActionEvent event) {
Pane newLoadedPane = FXMLLoader.load(getClass().getResource("/application/fxml2.fxml"));
secPane.getChildren().add(newLoadedPane);
}
Just replacing the field in your controller class won't change the scene graph.
secPane is just a reference to a node in the scene graph.
If secPane is just a placeholder, you could replace it in the parent's child list:
public void loadFxml (ActionEvent event) {
// load new pane
Pane newPane = FXMLLoader.load(getClass().getResource("/application/Login2.fxml"));
// get children of parent of secPane (the VBox)
List<Node> parentChildren = ((Pane)secPane.getParent()).getChildren();
// replace the child that contained the old secPane
parentChildren.set(parentChildren.indexOf(secPane), newPane);
// store the new pane in the secPane field to allow replacing it the same way later
secPane = newPane;
}
This assumes of course, that getClass().getResource("/application/Login2.fxml") yields the correct resource and does not return null (which happens if no resource with the given name is available)
You can implement something like this :
public void start(Stage primaryStage) throws IOException {
primaryStage.setTitle("Title");
primaryStage.setScene(createScene(loadMainPane("path_of_your_fxml")));
primaryStage.show();
}
private Pane loadMainPane(String path) throws IOException {
FXMLLoader loader = new FXMLLoader();
Pane mainPane = (Pane) loader.load(
getClass().getResourceAsStream(path));
return mainPane;
}
private Scene createScene(Pane mainPane) {
Scene scene = new Scene(mainPane);
return scene;
}
Then you can create a separate class call Navigation to store all your fxml paths:
public class Navigator {
private final String P1;
private final String P2;
//then you can implement getters...
public String getP1() {
return P1;
}
public String getP2() {
return p2;
}
private static FxmlController Controller;
public static void loadPane(String fxml) {
try {
FxmlController.setPane(
(Node) FXMLLoader.load(Navigator.class.getResource(fxml)));
} catch (IOException e) {
e.printStackTrace();
}
}
public Navigator() throws IOException {
this.P1 = "p1.fxml";
this.P2 = "p2.fxml";}
Then you can load your pane in your button like below:
#FXML
private void btnAction(ActionEvent event) throws IOException {
Navigator.load(new Navigator().getP1());
..
.