outputText
、outputFormatted
、image
、icon
およびstatusIndicator
の各コンポーネントを使用して出力テキスト、イメージ、およびアイコンを表示する方法と、media
コンポーネントを使用してユーザーによるビデオや音声クリップの再生を可能にする方法を説明します。
この章の内容は次のとおりです。
ADF Facesには、出力テキスト、イメージ、アイコンを書式設定できるコンポーネントがあり、mediaコンポーネントを使用するとユーザーがビデオ・クリップや音声クリップを再生できます。
ADF Facesには、テキスト、アイコン、イメージを表示するためのコンポーネント、およびJSFページで音声クリップやビデオ・クリップを再生するためのコンポーネントが用意されています。
outputText
コンポーネントは、読取り専用テキストを表示するために、他の多くのコンポーネントの子として使用できます。テキストを書式設定する必要がある場合は、outputFormatted
コンポーネントを使用できます。たとえば、図18-2に示すように、説明テキストで太字書式のテキストを使用することが必要な場合があります。
図18-2 説明テキストでのoutputFormattedコンポーネントの使用
多くのADF Facesコンポーネントには、アイコンを関連付けできます。たとえば、メニューでは、各メニュー項目にアイコンを関連付けできます。それぞれのアイコンに使用するイメージは、そのメニュー項目コンポーネント自体のicon
属性の値として識別します。アイコンがサポートされているコンポーネントへのアイコン追加の詳細と手順は、それぞれのコンポーネントの章で説明されています。コンポーネント内でアイコンを提供するだけでなく、ADF Facesにはメッセージを表示する際に使用されるアイコンもあります。これらのアイコンは、メッセージの外でも使用できます。
ページにイメージを表示するには、image
コンポーネントを使用します。イメージを使用して、リンク(イメージ・マップを含む)として使用することも、サーバーのステータスを表すために使用することもできます。
media
コンポーネントは、オーディオ・ビジュアル・コンテンツ(通知やタスク実施の指示など)を表示するのに使用します。media
コンポーネントのすべてのコントロールを表示するか、一般的なコントロールまたは最小限のコントロールのみを表示するか、表示可能なコントロールなし(たとえば、コントロールはポップアップ・メニューからのみ可能)にするかを構成できます。コントロールなしにすることもできます。通常は、クリップが非常に短くコントロールが不要な場合は、コントロールを表示しません。
media
コンポーネントがページのプライマリ・コンポーネントのときは、一般的にすべてのコントロールが表示されます(図18-3を参照)。
図18-3 プレーヤの下部にすべてのコントロールを表示
出力コンポーネントを実装する前に、他のADF Faces機能を理解することが役立つ場合があります。また、ページにこれらのコンポーネントを追加した後で、ドラッグ・アンド・ドロップやアクセシビリティなどの機能を追加することが必要になる場合があります。出力コンポーネントで使用できる他の機能へのリンクを次に示します。
テキストでのパラメータの使用: コンポーネントに表示されるテキストに、実行時に解決されるパラメータを含める場合は、ADF Faces EL書式タグを使用できます。「EL書式タグの使用方法」を参照してください。
変換: 場合によっては、値を表示するために文字列に変換することが必要です。変換の詳細は、「入力の検証および変換」を参照してください。
ドラッグ・アンド・ドロップ: ユーザーが出力コンポーネントまたは出力コンポーネントの値をページ上の別の領域にドラッグ・アンド・ドロップできるようにページを構成できます。「ドラッグ・アンド・ドロップ機能の追加」を参照してください。
ローカライゼーション: 文字列を値として受け取る属性に値を入力するかわりに、プロパティ・ファイルを使用できます。これらのファイルにより、これらの文字列の翻訳を管理できます。「ページの国際化およびローカライズ」を参照してください。
スキン: スキンを変更することで、出力コンポーネントのルック・アンド・フィールを変更できます。「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ADF Facesには、書式設定されていない、または部分的に書式設定されているテキストをユーザーに表示できるoutputTextコンポーネントとoutputFormattedコンポーネントが用意されています。
ページに出力テキストを表示するためのADF Facesコンポーネントは2つあります。outputText
は書式設定されていないテキストを表示し、outputFormatted
はテキストを表示して限られた範囲の書式設定オプションを設定できます。
明示的に指定された、またはリソース・バンドルまたはBeanからの単純テキストを表示するには、outputText
コンポーネントを使用します。value
属性の値として表示するテキストを定義します。次に例を示します。
<af:outputText value="The submitted value was: "/>
次の例に、2つのoutputText
コンポーネントを示します。1つ目では表示されるテキストが明示的に指定され、2つ目ではマネージドBeanからテキストが取得され、表示可能なテキスト値に値が変換されます(変換の詳細は、「変換の追加」を参照してください)。
<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の特殊文字をエスケープするかどうかを指定できます。デフォルトでは、特殊文字はエスケープされます。
次の例に、2つのoutputText
コンポーネントを示します。1つ目ではescape
属性にデフォルト値true
が使用され、2つ目では属性がfalse
に設定されています。
<af:outputText value="<h3>output & heading</h3>"/> <af:outputText value="<h3>output & heading</h3>" escape="false"/>
注意:
絶対に必要な場合以外、escape
属性はfalse
に設定しないでください。escapeをfalse
にすると、outputText
コンポーネントの値がユーザー提供の値から構成される場合、Webサイトがクロス・サイト・スクリプティングの攻撃を受ける可能性があります。限られた数のHTMLタグを使用できるoutputFormatted
コンポーネントを使用することをお薦めします。また、escape
属性がfalse
に設定されている場合、ほとんどすべての属性が無視されます(例: styleClass
は出力されません)。
図18-4に、escape
属性の2とおりの設定をブラウザで表示したときの結果の違いを示します。
図18-4 escape属性を使用した出力テキスト
outputText
コンポーネントのように、outputFormatted
コンポーネントもvalue
属性で指定されたテキストを表示しますが、その値にはHTMLタグを含めることができます。値の一部のみを特定の方法で書式設定する場合は、outputFormatted
コンポーネントの書式設定機能を使用します。コンポーネント値全体に同じスタイル設定を使用する必要がある場合は、値にHTMLを使用するかわりに、コンポーネント全体にスタイルを適用します。コンポーネントのすべてのインスタンスを特定の方法で書式設定する場合は、カスタム・スキンを作成する必要があります。インライン・スタイルの使用方法およびスキンの作成方法の詳細は、「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
次の例に、値の一部のみが太字で表示されるoutputFormatted
コンポーネントを示します(JSPXページの<
などのエンティティを使用する必要があります)。
<af:outputFormatted value="<b>This is in bold.</b> This is not bold"/>
<af:outputFormatted value="<b>This is in bold.</b> This is not bold"/>
図18-5に、コンポーネントによりテキストがどのように表示されるかを示します。
図18-5 outputFormattedコンポーネントを使用して書式設定されたテキスト
出力テキストを表示する前に、値の一部を特別な方法で書式設定するかどうかを確認します。その場合は、outputFormatted
コンポーネントを使用します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「出力テキストおよび書式設定された出力テキストの表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「出力コンポーネントの追加機能」を参照してください。
出力テキストを表示する手順:
特定の書式設定と文字コードのみ使用できます。表18-1に、outputFormatted
コンポーネントの値の書式設定に使用可能な書式設定コードをリストします。
表18-1 af:outputFormatted値で使用するための書式設定コード
フォーマット・コード | 効果 |
---|---|
|
改行 |
|
水平方向の罫線 |
|
リスト: 順序付けられたリスト、順序付けられていないリストおよびリスト項目 |
|
見出し: <h1>が最も重要な見出しで、以降、重要度が低くなり、<h6>が最も重要度が低い |
|
パラグラフ |
|
太字 |
|
イタリック |
|
テレタイプまたは等幅 |
|
大きいフォント |
|
小さいフォント |
|
事前フォーマット済: 保存済の空白と改行文字で定義されたレイアウト |
|
囲まれたテキスト全体に影響 |
|
アンカー |
表18-2に、値の特殊文字を表示するための文字コードをリストします。
表18-2 af:outputFormatted値で使用するための文字コード
文字コード | 文字 |
---|---|
|
次より小さい |
|
次より大きい |
|
アンパサンド |
|
登録商標 |
|
コピーライト |
|
改行なしの空白 |
|
二重引用符 |
属性class
、style
およびsize
は、href
構成と同様に、outputFormatted
コンポーネントのvalue
属性でも使用できます。その他すべてのHTMLタグは無視されます。
注意:
セキュリティ上の理由から、出力値ではJavaScriptはサポートされていません。
注意:
他のコンポーネント(panelHeader
など)も<h1>
タグから<h6>
タグを表示できるので、レンダリングされたHTMLをチェックして、outputFormatted
コンポーネント内のハードコード化された見出しタグが、他のコンポーネントで追加されたタグに対して相対的な順序で表示されることを確認します。
ADF Facesには、メッセージ・コンポーネントですぐに使用できるアイコンが用意されています。これらのアイコンは、メッセージ・コンポーネントの外部でも使用できます。
ADF Facesには、図18-7に示されているように、メッセージ・コンポーネントで使用される一連のアイコンが用意されています。
アイコンをmessage
コンポーネントの外に表示する場合は、icon
コンポーネントを使用し、表示するアイコン・タイプの名前を指定します。
注意:
アイコンに使用されるイメージは、アプリケーションで使用されているスキンによって決定されます。イメージを変更する場合は、カスタム・スキンを作成します。「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
ADF Facesアプリケーションでメッセージを使用すると、アイコンが自動的に追加されます。message
コンポーネントに追加する必要はありません。ただし、アイコンをmessage
コンポーネントの外で使用することもできます。アプリケーションのスキンに定義されている標準アイコンのいずれかを表示するには、icon
コンポーネントを使用します。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「アイコンの表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「出力コンポーネントの追加機能」を参照してください。
標準アイコンを表示する手順:
error
に設定します。ADF Faces imageコンポーネントを使用すると、ローカルに格納されているイメージを表示できます。source属性を使用して場所を指定する必要があります。
ページにイメージを表示するには、image
コンポーネントを使用し、source
属性をファイルが存在するURIに設定します。image
コンポーネントでは、イメージの詳細な説明へのリンクを提供することで、アクセシビリティの説明テキストもサポートされています。
image
コンポーネントは、リンクとして使用することもでき、イメージ・マップを入れることができますが、その場合はlink
コンポーネント内に配置する必要があります。「リンクとしてのイメージの使用」を参照してください。
image
コンポーネントを使用してイメージを表示します。
始める前に:
他のADF Faces機能を使用して追加できる機能について理解しておくと役立つ可能性があります。「出力コンポーネントの追加機能」を参照してください。
イメージを表示する手順:
ADF Facesのlinkコンポーネントを使用すると、イメージを1つ以上のターゲットへのリンクとしてレンダリングできます。こうすると、ユーザーがそのイメージをクリックしてリンク先に移動できます。
ADF Facesのlink
コンポーネントを利用すると、イメージをリンクとしてレンダリングできます。必要に応じてテキストも表示できます。ユーザーがアイコンにマウスを置いた場合や、アイコンが押された場合または無効化された場合に、別々のアイコンを設定できます。link
コンポーネントの詳細は、「ボタンおよびリンクのナビゲーション目的での使用」を参照してください。
イメージをlink
コンポーネントとして使用して、1つ以上の移動先にリンクすることができます。イメージを単一の移動先への単純なリンクとして使用する場合は、link
コンポーネントを使用してその中にイメージを入れ、link
コンポーネントのdestination
属性をリンクの移動先のURIに設定します。
イメージをグラフィカルなナビゲーション・メニューとして使用して、グラフィックの領域ごとに別のURIに移動するように設定するには、image
コンポーネントをlink
コンポーネントの中に入れて、イメージに対するサーバー側イメージ・マップを作成します。
link
コンポーネントを使用して、イメージをリンクとしてレンダリングします。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「リンクとしてのイメージの使用」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「出力コンポーネントの追加機能」を参照してください。
イメージを1つ以上のlinkコンポーネントとして使用する手順:
ADF Faces statusIndicatorコンポーネントを使用すると、アニメーション付きのアイコンを使用してサーバー・ステータスをユーザーに表示できます。
ADF FacesにはstatusIndicator
コンポーネントがあり、サーバー・アクティビティを示すために使用できます。表示される内容は、アプリケーションが使用しているスキンおよびサーバーの構成方法によって異なります。デフォルトでは、次のものが表示されます。
アプリケーションが標準のデータ転送サービスを使用するように構成されている場合、データ転送中にアニメーション化されたスピニング・アイコンが表示されます。
サーバーがビジーではない場合、静的アイコンが表示されます。
アプリケーションがアクティブ・データ・サービス(ADS)を使用するように構成されている場合、ステータス・インジケータに表示される内容は、ADSがどのように構成されているかによって異なります。
注意:
ADSを使用すると、アプリケーションをアクティブ・データ・ソースにバインドできます。ADSを使用するには、Fusionテクノロジ・スタックを使用する必要があります。『Application Development FrameworkによるFusion Webアプリケーションの開発』で、アクティブ・データ・サービスの使用方法に関する項を参照してください。
ADSは、データをモデルにプッシュするように構成するか、アプリケーションが指定の間隔でデータをポーリングするように構成できます。表18-3に、プッシュおよびポーリング・モードのサーバー状態を表示するために使用されるアイコンを示します(アイコンは実際はアニメーション化されています)。
表18-3 ADSのステータス・インジケータで使用されるアイコン
アイコン | プッシュ・モード | プル・モード |
---|---|---|
サーバーへの最初の接続試行時。 |
サーバーへの最初の接続試行時。 |
|
最初の接続が正常に確立されたとき。 |
最初の接続が正常に確立されたときおよび接続が再確立されたとき。 |
|
サーバーに再接続するための後続の試行が行われたとき。 |
すべてのポーリング・リクエスト前。 |
|
接続を確立または再確立できないとき。 |
構成された数のポーリング試行が失敗したとき。 |
statusIndicator
コンポーネントをページにドロップした後で、コンポーネントで使用される実際のイメージ・ファイルを、スキンを使用して変更できます。スキンの使用の詳細は、「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「アイコンを使用したアプリケーション・ステータスの表示」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「出力コンポーネントの追加機能」を参照してください。
ステータス・インジケータ・アイコンを使用する手順:
「コンポーネント」ウィンドウの「一般コントロール」パネルから、「ステータス・インジケータ」をページにドラッグ・アンド・ドロップします。
「プロパティ」ウィンドウを使用して必要な属性を設定します。
ヒント
属性の設定のヘルプとして、フィールドのドロップダウン・メニューを使用して属性の説明を表示します。
ADF Faces mediaコンポーネントでは、音声クリップとビデオ・クリップをアプリケーション・ページに追加することができます。ユーザーがクリップを再生するときに選択できる優先的なメディア・プレーヤも指定できます。
ADF Facesのmedia
コンポーネントを使用すると、アプリケーション・ページにビデオ・クリップや音声クリップを含めることができます。
メディア・コントロールでは、クロス・プラットフォームのメディア表示の複雑な2つの側面(メディアの表示に最適なプレーヤの決定、およびメディア・プレーヤのサイズ変更)を処理します。
ユーザーに表示するプレーヤのサイズとともに、各クリップに適したメディア・プレーヤを指定できます。デフォルトで、ADF Facesでは、メディア・リソースのMIMEタイプを使用して、最適なメディア・プレーヤおよび使用するデフォルトの内部プレーヤ・サイズが決定されますが、コンテンツ・タイプはcontentType
属性を使用して指定できます。
ユーザーが使用できるコントロール、およびクリップを自動的に再生するかどうか、連続再生するか指定された回数再生するかなど、その他のプレーヤ機能を指定できます。
media
コンポーネントをページに追加した後で、デフォルトで使用するメディア・プレーヤ、プレーヤと画面のサイズ、およびコントロールを構成します。クリップを再生するかどうかも構成できます。
始める前に:
属性が機能に与える影響に関する知識が役立つ場合があります。「ビデオ・クリップおよび音声クリップの再生」を参照してください。
他のADF Faces機能を使用して追加できる機能について理解することが役立つ場合もあります。「出力コンポーネントの追加機能」を参照してください。
アプリケーション・ページに音声クリップまたはビデオ・クリップを含める手順:
次の例に、ページのソースのaf: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"/>