Scene Builder - mehrere Seiten

[internet]

Hallo,

ich habe mir gerade mal Java FX angeschaut und macht mir einen besseren Eindruck als Swing...
Ich bin gerade dabei hierbei auch den Scene Builder zu nutzen und würde gerne oben ein Menü haben und dann in der Mitte verschiedene Seiten:

Der grüne Teil soll die Seite sein, die dann je nachdem was in der Menübar gedrückt wurde sich ändert:


Nun ist meine Frage aber, wie ich die verschiedenen Seite im SceneBuilder erstelle?
Welche Komponente ist das?

Aktuell sieht meine Struktur so aus:


Kann jemand helfen?

 

[mihe7]

Verschiedene Seiten? Meinst Du TabPane und Tab?

EDIT: Evtl. meinst Du das CardLayout von Swing? Es gibt in FX wohl eine StackPane, die allerdings etwas anders funktioniert. Andererseits brauchst Du das ggf. auch nicht, weil Du die Komponenten in FX einfach entfernen und hinzufügen kannst.

 

[KonradN]

Andererseits brauchst Du das ggf. auch nicht, weil Du die Komponenten in FX einfach entfernen und hinzufügen kannst.

Das wäre vermutlich auch mein Ansatz. Diese "Seiten" wären dann eigene fxml mit eigenen Controllern.

 

[temi]

Das wäre vermutlich auch mein Ansatz. Diese "Seiten" wären dann eigene fxml mit eigenen Controllern.

Was demnach bedeutet, dass du jede "Seite" einzeln in SceneBuilder erstellst und daraus dann jeweils ein separate FXML-Datei erhältst.

Du kannst nicht in SceneBuilder deine komplette funktionierende Anwendung zusammenklicken, sondern immer nur die einzelnen "Seiten".

Am Ende hast du dann eine MainView (die das Menü enthält) und noch Seite1View, Seite2View, usw. (natürlich schöner benannt).

EDIT: Eine Möglichkeit, wäre die Seiten mittels fx:include einzubinden.

MainView

<VBox xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            prefHeight="400.0" prefWidth="600.0">
    <children>
        <Label fx:id="label" text="Label in MainView"/>
        <fx:include source="SubView.fxml"/>
    </children>
</VBox>

SubView

<AnchorPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="de.test.SubViewController"
            prefHeight="400.0" prefWidth="600.0">
    <children>
        <Label fx:id="label" text="Label in SubView"/>
    </children>
</AnchorPane>

 

[internet]

ok, danke... Nein, ich meine keine Tabs, sondern richtige Seiten, ála editPage, overviewPage, dashboard....
Also erstelle ich für jede Seite eine .fxml - Datei.
Aber wie sieht es mit dem "Layout" aus?
Also quasi die Seite von meinem Eingangspost...

Der grüne Container ist dann quasi mein "Content", den ich dann mit der derzeit "aktiven" Seite, also einer fxml - Datei austauschen möchte...
Aber:

• was für eine Komponente ist dann Content
• wie ändere ich die View, sodass editPage, dashboardPage etc. angezeigt wird?

 

[KonradN]

In der FXML Datei hast Du ja ein Element, mit dem alles startet. Und wenn Du mit dem FXMLLoader das FXML lädst, dann bekommst Du ja eine Referenz auf genau dieses Element.

Das kannst Du dann direkt bei Dir einfügen, also in einem Fall in einem Bereich Deiner BorderPane. Wenn Du es dann austauschen willst, dann entfernst Du das vorhandene Element und fügst das neu geladene/erstellte ein.

 

[internet]

Das ist mein Code:

/**
 * JavaFX App
 */
public class App extends Application {

    private static Scene scene;

    @Override
    public void start(Stage stage) throws IOException {
        scene = new Scene(loadFXML("template"));
        scene.getStylesheets().add(getClass().getResource("styles.css").toExternalForm());
        stage.setScene(scene);
        stage.show();
    }

    static void setRoot(String fxml) throws IOException {
        scene.setRoot(loadFXML(fxml));
       
    }

    private static Parent loadFXML(String fxml) throws IOException {
        FXMLLoader fxmlLoader = new FXMLLoader(App.class.getResource(fxml + ".fxml"));
        return fxmlLoader.load();
    }
   
    public static void main(String[] args) {
        launch();
    }

}

Hier das template.fxml:

<VBox fillWidth="false" prefHeight="454.0" prefWidth="729.0" xmlns="http://javafx.com/javafx/18" xmlns:fx="http://javafx.com/fxml/1" fx:controller="de.dpunkt.myaktion.gui.controller.javafx.PrimaryController">
  <children>
      <BorderPane id="mainContainer" prefHeight="481.0" prefWidth="790.0">
         <top>
          <MenuBar id="menuBar" prefHeight="31.0" prefWidth="1045.0" BorderPane.alignment="CENTER">
            <menus>
              <Menu id="fileButton" mnemonicParsing="false" text="Allgemein">
                <items>
                  <MenuItem mnemonicParsing="false" onAction="#switchToSecondary" text="Dashboard" />
                  <MenuItem mnemonicParsing="false" text="Einstellungen" />
                  <SeparatorMenuItem mnemonicParsing="false" />
                  <MenuItem mnemonicParsing="false" text="Schließen" />
                </items>
              </Menu>
              <Menu mnemonicParsing="false" text="Galerien">
                <items>
                  <MenuItem mnemonicParsing="false" text="Neu anlegen" />
                  <MenuItem mnemonicParsing="false" text="Übersicht" />
                </items>
              </Menu>
                  <Menu mnemonicParsing="false" text="Logs" />
              <Menu mnemonicParsing="false" text="Info">
                <items>
                  <MenuItem mnemonicParsing="false" text="Version" />
                </items>
              </Menu>
            </menus>
          </MenuBar>
         </top>
         <center>
          <AnchorPane id="contentContainer" maxHeight="-1.0" maxWidth="-1.0" prefHeight="601.0" prefWidth="1108.0" BorderPane.alignment="CENTER">
               <children>
                  <AnchorPane prefHeight="429.0" prefWidth="1108.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
                     <children>
                        <TableView minHeight="-Infinity" prefHeight="200.0" prefWidth="500.0">
                          <columns>
                            <TableColumn prefWidth="75.0" text="C1" />
                            <TableColumn prefWidth="-1.0" text="C2" />
                          </columns>
                        </TableView>
                     </children>
                  </AnchorPane>
               </children></AnchorPane>
         </center>
      </BorderPane>
  </children>
</VBox>

Frage wäre nun:

• Ist AnchorPane richtig für den Content?
• Wie switche ich / ersetze ich die View ?