5

JavaFX/FXML で柔軟な 3 ボックス レイアウトを作成したいと考えています。写真はそれを最もよく説明しているので、次のようになります。

望ましい結果

ご覧のとおり、メイン パーツはサイズ変更可能な 3 つのボックスで構成されている必要があります。このすべてのボックスには、適切なサイズが必要です。

したがって、コードは次のようになります (簡略化されたコード)。

<BorderPane>
  <top>
    <VBox>
      <!-- menubar stuff -->
    </VBox>
  </top>
  <center>
    <!-- ACTUAL CONTENT HERE -->
  </center>
  <bottom>
    <!-- toolbar stuff -->
  </bottom>
</BorderPane>

ここで最善のアプローチは何でしょうか? 2 つのネストされたSplitPanes ?

4

1 に答える 1

8

ここで最善のアプローチは何でしょうか? 2 つのネストされた SplitPanes?

ええ、私はそうします。

地図編集者

上記のモック レイアウトを取得するには、SceneBuilder 1.1 Early Access で次の fxml を開いてみてください。

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

<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<BorderPane id="BorderPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="400.0" xmlns:fx="http://javafx.com/fxml">
  <bottom>
    <Label alignment="CENTER" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" style="-fx-background-color: linear-gradient(to bottom, paleturquoise, azure, paleturquoise);&#10;" text="(56, 32)" textAlignment="LEFT" BorderPane.alignment="CENTER" />
  </bottom>
  <center>
    <SplitPane dividerPositions="0.3492462311557789" focusTraversable="true" prefHeight="160.0" prefWidth="200.0">
      <items>
        <SplitPane id="SplitPane" dividerPositions="0.6088328075709779" orientation="VERTICAL">
          <items>
            <TabPane prefHeight="200.0" prefWidth="200.0" side="BOTTOM" tabClosingPolicy="UNAVAILABLE">
              <tabs>
                <Tab text="A">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: lavender;&#10;" />
                  </content>
                </Tab>
                <Tab text="B">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" />
                  </content>
                </Tab>
                <Tab text="C">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" />
                  </content>
                </Tab>
                <Tab text="D">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" />
                  </content>
                </Tab>
                <Tab text="E">
                  <content>
                    <TilePane prefHeight="200.0" prefWidth="200.0" />
                  </content>
                </Tab>
              </tabs>
            </TabPane>
            <TreeView prefHeight="200.0" prefWidth="200.0" />
          </items>
        </SplitPane>
        <AnchorPane minHeight="0.0" minWidth="0.0" prefHeight="80.0" prefWidth="50.0" style="-fx-background-color: palegreen;" />
      </items>
    </SplitPane>
  </center>
  <top>
    <VBox prefHeight="-1.0" prefWidth="-1.0">
      <children>
        <MenuBar>
          <menus>
            <Menu mnemonicParsing="false" text="File">
              <items>
                <MenuItem mnemonicParsing="false" text="Close" />
              </items>
            </Menu>
            <Menu mnemonicParsing="false" text="Edit">
              <items>
                <MenuItem mnemonicParsing="false" text="Delete" />
              </items>
            </Menu>
            <Menu mnemonicParsing="false" text="Help">
              <items>
                <MenuItem mnemonicParsing="false" text="About" />
              </items>
            </Menu>
          </menus>
        </MenuBar>
        <ToolBar>
          <items>
            <Button mnemonicParsing="false" style="-fx-graphic: url('http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-9/24/open-file-icon.png');" text="" />
            <Button mnemonicParsing="false" style="-fx-graphic: url('http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-7/24/Save-icon.png');" text="" />
          </items>
        </ToolBar>
      </children>
    </VBox>
  </top>
</BorderPane>
于 2013-04-18T23:56:39.153 に答える