2 ADF Facesデモ・アプリケーション

この章では、この開発者ガイドとともに使用できるADF Facesデモ・アプリケーションについて説明します。

この章には次の項が含まれます:

• 2.1項「ADF Facesデモ・アプリケーションについて」

• 2.2項「ADF Facesデモ・アプリケーションのダウンロードとインストール」

2.1 ADF Facesデモ・アプリケーションについて

ADF Facesには、コンポーネントとアーキテクチャ機能のサンプルを試したり、ソース・コードを表示できるデモ・アプリケーションが含まれています。

デモ・アプリケーションには、次のものが含まれています。

• タグ・ガイド: ADF Facesコンポーネント、バリデータ、コンバータと多様なタグのデモ、および属性値の変更のコンポーネントへの影響を確認できるプロパティ・エディタ。図2-1に、selectManyCheckboxコンポーネントのデモを示します。各デモには、関連するタグ・ドキュメントへのリンクが用意されています。

  図2-1 タグのデモ

  
  

• スキニング: 様々なコンポーネントのスキニングのデモ。たとえば、スタイル・セレクタの変更がコンポーネントの表示に与える影響を確認できます。図2-2に、スタイル・セレクタの設定によって影響を受けるinputNumberSpinboxコンポーネントを示します。

  図2-2 スキニングのデモ

  
  

• 機能のデモ: ADFコンポーネントの様々な使用方法を示す各種ページ。たとえば、File Explorerは、ディレクトリ構造を表示し、ディレクトリとファイルの作成、保存、移動を行えるライブ・データ・モデルを使用したアプリケーションです。このアプリケーションは、図2-3に示すように、実際に動かすことのできるアプリケーションでADF Facesのコンポーネントと機能を紹介するためのものです。

  図2-3 File Explorerアプリケーション

  
  

  その他のページは、レイアウト・コンポーネント、AJAXポストバック機能、ドラッグ・アンド・ドロップなどのADF Facesの主なアーキテクチャ上の機能を示します。図2-4に、AutoSubmit属性と部分ページ・レンダリングを使用するデモを示します。

  図2-4 フレームワークのデモ

  
  

• ビジュアル・デザイン: コンポーネント・タイプを様々に使用して異なるUIデザインを実現するデモ。図2-5に、ツールバーの異なる外観を得る様子を示します。

  図2-5 ツールバーのデザインのデモ

  
  

• Styles: インライン・スタイルとコンテンツ・スタイルの設定によってコンポーネントがいかに影響されるかのデモ。図2-6に、panelBoxコンポーネントに適用される異なるスタイルを示します。

  図2-6 スタイルのデモ

  
  

• 混同されやすいコンポーネント: 同様の機能を提供するコンポーネントの比較。図2-7に、選択リストを表示する各種コンポーネントの違いを示します。

  図2-7 混同されやすいコンポーネント

  
  

File Explorerは完全に機能するアプリケーションのため、このガイドの多くの項で、重要な点を説明したり、コード・サンプルを示すためにこのアプリケーションが使用されます。File Explorerアプリケーションのソースは、fileExplorerディレクトリにあります。

File Explorerアプリケーションでは、fileExplorerTemplateページ・テンプレートが使用されます。このテンプレートには、アプリケーションの基本的なルック・アンド・フィールを提供する多くのレイアウト・コンポーネントが含まれます。レイアウト・コンポーネントの詳細は、第9章「Webページ上のコンテンツの編成」を参照してください。テンプレートの使用の詳細は、第10章「フラグメント、ページ・テンプレート、コンポーネントの作成および再利用」を参照してください。

アプリケーションの左側には、図2-8に示すディレクトリ構造と結果表付きの検索フィールドの2つの領域を持つpanelAccordionコンポーネントが含まれます。

図2-8 ディレクトリ構造パネルと検索パネル

