16 出力コンポーネントの使用

この章では、ADF Facesコンポーネントを使用して出力テキスト、イメージおよびアイコンを表示する方法と、ユーザーがビデオ・クリップや音声クリップを再生できるコンポーネントの使用方法を説明します。

この章では、次の項目について説明します。

• 16.1項「出力テキスト、イメージ、アイコンおよびメディア・コンポーネントの概要」

• 16.2項「出力テキストおよび書式設定された出力テキストの表示」

• 16.3項「アイコンの表示」

• 16.4項「イメージの表示」

• 16.5項「リンクとしてのイメージの使用」

• 16.6項「アイコンを使用したアプリケーション・ステータスの表示」

• 16.7項「ビデオ・クリップおよび音声クリップの再生」

16.1 出力テキスト、イメージ、アイコンおよびメディア・コンポーネントの概要

ADF Facesには、テキスト、アイコン、イメージを表示するためのコンポーネント、およびJSFページで音声クリップやビデオ・クリップを再生するためのコンポーネントが用意されています。

読取り専用テキストは、outputTextまたはoutputFormattedコンポーネントを使用して表示できます。outputFormattedコンポーネントを使用すると、限られたHTMLマークアップのセットをコンポーネントの値に追加でき、テキストの簡単な書式設定が可能になります。

多くのADF Facesコンポーネントには、アイコンを関連付けできます。たとえば、メニューでは、各メニュー項目にアイコンを関連付けできます。それぞれのアイコンに使用するイメージは、そのメニュー項目コンポーネント自体のicon属性の値として識別します。アイコンがサポートされているコンポーネントへのアイコン追加の詳細と手順は、それぞれのコンポーネントの章で説明されています。コンポーネント内でアイコンを提供するだけでなく、ADF Facesにはメッセージを表示する際に使用されるアイコンもあります。これらのアイコンは、メッセージの外でも使用できます。

ページにイメージを表示するには、imageコンポーネントを使用します。イメージを使用して、リンク(イメージ・マップを含む)として使用することも、サーバーのステータスを表すために使用することもできます。

メディア・コンポーネントは、音声クリップやビデオ・クリップを再生できます。これらのコンポーネントには、ページでの項目の表示方法を定義するための属性があります。

16.2 出力テキストおよび書式設定された出力テキストの表示

ページに出力テキストを表示するための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プロパティ・セットがある出力テキストと、ない出力テキスト

<af:outputText value="&lt;h3>output &amp; heading&lt;/h3>"/>
<af:outputText value="&lt;h3>output &amp; heading&lt;/h3>"
               escape="false"/>

注意: 絶対に必要な場合以外、escape属性はfalseに設定しないでください。outputTextコンポーネントの値がユーザー提供の値から構成される場合に、escapeをfalseに設定すると、Webサイトがクロス・サイト・スクリプティングの攻撃を受ける可能性があります。限られた数のHTMLタグを使用できるoutputFormattedコンポーネントを使用することをお薦めします。また、escape属性がfalseに設定されている場合、ほとんどすべての属性が無視されます(例: styleClassは出力されません)。

図16-1に、異なる2つのescape属性の設定をブラウザで表示した場合の結果の違いを示します。

図16-1 escape属性を使用した出力テキスト

outputFormattedコンポーネントでも、outputTextコンポーネント同様、valueプロパティに指定されたテキストが表示されますが、値にHTMLタグを含めることができます。値の一部のみを特定の方法で書式設定する場合は、outputFormattedコンポーネントの書式設定機能を使用します。コンポーネント値全体に同じスタイル設定を使用する必要がある場合は、値にHTMLを使用するかわりに、コンポーネント全体にスタイルを適用します。コンポーネントのすべてのインスタンスを特定の方法で書式設定する場合は、カスタム・スキンを作成する必要があります。インライン・スタイルの使用方法およびスキンの作成方法の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

例16-3に、値の一部のみが太字で表示されるoutputFormattedコンポーネントを示します。

例16-3 一部のテキストを太字にするoutputFormattedの使用

<af:outputFormatted value="&lt;b>This is in bold.&lt;/b> This is not bold"/>

図16-2に、コンポーネントによりテキストがどのように表示されるかを示します。

図16-2 outputFormattedコンポーネントを使用して書式設定されたテキスト

16.2.1 出力テキストの表示方法

出力テキストを表示する前に、値の一部を特別な方法で書式設定するかどうかを確認します。

出力テキストを表示する手順:

1. コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「出力テキスト」をドラッグ・アンド・ドロップします。outputFormattedコンポーネントを作成するには、コンポーネント・パレットから書式設定された出力をドラッグ・アンド・ドロップします。

   
   

   ヒント: 値の一部に特別な書式設定を適用する場合は、outputFormattedコンポーネントを使用します。

   
   
   
   

   ヒント: アクティブ・データを使用したコンポーネントのテキストの変更をサポートする場合(たとえば、データソースからプッシュされているデータによって、表示されるテキストを決定する場合)、outputTextコンポーネントのかわりに、activeOutputTextコンポーネントを使用する必要があります。コンポーネント・パレットから「出力テキスト(アクティブ)」をドラッグして、activeOutputTextコンポーネントを作成します。

   
   

2. プロパティ・インスペクタの「共通」セクションを開き、value属性を表示する値に設定します。outputFormattedコンポーネントを使用している場合は、表16-1および表16-2の説明に従い、HTML書式設定コードを使用して必要に応じてテキストを書式設定します。

   outputFormattedコンポーネントではstyleUsage属性もサポートされています。この属性値により、テキストに次に示す事前定義済のスタイルが適用されます。

   • inContextBranding

   • instruction

   • pageStamp

   図16-3に、styleUsage値によりコンポーネントにどのようなスタイルが適用されるかを示します。

   図16-3 styleUsage属性の値

   
   
   
   

   注意: styleUsageおよびstyleClass属性の両方が設定されている場合は、styleClass属性が優先されます。

   
   

16.2.2 outputFormattedコンポーネントで使用可能な書式設定コードと文字コードに関する必知事項

特定の書式設定と文字コードのみ使用できます。表16-1に、outputFormattedコンポーネントの値の書式設定に使用可能な書式設定コードをリストします。

表16-1 af:outputFormatted値で使用するための書式設定コード

フォーマット・コード	効果
<br>	改行
<hr>	水平方向の罫線
<ol>...</ol><ul>...</ul><li>...</li>	リスト: 順序付けられたリスト、順序付けられていないリストおよびリスト項目
<p>...</p>	パラグラフ
<b>...</b>	太字
<i>...</i>	イタリック
<tt>...</tt>	テレタイプまたは等幅
<big>...</big>	大きいフォント
<small>...</small>	小さいフォント
<pre>...</pre>	事前フォーマット済: 保存済の空白と改行文字で定義されたレイアウト
<span>...</span>	囲まれたテキスト全体に影響
<a>...</a>	アンカー

表16-2に、値の特殊文字を表示するための文字コードをリストします。

表16-2 af:outputFormatted値で使用するための文字コード

文字コード	文字
<	次より小さい
>	次より大きい
&	アンパサンド
®	登録商標
©	コピーライト
 	改行なしの空白
"	二重引用符

属性class、styleおよびsizeは、href構成と同様に、outputFormattedコンポーネントのvalue属性でも使用できます。その他すべてのHTMLタグは無視されます。

注意: セキュリティ上の理由から、出力値ではJavaScriptはサポートされていません。

16.3 アイコンの表示

ADF Facesには、図16-4に示されているように、メッセージ・コンポーネントで使用される一連のアイコンが用意されています。

図16-4 ADF Facesのアイコン

アイコンをメッセージ・コンポーネントの外に表示する必要がある場合は、iconコンポーネントを使用し、表示するアイコン・タイプの名前を指定します。

注意: アイコンに使用されるイメージは、アプリケーションで使用されているスキンによって決定されます。イメージを変更する場合は、カスタム・スキンを作成します。詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

ADF Facesアプリケーションでメッセージを使用すると、アイコンが自動的に追加されます。メッセージ・コンポーネントに追加する必要はありません。ただし、アイコンをメッセージ・コンポーネントの外に使用できます。アプリケーションのスキンに定義されている標準アイコンのいずれかを表示するには、iconコンポーネントを使用します。

標準アイコンを表示する手順:

1. コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「アイコン」をドラッグ・アンド・ドロップします。

2. 図16-4に示されているように、「共通」セクションを開き、Nameをアイコン機能の1つの名前に設定します。たとえば、中に白いXがある赤い丸を表示する場合は、Nameをerrorに設定します。

3. 「外観」セクションを開き、ShortDescをアイコンの代替テキストとして表示するテキストに設定します。

16.4 イメージの表示

ページにイメージを表示するには、imageコンポーネントを使用し、source属性をファイルが存在するURIに設定します。imageコンポーネントでは、イメージの詳細な説明へのリンクを提供することで、アクセシビリティの説明テキストもサポートされています。

