ドキュメント



ご意見をお寄せください | 印刷 | PDF | ePub | Mobi
JavaFX Scene Builder: JavaFX Scene Builderの概要

4 FXMLファイルおよびベース・ペインの作成

この章では、NetBeans IDEの「新規」コマンドまたはJavaFX Scene Builderの「新規」コマンドのいずれかを使用して、新しいFXMLレイアウト・ファイルを作成します。次に、カスケード・スタイルシート(CSS)を割り当ててFXMLレイアウトに使用し、ベース・ペインを作成してアプリケーションのGUI設計を開始します。

IssueTrackingLiteアプリケーション用に構築するFXMLレイアウトは、既存のサンプル・プロジェクトの問題を問い合せたり、問題を変更したり、新しい問題を追加できるインタフェースです。次を実行して、独自のIssueTrackingLiteユーザー・インタフェースを構築します。

  1. 「NetBeans IDEの新規ウィザードの使用」または「JavaFX Scene Builderの「新規」コマンドの使用」の手順に従って、新しいFXMLファイルを作成します。

  2. レイアウト全体に使用するルート・コンテナ、CSSおよびスタイル・クラスを設定します。

  3. レイアウトのベース・ペインを作成します。

NetBeans IDEの新規ウィザードの使用

NetBeans IDEの新規ウィザードを使用して、新しい空のFXMLファイルを作成します。

  1. IDEの「プロジェクト」ウィンドウから、「ソース・パッケージ」下のissuetrackingliteフォルダ・ノードを右クリックし、「新規」、「その他」の順に選択します。

  2. 図4-1に示すように、「新規ファイル」ダイアログ・ボックスで、「JavaFX」カテゴリを選択し、「空のFXML」ファイル・タイプを選択します。「次」をクリックします。

    図4-1 「空のFXML」ファイル・タイプの選択

    図4-1の説明が続きます
    「図4-1 「空のFXML」ファイル・タイプの選択」の説明

  3. 新しい空のFXMLダイアログ・ボックスで、「FXML名」テキスト・フィールドにIssueTrackingLiteと入力します。「パッケージ」テキスト・フィールドの値がissuetrackingliteであることを確認します。「終了」をクリックします。

    IDEソース・エディタにIssueTrackingLite.fxmlファイルが開きます。この新しいFXMLファイルは、提供されるコントローラ・ソース・コードのIssueTrackingLiteController.javaと同じフォルダ内にあり、このチュートリアルで構築するユーザー・インタフェースと接続します。

  4. 「プロジェクト」ウィンドウで、IssueTrackingLite.fxmlノードをダブルクリックして、JavaFX Scene Builderツールでファイルを開きます。

    JavaFX Scene Builderツールのメイン・ウィンドウが表示され、図4-2に示すように「コンテンツ」パネルにFXMLファイルが開きます。

    図4-2 NetBeans IDEから起動したときのJavaFX Scene Builderのメイン・ウィンドウ

    図4-2の説明が続きます
    「図4-2 NetBeans IDEから起動したときのJavaFX Scene Builderのメイン・ウィンドウ」の説明

  5. Scene Builderの「階層」パネルで、AnchorPaneノードを右クリックし、「削除」を選択します。
    このチュートリアルで構築するIssueTrackingLiteレイアウトでは、ルート・コンテナ、CSSおよびスタイル・クラスの設定で追加する別の最上位コンテナを使用します。

  6. JavaFX Scene Builderのメニュー・バーから、「ファイル」、「保存」の順に選択します。

JavaFX Scene Builderの「新規」コマンドの使用

NetBeans IDEを使用せずにこのチュートリアルを完了する場合は、次の手順に従って、Scene Builderの「新規」コマンドを使用して新しい空のFXMLファイルを作成します。

Scene Builderのメニュー・バーから、「ファイル」、「新規」の順に選択します。

JavaFX Scene Builderの新規ウィンドウが表示され、図4-2に示すように「コンテンツ」パネルに空のFXMLファイルが開きます。「コンテンツ」パネルは最初は空です。

図4-3 新規ファイル作成後のJavaFX Scene Builderのメイン・ウィンドウ

図4-3の説明が続きます
「図4-3 新規ファイル作成後のJavaFX Scene Builderのメイン・ウィンドウ」の説明

ルート・コンテナ、CSSおよびスタイル・クラスの設定

レイアウト全体に使用するルート・コンテナ、スタイルシートおよびスタイル・クラスを設定します。

ヒント:

頻繁に、メニュー・バーから「ファイル」、「保存」コマンドの順に選択します。また、IssueTrackingLiteアプリケーションの構築中にアクションを元に戻す必要がある場合は、メニュー・バーから「編集」、「元に戻す」を選択します。

  1. 図4-4に示すように、VBoxを「ライブラリ」パネルから「コンテンツ」パネルにドラッグします。

    図4-4 最初のVBoxコンテナの追加

    図4-4の説明が続きます
    「図4-4 最初のVBoxコンテナの追加」の説明

  2. 新しいFXMLレイアウトに使用するCSSファイルを設定します。

    1. ドキュメント・パネルの「階層」セクションで、ルートのVBoxコンテナ要素が選択されていることを確認します。

    2. 「インスペクタ」パネルの「プロパティ」セクションで、「JavaFX CSS」セクションに移動し、「スタイルシート」テキスト・フィールドを見つけます。プラス(+)記号のボタンをクリックします。

    3. 「スタイルシートの追加」ダイアログ・ボックスで、IssueTrackingLiteサンプル・ファイルを抽出した場所に移動します。issuetrackingliteフォルダを開き、IssueTrackingLite.cssファイルを選択します。「開く」をクリックします。

  3. スタイル・クラスを設定します。

    1. 「階層」パネルで、ルートのVBoxコンテナが選択されていることを確認します。

    2. 「インスペクタ」パネルの「プロパティ」セクションで、スタイル・クラス・テキスト・フィールドを見つけて、ドロップダウン矢印をクリックします。スタイル・クラスのリストは、IssueTrackingLite.cssファイルから取得されます。図4-5に示すように、テーマを選択します。

      図4-5 レイアウトのスタイル・クラスの設定

      図4-5の説明が続きます
      「図4-5 レイアウトのスタイル・クラスの設定」の説明

  4. チュートリアルの残りを続行する前に、新しいFXMLファイルを保存します。

    1. メイン・メニュー・バーから、(NetBeans IDEを使用してファイルを作成した場合)「ファイル」、「保存」を選択するか、または(Scene Builderの「ファイル」→「新規」コマンドを使用してファイルを作成した場合)「別名保存」を選択します。

    2. 「別名保存」ダイアログ・ウィンドウで、IssueTrackingLiteサンプル・ファイルを抽出した場所に移動します。IssueTrackingLite、src、issuetrackingliteフォルダの順に展開します。

    3. ファイル名テキスト・フィールドにIssueTrackingLite.fxmlと入力し、「保存」をクリックします。

    4. 既存のIssueTrackingLite.fxmlファイルを置換するかどうか尋ねられたら「はい」を選択します。

シーンおよびScene Builderウィンドウのサイズ変更

より大きい作業領域を使用できるように、シーンおよびScene Builderウィンドウのサイズを変更します。

  1. 作業領域が大きくなるように、「コンテンツ」パネルでシーンの幅と高さのサイズを変更します。

    1. 「インスペクタ」パネルで、「レイアウト」セクションを選択します。

    2. 「サイズ」セクションで、優先幅プロパティ値を800、優先高プロパティ値に600に変更します。

    3. 図4-6に示すように、最小幅、最小高、最大幅および最大高プロパティ値をUSE_COMPUTED_SIZEに変更します。

      図4-6 シーンのサイズ変更

      図4-6の説明が続きます
      「図4-6 シーンのサイズ変更」の説明

  2. VBoxコンテナ全体を表示できるように、Scene Builderウィンドウのサイズを変更します。

ベース・ペインの作成

ベース・レイアウト・ペインを作成して、GUIレイアウトの様々なセクションを定義します。

  1. ドキュメント・パネルの「階層」セクションを開きます(まだ開いていない場合)。

  2. SplitPaneオブジェクトを追加します。

    1. 図4-7に示すように、「ライブラリ」パネルから、ドキュメント・パネルの「階層」セクションにSplitPane (空)コンテナをドラッグし、VBox要素内にドロップします。

      図4-7 VBoxコンテナへの空のSplitPaneの追加

      図4-7の説明が続きます。
      「図4-7 VBoxコンテナへの空のSplitPaneの追加」の説明

    2. 「階層」パネルでSplit Paneを選択し、メニュー・バーから「変更」、「計算されたサイズの使用」の順に選択します。

    3. 「インスペクタ」パネルで、「レイアウト」セクションを選択します。Vgrowプロパティ値をALWAYSに設定します。

  3. 別のSplitPane要素を追加し、その内容を変更します。

    1. 図4-8に示すように、「ライブラリ」パネルのコンテナ・セクションからSplitPane (垂直)要素をドラッグし、以前に「階層」パネルに追加したSplitPaneにドロップします。

      図4-8 SplitPane (垂直)要素の追加

      図4-8の説明が続きます。
      「図4-8 SplitPane (垂直)要素の追加」の説明

      SplitPane (垂直)要素がドロップされると、その子のAnchorPaneとともにドキュメント・パネルに追加されます。

    2. メニュー・バーから、「変更」、「計算されたサイズの使用」の順に選択します。または、[Ctrl]と[Shift]キーを押しながら[K]キーを押すこともできます。

    3. 「階層」パネルで、追加した2番目のSplitPaneコンテナ要素を展開し、その内容を表示します。最初のAnchorPaneノードを右クリックし、コンテキスト・メニューから「削除」を選択します。

    4. 残りのAnchorPaneのノードを選択して、メイン・メニュー・バーから「変更」、「計算されたサイズの使用」の順に選択します。
      「インスペクタ」パネルの「レイアウト」セクションで、AnchorPaneの「サイズ」プロパティがUSE_COMPUTED_SIZE.の値に更新されることに注意してください。

  4. メニュー・バーから、「ファイル」、「保存」の順に選択します。または、[Ctrl]キーを押しながら[S]キー(WindowsまたはLinuxプラットフォームの場合)を押すか、[Cmd]キーを押しながら[S]キー(Mac OSプラットフォームの場合)を押すこともできます。
    頻繁に「保存」アクションを実行して、作業内容を保存してください。

ウィンドウを閉じる

目次

JavaFX Scene Builder: JavaFX Scene Builderの概要

展開 | 縮小