JavaFX Dynamische TableView

[Peasy]

Guten Tag,
ich arbeite im Moment an meinem Abschlussprojekt für die Schule, einem HTML-Editor unter Verwendung von JavaFX.

Nun, zu meinem Problem: Ich lese ein .css File aus und schreibe es in ein String-Array, konvertiere es danach in eine Arraylist. Ich wollte dann eine TableView erstellen, die die gefilterten CSS Klassen und ID's anzeigt und bearbeitbar macht.

public void newCSSTab()
        {
        tab = new Tab();
        this.tab.isSelected();
        tab.setText("CSS");
        table = new TableView();
        table.setEditable(true);
        TableColumn classCol = new TableColumn("Klasse/ID");
        TableColumn lastNameCol = new TableColumn("Inhalt");
        TableColumn codeCol = new TableColumn("Code");
        table.getColumns().addAll(classCol, lastNameCol, codeCol);
        tabPane.getTabs().add(tab);
        tab.setContent(table);
        table.setVisible(true);
        	
        }

Wie füge ich nun den Inhalt ein ? Ich habe schon versucht mich mit der TableView Dokumentation auseinander zu setzen, verstehe es jedoch ehrlich gesagt nicht richtig. Könnte mir jemand den Aufbau dieser TableView im Zusammenhang mit einer ObservableList erläutern ? Wäre um jede Hilfe dankbar.
MfG Peasy

 

[MichaProgs]

Hi Peasy,

du kannst der TableView einfach eine ObserverableList hinzufügen.

table.addItem(observerableList);

Eventuell funktioniert es auch mit einem normalem StringArray. Kann es aktuell nicht ausprobieren, aber mit der o.g. Variante sollte es funktionieren.

Gruß
TB94

 

[dzim]

Kleine Korrektur: Ein Blick in die JavaDoc hilft immer... TableView (JavaFX 8)
Die Methode heisst natürlich #setItems(ObservableList)

 

[Peasy]

Nun, mit dieser Änderung stellt er zwar eine Tabelle dar, diese enthält allerdings nicht. Ich habe 3 Arrays um eine .css Datei auszulesen, einmal für den Code, einmal die Klasse bzw. ID und einmal den Inhalt der Klasse bzw. ID. Bei der Umwandlung gibt Java keinen Fehler aus, aber angezeigt wird dann doch nichts. Editiere später den Code rein.

 

[dzim]

Du musst nun natürlich die übergebene ObservableList mit deinen Objekten füllen. Sprich: Die Daten deines Arrays musst du nun da rein bringen.
Zeige uns den Code, wie du aus der CSS Java-Objekte machst und wo du diese in die ObservableList füllst.

 

[Peasy]

