Java FX TableView Zeilen mit verschiedenen Typen

bronkowitz · 8. Aug 2015

Hallo,

kann man (mit JavaFX) eine TableView mit verschiedenen Typen erstellen? Ich meine innerhalb einer Spalte verschieden, so dass man eine gemischte Tabelle z.B. mit ComboBoxen, CheckBoxen, Zahlen und Strings aufbauen könnte? (siehe Beispielbild)
Oder müsste man dazu mehrere Tabellen stapeln?

Gruß,
bronkowitz

Tom299 · 10. Aug 2015

Wie wäre es mit einem anderen Layout als Table? z.B. GridPane?

bronkowitz · 10. Aug 2015

das würde schon gehen, aber dann wären es mehrere Tabellen, oder? Ich meinte es so, dass eine Column verschiedene Typen enthält

Tom299 · 11. Aug 2015

Ja, ich weiß schon, was du meinst. Die Frage ist, ob dahinter wirklich eine Tabellenform steckt oder nicht. Tabellen nutzt man auch gerne zum Sortieren und Filtern, das würde bei dir schwer werden, z.B. nach dem Vornamen zu filtern oder zu Sortieren.

Aber wenn du es wirklich als Tabelle willst, sollte es mit einer eigenen CellFactory funktionieren. Mußt halt darin abfragen, welcher Typ gesetzt werden soll und entsprechend eine CheckBox, Label, TextField oder sonst was zurückgeben. Hier ein kleines Beispiel für ne CheckBox:

Java:

colImportStatus.setCellValueFactory(new PropertyValueFactory<ImportRegel, Boolean>("importStatus"));
colImportStatus.setCellFactory(column -> new TableCell<ImportRegel, Boolean>(){
    public void updateItem(Boolean status, boolean empty) {
        super.updateItem(status, empty);
        if (status == null || empty) {
            setGraphic(null);
        }
        else {
            CheckBox chkStatus = new CheckBox();
            chkStatus.setUserData(getIndex());
            chkStatus.setSelected(status);
            chkStatus.setOnAction(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent event) {
                    CheckBox chkSource = (CheckBox)event.getSource();
                    int index = (int)chkSource.getUserData();
                    ...
                }
            });
            setGraphic(chkStatus);
            setAlignment(Pos.CENTER);
        }
    }
});

bronkowitz · 11. Aug 2015

Hallo Tom,
vielen Dank!! Das werde ich ausprobieren.
Zur Erklärung vielleicht noch, warum ich eine Tabelle nutze: Meine Datenbasis wird als Tree dargestellt. Wenn man dann ein Objekt auswählt, werden dessen Eigenschaften in einem anderen Fenster dargestellt und können dort geändert werden. Das ist dann ein Sammelsurium aus Zahlen, Checkboxen und Comboboxen - sortiert wird dort auch nicht. Trotzdem soll es optisch als einheitliche Tabelle erscheinen. Ich kenne das aus einigen Programmen, ein Beispiel hier:

Tom299 · 11. Aug 2015

Nur weil es wie eine Tabelle aussieht, muß es aber nicht zwingend eine sein ;-) Kann genauso gut eine Grid-View oder sonst was sein, ist einfach nur bündig angeordnet. Du kannst es ja mit einer Tabelle versuchen,
und wenn es nicht klappt, dann vielleicht mit einer GridView probieren. Die kannst du dann genau wie eine Tabelle aussehen lassen. Aber probieren geht über studieren 🙂

bronkowitz · 11. Aug 2015

stimmt, ist auch möglich 🙂
Ich werds ausprobieren

dzim · 12. Aug 2015

Ich hätte es auch über eine Tabelle gemacht, aber eben ohne Header. Das man in dem Screenshot oben noch kaskadieren kann, würde ich über Accordeons lösen, oder gan brutal, indem ich Tabellen in einen Tree View (als Graphic-Node der einzelnen Entries) verwende. Warum? Keine Ahnung... 🙂

bronkowitz · 13. Aug 2015

ich gewöhne mich langsam an den Anblick, auch wenn es nicht so tabellig aussieht.
Ich werds aber trotzdem noch als Tabelle probieren...
In den Tree wollte ich die Eigenschaften nicht übernehmen, da er dann wohl zu überladen würde.

