JavaFXComposerDataBindingTutorialJa

Contents

JavaFX Composer バインドのチュートリアル

目的

このチュートリアルでは、JavaFX Composer 内で JavaFX におけるバインドを定義する方法を示します。

このチュートリアルを通して、ユーザによるカンマ区切りの入力をバインドを用いて自動的にパースし、リスト表示するアプリケーションの作成方法を学ぶことができます。

準備

「新規プロジェクト」から、"JavaFX | JavaFX Desktop Business Application"を選択し、新しい JavaFX プロジェクトを作成します。新しいプロジェクトが作成され、空のデザインファイルがエディタ領域に表示されるはずです。

コンポーネントの追加

「パレット」内の "JavaFX Controls" から、以下のコンポーネントを "Design" 領域にドラッグアンドドロップします。

  • Label (label) - 入力テキストボックスのラベル
  • Text Box (textBox) - ユーザが入力を行うテキストボックス
  • Label (label2) - リスト表示結果のラベル
  • List View (listView) - パースされた結果をリスト表示する

"scene" 上のコンポーネントは、マウスを用いて動かすことで、きれいに並べることができます。また、テキストボックスを選択し、右端の四角形を "scene" の境界までドラッグすることで、テキストボックスの幅を "scene" 一杯まで広げることができます。

結果は以下のようになります。

File:javafxcomposer-tutorial-databinding-add-components.png

ラベルのテキスト

"Design" 領域の最初のラベルを選択します。"Properties" ウィンドウを見ると "Text" プロパティに初期値 "Label" が設定されています。これを、"Enter comma-separated items:" に変更します。同様に、2番目のラベルのテキストを "Parsed Items:" に変更します。

結果は以下のようになります。

File:javafxcomposer-tutorial-databinding-labels-text.png

List Items Details を開く

リスト項目とテキストボックスへのユーザの入力とをバインドします。そのためには、"listView" コンポーネントの "Items" プロパティの "Details" パネルを開く必要があります.

まず、"listView" コンポーネントを選択します。"Properties" ウィンドウの "Items" プロパティの右側にあるボタンをクリックすると、"Details" パネルが開きます。 ここで、ダイアログの右上にある "Bind" ボタンをクリックします。

File:javafxcomposer-tutorial-databinding-open-list-items.png

"Bind" パネルには、バインドの式を定義するフィールドがあります。また "Generate" ボタンによって、リスト項目がバインドされる新しいフィールドを作成することができます。

それらのフィールドとボタン以外では、3つのリストが表示されています。

  • コンポーネント
  • 選択されたコンポーネントのプロパティと式
  • コンバータ

いま、リスト項目を "textBox" コンポーネントの "text" プロパティにバインドし、"String" を "," で分割して "String[]" に変換したいので、 以下に示すように、リスト中の適切な値を選択します。

File:javafxcomposer-tutorial-databinding-list-items-bind.png

上部の "field" は、リスト中の項目を選択する度に自動的に更新されることに注意してください。ダイアログを閉じます。

実行

これで、アプリケーションが完成しました。ツールバーの "Run" アイコンをクリックします。

File:javafxcomposer-tutorial-databinding-list-run-project.png

デザインファイルが保存され、プロジェクトがコンパイルされた後、起動します。

最終的なアプリケーションは以下のようになります。カンマ区切りの入力を行いエンターキーを押すと、その度に、入力された項目がリスト表示されます。

File:javafxcomposer-tutorial-databinding-final-application.png

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