JavaFXComposerStatesTutorialJa

Contents

JavaFX Composer ステートのチュートリアル

準備

まず最初に、デザインファイルが含まれているプロジェクトを用意する必要があります。例えば、「新規プロジェクト」から、"JavaFX | JavaFX Desktop Business Application"を選択し、新しい JavaFX プロジェクトを作成します。

まず初めに行うこと:

  • デザイン領域にラベルをドラッグアンドドロップします
  • そのラベルの "text" プロパティの値を "Master State" に変更します
  • デザイン領域にボタンをドラッグアンドドロップします
  • そのボタンの "text" プロパティの値を "Next State" に変更します
  • "Action" プロパティの "Generate" ボタンをクリックし、 "Generate: Go to next state" を選択すると、buttonAction という関数が生成されます。"currentState.next()" という部分を "currentState.nextWrapped()" に変更します。

file: javafx-composer-states-initial-source-code.png

目的

このチュートリアルの目的は、ステートという概念そのものや、その使い方の流れを説明することです。

マスターステート

新しいデザインファイルを作ると、上のスクリーンショットのように、"< master >" と呼ばれるステートが必ず存在します。

このステート内で作成したものは、全て、アプリケーションの起動時に反映されます。通常通りにコンポーネントを作成し、プロパティを設定することが可能です。

それぞれのコンポーネントには、"Properties" ウィンドウにて書き換え可能なプロパティが存在し、"Default" の値が設定されています。プロパティがその作成後に初期化された場合や、マスターステート内でユーザによって変更された場合、そのプロパティの値は "Master" の値となります。

file: javafx-composer-states-default-master-state.png

新しいステートの作成

追加のステートを作成することができます。ステートというのは、あるコンポーネントについてのプロパティの値の集合を表すものです。マスターステート以外のステートについては、プロパティのデフォルトの値として、マスターステートでの値がそのまま設定されます。マスターステートで設定されていないプロパティの値の場合は、デフォルトの値が設定されます。

新しいステートを作成するには、"Add" ボタンをクリックします。

file: javafx-composer-states-add-state-button.png

以下のようなダイアログが現れるはずです。ここでは以下の項目が設定できます:

  • 新しいステートの名前
  • マスターステートから値を引き継ぐか、既存のステートを複製するか
  • 新しいステートを初期ステートとするか

file: javafx-composer-states-add-state-dialog.png

ステートの名前はできるだけ他と重複しないようにします。マスターステート以外にステートが存在しない場合、複製を選ぶことはできません。また、初期ステートとして設定した場合、最終的なアプリケーションでは、マスターステートでの値が設定されたシーンが作成された直後に、自動的にそのステートへの切り替えが行われます。

ここではステートの名前を "Red" とし、その他は変更しないでおきます。すると、"Red" というステートが作成され、自動的に選択された状態になります。

file: javafx-composer-states-state-red.png

ステート内でのプロパティの値の変更

あるステートが選択されている状態では、あらゆる変更はそのステートのみに反映されます。つまり、

  • 新しく追加したコンポーネントは、そのステート以外のステートでは見えません
  • 新しく設定したプロパティの値はそのステートでのみ有効となります

ラベルを選択し、"text" プロパティを "Red State" と設定します。同様に、"Text Fill" プロパティを "red" に設定します。プロパティの値の隣にあるアイコンからも設定を行うことができます。

結果はこのようになるはずです。

file: javafx-composer-states-state-red-label.png

"< master >" ステートを選択すると、マスターステートでのデザインは変更されていないことが分かります。もう一度 "Red" ステートを選択し、"Red" ステートでのデザインに戻ります。

file: javafx-composer-states-state-master-label.png

ステートの複製

もう一つステートを作成します。

  • "Add" ボタンをクリックします
  • ステートの名前を "Blue" とします
  • "Duplicate of" のラジオボタンを選び、コンボボックス内の "Red" ステートを選択します

file: javafx-composer-states-add-state-blue.png

これで、マスター・"Red"・"Blue"の3つのステートが存在することになります。

"Blue" ステートを作成する際、"Red" ステートにおいて変更された全てのプロパティの値が "Blue" ステートにコピーされています。残りのプロパティの値についてはマスターステートから引き継がれています。

そのため、ラベルは "Red State" のままです。"text" プロパティと "Text Fill" プロパティをそれぞれ "Blue State"、"blue" に変更します。

file: javafx-composer-states-state-blue-label.png

アニメーションの設定

次に、ラベルの X 方向のスケールについて、アニメーションを追加します。

"Properties" ウィンドウの上部にある "Transform" ボタンをクリックし、下方向にスクロールすると、"Transform" プロパティが表示されています。

"Blue" ステートが選択されていることを確認し、"Scale X" プロパティの値を "1.5" に設定します。

file: javafx-composer-states-label-scale-property.png