Tom299 · 13. Aug 2015

Du kannst der Einfachheit halber beim GridPane -> Properties -> Grid Lines Visible aktivieren. Das Problem ist aber, daß man nicht an die GridLines rankommt, um Farbe oder sowas zu ändern.

Eine andere Möglichkeit wäre wie im Screenshot um die Columns und Rows rum jeweils noch ein GridLine einzufügen mit einem Panel, bei dem du die Hintergrundfarbe setzt (z.B. schwarz in meinem Beispiel).
Durch setzen der GridLine-Restriktionen (min, max, pref alles auf zB 2) erhälst du dann auch einen "Table-Effekt", falls dir das besser gefällt als das, was du hast ;-)

Den FXML-Code kann ich dir auch posten, falls du ihn brauchst.

dzim · 13. Aug 2015

In JavaFX ist so ziemlich jeder verückte Wunsch mit Styling möglich. Aber: Es muss nicht unbedingt trivial sein.
Hier ein Beispiel mit GridPane: https://community.oracle.com/thread/2386973

Im wesentlichen kannst du dich durch die Nodes/Panes, aus denen das GridPane aufgebaut ist, per Code durchhangeln und dann deine Styles anwenden.
Ich hab das mal für einen Line-Graph so gemacht, weil es keine direkte Möglichkeit gibt, mehr als die 8 Farben im CSS zu definieren, dann wird wiederholt. Mit ein paar Hacks war es dann denoch möglich.

bronkowitz · 13. Aug 2015

wow, danke Euch beiden. Danach hatte ich tatsächlich gerade gesucht, und auch nach der Hintergrundfarbe von GridPanes.

Tom299 · 13. Aug 2015

Den Thread von dzim hab ich heut beim googeln auch 2x gesehen. Hatte auch probiert mit einer Hintergrund-Pane und dem Padding bei den GridLines, aber bei mir kam nie die Hintergrundfarbe so durch, wie ich das vermutet hatte. Ich habs dann in FXML so gebaut wie oben gezeigt, allerdings würde ich das für den richtigen Einsatz dann dynamisch per Code generieren lassen. Aber es ist oft einfacher, wenn man die FXML-Variante hat und sehen kann, welche Parameter usw. gesetzt sind, damit es am Ende auch so aussieht, wie man möchte. Zum Glück hab ich nix mehr mit Swing und GridBagLayout zu tun 😀

bronkowitz · 13. Aug 2015

ich bin nach einem kurzen Ausflug zu FXML und SceneBuilder jetzt auch wieder beim Direkt-Coden. Dabei finde ich den Ansatz mit einer XML-Datei die GUI zu machen eigentlich ganz gut, ich habe mich dann aber oft dumm und dämlich gesucht nach irgendwelchen Einstellungen, die dann direkt in Java recht schnell gingen. Außerdem finde ich den Umweg über die Controller-Klasse auch etwas nervig. Und wenn man die Oberfläche zur Laufzeit verändert, landet man ja doch wieder beim Code. Oder man schreibt etliche FXML-Dateien mit entsprechenden Controllerklassen.
Aber, wie du schon sagst, um die Einstellungen zu sehen ist eine FXML-Datei natürlich ideal. Deswegen würde ich auch gern dein Angebot annehmen, die o.a. zu posten 🙂 Besten Dank!

Tom299 · 14. Aug 2015

Gut, daß ich den Code noch nicht gelöscht hatte 😀

HTML:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.*?>
<?import de.temeka.jfx.customcontrols.*?>
<?import javafx.scene.shape.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.control.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>

