JavaFX TreeTableView aktualisieren

[Christi258]

Hi Leute,

Ich habe eine baumartige Datenstruktur, welche ich zur Anzeige bringen möchte (in JavaFX 2.2 oder höher). Dafür eignet sich am besten eine TreeTableView. Ich habe es schon geschafft, die Daten anzuzeigen, allerdings ändert sich meine Werte im Baum alle 500 ms. Die Anzeige soll dementsprechend sich auch aktualisieren. Bisher habe ich die Anzeige über setCellValueFactory zum laufen gebracht, aber das erscheint mir der falsche Weg zu sein, wenn ich etwas aktualisieren möchte.
Mein Wünsche wären folgende:

1. Eine Anzeige, die sich bei Änderungen aktualisiert.
2. Abhängig vom Wert der ausgeschrieben wird auch verschieden Icons angezeigt werden
3. Auf die einzelnen Zellen noch Tooltips aufgesetzt werden

Zuerst aber mal zu 1. (Der Rest ist optional, bzw für später).
Ich habe mal das grobe Gerüst der Datenstruktur eingestellt:

import java.util.Observable;

public abstract class MyElement extends Observable {

    public abstract String getName();
    public abstract String getValue();
    public abstract void update(int value);
}

import java.util.ArrayList;

public class MyGroupElement extends MyElement {

    private ArrayList<MyElement> children = new ArrayList<MyElement>();
   
    @Override
    public String getName() {
        return ...;
    }

    @Override
    public String getValue() {
        return ...;
    }

    @Override
    public void update(int value) {
        for(MyElement element : this.children)
            element.update(value);
    }

    public ArrayList<MyElement> getChildren() {
        return children;
    }

}

public class MyNormalElement extends MyElement {
   
    @Override
    public String getName() {
        return ...;
    }

    @Override
    public String getValue() {
        return ...;
    }

    @Override
    public void update(int value) {
        ...
        super.setChanged();
        super.notifyObservers();
    }

}

Wichtig:
Die Klassen dürfen nach belieben geändert werden (Observable kann auch entfernt werden, wenn hilfreich). Allerdings möchte ich keine Vermischung zwischen der Datenstruktur und der Oberfläche (JavaFX)!

Grüße

 

[knilch]

Hi,
Du kannst es so machen, dass du all deine Items, welche du auflisten möchtest, in eine ObservableList einfügtst und dann für diese ObservableList einen ListChangeListener registrierst. Die onChanged Methode wird dabei überschrieben. In dieser Methode werden zuerst alle Childs gelöscht, dann werden die Items von der ObservableList eingefügt.
Hier mal ein Beispiel, dass bei jedem Drücken auf den Button ein neues Element hinzufügt:

import javafx.application.Application;
import javafx.beans.property.ReadOnlyStringWrapper;
import javafx.beans.property.SimpleStringProperty;
import javafx.collections.FXCollections;
import javafx.collections.ListChangeListener;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TreeItem;
import javafx.scene.control.TreeTableColumn;
import javafx.scene.control.TreeTableView;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;


public class TreeTableViewExample extends Application  {

    private ObservableList<Employee> employees = FXCollections.observableArrayList();
    private TreeTableView<Employee> treeTableView;
    private Button addButton ;

    final TreeItem<Employee> root = new TreeItem<>(new Employee("Email Adressen", ""));

    public static void main(String[] args) {
        Application.launch(TreeTableViewExample.class, args);
    }

    @SuppressWarnings("unchecked")
    @Override
    public void start(Stage stage) {

        initItems();
        initListener();
        initEmployes();

        root.setExpanded(true);
    
        Scene scene = new Scene(new Group(), 400, 400);
    
        VBox vBox = new VBox();
        scene.setRoot(vBox);
    
        TreeTableColumn<Employee, String> empColumn = new TreeTableColumn<>("Name");
        empColumn.setPrefWidth(150);
        empColumn.setCellValueFactory((
                TreeTableColumn.CellDataFeatures<Employee, String> param) -> new ReadOnlyStringWrapper(
                        param.getValue().getValue().getName()));

        TreeTableColumn<Employee, String> emailColumn = new TreeTableColumn<>("Email");
        emailColumn.setPrefWidth(190);
        emailColumn.setCellValueFactory((
                TreeTableColumn.CellDataFeatures<Employee, String> param) -> new ReadOnlyStringWrapper(
                        param.getValue().getValue().getEmail()));
    


        treeTableView.getColumns().setAll(empColumn, emailColumn);
        vBox.getChildren().addAll(treeTableView, addButton);
        stage.setScene(scene);
        stage.show();
    }

    private void initItems() {
        treeTableView = new TreeTableView<>(root);
        addButton = new Button("Person hinzufügen");
    }

    private void initEmployes() {
        employees.add(new Employee("Hans Muster", "hans.muster@example.com"));
        employees.add(new Employee("Anna Meier", "anna.meier@example.com"));
        employees.add(new Employee("Peter Meier", "peter.meier@example.com"));
        employees.add(new Employee("Julian Meier", "julian.meier@example.com"));
    }

