changing treeview's font and size

Question

I'm trying to create some kind of menu using tree view but I have the following problems : The tree view is small and I want to increase it's size but the css I used seem to not work . The tree is added on a anchor pane and I tried to resize it but there seems to be no change.Not only the items but the tree view doesn't change when I resize the container pane (it covers half of the scene but I want it as a side bar covering the left side of the scene)

public class ManagerPanel {

    AnchorPane anchor = new AnchorPane();

    public ManagerPanel(){

        TreeItem sideBar = new TreeItem();

        TreeItem createTest = new TreeItem("create test");

        TreeItem addStudents = new TreeItem("add students");
        TreeItem addQuestions = new TreeItem("add questions");

        createTest.getChildren().addAll(addStudents,addQuestions);

        TreeItem chats = new TreeItem("chats");

        sideBar.getChildren().addAll(createTest,chats);

        TreeView treeView = new TreeView();
        treeView.setRoot(sideBar);
        treeView.setShowRoot(false);

        AnchorPane container = new AnchorPane(treeView);
        treeView.getStyleClass().add("Tree.css");
        anchor.getChildren().add(container);

        Scene scene = new Scene(anchor);
        Stage stage = new Stage();
        stage.setWidth(1300);
        stage.setHeight(800);
        stage.setScene(scene);
        stage.show();
    }

}

I need to change the font too but nothing happens . This is the code I used in the css file :

.Tree .tree-cell{
    -fx-font: 20px "Calibri Light";
    -fx-stroke: #eeeeee;
    -fx-background-color: brown;
    -fx-text-fill: navajowhite;
    -fx-font-size: 20;
}

Thank you in advance :)

ps. I gave up on making it right aligned since I don't have much time and there isn't a lot of data about it.

Answer 1

Adding the Stylesheet

You're not adding the stylesheet to the scene graph correctly. You have:

treeView.getStyleClass().add("Tree.css");

Which, as the method name implies, is adding a style class. That's what would allow you to use .Tree { ... } in the stylesheet. However, you are adding "Tree.css" which indicates you're trying to use that method to add the stylesheet itself. You should change the above to:

// Ideally you'd use "tree" to follow CSS conventions, but "Tree" 
// will work. If you do use "tree" then you'll have to change .Tree
// to .tree in the stylesheet. Also, note that TreeView already has
// a style class of "tree-view" that you can use instead.
treeView.getStyleClass().add("Tree");

And add:

treeView.getStylesheets().add("<path-to-stylesheet>"); // or add to an ancestor of 'treeView'
// or
scene.getStylesheets().add("<path-to-stylesheet>");

See Scene#getStylesheets(), Parent#getStylesheets(), and the JavaFX CSS Reference Guide. To help determine what the path to the stylesheet should be check out:

• How do I determine the correct path for FXML files, CSS files, Images, and other resources needed by my JavaFX Application?

---

Layouts

Your TreeView is small because of how you're using the AnchorPane. The AnchorPane layout works by setting constraints on its children. These constraints determine where to place the child relative to the sides of the layout. So if you want the TreeView to take up the entire left side of an AnchorPane you should use something like:

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeView;
import javafx.scene.layout.AnchorPane;
import javafx.stage.Stage;

public class App extends Application {

  @Override
  public void start(Stage stage) {
    TreeItem<String> rootItem = new TreeItem<>();

    TreeItem<String> createItem = new TreeItem<>("Create");
    createItem.getChildren().add(new TreeItem<>("New Student"));
    createItem.getChildren().add(new TreeItem<>("New Question"));
    rootItem.getChildren().add(createItem);

    rootItem.getChildren().add(new TreeItem<>("Chats"));

    TreeView<String> treeView = new TreeView<>(rootItem);
    treeView.setShowRoot(false);

    AnchorPane sceneRoot = new AnchorPane(treeView);
    AnchorPane.setTopAnchor(treeView, 0.0);
    AnchorPane.setLeftAnchor(treeView, 0.0);
    AnchorPane.setBottomAnchor(treeView, 0.0);

    stage.setScene(new Scene(sceneRoot, 600, 400));
    stage.show();
  }
}

Notice I don't set the anchor for the right side so that the TreeView uses its preferred width. You can then configure this preferred width (and min/max widths) to customize this.

However, using AnchorPane typically leads to an unresponsive UI (in the resizing sense). The layout encourages the use of hard-coded values which prevents nodes from resizing as the UI changes size. You should look into using other layouts which automatically reposition and resize their children to fill their allotted space. For example, you could use a BorderPane and set the TreeView as the left node:

BorderPane pane = new BorderPane();
pane.setLeft(treeView);

For more information check out Working with Layouts in JavaFX and the javafx.scene.layout package.

---

Left-to-Right Orientation

Regarding your goal of right-to-left orientation, you should look into using the Scene#nodeOrientation and/or Node#nodeOrientation properties.

---

Raw Types

Also check out What is a raw type and why shouldn't we use it?. Both TreeView and TreeItem are generic classes but you don't specify any type arguments. You appear to be using String as the value type so you should have, for example:

TreeItem<String> chats = new TreeItem<>("chats");
// and
TreeView<String> treeView = new TreeView<>();
// etc...