JavaFX/FXML에서 유연한 3 박스 레이아웃을 만드는 가장 좋은 방법

Question

JavaFX/FXML에서 유연한 3 박스 레이아웃을 만들고 싶습니다. 그림은 그래서 그냥 다음처럼, 그것은 최선을 설명합니다 : 당신이 볼 수 있듯이, 주요 부분은 세 가지 크기 조정이 가능한 상자로 구성되어야

. 이 상자는 모두 기본 크기 여야합니다.

그래서 코드는 다음과 같이 표시됩니다 (단순화 된 코드).

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

가장 좋은 방법은 무엇일까요? 두 개의 중첩 된 SplitPane?

Answer 1

가장 좋은 방법은 무엇일까요? 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>