imageコンポーネントは、リンクとして使用することも、イメージ・マップを含めることもできますが、goLinkコンポーネント内に配置する必要があります。詳細は、16.5項「リンクとしてのイメージの使用」を参照してください。

イメージを表示する手順:

1. コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「イメージ」をドラッグ・アンド・ドロップします。

   
   

   ヒント: アクティブ・データを使用したイメージのsource属性の変更をサポートする場合(たとえば、データソースからプッシュされているデータによって、表示されるイメージを決定する場合)、imageコンポーネントのかわりに、activeImageコンポーネントを使用する必要があります。コンポーネント・パレットから「イメージ(アクティブ)」をドラッグして、activeImageコンポーネントを作成します。

   
   

2. 「イメージの挿入」ダイアログで、次の設定を行います。

   • ShortDesc: イメージの代替テキストとして使用するテキストに設定します。

   • Source: イメージ・ファイルへのURIを入力します。

3. イメージのより長い説明を指定する場合は、プロパティ・インスペクタで、LongDescURL属性をその情報が存在するURIに設定します。

16.5 リンクとしてのイメージの使用

ADF Facesには、オプションのテキストとともにイメージをリンクとしてレンダリングするcommandImageLinkコンポーネントがあります。ユーザーがアイコンにマウスを置いた場合や、アイコンが押された場合または無効化された場合に、別々のアイコンを設定できます。commandImageLinkコンポーネントの詳細は、18.2項「ボタンおよびリンクのナビゲーション目的での使用」を参照してください。

指定されたURIへのナビゲーションにイメージを使用する場合は、イメージをgoLinkコンポーネントで囲み、必要な場合はイメージ・マップにリンクします。

イメージは、1つ以上の移動先へのgoLinkコンポーネントとして使用できます。単一の移動先への単純なリンクとしてイメージを使用する場合は、goLinkコンポーネントを使用してイメージを囲み、goLinkコンポーネントのdestination属性をリンクの移動先のURIに設定します。

グラフィックの異なる領域が別々のURIにナビゲートするグラフィカルなナビゲーション・メニューとしてイメージを使用している場合は、imageコンポーネントをgoLinkコンポーネントで囲み、イメージに対するサーバー側のイメージ・マップを作成します。

1つ以上のgoLinkコンポーネントとしてイメージを使用する手順:

1. コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「実行リンク」をドラッグ・アンド・ドロップします。

2. goLinkコンポーネントの子として、「イメージ」をドラッグ・アンド・ドロップします。

3. 「イメージの挿入」ダイアログで、次の設定を行います。

   • ShortDesc: イメージの代替テキストとして使用するテキストに設定します。

   • Source: イメージ・ファイルへのURIを入力します。

4. イメージの異なる領域を別々の移動先にリンクさせる場合は、次のようにします。

   • イメージのイメージ・マップを作成し、サーバーに保存します。

   • プロパティ・インスペクタで、ImageMapType属性をserverに設定します。

   • goLinkコンポーネントを選択し、プロパティ・インスペクタでDestinationをサーバー上のイメージ・マップのURIに設定します。

5. イメージ全体を単一の移動先にリンクする場合は、goLinkコンポーネントを選択し、移動先のURIをDestinationの値として入力します。

16.6 アイコンを使用したアプリケーション・ステータスの表示

ADF Facesには、サーバー・アクティビティを示すために使用できるstatusIndicatorコンポーネントが用意されています。表示される内容は、アプリケーションが使用しているスキンおよびサーバーの構成方法によって異なります。デフォルトでは、次のものが表示されます。

• アプリケーションが標準のデータ転送サービスを使用するように構成されている場合、データ転送中にアニメーション化されたスピニング・アイコンが表示されます。

  
  

  サーバーがビジーではない場合、静的アイコンが表示されます。

  
  

• アプリケーションがアクティブ・データ・サービス(ADS)を使用するように構成されている場合、ステータス・インジケータに表示される内容は、ADSがどのように構成されているかによって異なります。

  
  

  注意: ADSを使用すると、アプリケーションをアクティブ・データ・ソースにバインドできます。ADSを使用するには、Fusionテクノロジ・スタックを使用する必要があります。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「アクティブ・データ・サービスの使用」を参照してください。

  
  

  ADSは、データをモデルにプッシュするように構成するか、アプリケーションが指定の間隔でデータをポーリングするように構成できます。表16-3に、プッシュおよびポーリング・モードのサーバー状態を表示するために使用されるアイコンを示します(アイコンは実際はアニメーション化されています)。

  表16-3 ADSのステータス・インジケータで使用されるアイコン

  アイコン	プッシュ・モード	プル・モード
  	サーバーへの最初の接続試行時。	サーバーへの最初の接続試行時。
  	最初の接続が正常に確立されたとき。	最初の接続が正常に確立されたときおよび接続が再確立されたとき。
  	サーバーに再接続するための後続の試行が行われたとき。	すべてのポーリング・リクエスト前。
  	接続を確立または再確立できないとき。	構成された数のポーリング試行が失敗したとき。

  
  

