| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
前 |
次 |
この章では、ADF Facesコンポーネントを使用して出力テキスト、イメージおよびアイコンを表示する方法と、ユーザーがビデオ・クリップや音声クリップを再生できるコンポーネントの使用方法を説明します。
この章では、次の項目について説明します。
ADF Facesには、テキスト、アイコン、イメージを表示するためのコンポーネント、およびJSFページで音声クリップやビデオ・クリップを再生するためのコンポーネントが用意されています。
outputTextコンポーネントを他の多くのコンポーネントの子として使用して、読取り専用テキストを表示できます。テキストを書式設定する必要がある場合は、outputFormattedコンポーネントを使用できます。たとえば、図18-2に示すように、説明テキストで太字書式のテキストを使用することが必要な場合があります。
多くのADF Facesコンポーネントには、アイコンを関連付けできます。たとえば、メニューでは、各メニュー項目にアイコンを関連付けできます。それぞれのアイコンに使用するイメージは、そのメニュー項目コンポーネント自体のicon属性の値として識別します。アイコンがサポートされているコンポーネントへのアイコン追加の詳細と手順は、それぞれのコンポーネントの章で説明されています。コンポーネント内でアイコンを提供するだけでなく、ADF Facesにはメッセージを表示する際に使用されるアイコンもあります。これらのアイコンは、メッセージの外でも使用できます。
ページにイメージを表示するには、imageコンポーネントを使用します。イメージをリンク(イメージ・マップを含む)として使用したり、サーバーのステータスを表すために使用したりすることもできます。
カルーセル・コンポーネントでは、ユーザーがスクロールできるオブジェクトのグループを管理します。シミュレートされた円形の3D空間で回転するオブジェクトを表示したり、一度に1つのオブジェクトを表示したりできます。オブジェクトは、水平または垂直に表示できます。ユーザーは、スライダを使用するか次および前ボタンを使用して、カルーセル・オブジェクトを参照できます。カルーセルの一部のユースケースとして、印刷された営業資料、カタログおよび写真があります。
カルーセル・コンポーネントは、単独で使用するか、イメージを制御するように構成できる他のコンポーネントとともに使用できます。たとえば、カルーセルのオブジェクトのドロップ・ゾーンとして使用できるコンポーネントをカルーセルの下に追加できます。図18-3に示すように、ユーザーはカルーセルからオブジェクトをドラッグして特定の領域にドロップできます。ドラッグ・アンド・ドロップの実装の詳細は、第33章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
別の例として、図18-4に示すように、ユーザーが現在のオブジェクトに対して削除、お気に入りリストへの追加、イメージのプレビューなどのアクションを実行できるメニュー・バーの追加があります。
|
ベスト・プラクティス: ページ当たり複数のカルーセルを含めると、特定のカルーセルにあるスライダ・コントロールや特定のカルーセルに属するドロップ・ゾーンが不明確になるため、ユーザーが視覚的に混乱する可能性があります。 |
mediaコンポーネントを使用して、タスクを完了するための通知や指示などのオーディオ・ビジュアル・コンテンツを表示します。mediaコンポーネントは、すべてのコントロール、一般的なコントロール、最小限のコントロールを表示するか、表示可能なコントロールなし(たとえば、コントロールはポップアップ・メニューからのみ使用可能)またはコントロールなしに構成できます。通常は、クリップが非常に短くコントロールが不要な場合は、コントロールを表示しません。
mediaコンポーネントがページのプライマリ・コンポーネントの場合、通常は、図18-5に示すようにすべてのコントロールが表示されます。
出力コンポーネントを実装する前に、他のADF Faces機能を理解することが役立つ場合があります。また、ページにこれらのコンポーネントを追加した後で、ドラッグ・アンド・ドロップやアクセシビリティなどの機能を追加することが必要になる場合があります。出力コンポーネントで使用できる他の機能へのリンクを次に示します。
テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。詳細は、3.5.2項「EL書式タグの使用方法」を参照してください。
変換: 場合によっては、値を表示するために文字列に変換することが必要です。変換の詳細は、第7章「入力の検証および変換」を参照してください。
ドラッグ・アンド・ドロップ: ユーザーが出力コンポーネントまたは出力コンポーネントの値をページ上の別の領域にドラッグ・アンド・ドロップできるようにページを構成できます。詳細は、第33章「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
ローカライゼーション: 文字列を値として受け取る属性に値を入力するかわりに、プロパティ・ファイルを使用できます。これらのファイルにより、これらの文字列の翻訳を管理できます。詳細は、第29章「ページの国際化およびローカライズ」を参照してください。
スキン: スキンを変更することで、出力コンポーネントのルック・アンド・フィールを変更できます。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ページに出力テキストを表示するためのADF Facesコンポーネントは2つあります。outputTextは書式設定されていないテキストを表示し、outputFormattedはテキストを表示して限られた範囲の書式設定オプションを設定できます。
明示的に指定されたシンプル・テキストや、リソース・バンドルまたはBeanからのシンプル・テキストを表示するには、outputTextコンポーネントを使用します。valueプロパティの値として表示されるようにテキストを定義します。次に例を示します。
<af:outputText value="The submitted value was: "/>
例18-1に、2つのoutputTextコンポーネントを示します。1つ目では表示されるテキストが明示的に指定され、2つ目ではマネージドBeanからテキストが取得され、表示可能なテキスト値に値が変換されます(変換の詳細は、7.3項「変換の追加」を参照してください)。
例18-1 出力テキスト
<af:panelGroupLayout>
<af:outputText value="The submitted value was: "/>
<af:outputText value="#{demoInput.date}">
<af:convertDateTime dateStyle="long"/>
</af:outputText>
</af:panelGroupLayout>
escape属性を使用して、現在のマークアップ言語でHTMLおよびXMLの特殊文字をエスケープするかどうかを指定できます。デフォルトでは、特殊文字はエスケープされます。
例18-2に、2つのoutputTextコンポーネントを示します。1つ目ではescape属性にデフォルト値trueが使用され、2つ目では属性がfalseに設定されています。
例18-2 escapeプロパティ・セットがある出力テキストと、ない出力テキスト
<af:outputText value="<h3>output & heading</h3>"/>
<af:outputText value="<h3>output & heading</h3>"
escape="false"/>
図18-6に、異なる2つのescape属性の設定をブラウザで表示した場合の結果の違いを示します。
絶対に必要な場合以外、escape属性はfalseに設定しないでください。限られた数のHTMLタグを使用できるoutputFormattedコンポーネントを使用することをお薦めします。
outputFormattedコンポーネントでも、outputTextコンポーネント同様、valueプロパティに指定されたテキストが表示されますが、値にHTMLタグを含めることができます。値の一部のみを特定の方法で書式設定する場合は、outputFormattedコンポーネントの書式設定機能を使用します。コンポーネント値全体に同じスタイル設定を使用する必要がある場合は、値にHTMLを使用するかわりに、コンポーネント全体にスタイルを適用します。コンポーネントのすべてのインスタンスを特定の方法で書式設定する場合は、カスタム・スキンを作成する必要があります。インライン・スタイルの使用方法およびスキンの作成方法の詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
例18-3に、値の一部のみが太字で表示されるoutputFormattedコンポーネントを示します(JSPXページの<などのエンティティを使用する必要があります)。
例18-3 JSPXファイルの一部のテキストを太字にするためのoutputFormattedの使用
<af:outputFormatted value="<b>This is in bold.</b> This is not bold"/>
例18-4 JSPファイルの一部のテキストを太字にするためのoutputFormattedの使用
<af:outputFormatted value="<b>This is in bold.</b> This is not bold"/>
図18-7に、コンポーネントによりテキストがどのように表示されるかを示します。
出力テキストを表示する前に、値の一部を特別な方法で書式設定するかどうかを確認します。その場合は、outputFormattedコンポーネントを使用します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、18.2項「出力テキストおよび書式設定された出力テキストの表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、18.1.2項「出力コンポーネントの追加機能」を参照してください。
出力テキストを表示する手順:
コンポーネント・パレットで、「テキストおよび選択」パネルから「出力テキスト」をページにドラッグ・アンド・ドロップします。outputFormattedコンポーネントを作成するには、コンポーネント・パレットから「出力テキスト(フォーマット設定済)」をドラッグ・アンド・ドロップします。
|
ヒント: 値の一部に特別な書式設定を適用する場合は、 |
|
ヒント: アクティブ・データを使用したコンポーネントのテキストの変更をサポートする場合(たとえば、データソースからプッシュされているデータによって、表示されるテキストを決定する場合)、 |
プロパティ・インスペクタの「共通」セクションを開き、value属性を表示する値に設定します。outputFormattedコンポーネントを使用している場合は、表18-1および表18-2の説明に従い、HTML書式設定コードを使用して必要に応じてテキストを書式設定します。
outputFormattedコンポーネントではstyleUsage属性もサポートされています。この属性値により、テキストに次に示す事前定義済のスタイルが適用されます。
inContextBranding
instruction
pageStamp
図18-8に、styleUsage値によりコンポーネントにどのようなスタイルが適用されるかを示します。
|
注意:
|
特定の書式設定と文字コードのみ使用できます。表18-1に、outputFormattedコンポーネントの値の書式設定に使用可能な書式設定コードをリストします。
表18-1 af:outputFormatted値で使用するための書式設定コード
| フォーマット・コード | 効果 |
|---|---|
|
|
改行 |
|
|
水平方向の罫線 |
|
|
リスト: 順序付けられたリスト、順序付けられていないリストおよびリスト項目 |
|
|
パラグラフ |
|
|
太字 |
|
|
イタリック |
|
|
テレタイプまたは等幅 |
|
|
大きいフォント |
|
|
小さいフォント |
|
|
事前フォーマット済: 保存済の空白と改行文字で定義されたレイアウト |
|
|
囲まれたテキスト全体に影響 |
|
|
アンカー |
表18-2に、値の特殊文字を表示するための文字コードをリストします。
表18-2 af:outputFormatted値で使用するための文字コード
| 文字コード | 文字 |
|---|---|
|
|
次より小さい |
|
|
次より大きい |
|
|
アンパサンド |
|
|
登録商標 |
|
|
コピーライト |
|
|
改行なしの空白 |
|
|
二重引用符 |
属性class、styleおよびsizeは、href構成と同様に、outputFormattedコンポーネントのvalue属性でも使用できます。その他すべてのHTMLタグは無視されます。
|
注意: セキュリティ上の理由から、出力値ではJavaScriptはサポートされていません。 |
ADF Facesには、図18-9に示されているように、メッセージ・コンポーネントで使用される一連のアイコンが用意されています。
アイコンをメッセージ・コンポーネントの外に表示する必要がある場合は、iconコンポーネントを使用し、表示するアイコン・タイプの名前を指定します。
|
注意: アイコンに使用されるイメージは、アプリケーションで使用されているスキンによって決定されます。イメージを変更する場合は、カスタム・スキンを作成します。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。 |
ADF Facesアプリケーションでメッセージを使用すると、アイコンが自動的に追加されます。メッセージ・コンポーネントに追加する必要はありません。ただし、アイコンをメッセージ・コンポーネントの外に使用できます。アプリケーションのスキンに定義されている標準アイコンのいずれかを表示するには、iconコンポーネントを使用します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、18.3項「アイコンの表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、18.1.2項「出力コンポーネントの追加機能」を参照してください。
標準アイコンを表示する手順:
コンポーネント・パレットで、「一般コントロール」パネルから「アイコン」をページにドラッグ・アンド・ドロップします。
図18-9に示されているように、「共通」セクションを開き、Nameをアイコン機能の1つの名前に設定します。たとえば、中に白いXがある赤い丸を表示する場合は、Nameをerrorに設定します。
「外観」セクションを開き、ShortDescをアイコンの代替テキストとして表示するテキストに設定します。
ページにイメージを表示するには、imageコンポーネントを使用し、source属性をファイルが存在するURIに設定します。imageコンポーネントでは、イメージの詳細な説明へのリンクを提供することで、アクセシビリティの説明テキストもサポートされています。
imageコンポーネントは、リンクとして使用することも、イメージ・マップを含めることもできますが、goLinkコンポーネント内に配置する必要があります。詳細は、18.5項「リンクとしてのイメージの使用」を参照してください。
imageコンポーネントを使用してイメージを表示します。
始める前に:
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、18.1.2項「出力コンポーネントの追加機能」を参照してください。
イメージを表示する手順:
コンポーネント・パレットで、「一般コントロール」パネルから「イメージ」をページにドラッグ・アンド・ドロップします。
|
ヒント: アクティブ・データを使用したイメージの |
「イメージの挿入」ダイアログで、次の設定を行います。
ShortDesc: イメージの代替テキストとして使用するテキストに設定します。
Source: イメージ・ファイルへのURIを入力します。
イメージのより長い説明を指定する場合は、プロパティ・インスペクタで、LongDescURL属性をその情報が存在するURIに設定します。
ADF Facesには、オプションのテキストとともにイメージをリンクとしてレンダリングするcommandImageLinkコンポーネントがあります。ユーザーがアイコンにマウスを置いた場合や、アイコンが押された場合または無効化された場合に、別々のアイコンを設定できます。commandImageLinkコンポーネントの詳細は、20.3項「ボタンおよびリンクのナビゲーション目的での使用」を参照してください。
指定されたURIへのナビゲーションにイメージを使用する場合は、イメージをgoLinkコンポーネントで囲み、必要な場合はイメージ・マップにリンクします。
イメージは、1つ以上の移動先へのgoLinkコンポーネントとして使用できます。単一の移動先への単純なリンクとしてイメージを使用する場合は、goLinkコンポーネントを使用してイメージを囲み、goLinkコンポーネントのdestination属性をリンクの移動先のURIに設定します。
グラフィックの異なる領域が別々のURIにナビゲートするグラフィカルなナビゲーション・メニューとしてイメージを使用している場合は、imageコンポーネントをgoLinkコンポーネントで囲み、イメージに対するサーバー側のイメージ・マップを作成します。
commandImageLinkコンポーネントを使用して、イメージをリンクとしてレンダリングします。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、18.5項「リンクとしてのイメージの使用」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、18.1.2項「出力コンポーネントの追加機能」を参照してください。
1つ以上のgoLinkコンポーネントとしてイメージを使用する手順:
コンポーネント・パレットで、「一般コントロール」パネルから「リンク(実行)」をページにドラッグ・アンド・ドロップします。
goLinkコンポーネントの子として、「イメージ」をドラッグ・アンド・ドロップします。
「イメージの挿入」ダイアログで、次の設定を行います。
ShortDesc: イメージの代替テキストとして使用するテキストに設定します。
Source: イメージ・ファイルへのURIを入力します。
イメージの異なる領域を別々の移動先にリンクさせる場合は、次のようにします。
イメージのイメージ・マップを作成し、サーバーに保存します。
プロパティ・インスペクタで、ImageMapType属性をserverに設定します。
goLinkコンポーネントを選択し、プロパティ・インスペクタでDestinationをサーバー上のイメージ・マップのURIに設定します。
イメージ全体を単一の移動先にリンクする場合は、goLinkコンポーネントを選択し、移動先のURIをDestinationの値として入力します。
図18-10に示すように、イメージを回転カルーセルに表示できます。ユーザーは、下部にあるスライダを使用するか、補助イメージの1つをクリックしてそのイメージを前面に移動することにより、前面のイメージを変更できます。
デフォルトでは、カルーセルは水平に表示されます。カルーセルの水平方向のオブジェクトは中央に垂直に整列され、カルーセル自体はそのコンテナの中央に水平に整列されます。
参照ローロデックス(回転式カード・ファイル)が必要な場合は、垂直に表示されるようにカルーセルを構成できます。デフォルトでは、例18-4に示すように、カルーセルの垂直方向のオブジェクトは中央に水平に整列され、カルーセル自体は中央に垂直に整列されます。カルーセルの位置合せ属性を使用して、位置合せを変更できます。
|
ベスト・プラクティス: 一般に、カルーセルは子を拡大する親コンポーネントに配置する必要があります( |
前および次のイメージを部分的に表示するかわりに、図18-12に示すように現在のイメージのみ表示するようにカルーセルを構成できます。
イメージの参照に使用されるコントロールを構成することもできます。図18-10に示すように、複数のイメージにまたがる次および前の矢印付きのスライダを表示するか、図18-12に示すように次および前ボタンのみ表示するか、図18-13に示すように次および前ボタンをスライド・カウンタとともに表示できます。
子carouselItemコンポーネントは、カルーセルにオブジェクトとそのオブジェクトのタイトルを表示します。表示するオブジェクトごとにcarouselItemコンポーネントを作成し、これらのコンポーネントを個々のオブジェクトにバインドするかわりに、carouselコンポーネントを完全なコレクションにバインドします。ツリーが各データ行をスタンプ・アウトするのと同様の方法で、コンポーネントは、各項目の値をスタンプ処理することで1つのcarouselItemコンポーネントを繰り返しレンダリングします。各項目にスタンプが設定されると、現在の項目のデータが、carouselコンポーネントvar属性を使用するEL式を使用して特定可能なプロパティにコピーされます。カルーセルのレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。カルーセルには、テキストの表示に使用されるcarouselItemコンポーネントのホルダーと各項目の短い説明の両方であり、各項目について表示されるイメージの親コンポーネントでもあるnodeStampファセットが含まれます。
たとえば、図18-10に示すADF FacesデモのcarouselItem JSFページには、各ADF Facesコンポーネントのイメージを表示するcarouselコンポーネントが含まれます。demoCarouselItem(CarouselBean.java)マネージドBeanには、これらの各コンポーネントのリストが含まれます。carouselコンポーネントのvalue属性は、そのリストを表すそのBeanのitemsプロパティにバインドされます。カルーセル・コンポーネントのvar属性は、表示する各項目の値の保持に使用され、各項目の適切な値を取得するためにcarouselItemコンポーネントとimageコンポーネントの両方で使用されます。例18-5に、カルーセルのJSFページ・コードを示します。カルーセルのスタンプ動作の詳細は、12.6項「ツリーへのデータの表示」を参照してください。
例 18-5 carouselコンポーネントのJSFページ・コード
<af:carousel id="carousel" binding="#{editor.component}"
var="item"
value="#{demoCarousel.items}"
carouselSpinListener="#{demoCarousel.handleCarouselSpin}">
<f:facet name="nodeStamp">
<af:carouselItem id="crslItem" text="#{item.title}" shortDesc="#{item.title}">
<af:image id="img" source="#{item.url}" shortDesc="#{item.title}"/>
</af:carouselItem>
</f:facet>
</af:carousel>
carouselItemコンポーネントは、子コンポーネントのみ拡大します。単一のimageコンポーネントをcarouselItemの内部に配置した場合、イメージはその項目に割り当てられた正方形に合せて拡大されます(ユーザーがカルーセルをスピンすると、これらのサイズが縮小または拡大されます)。
|
ベスト・プラクティス:
|
carouselコンポーネントでは、CollectionModelクラスを使用して基礎となるコレクションのデータにアクセスします。このクラスは、JSF DataModelクラスを拡張し、行キーのサポートを追加します。DataModelクラスでは、行は索引によって完全に識別されます。ただし、基になるデータが変更された場合に問題を回避するために、CollectionModelクラスが索引ではなく行キーに基づいています。
java.util.List、arrayおよびjavax.faces.model.DataModelなど、別のモデル・クラスも使用できます。他のいずれかのクラスを使用する場合は、carouselコンポーネントにより、インスタンスがCollectionModelクラスに自動的に変換されますが、機能は追加されません。CollectionModelクラスの詳細は、http://myfaces.apache.org/trinidad/trinidad-1_2/trinidad-api/apidocs/index.htmlにあるMyFaces TrinidadのJavadocを参照してください。
|
注意: アプリケーションでFusionテクノロジ・スタックを使用する場合は、項目を表すデータ・ソースに対するADFビジネス・コンポーネントを作成でき、作成するとモデルが作成されます。その後、カルーセルを宣言的に作成でき、そのカルーセルは自動的にそのモデルにバインドされます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のADF Faces Carouselコンポーネントの使用に関する項を参照してください。 |
カルーセル・コンポーネントは仮想化されているため、サーバーのコンポーネントに存在するすべての項目がクライアントに配信されて表示されるわけではありません。データ・ソースから一度に一定数の行をフェッチするようにカルーセルを構成します。レンダリング時にすぐにデータをコンポーネントに配信することも、コンポーネントのシェルがレンダリングされた後に遅延フェッチすることもできます。デフォルトでは、カルーセルは初期リクエストのデータを遅延してフェッチします。ページにこれらのコンポーネントが1つ以上含まれる場合、ページでは最初は標準のライフサイクルが実行されます。ただし、カルーセルはその初期リクエスト時にデータをフェッチするかわりに、特殊な部分ページ・レンダリング(PPR)リクエストをコンポーネントで別途実行し、カルーセルのフェッチ・サイズの値として設定される項目数が返されます。ページのレンダリング直後であるため、レスポンスのレンダリング・フェーズのみがカルーセルに対して実行され、対応するデータのフェッチおよび表示が可能になります。ユーザーが後続のデータ・フェッチの原因となる操作(たとえば、カルーセルを別のイメージ・セットに回転)を実行すると、別のPPRリクエストが実行されます。
|
パフォーマンスのヒント: ページにカルーセルより多くのコンポーネントが含まれる場合は、遅延配信を使用する必要があります。遅延配信を使用すると、データが使用可能になる前に、初期ページのレイアウト・コンポーネントおよびその他のコンポーネントが最初にレンダリングされます。 即時配信は、カルーセルがページの唯一のコンテキストである場合、またはカルーセルが大きな項目セットを返さないと予想される場合に使用します。この場合、ユーザー・レスポンス時間がより高速で、サーバーCPU利用率がより高ければ、2番目のリクエストはサーバーに移動しないため、レスポンス時間は遅延配信を使用する場合よりも高速になります(または、場合によっては高速に感じます)。ただし、フェッチ・ブロックとして構成された項目数のみが最初に返されます。遅延配信と同様に、ユーザーのアクションが後続のデータ・フェッチの原因となる場合は、次の項目セットが配信されます。 |
スライダ・コントロールでは、ユーザーはコレクションをナビゲートできます。通常、スライダ上のサムにはオブジェクトの総数のうちの現在のオブジェクト番号(6/20など)が表示されます。オブジェクトの総数が大きすぎて計算できない場合、スライダ上のサムには現在のオブジェクト番号のみ表示されます。たとえば、会社の従業員電話帳にカルーセルが使用されているとします。デフォルトでは、電話帳には全従業員の顔写真が表示されますが、コストの高いデータベース・コールを行わないと、その日システムに厳密に94,409人の従業員がいることがわからない場合があります。
カルーセルとともに他のコンポーネントを使用できます。たとえば、ツールバーまたはメニュー・バーを追加し、ユーザーが現在のオブジェクトに対するアクションを実行できるボタンまたはメニュー項目をそれらに追加できます。
カルーセルを作成するには、まず、表示するイメージを含むデータ・モデルを作成する必要があります。次に、carouselコンポーネントをそのモデルにバインドし、carouselItemコンポーネントをカルーセルのnodeStampファセットに挿入します。最後に、imageコンポーネント(またはimageコンポーネントを含むその他のコンポーネント)をcarouselItemコンポーネントに子として挿入します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、18.6項「カルーセルでのイメージの表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、18.1.2項「出力コンポーネントの追加機能」を参照してください。
カルーセルを作成する手順:
表示するイメージのコレクションを提供するデータ・モデルを作成します。データ・モデルは、List、Array、DataModelまたはCollectionModelにすることができます。コレクションがCollectionModel以外の場合、フレームワークはそれをCollectionModelに自動的に変換します。CollectionModelクラスの詳細は、http://myfaces.apache.org/trinidad/trinidad-1_2/trinidad-api/apidocs/index.htmlにあるMyFaces TrinidadのJavadocを参照してください。
データ・モデルは、カルーセルに表示する各イメージについて次の情報を提供する必要があります。
イメージのURL
カルーセルのイメージの下に表示されるタイトル
ユーザーがイメージ上にカーソルを置いたときに表示するテキストに使用される短い説明
たとえば、ADF Facesデモ・アプリケーションのCarouselBean.javaおよびCarouselMediaBean.javaクラスを参照してください。
コンポーネント・パレットで、「データ・ビュー」パネルから「カルーセル」をページにドラッグ・アンド・ドロップします。
|
ベスト・プラクティス: 子を拡大する親コンテナにカルーセルを配置します。 |
プロパティ・インスペクタで、「共通」セクションを開いて次の設定を行います。
Orientation: デフォルトでは、カルーセルは水平に表示されます。図18-11に示すように垂直に表示する場合は、verticalを選択します。horizontalに設定した場合は、halign属性を使用して、項目を整列する方法を構成する必要があります。verticalに設定した場合は、valign属性を使用して、項目を整列する方法を設定します。
Halign: 垂直カルーセルの項目を表示する方法を指定します。有効な値は次のとおりです。
Center: 同じ中心点を持つように項目を位置合せします。これがデフォルトです。
End: 右端が整列するように項目を位置合せします(ブラウザが左から右の言語で表示される場合)。
Start: 左端が整列するように項目を位置合せします(ブラウザが左から右の言語で表示される場合)。
Valign: 水平カルーセルの項目を表示する方法を指定します。有効な値は次のとおりです。
Bottom: 下端が整列するように項目を位置合せします。
Middle: 同じ中央点を持つように項目を位置合せします。これがデフォルトです。
Top: 上端が整列するように項目を位置合せします。
Value: カルーセルをモデルにバインドします。
「データ」セクションを開き、次の属性を設定します。
Var: 個々の項目データにアクセスするためにELで使用される変数を入力します。
VarStatus: カルーセルのステータスにアクセスするためにELで使用される変数を入力します。varStatusの共通プロパティは次のとおりです。
model: コンポーネントのCollectionModelを返します。
index: ゼロ・ベースの項目索引を返します。
「外観」セクションを開き、次の設定を行います。
EmptyText: 項目が返されない場合に表示するテキストを入力します。リソース・バンドルを使用している場合は、ドロップダウン・メニューを使用して「テキスト・リソースの選択」を選択します。
DisplayItems: circularを選択すると、カルーセルに複数のイメージが表示されます。カルーセルに一度に1つのイメージを表示する場合は、oneByOneを選択します。
ControlArea: カルーセル・イメージの参照に使用するコントロールを指定します。有効な値は次のとおりです。
full: スライダに、組込みの次および前ボタン、現在の項目テキストおよびイメージ番号が表示されます。
small: 次および前ボタンが、現在の項目テキストおよびイメージ番号とともに表示されます。
compact: 次および前ボタンと項目テキストのみ表示されます。
子を拡大する親コンポーネントにカルーセルを配置しない場合、カルーセルは幅500px、高さ300pxで表示されます。これらの設定は変更できます。そのためには、「スタイル」セクションを開き、「レイアウト」タブをクリックして高さと幅をピクセル単位で設定します。
「動作」セクションを開き、次の設定を行います。
FetchSize: 各データ・フェッチで戻されるブロックのサイズを設定します。
ContentDelivery: データを送信するタイミングを指定します。contentDelivery属性がimmediateに設定されている場合、カルーセルのレンダリングと同時に項目がフェッチされます。contentDelivery属性がlazyに設定されている場合は、後続のリクエスト中に項目がフェッチされてクライアントに送信されます。
CarouselSpinListener: カルーセルが回転されたときにロジックを実行する必要がある場合に、カルーセルの回転を処理するハンドラ・メソッドにバインドします。例18-6に、回転が行われたときに詳細パネルを再描画するCarouselBeanのハンドラ・メソッドを示します。
例18-6 CarouselSpinEventのハンドラ
public void handleCarouselSpin(CarouselSpinEvent event)
{
RichCarousel carousel = (RichCarousel)event.getComponent();
carousel.setRowKey(event.getNewItemKey());
ImageInfo itemData = (ImageInfo)carousel.getRowData();
_currentImageInfo = itemData;
// Redraw the detail panel so that we can update the selected details.
RequestContext rc = RequestContext.getCurrentInstance();
rc.addPartialTarget(_detailPanel);
}
「拡張」セクションを開き、CurrentItemKeyを設定します。カルーセルが最初にレンダリングされるときに表示する項目を指定します。値は、CollectionModelの項目の主キー(またはそれと同等)である必要があります。
コンポーネント・パレットで、「データ・ビュー」パネルから「カルーセル・アイテム」をCarouselコンポーネントのnodeStampファセットにドラッグします。
カルーセルのvar属性に設定された変数値を使用して、CarouselItemコンポーネントの属性をデータ・モデルのプロパティにバインドします。たとえば、例18-5のカルーセルは、itemをvar属性の値として使用します。このため、carouselItemのtext属性の値はitem.titleになります(titleが、データ・モデルのカルーセル項目に使用されるテキストへのアクセスに使用されるプロパティである場合)。
コンポーネント・パレットで、「一般コントロール」からイメージをドラッグしてcarouselItemに子としてドロップします。
カルーセルのvar属性に設定された変数値を使用して、imageコンポーネントの属性をデータ・モデルのプロパティにバインドします。たとえば、例18-5のカルーセルは、itemをvar属性の値として使用します。このため、imageのsource属性の値はitem.urlになります(urlがイメージへのアクセスに使用されるプロパティである場合)。
機能を増やす場合は、イメージ・コンポーネントを他のコンポーネントで囲むことができます。たとえば、図18-14に、イメージがpanelGroupLayoutコンポーネントで囲まれ、clientListenerを使用してメニューとナビゲーション・バーを表示するJavaScript関数をコールするカルーセルを示します。
例18-7に、対応するページ・コードを示します。
例18-7 カルーセルのより複雑なレイアウト
<af:carouselItem id="mainItem" text="#{item.title}" shortDesc="#{item.title}">
<af:panelGroupLayout id="itemPgl" layout="vertical">
<af:image id="mainImg" source="#{item.url}" shortDesc="#{item.title}"
styleClass="MyImage">
<af:clientListener method="handleItemOver" type="mouseOver"/>
<af:clientListener method="handleItemDown" type="mouseDown"/>
<af:showPopupBehavior triggerType="contextMenu" popupId="::itemCtx"/>
</af:image>
<af:panelGroupLayout id="overHead" styleClass="MyOverlayHeader"
layout="vertical" clientComponent="true">
<af:menuBar id="menuBar">
<af:menu id="menu" text="Menu">
<af:commandMenuItem id="menuItem1" text="Menu Item 1"/>
<af:commandMenuItem id="menuItem2" text="Menu Item 2"/>
<af:commandMenuItem id="menuItem3" text="Menu Item 3"/>
</af:menu>
</af:menuBar>
</af:panelGroupLayout>
<af:panelGroupLayout id="overFoot" styleClass="MyOverlayFooter"
layout="vertical" clientComponent="true"
halign="center">
<af:panelGroupLayout id="footHorz" layout="horizontal">
<f:facet name="separator">
<af:spacer id="footSp" width="8"/>
</f:facet>
<af:commandImageLink . . .
/>
<af:outputText id="pageInfo" value="Page 1 of 1"/>
<af:commandImageLink . . .
/>
</af:panelGroupLayout>
</af:panelGroupLayout>
</af:panelGroupLayout>
</af:carouselItem>
例18-8に、対応するJavaScriptを示します。
例18-8 マウス・オーバーとマウス・クリックを処理するJavaScriptコード
function handleItemOver(uiInputEvent)
{
var imageComponent = uiInputEvent.getCurrentTarget();
var carousel = null;
var componentParent = imageComponent.getParent();
while (componentParent != null)
{
if (componentParent instanceof AdfRichCarousel)
{
carousel = componentParent;
}
componentParent = componentParent.getParent();
}
if (carousel == null)
{
AfLogger.LOGGER.severe("Unable to find the carousel component!");
return;
}
var currentItemKeyPattern = ":"+ carousel.getCurrentItemKey() +":";
var overlayHeaderComponent = imageComponent.findComponent("overHead");
var overlyHeaderId = overlayHeaderComponent.getClientId();
// In IE we get mouseover for other items as well. This is inspite of having an
// overly div on top
if(overlyHeaderId.indexOf(currentItemKeyPattern) == -1)
return;
if (overlyHeaderId != window._myHeader)
{
// ensure only one set of overlays are visible
hideExistingOverlays();
}
var overlayFooterComponent = imageComponent.findComponent("overFoot");
window._myHeader = overlayHeaderComponent.getClientId();
window._myFooter = overlayFooterComponent.getClientId();
// do not propagate to the server otherwise all stamps will get this property on
// next data fetch
overlayHeaderComponent.setProperty("inlineStyle", "display:block", false, AdfUIComponent.PROPAGATE_LOCALLY);
overlayFooterComponent.setProperty("inlineStyle", "display:block", false, AdfUIComponent.PROPAGATE_LOCALLY);
}
function handleItemDown(uiInputEvent)
{
if (uiInputEvent.isLeftButtonPressed())
{
// Only hide the overlays if the left button was pressed
hideExistingOverlays();
}
}
|
パフォーマンスのヒント: カルーセルの構造が単純なほど、実行が高速になります。 |
ADF Facesには、サーバー・アクティビティを示すために使用できるstatusIndicatorコンポーネントが用意されています。表示される内容は、アプリケーションが使用しているスキンおよびサーバーの構成方法によって異なります。デフォルトでは、次のものが表示されます。
アプリケーションが標準のデータ転送サービスを使用するように構成されている場合、データ転送中にアニメーション化されたスピニング・アイコンが表示されます。
サーバーがビジーではない場合、静的アイコンが表示されます。
アプリケーションがアクティブ・データ・サービス(ADS)を使用するように構成されている場合、ステータス・インジケータに表示される内容は、ADSがどのように構成されているかによって異なります。
|
注意: ADSを使用すると、アプリケーションをアクティブ・データ・ソースにバインドできます。ADSを使用するには、Fusionテクノロジ・スタックを使用する必要があります。詳細は、第35章「非同期バックエンドでのアクティブ・データ・サービスの使用方法」を参照してください。 |
ADSは、データをモデルにプッシュするように構成するか、アプリケーションが指定の間隔でデータをポーリングするように構成できます。表18-3に、プッシュおよびポーリング・モードのサーバー状態を表示するために使用されるアイコンを示します(アイコンは実際はアニメーション化されています)。
ステータス・インジケータ・コンポーネントをページにドロップすると、スキンを使用して、コンポーネントで使用される実際のイメージ・ファイルを変更できます。スキンの使用の詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、18.7項「アイコンを使用したアプリケーション・ステータスの表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、18.1.2項「出力コンポーネントの追加機能」を参照してください。
ステータス・インジケータ・アイコンを使用する手順:
コンポーネント・パレットで、「一般コントロール」パネルから「ボタン(リセット)」をページにドラッグ・アンド・ドロップします。
プロパティ・インスペクタを使用して、必要な属性を設定します。
|
ヒント: 属性の設定のヘルプとして、フィールドのドロップダウン・メニューを使用して属性の説明を表示します。 |
ADF Facesのmediaコンポーネントを使用すると、アプリケーション・ページにビデオ・クリップや音声クリップを含めることができます。
メディア・コントロールでは、クロス・プラットフォームのメディア表示の複雑な2つの側面(メディアの表示に最適なプレーヤの決定、およびメディア・プレーヤのサイズ変更)を処理します。
ユーザーに表示するプレーヤのサイズとともに、各クリップに適したメディア・プレーヤを指定できます。デフォルトで、ADF Facesでは、メディア・リソースのMIMEタイプを使用して、最適なメディア・プレーヤおよび使用するデフォルトの内部プレーヤ・サイズが決定されますが、コンテンツ・タイプはcontentType属性を使用して指定できます。
ユーザーが使用できるコントロール、およびクリップを自動的に再生するかどうか、連続再生するか指定された回数再生するかなど、その他のプレーヤ機能を指定できます。
ページにmediaコンポーネントを追加したら、デフォルトで使用するメディア・プレーヤ、プレーヤと画面のサイズ、コントロールおよびクリップをリプレイするかどうかを構成できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。詳細は、18.8項「ビデオ・クリップおよび音声クリップの再生」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。詳細は、18.1.2項「出力コンポーネントの追加機能」を参照してください。
アプリケーション・ページに音声クリップまたはビデオ・クリップを含める手順:
コンポーネント・パレットで、「一般コントロール」パネルから「メディア」をページにドラッグ・アンド・ドロップします。
メディアの挿入ダイアログで、次の属性を設定します。
Source: 再生するメディアへのURIを入力します。
StandbyText: コンテンツのロード中に表示するメッセージを入力します。
プロパティ・インスペクタの「共通」セクションを開き、次の設定を行います。
Player: クリップの再生にデフォルトで使用されるメディア・プレーヤを選択します。Real Player、Windows Media PlayerまたはApple QuickTime Playerから選択できます。
または、ユーザー・エージェントの組込みのコンテンツ・タイプ・マッピングに基づいて、メディア・リソースの再生を開始するリンクをページに作成できます。メディア・コントロールにより、次の手順で、適切なメディア・プレーヤの選択が試行されます。
コンテンツのプライマリMIMEタイプがイメージの場合は、組込みのユーザー・エージェント・サポートが使用されます。
player属性でメディア・プレーヤが指定されていて、そのプレーヤをユーザー・エージェントで使用でき、メディア・リソースを表示できる場合は、そのプレーヤが使用されます。
あるプレーヤがメディア・リソースの再生に最適で、そのプレーヤをユーザー・エージェントで使用できる場合は、そのプレーヤが使用されます。
ユーザー・エージェントであるプレーヤが特に優先されており、そのプレーヤでメディア・リソースを再生できる場合は、そのプレーヤが使用されます。
ページに表示されているリンクに接続しているプレーヤが使用されます。
Autostart: ロード後すぐにクリップの再生を開始する場合はTrueに設定します。
ContentType: 再生するメディアのMIMEタイプを入力します。これは、使用するプレーヤ、コントロールの構成、および表示サイズの決定に使用されます。
プロパティ・インスペクタの「外観」セクションを開き、次の設定を行います。
Controls: プレーヤに表示するコントロールの量とタイプを選択します。
使用可能なコントロールのセットはプレーヤによって異なるため、実際のコントロールをリストするのではなく、一般的な方法で表示するコントロールのセットを定義します。たとえば、使用可能なすべてのコントロールや、最も一般的に使用されるコントロールをプレーヤに表示することも、コントロールを表示しないこともできます。
たとえば、例18-9では、mediaコンポーネントにall設定が使用されています。
図18-17に、プレーヤがユーザーに対してどのように表示されるかを示します。
次の値が有効です。
All: メディア・プレーヤでメディアを再生するための使用可能なすべてのコントロールが表示されます。
この設定を使用すると、使用するメディア・プレーヤによっては、大量の追加領域が必要になります。
Minimal: メディア・プレーヤでメディアを再生するための最小限のコントロールのセットが表示されます。
この値を使用すると、ユーザーが最も重要なメディア再生コントロールを制御できる一方で、ユーザー・エージェントにおける最低限の追加の領域が占有されます。
None: メディア・プレーヤにコントロールは表示されず、ポップアップ・メニューなど、その他の方法でコントロールにアクセスすることもできません。
通常、この設定は、メディアの再生に対するユーザーの制御が許可されていないkioskタイプのアプリケーションにのみ使用します。この設定は、通常、再生が自動的に開始される設定、および連続して再生される設定とともに使用されます。
NoneVisible: メディア・プレーヤにコントロールは表示されませんが、ポップアップ・メニューなど、かわりの方法でコントロールにアクセスできます。
通常、この値は、メディアの再生に対するユーザーの制御は許可されているが、推奨されていないアプリケーションにのみ使用します。none設定同様、この設定は、再生が自動的に開始される設定、および連続して再生される設定とともに使用されます。
Typical: メディア・プレーヤでメディアを再生するための一般的なコントロールのセットが表示されます。
この値はデフォルトで、ユーザー・エージェントで過度に余分な領域を占有せずに、ユーザーは最も一般的なメディア再生コントロールを制御できるようになります。
WidthおよびHeight: ピクセル単位で完全な表示(メディアのコンテンツ領域も含むプレーヤ領域全体)のサイズを定義します。
|
ヒント:
|
InnerWidthおよびInnerHeight: メディア・コンテンツ領域のみのサイズをピクセル単位で定義します。クリップのプレーヤ領域に割り当てられた領域を制御するため、これが推奨のスキームです。
|
ヒント: メディア・コントロールのサイズを指定しない場合は、メディア・リソースのコンテンツ・タイプで指定されたデフォルトの内部サイズが使用されます。これは音声コンテンツでは問題ありませんが、ビデオ・コンテンツでは、コンテンツの一部が表示されない原因や必要以上に領域を占有する原因になります。 両方のスキームで |
「動作」セクションを開き、Autostartを設定します。デフォルトでは、表示されたコントロールを使用してユーザーが開始するまで、クリップの再生は開始されません。autostart属性をtrueに設定することで、クリップのロードと同時に再生を開始することを指定できます。
PlayCountを、メディアを再生する回数に設定します。デフォルトでは、開始されたらクリップは一度のみ再生されます。コントロールが使用可能な場合には、ユーザーはクリップを再度再生できます。ただし、playCount属性に値を設定することで、クリップを固定回数再生することや、連続して繰り返すことを指定できます。playCount属性を0に設定すると、クリップは連続して再生されます。この属性をその他の数値に設定すると、クリップは指定された回数再生されます。
例18-10に、ページのソースのaf:mediaコンポーネントを示します。このコンポーネントでは、ロードされるとすぐにビデオ・クリップの再生が開始され、ユーザーが停止するまでクリップの再生を継続します。プレーヤには、使用可能なコントロールがすべて表示されます。