Diese Klasse liest die CSS-Datei in 3 Arrays ein:

 public class CSSTable {
	int i;
	String cssString = null;
	String bufferedString = "";
	String concater = "}";
	String contentFilter = "{";
	String[] cssCode;	
	String[] cssType;
	String[] cssContent;
	ObservableList<CSSView> data;
	
	public void cssScanner (File cssDatei) throws IOException  
	{
		
		
		
		
		File cssFile = cssDatei;
		BufferedReader f = new BufferedReader(new FileReader(cssFile));
		
		while ((cssString = f.readLine()) != null) 
		{
			bufferedString = bufferedString + cssString;
			
		}
		
		f.close();
		}
	
	public void cssSplitCode()
	{
		
		cssCode = bufferedString.split("}");
		
		
		for(i=0; i <= cssCode.length - 1; i++) 
		{
			
			cssCode[i] = cssCode[i].concat(concater);			
		}		
		}
	
		public void cssSplitType() 
		{
		String filteredTypeString = bufferedString.replaceAll("\\{.*?\\}", "");
		filteredTypeString = filteredTypeString.replace(".", "#");
		
		cssType = filteredTypeString.split("#");
		for(i=0; i<= cssType.length -1; i++){
			
		
		}
		}
		
		public void cssSplitContent() 
		{
		String filteredTypeString = bufferedString.replace(".", "#");
		filteredTypeString = filteredTypeString.replaceAll("\\#.*?\\ ", "");
		cssContent = filteredTypeString.split("\\{");
		for(i=0; i<=cssContent.length -1; i++) 
		{
			cssContent[i] = contentFilter + cssContent[i];
			System.out.println(cssContent[i]);
		}
		}

Diese Klasse habe ich der Dokumentation nachgebaut, verstehe aber nicht wie sie funktioniert:

public class CSSView {
	
	private final SimpleStringProperty type;
    private final SimpleStringProperty content;
    private final SimpleStringProperty code;
 
    CSSView(String tType, String cContent, String cCode) {
        this.type = new SimpleStringProperty(tType);
        this.content = new SimpleStringProperty(cContent);
        this.code = new SimpleStringProperty(cCode);
    }
 
    public String getType() {
        return type.get();
    }
    public void setType(String tType) {
        type.set(tType);
    }
    public String getContent() {
        return content.get();
    }
    public void setContent(String cContent) {
        content.set(cContent);
    }
    public String getCode() {
        return code.get();
    }
    public void setCode(String cCode) {
        code.set(cCode);
    }

}

 

[dzim]

Du solltest jetzt noch irgendwo in der Methode, die die CSS einliest, auch die ObservableList "data" füllen.
Und diese hängst du dann an deinen TableView.

 

[MichaProgs]

Guten Abend,

ich habe auch noch eine Frage diesbezüglich. Ich erstelle via FXML eine TableView mit einigen Spalten. Dazu kommen Textfelder mit denen Suchparameter angegeben werden können. Nach Betätigung eines "Suchen"-Buttons sollten eigentlich die Werte aus einer Datenbank abgefragt werden und in der Tabelle sichtbar gemacht werden. Die Tabelle wird zwar in sofern aktiv, das man die ersten paar Zeilen anklicken kann und diese sich einfärben, allerdings werden die entsprechenden Werte nicht angezeigt.

Etwas Code zur Hilfe:

Model

@FXML
private TableView<String> tableResult;
@FXML
private TableColumn<ModelSearchCustomerData, String> colCustomerID;
//sonstige Deklaration von Variablen
//Database-Connection etc. 

while(rsSearch.next()){			
			
			this.resultAll = FXCollections.observableArrayList();
			this.resultAll.add(rsSearch.getString("customerID"));
			this.resultAll.add(rsSearch.getString("name1"));
			
		}

public ObservableList<String> getSearchResult(){
		return this.resultAll;
	}

Controller

try{
			
			this.modelSearchCustomerData.searchCustomerData(this.tfCustomerID.getText(),
															this.tfName1.getText(),
															this.tfName2.getText(),
															this.tfName3.getText(), 
															this.tfStreet.getText(), 
															this.tfZip.getText(), 
															this.tfLocation.getText(),
															this.tfContactperson.getText(),
															this.tfPhone.getText(),
															this.tfFax.getText());
			
			this.tableResult.setItems(this.modelSearchCustomerData.getSearchResult());
			
		}catch(Exception e){
			e.printStackTrace();
		}

Nach meiner Auffassung sollte es so funktionieren. Leider erfolgt der o.g. Fehler.

Freue mich über eure Mithilfe.

Gruß
TB94

 

[Tom299]

Wenn du in deiner next-schleife jedes mal die Collection neu erstellst -> this.resultAll = FXCollections.observableArrayList() dann kann da eigentlich nur max 1 Zeile enthalten sein. Der Aufruf muß vor der Schleife stattfinden.

 

[dzim]

Darüber hinaus: Selbst wenn alle Elemente enthalten sind, fehlt dem TableView noch der Hinweis, wie es diese rendern soll. Du musst auf deiner Column noch eine CellValueFactory definieren.

TableView (JavaFX 8)
In der JavaDoc des TableView wird ein Beipsiel gezeigt.

Noch eine Frage: Hat deine Tabelle wirklich nur eine Spalte? Sieht ja in deinem Code so aus... Wenn ja: Dann nutze doch eher einen ListView:
ListView (JavaFX 8)
Auch hier musst du noch die CellFactory definieren (diesmal halt nur direkt auf der ListView).

 

[MichaProgs]

Danke für die Antworten. Ersteres habe ich soweit geändert und ist nun funktionsfähig - sprich die ObservableList enthält nun auch wirklich alle Daten - wenn Sie denn in der Tabelle angezeigt werden würden. Womit ich auch auf die zweite Antwort kommen:

Die CellValueFactory hatte ich sogar schon erstellt nur im o.g. Code nicht angegeben. Es handelt sich übrigens um eine Tabelle mit mehreren Spalten wobei ich Testweise vorläufig nur die erste zum laufen bringen möchte. Hier der Code zur CellValueFacotry:

colCustomerID.setCellValueFactory(new PropertyValueFactory<ModelSearchCustomerData, String>("resultCustomerID"));

Mir ist leider nicht ganz schlüsslig was genau der PropertyString ist?! Wenn ich mir das alles richtig herleite, enthält die ObserverableList alle Daten mit Kommas getrennt. Um die Daten nun in die entsprechenden Spalten aufzuteilen muss ich der Liste sagen, welche Werte in welche Spalte gehören. Lieg ich da soweit richtig? Trotzdem bin ich noch nicht darauf gekommen, was ich genau als PropertyString angeben muss.

Falls noch etwas mehr Code benötigt wird einfach Bescheid geben.

Vielen Dank schonmal für eure Hilfe.

Gruß
TB94

 

[MichaProgs]

- Falls Doppelposts unerwünscht sind, bitte den vorherigen löschen. Danke -

Da bisher wohl keiner eine Antwort auf mein Problem finden konnte versuche ich nochmal den Code übersichtlicher darzustellen. Vielleicht geht es dann einfacher.

Falls Doppelposts unerwünscht sind, bitte den vorherigen l

Controller

public class ControllerCustomerSearch {

	@FXML
	private TableView<String> tableResult;
	@FXML
	private TableColumn<ModelSearchCustomerData, String> colCustomerID;
	@FXML
	private TableColumn<ModelSearchCustomerData, String> colName1;
	@FXML
	private TableColumn<ModelSearchCustomerData, String> colName2;
	@FXML
	private TableColumn<ModelSearchCustomerData, String> colName3;
	@FXML
	private TableColumn<ModelSearchCustomerData, String> colStreet;
	@FXML
	private TableColumn<ModelSearchCustomerData, String> colZip;
	@FXML
	private TableColumn<ModelSearchCustomerData, String> colLocation;
	@FXML
	private TableColumn<ModelSearchCustomerData, String> colPhone;
	
	@FXML
	private TextField tfCustomerID;
	@FXML
	private TextField tfName1;
	@FXML
	private TextField tfName2;
	@FXML
	private TextField tfName3;
	@FXML
	private TextField tfStreet;
	@FXML
	private TextField tfZip;
	@FXML
	private TextField tfLocation;
	@FXML
	private TextField tfContactperson;
	@FXML
	private TextField tfPhone;
	@FXML
	private TextField tfFax;
	
	@FXML
	private Button btnSearch;
	
	private ModelSearchCustomerData modelSearchCustomerData;
	
	public ControllerCustomerSearch(){
	}
	
	@FXML
	private void setListenerBtnSearch(){
		
		this.modelSearchCustomerData = new ModelSearchCustomerData();
		
		//1. Variante
		colCustomerID.setCellValueFactory(new PropertyValueFactory<ModelSearchCustomerData, String>("customerID"));
		colName1.setCellValueFactory(new PropertyValueFactory<ModelSearchCustomerData, String>("name1"));
		colName2.setCellValueFactory(new PropertyValueFactory<ModelSearchCustomerData, String>("name2"));
		colName3.setCellValueFactory(new PropertyValueFactory<ModelSearchCustomerData, String>("name3"));
		colStreet.setCellValueFactory(new PropertyValueFactory<ModelSearchCustomerData, String>("street"));
		colZip.setCellValueFactory(new PropertyValueFactory<ModelSearchCustomerData, String>("zip"));
		colLocation.setCellValueFactory(new PropertyValueFactory<ModelSearchCustomerData, String>("location"));
		colPhone.setCellValueFactory(new PropertyValueFactory<ModelSearchCustomerData, String>("phone"));
					
		try{
			
			this.modelSearchCustomerData.searchCustomerData(this.tfCustomerID.getText(),
									this.tfName1.getText(),
									this.tfName2.getText(),
									this.tfName3.getText(), 
									this.tfStreet.getText(), 
									this.tfZip.getText(), 
									this.tfLocation.getText(),
									this.tfContactperson.getText(),													    this.tfPhone.getText(),
									this.tfFax.getText());
			
			this.tableResult.setItems(this.modelSearchCustomerData.getSearchResult());
			
		}catch(Exception e){
			e.printStackTrace();
		}
		
	}
	
}

Model

public class ModelSearchCustomerData {
	
	public StringProperty customerID;
	public StringProperty name1;
	public StringProperty name2;
	public StringProperty name3;
	public StringProperty street;
	public StringProperty zip;
	public StringProperty location;
	public StringProperty phone;
	
	private ObservableList<String> resultAll;
		
	public void searchCustomerData(	String customerID, String name1, String name2, String name3, String street, String zip,
									String location, String contactperson, String phone, String fax) throws Exception{
		
		//Datenbankabfrage 
		
		this.resultAll = FXCollections.observableArrayList();
				
		while(rsSearch.next()){
			
			this.customerID = new SimpleStringProperty(rsSearch.getString("customerID"));
			this.name1 = new SimpleStringProperty(rsSearch.getString("name1"));
			this.name2 = new SimpleStringProperty(rsSearch.getString("name2"));
			this.name3 = new SimpleStringProperty(rsSearch.getString("name3"));
			this.street = new SimpleStringProperty(rsSearch.getString("street"));
			this.zip = new SimpleStringProperty(rsSearch.getString("zip"));
			this.location = new SimpleStringProperty(rsSearch.getString("location"));
			this.phone = new SimpleStringProperty(rsSearch.getString("phone"));
			
			this.resultAll.addAll(	rsSearch.getString("customerID"), 
									rsSearch.getString("name1"),
									rsSearch.getString("name2"),
									rsSearch.getString("name3"),
									rsSearch.getString("street"),
									rsSearch.getString("zip"),
									rsSearch.getString("location"),
									rsSearch.getString("phone")
								);
			
		}
		
		rsSearch.close();
		ps.close();
		con.close();
		
	}
	
	public String getCustomerID(){
		return customerID.get();
	}	
	
	public String getName1(){
		return name1.get();
	}
	
	public String getName2(){
		return name2.get();
	}
	
	public String getName3(){
		return name3.get();
	}
	
	
	public String getStreet(){
		return street.get();
	}
	
	public String getZip(){
		return zip.get();
	}
	
	public String getLocation(){
		return location.get();
	}
	
	public String getPhone(){
		return phone.get();
	}
	
	public ObservableList<String> getSearchResult(){
		return this.resultAll;
	}
		
}

Wie erwähnt wird die Tabelle nicht gefüllt. Ich habe unzählige Tutorials gelesen und andere Forenbeiträge gelesen und kann den Fehler einfach nicht entdecken.

Freue mich über eure Hilfe.

Gruß
TB94

 

[Tom299]

Hast du es mittlerweile hinbekommen? Ich hab mir deine Klassen mal angeschaut, das kann ja so irgendwie nicht funktionieren oder ich blicks nicht.

Dein Model hat ein Observable<String> aber in der Tabelle gibst du <DeinModel, String> an. Das paßt ja schon mal nicht.

Ich würd das mal etwas sauberer trennen, mach dir dein Model mit Konstruktor und setter/getter. Und dann erstellst du Objekte von deinem Model mit new DeinModel() und dann machst du eine ObservableList<DeinModel> und steckst dort die Objekte rein.
Und dann kannst du auch bei der Tabelle <DeinModel, String> angeben, weil deine Observable dann auch eine Liste mit diesen Objekten enthält.

 

[MichaProgs]

Hallo Tom,

ja habe es inzwischen hinbekommen. Ich habs zwar von der Logik immer noch nicht überrissen, aber es funktioniert wenigstens. Die Datenbankabfrage habe ich nun im Controller, ebenso wie die ObservableList. In der Datenbankabfrage füge ich dann der ObsList via new Model mit (while rs.next()) die jeweiligen rs.getString("...") hinzu. Zum Schluss adde ich die Liste der Tabelle. Funktioniert soweit ganz gut.

Gruß
TB94

 

[dzim]

Oh je... In der Regel läuft alles im Controller auf dem UI Thread (in etwa vergleichbar mit Androids Activities - oder besser Fragments). Daher ist es eine schlechte Idee, dort die DB-Operation zu machen. Warum? weil die UI bei längeren Operationen dann "einfrieren" kann.
Verwende dazu die Klasse javafx.concurrent.Task (erstelle eine Klasse, die diese extended). An diese kannst du EventHandler anhängen, die dann wieder auf dem UI-Thread arbeiten (z.B. das Ergebniss, die Liste von Daten, an eine Tabelle übergeben).

Doku dazu:
Concurrency in JavaFX | JavaFX 2 Tutorials and Documentation (JavaFX 2, etwas älter...)
1 Concurrency in JavaFX (Release 8) (neuer)