    private void initListener() {
        employees.addListener(new ListChangeListener<Employee>() {
            @Override
            public void onChanged(ListChangeListener.Change<? extends Employee> c) {
                treeTableView.getRoot().getChildren().clear();
                employees.forEach((employee) -> {
                    root.getChildren().add(new TreeItem<>(employee));
                });
            }
        });
    
        addButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                employees.add(new Employee("Hans-Peter Muster", "hans-peter.muster@example.com"));
            }
        });
    }

    public class Employee {
        private SimpleStringProperty name;
        private SimpleStringProperty email;

        public SimpleStringProperty nameProperty() {
            if (name == null) {
                name = new SimpleStringProperty(this, "name");
            }
            return name;
        }

        public SimpleStringProperty emailProperty() {
            if (email == null) {
                email = new SimpleStringProperty(this, "email");
            }
            return email;
        }

        private Employee(String name, String email) {
            this.name = new SimpleStringProperty(name);
            this.email = new SimpleStringProperty(email);
        }

        public String getName() {
            return name.get();
        }

        public void setName(String fName) {
            name.set(fName);
        }

        public String getEmail() {
            return email.get();
        }

        public void setEmail(String fName) {
            email.set(fName);
        }
    }
}

 

[Christi258]

Ok, Danke erstmal.
Ist aber nicht ein bisschen aufwendig, wenn bei jeder Änderung z.B. gute hundert Objekte erstellt werden müssen? Oder anders formuliert, gibt es eine Variante, in der die einzelnen Zellen direkt angesprochen werden können?

 

[knilch]

Hi,

Ist aber nicht ein bisschen aufwendig, wenn bei jeder Änderung z.B. gute hundert Objekte erstellt werden müssen?

Nun du kannst ja eine Observalbe List mit TreeItems machen und dann statt bei der employees- List einen Listner für die Observalbe List mit den TreeItems registrieren. Damit müssten die TreeItems nicht mehr erstellt werden.
Der Vorteil, wenn das ganze mit Observalbe List und einem ListChangeListener gemacht wird, ist, dass du in die Liste nur noch Items einfügen oder entfernen musst, ohne dass du dich um das aktualisieren der TreeViewTable (oder auch TreeView) kümmern musst.
Das gilt auch, wenn in der TreeViewTable die Items sortiert dargestellt werden sollen, und dann Elemente in die TreeViewTable eingefügt oder entfernt werden sollen. Dies ist einer Observalbe List wirklich einfach.

Oder anders formuliert, gibt es eine Variante, in der die einzelnen Zellen direkt angesprochen werden können?

Wenn du ein einzelnes TreeItem bearbeiten möchtest, dann geht das mit

TreeItem<Employee> selectedItem = treeTableView.getSelectionModel().getSelectedItem();
Employee employee = selectedItem.getValue();

 

[Christi258]

Das werde ich heute mal probieren. Könnte man hier dann noch irgendwie Tooltips auf die Zellen setzen?

 

[dzim]

Google nach "javaFX tooltip tableview cell". Der Zweite Treffer bei mir: http://stackoverflow.com/questions/...p-on-the-each-cell-of-javafx-table-mouse-over

 

[Christi258]

Wie erkennt denn die ObservableList wenn sich etwas ändert?

Nimms mir bitte nicht böse, aber wenn ich eine Anzeige vom Programm nur somit aktualisieren kann, indem ich Elemente entferne und dann wieder einfüge, dann ist das eine herumgewurstelte Lösung und totaler Quatsch.
Entweder gibt es noch eine andere Möglichkeit die wir nicht auf dem Schirm haben oder eine TreeTableView ist einfach das falsche Element dazu.

 

[dzim]

ObservalbleList ist per se nur in der Lage add/remove zu erkennen. Somit ist es wahr: Die Add/Remove Lösung wäre Quark!

Aber: Der Inhalt kann ja selbst wieder Observable sein.
Wie man das macht, hat vor einiger Zeit folgender Blog-Post beschrieben:
http://www.jensd.de/wordpress/?p=1650

Im empfehlen diesem "Meta-"Blog zu folgen:
http://fxexperience.com/
Da kommen ab und an mal solche Sachen, die einem das Leben erleichtern können, vor.

Andernfalls gibt es auf StackOverflow einen sehr aktiven Nutzer namens "jewelsea", der sehr detailierte Antworten zu JavaFX-Problemen liefert. Einfach mal nach ihm suchen. Hab von ihm auch schon ein paar nette Tricks lernen können.

 

[Jerady]

Der richtige (und stressfreie ;-) ) Weg im Sinne von JavaFX ist hier über den Properties-Extractor zu gehen.
Schau mal hier (schon etwas älter):
http://www.jensd.de/wordpress/?p=1650
und hier (erweitert im März):
http://www.jensd.de/wordpress/?p=2293

Hier ist eine lauffähige Demo:
http://jensd.de/apps/demo/propertiesextractordemo.zip

und hier der Code:
https://bitbucket.org/Jerady/propertiesextractordemo/overview


Jens

 

[dzim]

Hi und willkommen Jens!
Ich hatte schon auf deinen Beitrag hingewiesen. ;-)

Grüße
Daniel

 

[dzim]

@Jerady Dein Code steht bei mir übrigens auch noch auf der (immer länger werdenden und virtuellen) TODO-Liste, was ich mal noch ausprobieren müsste. Mit deinem FontAwsomeFX hab ich aber immhin schon mal etwas gespielt 😉