JavaFXComposerTemplatesTutorialJa

Revision as of 09:07, 6 January 2010 by Okamoto (Talk | contribs)
(diff) ← Older revision | Current revision (diff) | Newer revision → (diff)

Contents

JavaFX Composer テンプレートチュートリアル

目的

このチュートリアルの目的は、ツールから提供される全てのコンポーネントテンプレートについて学習することです。

準備

"JavaFX | JavaFX Desktop Business Application"プロジェクトテンプレートから新規JavaFXプロジェクトを作成します。プロジェクト作成後、空のデザインファイルがエディタ領域内に表示されます。

テンプレート

複雑なデザインの中のいくつかの部分は似たようなパターンを持っています。

例:もしあなたがレコードリストを調査していくとすると、レコードリスト中のカーソルやインデックスを移動させるPreviousボタンやNextボタンを使うでしょう。これらはプロジェクトを作成する際、あなたがウィザードを使うときに、ウィザード中のページの移動のために「戻る」ボタンや「次へ」ボタンを押すのに似ています。

このような用途のために、ツールはあらかじめ決められたテンプレートをパレットウィンドウの「テンプレート」カテゴリに提供しています。これらのテンプレートドラッグ&ドロップすることで複雑な構造のデザインを作成することができます。

次のセクションではそれぞれのテンプレートの説明をしていきます。

file: javafx-composer-templates-palette.png

ウィザードボタン

このテンプレートはいくつかのボタン(すなわち、Cancel, Back, Next, Finish)のコンテナを作成します。このテンプレートはボタンのtext部分が編集されたボタンを作成するだけです。

file: javafx-composer-templates-wizard-buttons.png

インデックスボタン

このテンプレートでは"Previous"ボタンと"Next"ボタンのコンテナを作成します。

file: javafx-composer-templates-index-buttons.png

このテンプレートをデザインウィンドウにドラッグ&ドロップするとすぐに、カスタマイザーが開かれ、いくつかの追加データを入力します。

file: javafx-composer-templates-index-buttons-customizer.png

最も重要な項目は"Indexソース"領域です。ここではインデックスとして与えるコンポーネントを指定します。

  • State Varible (例:"currentState"):これが選択された場合、ボタンはデザインによって指定された実状態に切り替えます。
  • List View :これが選択された場合、ボタンはリストビュー中の選択インデックスに移動します。
  • Data Source(例:"jdbcDataSource"):これが選択された場合、インデックスソースはデータソースによって与えられ、返される

!RecordSet中の内部カーソル(例:"current()")に沿って移動します。これは普通、データベースのレコードリスト用の−例えば、"Desktop Form" などと一緒に使われます。

残りのカスタマイザー中の領域は詳細オプションです。別のボタンコンテナなどを使用したい場合など、別の修正が必要な「インデックスボタン」テンプレートのボタンを特定するために使用します。

ダイアログの「了解」ボタンをおすと、変更がボタンに伝わります。変更はこのように行います。テンプレートのインスタンスはナビゲータウィンドウの下にある「テンプレート」ノードにあります。右クリックしてポップアップメニューを表示し、"Customize..." をクリックするとカスタマイザーを起動することができます。

file: javafx-composer-templates-index-buttons-navigator.png

排他的可視(Exclusively Visible)

ウィザードを使用して作成したデザインに次のものを追加していきましょう。シーンには上記した「インデックスボタン」が含まれていると思います。このテンプレートでは状態変数である"currentState"を使用します。この"currentState"状態変数は次の状態をもちます:Intro", "License", "Progress", "Summary"の4つです。これから、それらのページのウィザード作成します。

あなたは特定の状態を選ぶことによってページを作成できます。シーンに新規パネルを追加する事で、パネルは自動的にある特定の状態でのみ可視になります。このときパネルのコンテンツデザインは他の状態と似たようなものになります。

下記にテンプレートでの設定項目を示します。テンプレートをドラッグ&ドロップすると次の領域を決定するために、カスタマイザーが立ち上がります。

  • State Variable - the state variable with would control the actual wizard page
  • Container - the container which will hold set of exclusively visible Panels - each Panel will be visible just in a specific state
  • Create States for Redundant Components - this will be described later
  • Create Panels for Redundant States - if check, then the customizer will automatically create missing Panel in the container to match the number of states to the number of the Panels in the container

file: javafx-composer-templates-exclusively-visible-customizer.png

Note this template is creating empty Panels therefore it is visualize in the design as a small selection rectangle without any content. Due to this it is better to add the first sub-component using Navigator.

file: javafx-composer-templates-exclusively-visible.png

The template instance is added to the Navigator under "Templates" category. Similarly as before you can show the customizer again using "Customize" popup menu action on the template node in Navigator.

If you create additional Panels, you can open the customizer again and check "Create States for Redundant Components" field to synchronize the number of states with the number of Panels by creating new states for them.

Desktop Form

This template create a structure Form-like read-only visualization of data in a current Record in a !RecordSet provided by a specified data source.

The customizer is shown after the template is D'n'D-ed to the design and allows:

  • Data Source - the data source which provides !RecordSet will current Record which data are going to be visualized
  • Title Container - this is an advanced option which allows to specify another container for "title" components
  • Value Container - this is an advanced option which allows to specify another container for "value" components
  • Title Font - the font that is assigned to the "title" Labels
  • Value Font - the font that is assigned to the "value" Labels
  • Entries - edited in the table, each entry has a field name and a title

file: javafx-composer-templates-desktop-form-customizer.png

The structure created by the "Desktop Form" consists of a HBox container with two VBox containers. One used as a "title" container and one as "value" container. For each entry, it creates two Labels. One is used as a title of the entry and is added to the "title" container. The second is used for a value of the entry and is added to the "value" container.

file: javafx-composer-templates-desktop-form.png

The template instance is added to the Navigator under "Templates" category. Similarly as before you can open the customizer again using "Customize" popup menu action on the template node in Navigator.

Note that the pressing the "Ok" button in the customizer will delete all components in the specified "title" and "value" containers. After that it creates all the necessary Labels.

Note that this Form visualization creates read-only view on data in the data source.

Mobile Form

This template is similar to the "Desktop Form" template except that it creates a single "VBox" container which is used as "title" and "value" container. This creates similar structure but all Labels are placed vertically which is useful in Mobile environment.

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