Articles
JDeveloper 11g によるリッチクライアント開発第2章 ADF Faces Rich Clientを体験日本オラクル株式会社 セールスコンサルティング統括本部
Fusion Middleware SC本部 Fusion Middleware レディネス部 智野 潤子 (ちの じゅんこ) 第1章「 ADF Faces Rich Clientとは」では、ADF Faces Rich Clientが提供する主な機能を紹介しました。この章では、デモ・アプリケーションを実行してADF Faces Rich Clientが提供するUIコンポーネントとその機能を実際に体験してみましょう。 目次デモ・アプリケーションの概要ADF Faces Rich Clientの開発チームは、各コンポーネントが提供する機能を簡単に確認することができるデモ・アプリケーションを用意しています。ADF Faces Rich Clientのデモ・アプリケーションを実行するには、Webブラウザで次のURLにアクセスします。
ADF Faces Rich Clientは実行時に、各ブラウザに最適化されたページのレンダリングとJavaScriptコードを生成するため、使用するWebブラウザとそのバージョンに制約があります。ADF Faces Rich Clientが対応しているWebブラウザとそのバージョンは表1のとおりです。
デモ・アプリケーションにアクセスすると、図1のようなページが表示されます。
表示されたデモ・アプリケーションには8つのタブ・ページがあり、それぞれADF Face Rich Clientの機能を使用したサンプルやそのソースコードを参照することができます。各タブ・ページでは、表2のようなサンプルが提供されます。
この章で使用するデモ・アプリケーションはOTN-Jからダウンロードでき、Oracle JDeveloper上で実行することも可能です。詳細は、次のドキュメントを参照してください。
Tag Guideによるコンポーネントのサンプルデモ･アプリケーションの[Tag Guide]タブ・ページでは、ADF Faces Rich Clientによって提供されるUIコンポーネントなどのタグのサンプルを参照することができます。デモ・アプリケーションの初期画面の[Tag Guide]リンクまたはタブをクリックするとタグがアルファベット順に表示されます（図2）。
また、[By Group]タグをクリックすると、タグが表3のようなグループごとに表示されます。
[Tag Guide]画面でタグ名をクリックすると、そのタグを使用したサンプルを確認することができます。図4はchooseColorを選択した場合に表示されるサンプルです。画面右側の入力フォームを使用すると各タグの属性値を変更でき、[Update]ボタンをクリックすることで適用されます。
File Explorerデモによる機能紹介この節では、デモ・アプリケーションのFile Explorerの実行を通して、ADF Faces Rich Clientが提供する次のような機能を紹介します。
File Explorerアプリケーションを表示するためには、前節で表示したデモ・アプリケーションの初期画面で[File Explorer]リンクまたはタブをクリックします。 パネルの表示の切り替えADF Faces Rich Clientには、パネルの機能表示/非表示を切り替えることができるコンポーネントが多数用意されています。このようなコンポーネントは、 部分ページ・レンダリングの機能が使用されているので、表示/非表示を切り替えてもページ全体の再読み込みは発生しません。File Explorerでは、次の3つが使用されています。
タブ区切りパネルFile Explorerデモの右側の領域は3つのタブ・ページで構成されています。初期状態は[Table]タブが選択されておりテーブル形式でデータが表示されていますが、図6のように[Tree Table]タブをクリックするとツリー・テーブル形式でデータが表示されます。同様に、[List]タブをクリックするとリスト形式でデータが表示されます。
アコーディオン・パネルFile Explorerデモの左側の領域は、アコーディオンのように複数のコンテンツが開閉して表示が切り替わるパネル（アコーディオン・パネル）で構成されています。初期状態は [Folders]が開いた状態になっており、そのコンテンツ（ツリー）が表示されています。一方 [Search]は閉じた状態なので、ヘッダーのみが表示され、コンテンツは表示されていません。
スプリッタ区切りパネルFile Explorerデモの画面は、スプリッタによって上下、左右に分割されています。画面上部のページのヘッダー部分や画面左側のアコーディオン・パネルはサイズの変更や表示/非表示を切り替えることができます（図8）。スプリッタによって区切られたパネルの一方の領域が非表示になるか、サイズが変更されるともう一方の領域はサイズが再計算され、表示が変更されます（図9）。
テーブル形式でのデータ表示File Explorerデモでは、テーブル形式やツリー・テーブル形式でデータを表示しており、それぞれ次の機能が使用可能です。
データのソートADF Faces Rich Clientのテーブルやツリー・テーブルの列ヘッダに表示されている三角のアイコンをクリックすると、データをソートできます。
列の幅や表示順の変更ADF Faces Rich Clientのテーブルやツリー・テーブルは、実行時にドラッグ&ドロップで列の幅や表示される順番を自由に変更することができます。また [ビュー]メニューを使用すると、列の表示/非表示を切り替えたり、列が表示される順番を変更することができます。
ドッキングを解除テーブルまたはツリー・テーブルの上にある [連結解除]ボタンをクリックすると、テーブルがパネルからドッキングが解除され、図12のようにWebブラウザのウィンドウいっぱいに表示されます。ドッキングが解除されたテーブル/ツリー・テーブルは、右上の[×]ボタンまたは[連結解除]ボタンをクリックすれば元の状態に戻ります。
ポップアップ・ウィンドウ/ポップアップ・メニューの表示ADF Faces Rich Clientは、ポップアップでウィンドウやメニューを表示する機能を提供しています。画面左下の[About]リンクをクリックすると、図13のようなポップアップ・ウィンドウが表示されます。
また、テーブルの行を右クリックすると図14のようにポップアップ・メニューが表示され、ファイルのプロパティの表示や削除、コピーなどの操作が可能です。
ドラッグ&ドロップADF Faces Rich Clientでは、コンポーネント間でのドラッグ&ドロップの操作によってデータを移動、コピーまたはリンクする機能を実現するためのフレームワークを提供しています。ドラッグ元のコンポーネントとドロップするターゲットのコンポーネントをそれぞれ指定するだけで、ドラッグ&ドロップの機能をWebアプリケーションに追加することができます。図15はFile0.pdfをドラッグ&ドロップでMyFiles\Folder0からMyFiles\Folder2に移動させているところを示しています。
スキンによるアプリケーションの外観の変更ADF Faces Rich ClientのUIコンポーネントはスキンによってアプリケーションの外観が定義されます。開発者が独自のスキンを作成したり、既存のスキンを拡張したりすることも可能です。
まとめこの章では、デモ・アプリケーションを使用してADF Faces Rich Clientが提供する機能として次のような機能を紹介しました。
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Printer View