次に、"Scale X" プロパティの右側にあるアイコンをクリックすると、ダイアログが開き、以下のことができます。

  • それぞれのステートにおける、プロパティの値とそのアニメーションの参照
  • 複数のステートについて、同時にプロパティの値を設定 - リストの中のステートを複数選択し新しい値を入力
  • コンボボックスと持続時間を表すテキスト領域を用いた、シンプルなアニメーションの設定
  • "Use value resolved from field:" を選択することによって、コード(もしくはフィールドへの参照)を用いた値の設定ができます
  • プロパティのバインド (詳しくは別のチュートリアルを参照してください)
  • プロパティの値をマスターステートの値に設定する
  • プロパティの値をマスターステートの値として設定する

いま、"Scale X" プロパティの値は "Blue" ステートでは "1.5"、その他のステートでは "1.0" となっているはずです。

file: javafx-composer-states-label-scale-details.png

アニメーションを設定するには、"Select All" ボタンをクリックして、"Red" および "Blue" ステートを選択します。次に、"Animate" コンボボックスで "Linear" を選択し、右側のテキスト領域に "500" を入力します。

これで、"Red" および "Blue" ステートのときに "Scale X" プロパティに対してシンプルな線形のアニメーションが設定できたことになります。

"Blue" ステートのみにアニメーションを設定した場合は、"Blue" ステートに切り替えたときのみにアニメーションが表示されることに注意してください。

デザイン領域ではアニメーションは表示されず、実行時にのみ表示されることにも注意してください。

また、マスターステートにはアニメーションを設定することはできません。これは、プロパティの値が初期値として設定されるためです。

アプリケーションの実行

マスター・"Red"・"Blue"の3つのステートを切り替えることで、異なるテキストが異なる色で表示されることになります。

では、ツールバー上の "Run" アイコンをクリックして、プロジェクトを実行してみましょう。アプリケーションのウィンドウが現れるはずです。

"Master State" というラベルが表示された後、ただちに "Red State" ラベルが表示されます。これは、マスターステートを初期値としてシーンが生成され、その後で初期ステートに切り替えられるためです。

"Next State" ボタンをクリックすると、"Red" および "Blue" ステートが交互に切り替わり、ラベルがアニメーションしながら切り替わります。

file: javafx-composer-states-run-application.png

コンポーネントの Review

多くのステートで多くのプロパティの値を定義した場合、"Properties" ウィンドウの "Review" ボタンをクリックすると、それらの値を見直すことができます。

file: javafx-composer-states-review-button.png

この機能を使うと、各プロパティがどのステートではどの値なのかを見ることができます。同様に、バインドの有無も確認できます。

ラベルについて "Review" を行うと以下のようになります。

file: javafx-composer-states-label-review.png

コンポーネントの可視性

デフォルトでは、新しく作成されたコンポーネントの可視性は、選択されているステートごとに設定が異なります。

  • マスターステートが選択されている場合、そのコンポーネントはマスターステートで visible であり、他のどのステートでも可視性は上書きされないので、自動的に全てのステートでそのコンポーネントは visible となります
  • マスターステート以外のステートが選択されている場合、そのコンポーネントはマスターステートでは INVISIBLE であり、選択されているステートでのみ visible となります。

一般的な注意

ステートの変更に伴うプロパティの値の変化量は最小になるようにするのが良いでしょう。つまり、できるだけマスターステートでプロパティの値を変更し、それ以外のステートではそのステートでのみ変更したい値だけを変更するようにすべきでしょう。

可視性について

可視性は、コンポーネントを追加するときに選択されているステートごとに設定されますが、これは、特定のステートでのみ visible なコンテナにコンポーネントを追加する場合でも同様です。

今回の場合では、以下のような考え方をするべきでしょう。

目的:

  • "Blue" ステートでのみ visible な、2つのラベルをもつパネルの作成

プロセス:

  • パネルを作成する際は、"Blue" ステートを選択します。これにより "Blue" ステートでパネルは visible となります
  • パネルを選択し、デザイン領域かナビゲータ領域のポップアップメニューから、"Design selected container" を呼び出します
  • これにより、デザインエディタが、シーンのデザインからパネルのデザインへ切り替わります
  • "< master >" ステートを選択します
  • 2つのラベルを追加します

結果:

  • "Blue" ステートでのみ visible なコンテナと、マスターステートで初期化・デザインできるラベルを作成できました。こうすることにより、ステートが切り替わる際に実行されるコード量を減らすことができます。

マスターステートでできるだけ多くの処理を行うことがベストであることを覚えておいてください。

コンポーネントをマスターステートとして設定

あるステートにおいて追加し、変更したコンポーネントを、マスターステートとして設定したい場合がしばしばあるでしょう。

そのような場合、そのコンポーネントを選択し、デザイン領域かナビゲータ領域のポップアップメニューから、"Set Component as Master" を呼び出してください。

こうすることで、選択中のステートでの値がマスターステートの値として設定されます。

Not logged in. Log in, Register

By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2012, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo