ステータスバー上に区切り線と画像とボタンを表示させるには？

Question

JavaFXのcontrolsfxのライブラリ（http://fxexperience.com/controlsfx/）を使って、↓のようにステータスバーを下に表示させることができました。

しかし、今度は↓のような区切り線と画像とボタンを表示させたいのですが、どのようにやればいいのかわかりません

FXML側でやると、簡単に書けると聞きましたが、FXML 側で書く場合どうやればいいのでしょうか？

FXMLコードは以下の通りです。

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

<?import javafx.scene.control.Button?>
<?import javafx.scene.control.Menu?>
<?import javafx.scene.control.MenuBar?>
<?import javafx.scene.control.MenuItem?>
<?import javafx.scene.control.Separator?>
<?import javafx.scene.control.ToolBar?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.ColumnConstraints?>
<?import javafx.scene.layout.GridPane?>
<?import javafx.scene.layout.RowConstraints?>
<?import org.controlsfx.control.StatusBar?>


<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="480.0" prefWidth="640.0" xmlns="http://javafx.com/javafx/8.0.60" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <BorderPane depthTest="DISABLE" layoutX="204.0" layoutY="169.0" prefHeight="573.0" prefWidth="575.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
         <bottom>
            <StatusBar cache="true" text="test" BorderPane.alignment="CENTER" />
         </bottom>
         <top>
            <GridPane BorderPane.alignment="CENTER">
              <columnConstraints>
                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
              </columnConstraints>
              <rowConstraints>
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
              </rowConstraints>
               <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 prefHeight="40.0" prefWidth="200.0" GridPane.rowIndex="1">
                    <items>
                      <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="31.0" stylesheets="@test.css">
                           <graphic>
                              <ImageView fitHeight="25.0" fitWidth="18.0" pickOnBounds="true" preserveRatio="true">
                                 <image>
                                    <Image url="@NewDocument_32x32.png" />
                                 </image>
                              </ImageView>
                           </graphic>
                        </Button>
                        <Separator orientation="VERTICAL" prefHeight="25.0" prefWidth="0.0" />
                    </items>
                  </ToolBar>
               </children>
            </GridPane>
         </top>
      </BorderPane>
   </children>
</AnchorPane>

Answer 1

controlsfxのfeatureをざっと見ただけの素人ですが・・・

区切り線と画像とボタン

controlsfxを使うまでもなくJREにある従来通りの部品で足りるように思えます。
区切り線は質問にあるコードでも既に使われてますね・・・
画像はImageView、ボタンはButtonでcssにそれらしい外観を定義すればよいと思います。

Comments

[mr0237]

JREってなんですか？　またどのように書けばいいのでしょうか？

[KSwordOfHaste]

失礼「Javaの標準ライブラリー」というべきでした。「どのように書けば」は漠然としすぎてます。画面の作成方法をあなたがどの程度ご存知なのかが聞き手にわかるように「わからない点が何か」を明確に書いてくださいね。でないとコードをまるまる回答者が考えなくてはなりません。それは一般の回答者の本意ではありません。ヒント・アドバイスが本来の形だと思います。質問文は編集できますので、より具体的に不明な点を追記できますよ。

[mr0237]

すいません。できれば、FXML側で書きたいのですが、どのように書いたらいいか？ということです。

FXMLなら簡単に書けると聞いたのですが…

[KSwordOfHaste]

SceneBuilderを用いてGUI操作で作成するのが一番簡単だと思います。自分はもっぱらSceneBuilderで作成するのでFXMLを直接手で書く際には調べながらでないと書けないです。ちなみにボタンの外観をSceneBuiderでFXMLへ埋め込むこともできますが、cssに書く方が一般的かと思います。FXMLへ埋め込んでしまうと手直しが却って面倒になる気がしますので。

[mr0237]

すいません。場違いですいませんが、SceneBuilderを用いてステータスバーに区切り線を配置しようとしても配置できないのです。（https://teratail.com/questions/58356）←同じような内容の質問を立てたので、回答のほうをお願いします。　場違いですいません。