ステータス・インジケータ・コンポーネントをページにドロップすると、スキンを使用して、コンポーネントで使用される実際のイメージ・ファイルを変更できます。スキンの使用の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。

ステータス・インジケータ・アイコンを使用する手順:

1. コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「ステータス・インジケータ」をドラッグ・アンド・ドロップします。

2. プロパティ・インスペクタを使用して、必要な属性を設定します。

   
   

   ヒント: 属性の設定のヘルプとして、フィールドのドロップダウン・メニューを使用して属性の説明を表示します。

   
   

16.7 ビデオ・クリップおよび音声クリップの再生

ADF Facesのmediaコンポーネントを使用すると、アプリケーション・ページにビデオ・クリップや音声クリップを含めることができます。

メディア・コントロールでは、クロス・プラットフォームのメディア表示の複雑な2つの側面(メディアの表示に最適なプレーヤの決定、およびメディア・プレーヤのサイズ変更)を処理します。

ユーザーに表示するプレーヤのサイズとともに、各クリップに適したメディア・プレーヤを指定できます。デフォルトで、ADF Facesでは、メディア・リソースのMIMEタイプを使用して、最適なメディア・プレーヤおよび使用するデフォルトの内部プレーヤ・サイズが決定されますが、コンテンツ・タイプはcontentType属性を使用して指定できます。

ユーザーが使用できるコントロール、およびクリップを自動的に再生するかどうか、連続再生するか指定された回数再生するかなど、その他のプレーヤ機能を指定できます。

16.7.1 音声クリップおよびビデオ・クリップの再生を可能にする方法

ページにmediaコンポーネントを追加したら、デフォルトで使用するメディア・プレーヤ、プレーヤと画面のサイズ、コントロールおよびクリップをリプレイするかどうかを構成できます。

アプリケーション・ページに音声クリップまたはビデオ・クリップを含める手順:

1. コンポーネント・パレットの「共通コンポーネント」パネルから、ページに「メディア」をドラッグ・アンド・ドロップします。

2. 「メディアの挿入」ダイアログで、次の属性を設定します。

   • Source: 再生するメディアへのURIを入力します。

   • StandbyText: コンテンツのロード中に表示するメッセージを入力します。

3. プロパティ・インスペクタの「共通」セクションを開き、次の設定を行います。

   • Player: クリップの再生にデフォルトで使用されるメディア・プレーヤを選択します。Real Player、Windows Media PlayerまたはApple QuickTime Playerから選択できます。

     または、ユーザー・エージェントの組込みのコンテンツ・タイプ・マッピングに基づいて、メディア・リソースの再生を開始するリンクをページに作成できます。メディア・コントロールにより、次の手順で、適切なメディア・プレーヤの選択が試行されます。

     • コンテンツのプライマリMIMEタイプがイメージの場合は、組込みのユーザー・エージェント・サポートが使用されます。

     • player属性でメディア・プレーヤが指定されていて、そのプレーヤをユーザー・エージェントで使用でき、メディア・リソースを表示できる場合は、そのプレーヤが使用されます。

     • あるプレーヤがメディア・リソースの再生に最適で、そのプレーヤをユーザー・エージェントで使用できる場合は、そのプレーヤが使用されます。

     • ユーザー・エージェントであるプレーヤが特に優先されており、そのプレーヤでメディア・リソースを再生できる場合は、そのプレーヤが使用されます。

     • ページに表示されているリンクに接続しているプレーヤが使用されます。

   • Autostart: ロード後すぐにクリップの再生を開始する場合はTrueに設定します。

   • ContentType: 再生するメディアのMIMEタイプを入力します。これは、使用するプレーヤ、コントロールの構成、および表示サイズの決定に使用されます。

