JavaFXComposerRESTBindingTutorialJa

Revision as of 05:35, 22 December 2009 by Keiichio (Talk | contribs)

Contents

JavaFX Composer データソース - RESTバインドチュートリアル

目的

このチュートリアルはREST(ウェブサービス)データプロバイダからデータを収得し、ディスプレイに表示する、JavaFXを用いバインドの方法について学習します。

RESTデータプロバイダの定義の仕方、また、JavaFX UIコンポーネントへのプロバイダから与えられるデータバインドの仕方を知ることができるでしょう。例として、kenai.comをホストとした簡単なブラウザプロジェクトを作成します。

準備

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

コンポーネントの追加

パレットウィンドウ内の"JavaFX コントロール"カテゴリから次のコンポーネントをデザインにドラッグ&ドロップします。

  • List View - ここにプロジェクトのリストを表示させます

適当な位置にコンポーネントを移動します。スクリーンショットは一例です。画像サイズの関係で、サンプルのスクリーンショットでは携帯スクリーン(240 x 320)を使用しています。

RESTデータソースの追加と構成

データソースを処理するために、まずデータソースをデザインに追加する必要があります。そのためには、パレットウィンドウ内のHTTP Data Sourceコンポーネントを選択し、他のUIコンポーネントと同様にデザインパネルにドラッグ&ドロップするだけです。

File:javafxcomposer-tutorial-REST-s8.png

もう一つの方法として、ナビゲータウィンドウのData Sourceノードを右クリックして、Add|JavaFX Data Source|HTTP Data Source を選ぶことでも追加することができます。

File:javafxcomposer-tutorial-REST-s1.png

プロジェクトにデータソースを追加するのが初めての場合、いくつかのFXソースファイルをプロジェクトに追加する必要があることを告げるダイアログが表示されます。このダイアログで了解をクリックします。

File:javafxcomposer-tutorial-REST-s9.png


新しいデータソースが追加されていると、データソースカスタマイザーが立ちあります。ここでは、RESTサービスURL、認証信任状や、もし必要なら「子」データソースなどを定義します。

これらのオプションを以下のように決定します。

  • URL: "https://kenai.com/api/projects.json"と入力してください
  • メソッド: GET(デフォルトのままです)
  • 認証: NONE(デフォルトのままです)
  • データフォーマット: JSON(デフォルトのままです)

データソースが正しく設定できたら、「データフェッチ」ボタンをクリックします。少し待つと、スクリーンショットのようにデータソースレコードにツリー構造で結果が表示されます。表示されたデータは自由に閲覧、戻り値の決定をすることができます。

File:javafxcomposer-tutorial-REST-s7.png

このチュートリアルでは、リストビューにprojectsの項目のみ表示させるので、projectsの項目を含む戻り値だけを選択する必要があります。そのために、データソースレコードから"projects"ノードを選択し、「追加」ボタンを押します。

File:javafxcomposer-tutorial-REST-s10.png


expression領域に"projects"が入力されていることを確認して、了解を押します。データソースビューに2つの項目が表示されていることに気づくでしょう。ひとつはマスターの結果であり、もうひとつは選別した"projects"の結果です。

File:javafxcomposer-tutorial-REST-s6.png

準備が整ったので、了解を押します。

リストビューをデータソースにバインドする

デザインパネルでリストビューを選択し、プロパティパネルから、アイテムプロパティカスタマイザーを開きます。

File:javafxcomposer-tutorial-REST-s11.png

カスタマイザー中で、「バインド」ボタンをクリックしスクリーンショットに示すようにリストアイテムをバインドします。

File:javafxcomposer-tutorial-REST-s4.png

コンポーネントリストボックスから"httpDataSource[projects]"を選択、2つ目のリストボックスから"All Records"を選択、変換タイプとしてコンバーターリストボックスから"Record[] -> String[]"を選択します。最後に、スクリーンショットに示されている位置に、リスト表示する項目である"name"を入力します。

File:javafxcomposer-tutorial-REST-s3.png

「閉じる」ボタンをクリックします。アプリケーションを実行すると、リストボックスにKenai projectのリスト(最初の10個)を見ることができます。

File:javafxcomposer-tutorial-REST-s2.png


おめでとうございます!あなたはJavaFX Composerでのデータバインドの基本を学びました。RESTデータバインドチュートリアルのパート2を続けてください。

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