<AnchorPane fx:id="ctrlA" prefWidth="300.0" style="-fx-background-color: white;" stylesheets="@../css/main.css" StackPane.alignment="CENTER_LEFT" xmlns="http://javafx.com/javafx/8.0.40" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.test.controller.TestAController">
    <StackPane.margin>
       <Insets bottom="2.0" top="25.0" />
    </StackPane.margin>
   <children>
      <GridPane snapToPixel="false" AnchorPane.bottomAnchor="20.0" AnchorPane.leftAnchor="10.0" AnchorPane.rightAnchor="10.0" AnchorPane.topAnchor="10.0">
        <columnConstraints>
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="2.0" minWidth="2.0" prefWidth="2.0" />
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="40.0" />
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="2.0" minWidth="2.0" prefWidth="2.0" />
          <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
          <ColumnConstraints hgrow="SOMETIMES" maxWidth="2.0" minWidth="2.0" prefWidth="2.0" />
        </columnConstraints>
        <rowConstraints>
          <RowConstraints minHeight="10.0" prefHeight="5.0" vgrow="SOMETIMES" />
          <RowConstraints maxHeight="2.0" minHeight="2.0" prefHeight="2.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="35.0" vgrow="SOMETIMES" />
          <RowConstraints maxHeight="2.0" minHeight="2.0" prefHeight="2.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="35.0" vgrow="SOMETIMES" />
          <RowConstraints maxHeight="2.0" minHeight="2.0" prefHeight="2.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="35.0" vgrow="SOMETIMES" />
          <RowConstraints maxHeight="2.0" minHeight="2.0" prefHeight="2.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="35.0" vgrow="SOMETIMES" />
          <RowConstraints maxHeight="2.0" minHeight="2.0" prefHeight="2.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="35.0" vgrow="SOMETIMES" />
          <RowConstraints maxHeight="2.0" minHeight="2.0" prefHeight="2.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="35.0" vgrow="SOMETIMES" />
          <RowConstraints maxHeight="2.0" minHeight="2.0" prefHeight="2.0" vgrow="SOMETIMES" />
          <RowConstraints minHeight="10.0" prefHeight="80.0" valignment="TOP" vgrow="SOMETIMES" />
          <RowConstraints maxHeight="2.0" minHeight="2.0" prefHeight="2.0" vgrow="SOMETIMES" />
        </rowConstraints>
         <children>
            <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Textfield" GridPane.columnIndex="1" GridPane.rowIndex="2">
               <font>
                  <Font size="14.0" />
               </font>
               <GridPane.margin>
                  <Insets left="3.0" />
               </GridPane.margin>
            </Text>
            <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Checkbox" GridPane.columnIndex="1" GridPane.rowIndex="4">
               <font>
                  <Font size="14.0" />
               </font>
               <GridPane.margin>
                  <Insets left="3.0" />
               </GridPane.margin>
            </Text>
            <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Combobox" GridPane.columnIndex="1" GridPane.rowIndex="6">
               <font>
                  <Font size="14.0" />
               </font>
               <GridPane.margin>
                  <Insets left="3.0" />
               </GridPane.margin>
            </Text>
            <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Textfield" GridPane.columnIndex="1" GridPane.rowIndex="8">
               <font>
                  <Font size="14.0" />
               </font>
               <GridPane.margin>
                  <Insets left="3.0" />
               </GridPane.margin>
            </Text>
            <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Checkbox" GridPane.columnIndex="1" GridPane.rowIndex="10">
               <font>
                  <Font size="14.0" />
               </font>
               <GridPane.margin>
                  <Insets left="3.0" />
               </GridPane.margin>
            </Text>
            <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Combobox" GridPane.columnIndex="1" GridPane.rowIndex="12">
               <font>
                  <Font size="14.0" />
               </font>
               <GridPane.margin>
                  <Insets left="3.0" />
               </GridPane.margin>
            </Text>
            <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Textarea" GridPane.columnIndex="1" GridPane.rowIndex="14">
               <font>
                  <Font size="14.0" />
               </font>
               <GridPane.margin>
                  <Insets left="3.0" />
               </GridPane.margin>
            </Text>
            <TextField GridPane.columnIndex="3" GridPane.rowIndex="2">
               <font>
                  <Font size="14.0" />
               </font>
               <GridPane.margin>
                  <Insets left="3.0" right="3.0" />
               </GridPane.margin>
            </TextField>
            <TextField GridPane.columnIndex="3" GridPane.rowIndex="8">
               <font>
                  <Font size="14.0" />
               </font>
               <GridPane.margin>
                  <Insets left="3.0" right="3.0" />
               </GridPane.margin>
            </TextField>
            <ComboBox prefWidth="170.0" GridPane.columnIndex="3" GridPane.rowIndex="6">
               <GridPane.margin>
                  <Insets left="3.0" right="3.0" />
               </GridPane.margin>
            </ComboBox>
            <ComboBox prefWidth="170.0" GridPane.columnIndex="3" GridPane.rowIndex="10">
               <GridPane.margin>
                  <Insets left="3.0" right="3.0" />
               </GridPane.margin>
            </ComboBox>
            <CheckBox mnemonicParsing="false" text="CheckBox" GridPane.columnIndex="3" GridPane.rowIndex="4">
               <font>
                  <Font size="14.0" />
               </font>
               <GridPane.margin>
                  <Insets left="3.0" right="3.0" />
               </GridPane.margin>
            </CheckBox>
            <CheckBox mnemonicParsing="false" text="CheckBox" GridPane.columnIndex="3" GridPane.rowIndex="12">
               <font>
                  <Font size="14.0" />
               </font>
               <GridPane.margin>
                  <Insets left="3.0" right="3.0" />
               </GridPane.margin>
            </CheckBox>
            <TextArea prefHeight="100.0" prefWidth="170.0" GridPane.columnIndex="3" GridPane.rowIndex="14">
               <GridPane.margin>
                  <Insets bottom="3.0" left="3.0" right="3.0" top="3.0" />
               </GridPane.margin>
            </TextArea>
            <Pane style="-fx-background-color: black;" GridPane.columnSpan="5" GridPane.rowIndex="1" />
            <Pane style="-fx-background-color: black;" GridPane.columnSpan="5" GridPane.rowIndex="3" />
            <Pane style="-fx-background-color: black;" GridPane.columnSpan="5" GridPane.rowIndex="5" />
            <Pane style="-fx-background-color: black;" GridPane.columnSpan="5" GridPane.rowIndex="7" />
            <Pane style="-fx-background-color: black;" GridPane.columnSpan="5" GridPane.rowIndex="9" />
            <Pane style="-fx-background-color: black;" GridPane.columnSpan="5" GridPane.rowIndex="11" />
            <Pane style="-fx-background-color: black;" GridPane.columnSpan="5" GridPane.rowIndex="13" />
            <Pane style="-fx-background-color: black;" GridPane.columnSpan="5" GridPane.rowIndex="15" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.rowIndex="2" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="2" GridPane.rowIndex="2" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="2" GridPane.rowIndex="4" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="2" GridPane.rowIndex="6" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="2" GridPane.rowIndex="8" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="2" GridPane.rowIndex="10" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="2" GridPane.rowIndex="12" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="2" GridPane.rowIndex="14" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.rowIndex="4" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.rowIndex="6" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.rowIndex="8" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.rowIndex="10" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.rowIndex="12" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.rowIndex="14" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="4" GridPane.rowIndex="2" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="4" GridPane.rowIndex="4" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="4" GridPane.rowIndex="6" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="4" GridPane.rowIndex="8" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="4" GridPane.rowIndex="10" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="4" GridPane.rowIndex="12" />
            <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: black;" GridPane.columnIndex="4" GridPane.rowIndex="14" />
         </children>
      </GridPane>
   </children>
</AnchorPane>

bronkowitz · 14. Aug 2015

Danke 🙂

Java FX TableView Zeilen mit verschiedenen Typen

bronkowitz

Aktives Mitglied

Tom299

Bekanntes Mitglied

bronkowitz

Aktives Mitglied

Tom299

Bekanntes Mitglied

bronkowitz

Aktives Mitglied

Tom299

Bekanntes Mitglied

bronkowitz

Aktives Mitglied

dzim

Top Contributor

bronkowitz

Aktives Mitglied

Tom299

Bekanntes Mitglied

Anhänge

dzim

Top Contributor

bronkowitz

Aktives Mitglied

Tom299

Bekanntes Mitglied

bronkowitz

Aktives Mitglied

Tom299

Bekanntes Mitglied

bronkowitz

Aktives Mitglied

Aktuelle Jobs

Neue Themen

Ähnliche Themen