前方までの距離を表示するコンポーネントの追加
次にPaneを追加しましょう.Paneとは,ウィンドウをいくつかの領域に分割するときに用いるコンポーネントです.分割の仕方によりさまざまなPaneがあります.例えば垂直方向で分割する,水平方向で分割する,マス目状に分割するなどがあります.今回は全体としては垂直方向で分割するPaneを配置し.更に前進などを行うボタン群にはマス目状にコンポーネントを配置できるPaneを入れ子構造で置くようにします.このようにPaneは何層にも入れ子構造にして思い通りの位置にコンポーネントを配置していきます.
では垂直方向にコンポーネントを配置できるVBoxに別のPaneを追加しましょう.VBoxは垂直方向にコンポーネントを配置するときに用いられるPaneです.名前にはPaneと付きませんが.Paneクラスを継承しています.現在,一番トップにあるPaneがVBoxになっています.まずはMenuBarの下にFlowPaneを追加しましょう.下の図のようにContainersの中にあるFlowPaneをVBoxへドラッグ・アンド・ドロップで追加します.FlowPaneはこのPaneの境界で折り返されるように内包したコンポーネントを配置します.今回ははこのFlowPaneにLabelコンポーネントを置き,そのラベルにRPiCarの前方にある障害物等までの距離を表示します.
ではそのLabelコンポー年とを追加しましょう.下の図のようにControls内にあるLabelコンポーネントをFlowPaneへドラッグ・アンド・ドロップします.
次に追加したラベルの位置を中央になるように変えましょう.こう聞くとLabelコンポーネントのプロパティを変えるように感じるかもしれませんがそうではありません.FlowPaneのプロパティにある,そのPane内のコンポーネントの配置位置を変えることでLabelコンポーネントの位置を変えます.ということで,下の図のようにFlowPaneを選択し,右側のPropertiesにあるAlignmentをCENTERへ書てください.
次にFlowPaneの高さをその中に入っているLabelコンポーネントの高さと一致させましょう.これもFlowPaneに関する設定になりますが,先ほどとは異なりLayoutに関するものとなります.このため,下図のようにLayoutを選択し,その中にあるPref HeightをUSE_COMPUTED_SIZEにします.この意味は,FlowPaneの好ましい高さをその中に含まれるコンポーネントの高さと一致させるということです.ここまででRPiCarの前方にあるものまでの距離を表示できるようになりました.