ポップアップバルーンコンポーネントの使用方法

画面内ポップアップコンポーネントは、情報が取得されると表示される、非表示の画像または表で構成されています。ボーダー画像でテキストを保持する表を囲み、見栄えを良くします。画面内ポップアップの内容は、JSF タグの本体を使って設定できます。 ポップアップ用のタグライブラリには、<%@taglib prefix="ui" uri="http://java.sun.com/blueprints/ui" %> 宣言を使ってアクセスできます。

ポップアップ JSF コンポーネントの使用例を次に示します。

<ui:PopupTag id="pop1" xmlHttpRequestURL="DetailServlet?animalcode="
elementNamePairs="name=value1,description=value2,image=imageId">

<img id="spaceImage" height="10px" width="16px" src="images/spacer.gif" align="left">

<table border="1" width="260px" bgcolor="#ffffff" cellpadding="5" cellspacing="5">
<tr>
<th align="right"><span id="title1">Breed:</span></th>
<td><span id="value1">value1</span></td>
</tr>
<tr>
<th align="right" valign="top"><span id="title2">Desription:</span></th>
<td><span id="value2">Value2</span></td>
</tr>
<tr>
<td colspan="2" align="center"><img name="image" id="imageId" src=""
width="120" height="90" alt="[Loading Image...]" border="2"/></td>
</tr>
</table>
</
ui:PopupTag>

JSP タグ属性

前述の例では、コンポーネントタグ名は「PopupTag」で、これには次の属性があります。



「PopupTag」のテキスト部分 (青色の部分) は、実際にはポップアップに表示されるマークアップです。開発者は現在、表のサイズが背景画像より大きくならないようにするために、表のサイズを設定する必要があり、これは当時もっとも柔軟な代替策でした。 画像の背景の中央に表を配置するために、JSF コンポーネントに透明な GIF が提供されていて、表の配置にこの GIF を使用しすると、表が中央に配置されているように見えます。 間隔を広げるか、狭めるには、画像の width 属性を使用します。 ボーダーの背景画像の作成には、かなりの時間が必要になります。上下、中央の画像の位置を揃えて、ポップアップが表示される 4 つの各象限からの矢印と釣り合いをとる必要があるためです。 この導出は、ブラウザウィンドウ内での画面のスクロール方法に依存します。

ポップアップに表示されるマークアップは、JSF または HTML のどちらの形式でもかまいません。 ポップアップの中央画像に使用される背景画像は「広がり」ますが、配置アルゴリズムが設定されて 5 〜 10 行のデータでもっとも効果的に機能するため、ポップアップ表示データは可変長にできます。 呼び出し元コンポーネントは JSF コンポーネントまたはプレーン HTML のどちらでもかまいません。これは、呼び出し先ポップアップの名前をパラメータとして使用する JavaScript 関数呼び出しを介してリンクが行われるためです。 次のテキストの span は、上記から「pop1」という名前の PopupTag コンポーネントを呼び出し、「xmlHttpRequestURL」属性内の URL に「LAB」付加しています。


<span onmouseover="show('pop1', event, 'LAB')" onmouseout="hide('pop1')">Labrador Retriever</span>

ポップアップの位置はカーソルの位置に依存します。ポップアップが表示される象限は、画面のスクロールのされ方を考慮しながら、ブラウザウィンドウ内のカーソル位置に基づいて導き出されます。このアルゴリズムは、表示可能な領域の外にはみ出して表示されるポップアップをできる限り少なくするために改良されました。


注: コンポーネントへのさまざまな HTML の文書型定義 (DOCTYPE) の影響に注意してください。 ポップアップバルーンの場合は、いくつかのブラウザで http://www.w3.org/TR/html4/loose.dtd DOCTYPE が配置アルゴリズムに影響して、問題になりました。




© Sun Microsystems 2006. Java BluePrints Solutions Catalog の内容はすべて著作権保護されており、サン・マイクロシステムズ社の書面による許可なしに他の著作物に発表することを禁止します。