2 ADF Facesコンポーネント・デモ・アプリケーション
この章の構成は、次のとおりです。
ADF Facesコンポーネント・デモ・アプリケーションについて
ADF Facesコンポーネントのデモ・アプリケーションでは、様々なコンポーネントおよびフレームワーク機能が紹介されており、ユーザーは選択したコンポーネントについて、各種のプロパティ設定を試すことができます。コンポーネント・デモは完全なソース・コード付きで提供されます。
ADF Facesには、コンポーネントとアーキテクチャ機能のサンプルを試したり、ソース・コードを表示できるADF Facesコンポーネント・デモ・アプリケーションが含まれています。
ADF Facesコンポーネント・デモ・アプリケーションには、次のものが含まれています。
-
タグ・ガイド: ADF Facesコンポーネント、バリデータ、コンバータと多様なタグのデモ、および属性値の変更のコンポーネントへの影響を確認できるプロパティ・エディタ。図2-1に、
selectManyCheckboxコンポーネントのデモを示します。各デモには、関連するタグ・ドキュメントへのリンクが用意されています。 -
機能のデモ: ADFコンポーネントの様々な使用方法を示す各種ページ。たとえば、File Explorerは、ディレクトリ構造を表示し、ディレクトリとファイルの作成、保存、移動を行えるライブ・データ・モデルを使用したアプリケーションです。このアプリケーションは、図2-2に示すように、実際に動かすことのできるアプリケーションでADF Facesのコンポーネントと機能を紹介するためのものです。
その他のページは、レイアウト・コンポーネント、AJAXポストバック機能、ドラッグ・アンド・ドロップなどのADF Facesの主なアーキテクチャ上の機能を示します。図2-3に、
AutoSubmit属性と部分ページ・レンダリングを使用するデモを示します。 -
ビジュアル・デザイン: コンポーネント・タイプを様々に使用して異なるUIデザインを実現するデモ。図2-4に、ツールバーの異なる外観を得る様子を示します。
-
Styles: インライン・スタイルとコンテンツ・スタイルの設定によってコンポーネントがいかに影響されるかのデモ。図2-5に、
panelBoxコンポーネントに適用される異なるスタイルを示します。 -
混同されやすいコンポーネント: 同様の機能を提供するコンポーネントの比較。図2-6に、選択リストを表示する各種コンポーネントの違いを示します。
デモ・アプリケーションのFile Explorerの追加コンポーネント
File Explorerは完全に機能するアプリケーションのため、このガイドの多くの項で、重要な点を説明したり、コード・サンプルを示すためにこのアプリケーションが使用されます。File Explorerアプリケーションのソースは、fileExplorerディレクトリにあります。
File Explorerアプリケーションでは、fileExplorerTemplateページ・テンプレートが使用されます。このテンプレートには、アプリケーションの基本的なルック・アンド・フィールを提供する多くのレイアウト・コンポーネントが含まれます。レイアウト・コンポーネントの詳細は、「Webページ上のコンテンツの編成」を参照してください。テンプレートの使用の詳細は、「フラグメント、ページ、テンプレート、コンポーネントの作成および再利用」を参照してください。
アプリケーションの左側には、図2-7に示すディレクトリ構造と結果表付きの検索フィールドの2つの領域を持つpanelAccordionコンポーネントが含まれます。
両方の領域とも、展開および縮小できます。ディレクトリ構造は、treeコンポーネントを使用して作成されています。検索領域は、入力コンポーネント、ボタンおよびtableコンポーネントを使用して作成されています。panelAccordionコンポーネントの使用の詳細は、「パネルにおけるコンテンツの表示または非表示」を参照してください。入力コンポーネントの使用の詳細は、「入力コンポーネントの使用およびフォームの定義」を参照してください。ボタンの使用の詳細は、「ナビゲーション・コンポーネントの使用」を参照してください。表およびツリーの使用の詳細は、「表、ツリー、およびその他のコレクションベースのコンポーネントの使用」を参照してください。
File Explorerアプリケーションの右側では、図2-8に示すようにタブ付きペインを使用して表、ツリー表またはリストのいずれかでディレクトリの内容を表示します。
表およびツリー表にはツールバーが組み込まれ、内容の表示方法を操作できます。表とリストでは、ファイルまたはサブディレクトリをディレクトリからドラッグし、別のディレクトリにドロップできます。すべてのタブで、ファイルを右クリックし、ポップアップ・メニューからファイルのプロパティをポップアップ・ウィンドウに表示できます。タブ付きペインの使用の詳細は、「パネルにおけるコンテンツの表示または非表示」を参照してください。表とツリー表のツールバーの詳細は、「表メニュー、ツールバーおよびステータス・バーの表示」を参照してください。ポップアップ・メニューとポップアップ・ウィンドウの使用の詳細は、「ポップアップ・ダイアログ、メニューおよびウィンドウの使用方法」を参照してください。
File Explorerアプリケーションの上部には、図2-9に示すメニューとツールバーが含まれます。
メニュー・オプションでは、ファイルやディレクトリの作成と削除、コンテンツの表示方法の変更を行えます。「ヘルプ」メニューでは、図2-10に示す、ユーザーがダイアログにフィードバックを入力できるヘルプ・システムが開きます。
図2-10 ヘルプ・システム
ヘルプ・システムは、リッチ・テキスト・エディタを含む様々な入力コンポーネントを使用して作成された多くのフォームで構成されています。メニューの詳細は、「メニュー・バーでのメニューの使用方法」を参照してください。ヘルプ・システムの作成の詳細は、「コンポーネントへのヘルプの表示」を参照してください。入力コンポーネントの詳細は、「入力コンポーネントの使用およびフォームの定義」を参照してください。
File Explorerのツールバー内には、ディレクトリ構造内を移動できるコントロールと、スキンを変更してアプリケーションのルック・アンド・フィールを変更できるコントロールがあります。図2-11に、簡単なスキンを使用したFile Explorerアプリケーションを示します。
ツールバーの詳細は、「ツールバーの使用方法」を参照してください。スキンの使用の詳細は、「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ADF Facesコンポーネント・デモ・アプリケーションのダウンロードおよびインストール
ADF Facesコンポーネントのデモ・アプリケーションをOracle Technology Network (OTN)のWebサイトからダウンロードしてインストールできます。ADF Facesコンポーネントのサンプルを見ながら機能を理解したい場合には、JDeveloperを使用すればそのデモを見ることができます。
デモ・アプリケーション(コードおよび実行)を表示するには、JDeveloperをインストールし、アプリケーションをダウンロードしてJDeveloper内で開きます。
ADF Facesコンポーネント・デモ・アプリケーションは、Oracle Technology Network (OTN) Webサイトからダウンロードできます。http://www.oracle.com/technetwork/developer-tools/adf/overview/index-092391.htmlに移動し、ページの「Download」セクションの「ADF Faces Components Demo」リンクをクリックします。表示されたページでは、アプリケーションが含まれているWARファイルをダウンロードする方法の詳細、およびアプリケーションをスタンドアロン・サーバーにデプロイする方法またはJDeveloperに含まれている統合WebLogicサーバーを使用してアプリケーションを実行する方法が説明されています。
アプリケーションをインストールしない場合には、「ADF Faces Rich Client Components Hosted Demo」リンクをクリックして、OTNから直接アプリケーションを実行できます。