両方の領域とも、展開および縮小できます。ディレクトリ構造は、treeコンポーネントを使用して作成されています。検索領域は、入力コンポーネント、コマンド・ボタンおよびtableコンポーネントを使用して作成されています。panelAccordionコンポーネントの使用の詳細は、9.10項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。入力コンポーネントの使用の詳細は、第11章「入力コンポーネントの使用およびフォームの定義」を参照してください。コマンド・ボタンの使用の詳細は、第20章「ナビゲーション・コンポーネントの使用」を参照してください。表とツリーの使用の詳細は、第12章「表およびツリーの使用」を参照してください。

File Explorerアプリケーションの右側では、図2-9に示すようにタブ付きペインを使用して表、ツリー表またはリストのいずれかでディレクトリの内容を表示します。

図2-9 タブ付きパネルでのディレクトリの内容

表およびツリー表にはツールバーが組み込まれ、内容の表示方法を操作できます。表とリストでは、ファイルまたはサブディレクトリをディレクトリからドラッグし、別のディレクトリにドロップできます。すべてのタブで、ファイルを右クリックし、ポップアップ・メニューからファイルのプロパティをポップアップ・ウィンドウに表示できます。タブ付きのペインの使用の詳細は、9.10項「アコーディオン・パネルおよびタブ付きのパネルにおけるコンテンツの表示または非表示」を参照してください。表およびツリー表のツールバーの詳細は、12.9項「表メニュー、ツールバーおよびステータス・バーの表示」を参照してください。ドラッグ・アンド・ドロップの有効化の詳細は、第33章「コンポーネントのドラッグ・アンド・ドロップ機能の追加」を参照してください。ポップアップ・メニューおよびポップアップ・ウィンドウの使用の詳細は、第15章「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。

File Explorerアプリケーションの上部には、図2-10に示すメニューとツールバーが含まれます。

図2-10 メニューとツールバー

メニュー・オプションでは、ファイルやディレクトリの作成と削除、コンテンツの表示方法の変更を行えます。「ヘルプ」メニューでは、図2-11に示す、ユーザーがダイアログにフィードバックを入力できるヘルプ・システムが開きます。

図2-11 ヘルプ・システム

ヘルプ・システムは、リッチ・テキスト・エディタを含む様々な入力コンポーネントを使用して作成された多くのフォームで構成されています。メニューの詳細は、16.2項「メニュー・バーでのメニューの使用方法」を参照してください。ヘルプ・システムの作成の詳細は、19.5項「コンポーネントへのヘルプの表示」を参照してください。入力コンポーネントの詳細は、第11章「入力コンポーネントの使用およびフォームの定義」を参照してください。

File Explorerのツールバー内には、ディレクトリ構造内を移動できるコントロールと、スキンを変更してアプリケーションのルック・アンド・フィールを変更できるコントロールがあります。図2-12に、簡単なスキンを使用したFile Explorerアプリケーションを示します。

図2-12 簡単なスキンを使用したFile Explorerアプリケーション

ツールバーの詳細は、16.3項「ツールバーの使用方法」を参照してください。スキンの使用の詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

2.2 ADF Facesデモ・アプリケーションのダウンロードとインストール

デモ・アプリケーション(コードおよび実行)を表示するには、JDeveloperをインストールし、アプリケーションをダウンロードしてJDeveloper内で開きます。

ADF Facesデモ・アプリケーションは、Oracle Technology Network(OTN)Webサイトからダウンロードできます。
http://www.oracle.com/technetwork/developer-tools/adf/overview/index-092391.htmlに移動し、ページの「Download」セクションの「ADF Faces Rich Client Components Demo」リンクをクリックします。表示されたページでは、アプリケーションが含まれているWARファイルをダウンロードする方法の詳細、およびアプリケーションをスタンドアロン・サーバーにデプロイする方法またはJDeveloperに含まれている統合WebLogicサーバーを使用してアプリケーションを実行する方法が説明されています。

アプリケーションをインストールしない場合には、「ADF Faces Rich Client Components Hosted Demo」リンクをクリックして、OTNから直接アプリケーションを実行できます。