Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース1 (11.1.1.6.0) B52029-06 |
|
![]() 前 |
![]() 次 |
この章では、ADF Facesコンポーネントを使用して出力テキスト、イメージおよびアイコンを表示する方法と、ユーザーがビデオ・クリップや音声クリップを再生できるコンポーネントの使用方法を説明します。
この章では、次の項目について説明します。
ADF Facesには、テキスト、アイコン、イメージを表示するためのコンポーネント、およびJSFページで音声クリップやビデオ・クリップを再生するためのコンポーネントが用意されています。
読取り専用テキストは、outputText
またはoutputFormatted
コンポーネントを使用して表示できます。outputFormatted
コンポーネントを使用すると、限られたHTMLマークアップのセットをコンポーネントの値に追加でき、テキストの簡単な書式設定が可能になります。
多くのADF Facesコンポーネントには、アイコンを関連付けできます。たとえば、メニューでは、各メニュー項目にアイコンを関連付けできます。それぞれのアイコンに使用するイメージは、そのメニュー項目コンポーネント自体のicon
属性の値として識別します。アイコンがサポートされているコンポーネントへのアイコン追加の詳細と手順は、それぞれのコンポーネントの章で説明されています。コンポーネント内で使用できるアイコンに加えて、ADF Facesにはメッセージを表示する際に使用されるアイコンもあります。これらのアイコンは、メッセージの外でも使用できます。
ページにイメージを表示するには、image
コンポーネントを使用します。イメージを使用して、リンク(イメージ・マップを含む)として使用することも、サーバーのステータスを表すために使用することもできます。カルーセルにイメージのコレクションを表示できます。これにより、ユーザーは、コレクションを回転して各イメージを表示できます。
メディア
・コンポーネントは、音声クリップやビデオ・クリップを再生できます。これらのコンポーネントには、ページでの項目の表示方法を定義するための属性があります。
ページに出力テキストを表示するためのADF Facesコンポーネントは2つあります。outputText
は書式設定されていないテキストを表示し、outputFormatted
はテキストを表示して限られた範囲の書式設定オプションを設定できます。
明示的に指定されたシンプル・テキストや、リソース・バンドルまたはBeanからのシンプル・テキストを表示するには、outputText
コンポーネントを使用します。value
プロパティの値として表示されるようにテキストを定義します。次に例を示します。
<af:outputText value="The submitted value was: "/>
例16-1に、2つのoutputText
コンポーネントを示します。1つ目では表示されるテキストが明示的に指定され、2つ目ではマネージドBeanからテキストが取得され、表示可能なテキスト値に値が変換されます(変換の詳細は、変換の追加に関する項を参照してください)。
例16-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の特殊文字をエスケープするかどうかを指定できます。デフォルトでは、特殊文字はエスケープされます。
例16-2に、2つのoutputText
コンポーネントを示します。1つ目ではescape
属性にデフォルト値true
が使用され、2つ目では属性がfalse
に設定されています。
例16-2 escapeプロパティ・セットを使用しているoutputTextと使用していないoutputText
<af:outputText value="<h3>output & heading</h3>"/> <af:outputText value="<h3>output & heading</h3>" escape="false"/>
図16-1に、異なる2つのescape
属性の設定をブラウザで表示した場合の結果の違いを示します。
絶対に必要な場合以外、escape
属性はfalse
に設定しないでください。限られた数のHTMLタグを使用できるoutputFormatted
コンポーネントを使用することをお薦めします。
outputFormatted
コンポーネントでも、outputText
コンポーネント同様、value
プロパティに指定されたテキストが表示されますが、値にHTMLタグを含めることができます。値の一部のみを特定の方法で書式設定する場合は、outputFormatted
コンポーネントの書式設定機能を使用します。コンポーネント値全体に同じスタイル設定を使用する必要がある場合は、値にHTMLを使用するかわりに、コンポーネント全体にスタイルを適用します。コンポーネントのすべてのインスタンスを特定の方法で書式設定する場合は、カスタム・スキンを作成する必要があります。インライン・スタイルの使用方法およびスキンの作成方法の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
例16-3に、値の一部のみが太字で表示されるoutputFormatted
コンポーネントを示します。
例16-3 一部のテキストを太字にするoutputFormattedの使用
<af:outputFormatted value="<b>This is in bold.</b> This is not bold"/>
図16-2に、コンポーネントによりテキストがどのように表示されるかを示します。
出力テキストを表示する前に、値の一部を特別な方法で書式設定するかどうかを確認します。
出力テキストを表示する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「出力テキスト」をドラッグ・アンド・ドロップします。outputFormatted
コンポーネントを作成するには、コンポーネント・パレットから書式設定された出力をドラッグ・アンド・ドロップします。
ヒント: 値の一部に特別な書式設定を適用する場合は、 |
ヒント: アクティブ・データを使用したコンポーネントのテキストの変更をサポートする場合(たとえば、データソースからプッシュされているデータによって、表示されるテキストを決定する場合)、 |
プロパティ・インスペクタの「共通」パネルを開き、value属性を表示する値に設定します。outputFormatted
コンポーネントを使用している場合は、表16-1および表16-2の説明に従い、HTML書式設定コードを使用して必要に応じてテキストを書式設定します。
outputFormatted
コンポーネントではstyleUsage
属性もサポートされています。この属性値により、テキストに次に示す事前定義済のスタイルが適用されます。
inContextBranding
instruction
pageStamp
図16-3に、styleUsage
値によりコンポーネントにどのようなスタイルが適用されるかを示します。
注意:
|
特定の書式設定コードと文字コードのみを使用できます。表16-1に、outputFormatted
コンポーネントの値の書式設定に使用可能な書式設定コードをリストします。
表16-1 af:outputFormatted値で使用するための書式設定コード
フォーマット・コード | 効果 |
---|---|
|
改行 |
|
水平方向の罫線 |
|
リスト: 順序付けられたリスト、順序付けられていないリストおよびリスト項目 |
|
パラグラフ |
|
太字 |
|
イタリック |
|
テレタイプまたは等幅 |
|
大きいフォント |
|
小さいフォント |
|
事前フォーマット済: 保存済の空白と改行文字で定義されたレイアウト |
|
囲まれたテキスト全体に影響 |
|
アンカー |
表16-2に、値の特殊文字を表示するための文字コードをリストします。
表16-2 af:outputFormatted値で使用するための文字コード
文字コード | 文字 |
---|---|
|
次より小さい |
|
次より大きい |
|
アンパサンド |
|
登録商標 |
|
コピーライト |
|
改行なしの空白 |
|
二重引用符 |
属性class
、style
およびsize
は、href
構成と同様に、outputFormatted
コンポーネントのvalue
属性でも使用できます。その他すべてのHTMLタグは無視されます。
注意: セキュリティ上の理由から、出力値ではJavaScriptはサポートされていません。 |
ADF Facesには、図16-4に示されているように、メッセージ・コンポーネントで使用される一連のアイコンが用意されています。
アイコンをメッセージ・コンポーネントの外に表示する必要がある場合は、icon
コンポーネントを使用し、表示するアイコン・タイプの名前を指定します。
注意: アイコンに使用されるイメージは、アプリケーションで使用されているスキンによって決定されます。イメージを変更する場合は、カスタム・スキンを作成します。詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。 |
ADF Facesアプリケーションでメッセージを使用すると、アイコンが自動的に追加されます。メッセージ・コンポーネントに追加する必要はありません。ただし、アイコンをメッセージ・コンポーネントの外に使用できます。アプリケーションのスキンに定義されている標準アイコンのいずれかを表示するには、icon
コンポーネントを使用します。
標準アイコンを表示する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「アイコン」をドラッグ・アンド・ドロップします。
図16-4に示されているように、「共通」セクションを開き、Nameをアイコン機能の名前に設定します。たとえば、中に白いXがある赤い丸を表示する場合は、Nameをerror
に設定します。
「外観」セクションを開き、ShortDescをアイコンの代替テキストとして表示するテキストに設定します。
ページにイメージを表示するには、image
コンポーネントを使用し、source
属性をファイルが存在するURIに設定します。image
コンポーネントでは、イメージの詳細な説明へのリンクを提供することで、アクセシビリティの説明テキストもサポートされています。
image
コンポーネントは、リンクとして使用することも、イメージ・マップを含めることもできますが、goLink
コンポーネント内に配置する必要があります。詳細は、リンクとしてのイメージの使用に関する項を参照してください。
イメージを表示する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「イメージ」をドラッグ・アンド・ドロップします。
ヒント: アクティブ・データを使用したイメージの |
「イメージの挿入」ダイアログで、次の設定を行います。
ShortDesc: イメージの代替テキストとして使用するテキストに設定します。
Source: イメージ・ファイルへのURIを入力します。
イメージのより長い説明を指定する場合は、プロパティ・インスペクタで、LongDescURL属性をその情報が存在するURIに設定します。
ADF Facesには、オプションのテキストとともにイメージをリンクとしてレンダリングするcommandImageLink
コンポーネントがあります。ユーザーがアイコンにマウスを置いた場合や、アイコンが押された場合または無効化された場合に、別々のアイコンを設定できます。commandImageLink
コンポーネントの詳細は、ボタンおよびリンクのナビゲーション目的での使用に関する項を参照してください。
指定されたURIへのナビゲーションにイメージを使用する場合は、イメージをgoLink
コンポーネントで囲み、必要な場合はイメージ・マップにリンクします。
イメージは、1つ以上の移動先へのgoLink
コンポーネントとして使用できます。単一の移動先への単純なリンクとしてイメージを使用する場合は、goLink
コンポーネントを使用してイメージを囲み、goLink
コンポーネントのdestination
属性をリンクの移動先のURIに設定します。
グラフィックの異なる領域が別々のURIにナビゲートするグラフィカルなナビゲーション・メニューとしてイメージを使用している場合は、image
コンポーネントをgoLink
コンポーネントで囲み、イメージに対するサーバー側のイメージ・マップを作成します。
1つ以上のgoLinkコンポーネントとしてイメージを使用する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「実行リンク」をドラッグ・アンド・ドロップします。
goLink
コンポーネントの子として、「イメージ」をドラッグ・アンド・ドロップします。
「イメージの挿入」ダイアログで、次の設定を行います。
ShortDesc: イメージの代替テキストとして使用するテキストに設定します。
Source: イメージ・ファイルへのURIを入力します。
イメージの異なる領域を別々の移動先にリンクさせる場合は、次のようにします。
イメージのイメージ・マップを作成し、サーバーに保存します。
プロパティ・インスペクタで、ImageMapType属性をserverに設定します。
goLinkコンポーネントを選択し、プロパティ・インスペクタで、Destinationをサーバーのイメージ・マップのURIに設定します。
イメージ全体を単一の移動先にリンクする場合は、goLinkコンポーネントを選択し、移動先のURIをDestinationの値として入力します。
図16-5に示すように、動くカルーセルにイメージを表示できます。ユーザーは、下部にあるスライダを使用するか、補助イメージの1つをクリックして、前面にあるイメージを変更し、特定のイメージを前面に表示します。
デフォルトで、カルーセルは水平に表示されます。水平方向のカルーセル内にあるオブジェクトは中央揃えで配置され、カルーセル自体はコンテナで水平に配置されます。
参照カード・ファイルの表示など、必要に応じて、垂直に表示されるようにカルーセルを構成できます。デフォルトでは、図16-6に示すように、垂直方向のカルーセル内にあるオブジェクトは中央揃えで配置され、カルーセル自体は垂直に配置されます。カルーセルの位置属性を使用して、位置を変更できます。
ベスト・プラクティス: 一般的に、カルーセルは、子( |
図16-5に示すように、カルーセル・コンポーネントは循環モードで表示できます。また、図16-7に示すように、現在のイメージのみを表示するようにカルーセルを構成できます。
イメージ全体を参照するために使用するコントロールを構成することもできます。次の項目に移動する矢印や前の項目に移動する矢印があり、複数のイメージにまたがるスライダ(図16-5を参照)を表示できます。また、次の項目に移動するボタンや前の項目に移動するボタン(図16-7を参照)も表示できます。あるいは、次の項目に移動するボタンや前の項目に移動するボタンをスライダ・カウンタ(図16-8を参照)とともに表示できます。
デフォルトでは、カルーセルが循環モードで表示するように構成されている場合、補助アイテム(現在、中央に表示されていないアイテム)にポインタを置くと、そのアイテムが枠で囲まれ選択可能であることが示されます(この枠は、アプリケーションがFusion FX v1.2以降のスキンを使用している場合にのみ、表示されることに注意してください)。図16-9に示すように、アイテムが移動し、最大サイズで表示されるように、カルーセルを構成できます。
循環モードに設定した場合、イメージ間のスペースも構成できます。また、補助イメージのサイズも構成できます。デフォルトでは、イメージ間のスペースは先行イメージのサイズの0.45倍に設定されています。この結果、隣合うイメージは重なります。図16-5に示すように、先行イメージの0.8倍になるように、補助イメージのサイズは0.8に設定されています。この設定を変更すると、カルーセルの外観を変更できます。たとえば、カルーセルをスライドのように表示させる場合、イメージ間のスペースを1.1に設定し、補助アイテムのサイズは1に設定します。これによって、図16-10に示すように、補助アイテムはすべて同じサイズになります。
子のcarouselItem
コンポーネントは、カルーセルにオブジェクトおよびオブジェクトのタイトルを表示します。表示する各オブジェクトにcarouselItem
コンポーネントを作成し、これらのコンポーネントを各オブジェクトにバインドするかわりに、carousel
コンポーネントを完全なコレクションにバインドします。次に、コンポーネントは、ツリーが各データ行にスタンプ設定するのと同様に、各アイテムの値をスタンプ設定して、1つのcarouselItem
コンポーネントを繰り返しレンダリングします。各アイテムがスタンプ設定されると、現在のアイテムのデータが、carousel
コンポーネントのvar
属性を使用するEL式によって対応可能なプロパティにコピーされます。カルーセルのレンダリングが完了したら、このプロパティは削除されるか前の値に戻ります。カルーセルにはnodeStamp
ファセットが含まれます。これは、各アイテムのテキストと短い説明を表示するために使用されるcarouselItem
コンポーネントのホルダーであり、各アイテムに表示されるイメージに対する親コンポーネントでもあります。
たとえば、図16-5に示されたADF FacesデモのcarouselItem
JSFページには、各ADF Facesコンポーネントのイメージを表示するcarousel
コンポーネントが含まれています。demoCarouselItem
(CarouselBean.java
)マネージドBeanには、これらのコンポーネントすべてのリストが含まれています。carousel
コンポーネントの値属性は、このリストが存在するBeanのitems
プロパティにバインドされます。カルーセルのコンポーネントのvar
属性は、表示する各アイテムの値を保持するために使用されます。carouselItem
コンポーネントとimage
コンポーネントの両方がこれを使用し、各アイテムの正しい値を取得します。例16-4に、カルーセルのJSFページ・コードを示します。カルーセルでのスタンプの動作の詳細は、ツリーへのデータの表示に関する項を参照してください。
例16-4 カルーセル・コンポーネントの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
コンポーネントは子コンポーネントのみを拡大します。carouselItem
内に1つのimage
コンポーネントを配置する場合、アイテムに割り当てられた場所の大きさに合うように、イメージが拡大されます(ユーザーがカルーセルを動かすと、寸法が大きくなったり小さくなったりします)。
ベスト・プラクティス:
|
carousel
コンポーネントでは、Collection
Model
クラスを使用して基礎となるコレクションのデータにアクセスします。このクラスは、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 Business Componentsを作成でき、作成するとモデルが作成されます。その後、カルーセルを宣言的に作成でき、そのカルーセルは自動的にそのモデルにバインドされます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のADF Facesカルーセル・コンポーネントの使用に関する項を参照してください。 |
カルーセル・コンポーネントは仮想化されており、サーバーのコンポーネントに対して使用可能なすべてのアイテムがクライアントに配信されて表示されるわけではありません。カルーセルを構成して、データソースから一度に一定数の行をフェッチします。レンダリング時にすぐにデータをコンポーネントに配信することも、コンポーネントのシェルがレンダリングされた後に遅延フェッチすることもできます。デフォルトでは、カルーセルは最初のリクエストに対して遅延フェッチを行います。ページにこれらのコンポーネントが1つ以上含まれる場合、ページでは最初は標準のライフサイクルが実行されます。ただし、最初のリクエスト中にデータをフェッチするカルーセルのかわりに、特定の個別の部分ページ・レンダリング(PPR)・リクエストがコンポーネントで実行され、カルーセルのフェッチ・サイズの値として設定されたアイテム数が返されます。ページのレンダリング直後であるため、レンダー・レスポンス・フェーズのみがカルーセルに対して実行され、対応するデータのフェッチおよび表示が可能になります。後続のデータ・フェッチが発生した場合(別のイメージ・セットのカルーセルを回転させた場合など)、別のPPRリクエストが実行されます。
パフォーマンスのヒント: ページにカルーセル以外のコンポーネントが複数含まれる場合は、遅延配信を使用する必要があります。遅延配信を使用すると、データが使用可能になる前に、初期ページのレイアウト・コンポーネントおよびその他のコンポーネントが最初にレンダリングされます。 カルーセルがページで唯一のコンテキストである場合か、カルーセルが多数のアイテムを戻すことを想定されていない場合、即時配信を使用します。この場合、遅延配信を使用する場合よりも、レスポンス時間は早くなります(または、単に速いと感じられるだけの場合もあります)。2番目のリクエストがサーバーに送信されないため、ユーザーのレスポンス時間が速くなり、サーバーのCPU使用率も向上します。ただし、フェッチ・ブロックとして構成されたアイテムの数のみが最初に返されることに注意してください。遅延配信と同様に、ユーザーのアクションにより後続のデータ・フェッチが実行される場合は、次のアイテム・セットが配信されます。 |
スライダ・コントロールを使用すると、コレクションを移動できます。通常、スライダのサムは総オブジェクト数の中の現在のオブジェクト番号(たとえば、20個中の6番目など)を表示します。総オブジェクト数が大きすぎて計算できない場合、スライダのサムは現在のオブジェクト番号のみを表示します。たとえば、カルーセルが会社の従業員ディレクトリに使用される場合などです。デフォルトでは、ディレクトリで全従業員の顔写真を表示する場合、時間をかけてデータベースを呼び出さなければ、正確に94,409名の従業員のデータがシステム内に存在することを把握できません。
カルーセルと連携して、他のコンポーネントを使用できます。たとえば、ツールバーやメニュー・バーを追加し、これらにボタンやメニュー項目を追加できます。これにより、ユーザーは現在のオブジェクトに対してアクションを実行できます。
カルーセルを作成するには、まず、表示するイメージが含まれるデータ・モデルを作成する必要があります。次に、carousel
コンポーネントをそのモデルにバインドし、carouselItem
コンポーネントをカルーセルのnodeStamp
ファセットに挿入します。最後に、image
コンポーネント(または、image
コンポーネントが含まれる他のコンポーネント)を子としてcarouselItem
コンポーネントに挿入します。
カルーセルを作成する手順:
表示するイメージのコレクションを提供するデータ・モデルを作成します。データ・モデルは、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: デフォルトで、カルーセルは水平に表示されます。図16-6に示すように、垂直に表示する場合、vertical
を選択します。horizontal
に設定した場合、halign
属性を使用して、アイテムの配置を構成する必要があります。vertical
に設定した場合、valign
属性を使用して、アイテムの配置を設定します。
Halign: 垂直のカルーセルにアイテムをどのように表示するかを指定します。有効な値は次のとおりです。
Center: 中央に揃うようにアイテムを配置します。これはデフォルト設定です。
End: 右端が揃うようにアイテムを配置します(ブラウザが左から右に表記する言語を表示している場合)。
Start: 左端が揃うようにアイテムを配置します(ブラウザが左から右に表記する言語を表示している場合)。
Valign: 水平のカルーセルにアイテムをどのように表示するかを指定します。有効な値は次のとおりです。
Bottom: 下端が揃うようにアイテムを配置します。
Middle: 中央に揃うようにアイテムを配置します。これはデフォルト設定です。
Top: 上端が揃うようにアイテムを配置します。
Value: カルーセルをモデルにバインドします。
「データ」セクションを開いて次の設定を行います。
Var: 個々のアイテム・データにアクセスするために、ELで使用される変数を入力します。
VarStatus: カルーセルのステータスにアクセスするために、ELで使用される変数を入力します。varStatus
の共通プロパティは、次のとおりです。
model
: このコンポーネントのCollectionModel
を返します。
index
: ゼロベースのアイテム索引を返します。
「外観」セクションを開き、アイテムが返されない場合に表示するテキストにEmptyTextを設定します。リソース・バンドルを使用する場合は、ドロップダウン・メニューを使用して「テキスト・リソースの選択」を選択します。
「動作」セクションを開き、次の設定を行います。
FetchSize: 各データ・フェッチで戻されるブロックのサイズを設定します。
ContentDelivery: データを送信するタイミングを指定します。contentDelivery
属性がimmediate
に設定されている場合、カルーセルのレンダリングと同時にアイテムがフェッチされます。contentDelivery
属性がlazy
に設定されている場合は、後続のリクエスト中にアイテムがフェッチされてクライアントに送信されます。
CarouselSpinListener: カルーセルの回転が実行されたときにロジックの実行が必要な場合、カルーセルの回転を処理するハンドラ・メソッドにバインドします。例16-5に、回転が実行されたときに詳細パネルを再描画するCarouselBean
のハンドラ・メソッドを示します。
例16-5 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
のアイテムの主キーであるか、主キーに対して評価される必要があります。
「その他」セクションを開き、次の設定を行います。
AuxiliaryOffset: 先行イメージからどのくらいイメージが離れているかを決定する数値を設定します。デフォルト値は0.45
です。
AuxiliaryPopOut: hover
を設定すると、補助イメージにマウスを置いたときに補助イメージが最大サイズでレンダリングされます。デフォルトはoff
です。
AuxiliaryScale: 先行イメージと比較した各イメージのサイズを決定する数値を設定します。1
に設定すると、すべてのイメージが同じサイズになります。1
より小さい値を設定すると、各イメージは少しずつ小さくなり、1
より大きい値を設定すると、大きくなります。デフォルトでは、設定は0.8
です。各イメージは先行イメージの80%の大きさになります。
ControlArea: カルーセルのイメージ全体を参照するために使用するコントロールを指定します。有効な値は次のとおりです。
full: スライダは現在のイメージよりも大きくなり、次の項目に移動するボタンと前の項目に移動するボタンを表示します。
small: スライダのサイズは現在のイメージのサイズになり、次の項目に移動するボタンと前の項目に移動するボタンを表示します。
compact: 次の項目に移動するボタンと前の項目に移動するボタンのみが表示されます。
none: スライダおよびコントロールは表示されません。
DisplayItems: 複数のイメージをカルーセルに表示するには、circularを選択します。一度に1つのイメージをカルーセルに表示するには、oneByOneを選択します。
コンポーネント・パレットから「カルーセル・アイテム」をCarousel
コンポーネントのnodeStamp
ファセットにドラッグします。
カルーセルのvar
属性に設定された変数の値を使用して、CarouselItem
コンポーネントの属性をデータ・モデルのプロパティにバインドします。たとえば、例16-4のカルーセルは、var
属性の値としてitem
を使用しています。したがって、carouselItem
のtext
属性の値はitem.title
となります(title
が、データ・モデルのカルーセル・アイテムに使用するテキストにアクセスするために使用するプロパティである場合)。
コンポーネント・パレットからイメージをドラッグし、carouselItem
に子としてドロップします。
カルーセルのvar
属性に設定された変数の値を使用して、image
コンポーネントの属性をデータ・モデルのプロパティにバインドします。たとえば、例16-4のカルーセルは、var
属性の値としてitem
を使用しています。したがって、image
のsource
属性の値はitem.url
となります(url
が、イメージへのアクセスに使用するプロパティである場合)。
さらに多くの機能が必要な場合、イメージ・コンポーネントを他のコンポーネントで囲むことができます。たとえば、図16-11に、イメージがpanelGroupLayout
コンポーネントに囲まれていて、clientListener
を使用しJavaScript関数を呼び出し、メニューとナビゲーション・バーを表示するカルーセルを示します。
例16-6に、対応するページ・コードを示します。
例16-6 カルーセルの複雑なレイアウト
<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>
パフォーマンスのヒント: カルーセルの構造が単純であれば、処理が速くなります。 |
ADF Facesには、サーバー・アクティビティを示すために使用できるstatusIndicator
コンポーネントが用意されています。表示される内容は、アプリケーションが使用しているスキンおよびサーバーの構成方法によって異なります。デフォルトでは、次のものが表示されます。
アプリケーションが標準のデータ転送サービスを使用するように構成されている場合、データ転送中に次のアニメーション化されたスピニング・アイコンが表示されます。
サーバーがビジーではない場合、次のアイコンが表示されます。
アプリケーションがアクティブ・データ・サービス(ADS)を使用するように構成されている場合、ステータス・インジケータに表示される内容は、ADSがどのように構成されているかによって異なります。
注意: ADSを使用すると、アプリケーションをアクティブ・データ・ソースにバインドできます。ADSを使用するには、Fusionテクノロジ・スタックを使用する必要があります。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「アクティブ・データ・サービスの使用」を参照してください。 |
ADSはデータをモデルにプッシュするように構成できます。または、指定した間隔で、アプリケーションがデータをポーリングするように構成することもできます。表16-3に、プッシュ・モードおよびポーリング・モードのサーバー状態を表示するために使用されるアイコンを示します(アイコンは実際はアニメーション化されています)。
ステータス・インジケータ・コンポーネントをページにドロップすると、スキンを使用して、コンポーネントで使用される実際のイメージ・ファイルを変更できます。スキンの使用の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ステータス・インジケータ・アイコンを使用する手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「ステータス・インジケータ」をドラッグ・アンド・ドロップします。
プロパティ・インスペクタを使用して、必要な属性を設定します。
ヒント: 属性の設定のヘルプとして、フィールドのドロップダウン・メニューを使用して、属性の説明を表示します。 |
ADF Facesのmedia
コンポーネントを使用すると、アプリケーション・ページにビデオ・クリップや音声クリップを含めることができます。
メディア・コントロールでは、クロス・プラットフォームのメディア表示の複雑な2つの側面(メディアの表示に最適なプレーヤの決定、およびメディア・プレーヤのサイズ変更)を処理します。
ユーザーに表示するプレーヤのサイズとともに、各クリップに適したメディア・プレーヤを指定できます。デフォルトで、ADF Facesでは、メディア・リソースのMIMEタイプを使用して、最適なメディア・プレーヤおよび使用するデフォルトの内部プレーヤ・サイズが決定されますが、コンテンツ・タイプはcontentType
属性を使用して指定できます。
ユーザーが使用できるコントロール、およびクリップを自動的に再生するかどうか、連続再生するか指定された回数再生するかなど、その他のプレーヤ機能を指定できます。
ページにmediaコンポーネントを追加したら、デフォルトで使用するメディア・プレーヤ、プレーヤと画面のサイズ、コントロールおよびクリップをリプレイするかどうかを構成できます。
アプリケーション・ページに音声クリップまたはビデオ・クリップを含める手順:
コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「メディア」をドラッグ・アンド・ドロップします。
「メディアの挿入」ダイアログで、次の属性を設定します。
Source: 再生するメディアへのURIを入力します。
StandbyText: コンテンツのロード中に表示するメッセージを入力します。
プロパティ・インスペクタの「共通」セクションを開き、次の属性を設定します。
Player: クリップの再生にデフォルトで使用されるメディア・プレーヤを選択します。Real Player、Windows Media PlayerまたはApple QuickTime Playerから選択できます。
または、ユーザー・エージェントの組込みのコンテンツ・タイプ・マッピングに基づいて、メディア・リソースの再生を開始するリンクをページに作成できます。メディア・コントロールにより、次の手順で、適切なメディア・プレーヤの選択が試行されます。
コンテンツのプライマリMIMEタイプがイメージの場合は、組込みのユーザー・エージェント・サポートが使用されます。
player
属性でメディア・プレーヤが指定されていて、そのプレーヤをユーザー・エージェントで使用でき、メディア・リソースを表示できる場合は、そのプレーヤが使用されます。
あるプレーヤがメディア・リソースの再生に最適で、そのプレーヤをユーザー・エージェントで使用できる場合は、そのプレーヤが使用されます。
ユーザー・エージェントであるプレーヤが特に優先されており、そのプレーヤでメディア・リソースを再生できる場合は、そのプレーヤが使用されます。
ページに表示されているリンクに接続しているプレーヤが使用されます。
Autostart: ロード後すぐにクリップの再生を開始する場合はTrueを設定します。
ContentType: 再生するメディアのMIMEタイプを入力します。これは、使用するプレーヤ、コントロールの構成、および表示サイズの決定に使用されます。
プロパティ・インスペクタの「外観」セクションを開き、次の設定を行います。
Controls: 次のようにして、プレーヤに表示するコントロールの量とタイプを選択します。
使用可能なコントロールのセットはプレーヤによって異なるため、実際のコントロールをリストするのではなく、一般的な方法で表示するコントロールのセットを定義します。たとえば、使用可能なすべてのコントロールや、最も一般的に使用されるコントロールをプレーヤに表示することも、コントロールを表示しないこともできます。
たとえば、例16-7では、media
コンポーネントにall
設定が使用されています。
図16-14に、プレーヤがユーザーに対してどのように表示されるかを示します。
次の値が有効です。
All: メディア・プレーヤでメディアを再生するための使用可能なすべてのコントロールが表示されます。
この設定を使用すると、使用するメディア・プレーヤによっては、大量の追加領域が必要になります。
Minimal: メディア・プレーヤでメディアを再生するための最小限のコントロールのセットが表示されます。
この値を使用すると、ユーザーが最も重要なメディア再生コントロールを制御できる一方で、ユーザー・エージェントにおける最低限の追加の領域が占有されます。
None: メディア・プレーヤにコントロールは表示されず、ポップアップ・メニューなど、その他の方法でコントロールにアクセスすることもできません。
通常、この設定は、メディアの再生に対するユーザーの制御が許可されていないkioskタイプのアプリケーションにのみ使用します。この設定は、通常、再生が自動的に開始される設定、および連続して再生される設定とともに使用されます。
NoneVisible: メディア・プレーヤにコントロールは表示されませんが、ポップアップ・メニューなど、かわりの方法でコントロールにアクセスできます。
通常、この値は、メディアの再生に対するユーザーの制御は許可されているが、推奨されていないアプリケーションにのみ使用します。none
設定同様、この設定は、再生が自動的に開始される設定、および連続して再生される設定とともに使用されます。
Typical: メディア・プレーヤでメディアを再生するための一般的なコントロールのセットが表示されます。
この値はデフォルトで、ユーザー・エージェントで過度に余分な領域を占有せずに、ユーザーは最も一般的なメディア再生コントロールを制御できるようになります。
WidthおよびHeight: ピクセル単位で完全な表示(メディアのコンテンツ領域も含むプレーヤ領域全体)のサイズを定義します。
ヒント: 様々なプレーヤおよびプレーヤ・コントロール構成で使用する適切な幅と高さを定義するのが困難なため、 |
InnerWidthおよびInnerHeight: メディア・コンテンツ領域のサイズ(ピクセル単位)のみを定義します。クリップのプレーヤ領域に割り当てられた領域を制御するため、これが推奨のスキームです。
ヒント: メディア・コントロールのサイズを指定しない場合は、メディア・リソースのコンテンツ・タイプで指定されたデフォルトの内部サイズが使用されます。これは音声コンテンツでは問題ありませんが、ビデオ・コンテンツでは、コンテンツの一部が表示されない原因や必要以上に領域を占有する原因になります。 両方のスキームで |
「動作」セクションを開き、Autostartを設定します。デフォルトでは、表示されたコントロールを使用してユーザーが開始するまで、クリップの再生は開始されません。autostart
属性をtrue
に設定することで、クリップのロードと同時に再生を開始することを指定できます。
メディアを再生する回数にPlayCountを設定します。デフォルトでは、開始されたらクリップは一度のみ再生されます。コントロールが使用可能な場合には、ユーザーはクリップを再度再生できます。ただし、playCount
属性に値を設定することで、クリップを固定回数再生することや、連続して繰り返すことを指定できます。playCount
属性を0に設定すると、クリップは連続して再生されます。この属性をその他の数値に設定すると、クリップは指定された回数再生されます。
例16-8に、ページのソースのaf:media
コンポーネントを示します。このコンポーネントでは、ロードされるとすぐにビデオ・クリップの再生が開始され、ユーザーが停止するまで連続して再生されます。プレーヤには、使用可能なコントロールがすべて表示されます。