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

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

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

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

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

FXML
1<?xml version="1.0" encoding="UTF-8"?>
2
3<?import javafx.scene.control.Button?>
4<?import javafx.scene.control.Menu?>
5<?import javafx.scene.control.MenuBar?>
6<?import javafx.scene.control.MenuItem?>
7<?import javafx.scene.control.Separator?>
8<?import javafx.scene.control.ToolBar?>
9<?import javafx.scene.image.Image?>
10<?import javafx.scene.image.ImageView?>
11<?import javafx.scene.layout.AnchorPane?>
12<?import javafx.scene.layout.BorderPane?>
13<?import javafx.scene.layout.ColumnConstraints?>
14<?import javafx.scene.layout.GridPane?>
15<?import javafx.scene.layout.RowConstraints?>
16<?import org.controlsfx.control.StatusBar?>
17
18
19<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">
20   <children>
21      <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">
22         <bottom>
23            <StatusBar cache="true" text="test" BorderPane.alignment="CENTER" />
24         </bottom>
25         <top>
26            <GridPane BorderPane.alignment="CENTER">
27              <columnConstraints>
28                <ColumnConstraints hgrow="SOMETIMES" minWidth="10.0" prefWidth="100.0" />
29              </columnConstraints>
30              <rowConstraints>
31                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
32                <RowConstraints minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
33              </rowConstraints>
34               <children>
35                  <MenuBar>
36                    <menus>
37                      <Menu mnemonicParsing="false" text="File">
38                        <items>
39                          <MenuItem mnemonicParsing="false" text="Close" />
40                        </items>
41                      </Menu>
42                      <Menu mnemonicParsing="false" text="Edit">
43                        <items>
44                          <MenuItem mnemonicParsing="false" text="Delete" />
45                        </items>
46                      </Menu>
47                      <Menu mnemonicParsing="false" text="Help">
48                        <items>
49                          <MenuItem mnemonicParsing="false" text="About" />
50                        </items>
51                      </Menu>
52                    </menus>
53                  </MenuBar>
54                  <ToolBar prefHeight="40.0" prefWidth="200.0" GridPane.rowIndex="1">
55                    <items>
56                      <Button mnemonicParsing="false" prefHeight="25.0" prefWidth="31.0" stylesheets="@test.css">
57                           <graphic>
58                              <ImageView fitHeight="25.0" fitWidth="18.0" pickOnBounds="true" preserveRatio="true">
59                                 <image>
60                                    <Image url="@NewDocument_32x32.png" />
61                                 </image>
62                              </ImageView>
63                           </graphic>
64                        </Button>
65                        <Separator orientation="VERTICAL" prefHeight="25.0" prefWidth="0.0" />
66                    </items>
67                  </ToolBar>
68               </children>
69            </GridPane>
70         </top>
71      </BorderPane>
72   </children>
73</AnchorPane>
74

行動規範の内容に同意します

回答1件

ベストアンサー

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

区切り線と画像とボタン

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

投稿2016/12/06 11:33

KSwordOfHaste

総合スコア18394

mr0237

2016/12/07 23:09

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

KSwordOfHaste

2016/12/08 00:55

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

mr0237

2016/12/08 07:13

すいません。できれば、FXML側で書きたいのですが、どのように書いたらいいか？ということです。 FXMLなら簡単に書けると聞いたのですが…

KSwordOfHaste

2016/12/08 19:54

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

mr0237

2016/12/10 09:39

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

行動規範の内容に同意します