4. プロパティ・インスペクタの「外観」セクションを開き、次の設定を行います。

   • Controls: プレーヤに表示するコントロールの量とタイプを選択します。

     使用可能なコントロールのセットはプレーヤによって異なるため、実際のコントロールをリストするのではなく、一般的な方法で表示するコントロールのセットを定義します。たとえば、使用可能なすべてのコントロールや、最も一般的に使用されるコントロールをプレーヤに表示することも、コントロールを表示しないこともできます。

     たとえば、例16-4では、mediaコンポーネントにall設定が使用されています。

     例16-4 メディア・プレーヤのコントロール

     <af:media source="/images/myvideo.wmv" controls="all"/>
     

     図16-5に、プレーヤがユーザーに対してどのように表示されるかを示します。

     図16-5 すべてのコントロールが表示されたメディア・プレーヤ

     
     

     次の値が有効です。

     • All: メディア・プレーヤでメディアを再生するための使用可能なすべてのコントロールが表示されます。

       この設定を使用すると、使用するメディア・プレーヤによっては、大量の追加領域が必要になります。

     • Minimal: メディア・プレーヤでメディアを再生するための最小限のコントロールのセットが表示されます。

       この値を使用すると、ユーザーが最も重要なメディア再生コントロールを制御できる一方で、ユーザー・エージェントにおける最低限の追加の領域が占有されます。

     • None: メディア・プレーヤにコントロールは表示されず、ポップアップ・メニューなど、その他の方法でコントロールにアクセスすることもできません。

       通常、この設定は、メディアの再生に対するユーザーの制御が許可されていないkioskタイプのアプリケーションにのみ使用します。この設定は、通常、再生が自動的に開始される設定、および連続して再生される設定とともに使用されます。

     • NoneVisible: メディア・プレーヤにコントロールは表示されませんが、ポップアップ・メニューなど、かわりの方法でコントロールにアクセスできます。

       通常、この値は、メディアの再生に対するユーザーの制御は許可されているが、推奨されていないアプリケーションにのみ使用します。none設定同様、この設定は、再生が自動的に開始される設定、および連続して再生される設定とともに使用されます。

     • Typical: メディア・プレーヤでメディアを再生するための一般的なコントロールのセットが表示されます。

       この値はデフォルトで、ユーザー・エージェントで過度に余分な領域を占有せずに、ユーザーは最も一般的なメディア再生コントロールを制御できるようになります。

   • WidthおよびHeight: ピクセル単位で完全な表示(メディアのコンテンツ領域も含むプレーヤ領域全体)のサイズを定義します。

     
     

     ヒント: widthおよびheight属性を使用すると、様々なプレーヤおよびプレーヤ・コントロール構成で使用する適切な幅と高さを定義するのが困難なため、予期しない結果が発生することがあります。完全な表示のサイズを定義するかわりに、innerWidthおよびinnerHeight属性を使用して、メディア・コンテンツ領域のサイズを定義できます。

     
     

   • InnerWidthおよびInnerHeight: メディア・コンテンツ領域のみのサイズをピクセル単位で定義します。クリップのプレーヤ領域に割り当てられた領域を制御するため、これが推奨のスキームです。

     
     

     ヒント: メディア・コントロールのサイズを指定しない場合は、メディア・リソースのコンテンツ・タイプで指定されたデフォルトの内部サイズが使用されます。これは音声コンテンツでは問題ありませんが、ビデオ・コンテンツでは、コンテンツの一部が表示されない原因や必要以上に領域を占有する原因になります。 両方のスキームでheightやinnerHeightなどの大きさを指定した場合は、height属性で定義された全体のサイズが使用されます。同様に、widthとinnerWidthの両方を指定すると、width属性が使用されます。

     
     

5. 「動作」セクションを開き、Autostartを設定します。デフォルトでは、表示されたコントロールを使用してユーザーが開始するまで、クリップの再生は開始されません。autostart属性をtrueに設定することで、クリップのロードと同時に再生を開始することを指定できます。

   PlayCountを、メディアを再生する回数に設定します。デフォルトでは、開始されたらクリップは一度のみ再生されます。コントロールが使用可能な場合には、ユーザーはクリップを再度再生できます。ただし、playCount属性に値を設定することで、クリップを固定回数再生することや、連続して繰り返すことを指定できます。playCount属性を0に設定すると、クリップは連続して再生されます。この属性をその他の数値に設定すると、クリップは指定された回数再生されます。

例16-5に、ページのソースのaf:mediaコンポーネントを示します。このコンポーネントでは、ロードされるとすぐにビデオ・クリップの再生が開始され、ユーザーが停止するまでクリップの再生を継続します。プレーヤには、使用可能なコントロールがすべて表示されます。

例16-5 ビデオ・クリップを連続再生するmediaコンポーネント

<af:media source="/components/images/seattle.wmv" playCount="0"
          autostart="true" controls="all"
          innerHeight="112" innerWidth="260"
          shortDesc="My Video Clip" 
          standbyText="My video clip is loading"/>