JavaFXComposerDataBindingTutorialJa

(Difference between revisions)
(Created page with '== JavaFX Composer Binding Tutorial == === Goal === This tutorial shows how to define JavaFX binding within the JavaFX Composer. During this tutorial you will learn how to cre…')
 
Line 1: Line 1:
-
== JavaFX Composer Binding Tutorial ==
+
== JavaFX Composer バインドのチュートリアル ==
-
=== Goal ===
+
=== 目的 ===
-
This tutorial shows how to define JavaFX binding within the JavaFX Composer.
+
このチュートリアルでは、JavaFX Composer 内で JavaFX におけるバインドを定義する方法を示します。
-
During this tutorial you will learn how to create an application which allows user's to enter a text that contains a comma-separated list items. The user's input will be automatically parsed and load up to a list view using JavaFX binding.
+
このチュートリアルを通して、ユーザによるカンマ区切りの入力をバインドを用いて自動的にパースし、リスト表示するアプリケーションの作成方法を学ぶことができます。
-
=== Preparation ===
+
=== 準備 ===
-
Create a new JavaFX project using "JavaFX | JavaFX Desktop Business Application" project template. A project should be created and an empty design file should be opened in an Editor area.
+
「新規プロジェクト」から、"JavaFX | JavaFX Desktop Business Application"を選択し、新しい JavaFX プロジェクトを作成します。新しいプロジェクトが作成され、空のデザインファイルがエディタ領域に表示されるはずです。
[[File:javafxcomposer-tutorial-databinding-prepare.png | 800px]]
[[File:javafxcomposer-tutorial-databinding-prepare.png | 800px]]
-
=== Add Components ===
+
=== コンポーネントの追加 ===
-
Drag and drop the following components from "JavaFX Controls" category in Palette to the Design:
+
「パレット」内の "JavaFX Controls" から、以下のコンポーネントを "Design" 領域にドラッグアンドドロップします。
-
* Label (label) - will be used as a label for the input text box
+
* Label (label) - 入力テキストボックスのラベル
-
* Text Box (textBox) - will be used for user's input
+
* Text Box (textBox) - ユーザが入力を行うテキストボックス
-
* Label (label2) - will be used as a label for the result in a list
+
* Label (label2) - リスト表示結果のラベル
-
* List View (listView) - will be displaying the parsed result.
+
* List View (listView) - パースされた結果をリスト表示する
-
Move the component on the scene using mouse to align the components one below another. Also you may resize the width of the text box to fill the scene by selecting the text box and dragging the right handle on its selection boundary.
+
"scene" 上のコンポーネントは、マウスを用いて動かすことで、きれいに並べることができます。また、テキストボックスを選択し、右端の四角形を "scene" の境界までドラッグすることで、テキストボックスの幅を "scene" 一杯まで広げることができます。
-
The result should look like this:
+
結果は以下のようになります。
[[File:javafxcomposer-tutorial-databinding-add-components.png]]
[[File:javafxcomposer-tutorial-databinding-add-components.png]]
-
=== Label Text ===
+
=== ラベルのテキスト ===
-
Select the first label in the Design. Then go to the Properties window. It should contains the "text" property with its initial value set to "Label". Change the text to "Enter comma-separated items:". Similar change the text of the second label to "Parsed Items:".
+
"Design" 領域の最初のラベルを選択します。"Properties" ウィンドウを見ると "Text" プロパティに初期値 "Label" が設定されています。これを、"Enter comma-separated items:" に変更します。同様に、2番目のラベルのテキストを "Parsed Items:" に変更します。
-
The result should look like this:
+
結果は以下のようになります。
[[File:javafxcomposer-tutorial-databinding-labels-text.png]]
[[File:javafxcomposer-tutorial-databinding-labels-text.png]]
-
=== Open List Items Details ===
+
=== List Items Details を開く===
-
Now we have to bind the list items to user's input in text box. To do so, you have to open Details panel of the "Items" property of listView component.
+
リスト項目とテキストボックスへのユーザの入力とをバインドします。そのためには、"listView" コンポーネントの "Items" プロパティの "Details" パネルを開く必要があります.
-
First select the listView component, go to Properties window, click on the button on the right-side of the "Items" property. It opens the Details panel. There click on "Bind" button in the top-right corner of the dialog.
+
まず、"listView" コンポーネントを選択します。"Properties" ウィンドウの "Items" プロパティの右側にあるボタンをクリックすると、"Details" パネルが開きます。
 +
ここで、ダイアログの右上にある "Bind" ボタンをクリックします。
[[File:javafxcomposer-tutorial-databinding-open-list-items.png]]
[[File:javafxcomposer-tutorial-databinding-open-list-items.png]]
-
In the "Bind" panel you have a field for specifying the bind expression as well as "Generate" button for creating a new field generated in the source code to which the list items property would be bound.
+
"Bind" パネルには、バインドの式を定義するフィールドがあります。また "Generate" ボタンによって、リスト項目がバインドされる新しいフィールドを作成することができます。
-
For now ignore the field and the buttons. Below there are three lists:
+
それらのフィールドとボタン以外では、3つのリストが表示されています。
-
* components
+
* コンポーネント
-
* properties and expressions of selected component
+
* 選択されたコンポーネントのプロパティと式
-
* converters
+
* コンバータ
-
We want to bind the list items to "textBox" component, "text" property and convert the "String" value to "String[]" separated by "," character.
+
いま、リスト項目を "textBox" コンポーネントの "text" プロパティにバインドし、"String" を "," で分割して "String[]" に変換したいので、
-
 
+
以下に示すように、リスト中の適切な値を選択します。
-
Therefore select the appropriate values in the lists as shown:
+
[[File:javafxcomposer-tutorial-databinding-list-items-bind.png]]
[[File:javafxcomposer-tutorial-databinding-list-items-bind.png]]
-
Note that the upper "field" gets automatically updated each time you select an item in lists. Close the dialog.
+
上部の "field" は、リスト中の項目を選択する度に自動的に更新されることに注意してください。ダイアログを閉じます。
-
=== Run ===
+
=== 実行 ===
-
Now we have whole application done. Click on "Run" icon in the main window toolbar.
+
これで、アプリケーションが完成しました。ツールバーの "Run" アイコンをクリックします。
[[File:javafxcomposer-tutorial-databinding-list-run-project.png]]
[[File:javafxcomposer-tutorial-databinding-list-run-project.png]]
-
The design file is saved, the project is compiled and started.
+
デザインファイルが保存され、プロジェクトがコンパイルされた後、起動します。
-
The final application should look like the picture below. If you type a comma-separated list of items into the text box and press Enter, the list view refreshs its items to ones entered in the text box.
+
最終的なアプリケーションは以下のようになります。カンマ区切りの入力を行いエンターキーを押すと、その度に、入力された項目がリスト表示されます。
[[File:javafxcomposer-tutorial-databinding-final-application.png]]
[[File:javafxcomposer-tutorial-databinding-final-application.png]]

Current revision as of 08:05, 21 December 2009

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