| Oracle® Fusion Middleware WebCenter Sites開発者ガイド 11gリリース1 (11.1.1.8.0) E49681-03 |
|
 前 |
 次 |
この章では、Webサイトを実装する際のテンプレートとラッパーの標準的な使用方法について説明します。
この章には次の項が含まれます。
この項では、3つのタイプのテンプレートの相違点と、実際に実装された場合のそれぞれの使用方法を検討します。
レイアウト・テンプレートは、「使用」フィールドが「エレメントはレイアウトとして使用されます。」に設定されているテンプレート・アセットです。レイアウト・テンプレ－トはタイプ付きまたはタイプなしになります(タイプ付きアセットとタイプなしアセットの詳細は、第23.4項「テンプレート・アセットの作成」を参照)。
レイアウト・テンプレートの3つの主要特性は、次のとおりです。
この項ではそれぞれの特性を詳述し、複数のセクションにわたって使用するユースケース・シナリオを提供して、それぞれの概念を示します。また、「ユースケース1: 記事アセット用にレイアウト・テンプレートを作成」する方法も説明しています。
レイアウト・テンプレートのページ名が指定されると、Satelliteサーブレットをコールし、コンテンツのアセット・タイプ(c)およびアセットID (cid)と一緒にページ名を渡すことによってWebページが取得され、レンダリングが行われます。
http://localhost:8080/cs/Satellite?pagename= <template_pagename>&c=Article&cid=1234567
指定されたテンプレートに対応するページ名を検索するには、テンプレート・アセットを調査し、「サイト・エントリ」フィールドのSiteCatalog Pagename列を参照します。次のスクリーン・キャプチャでは、ページ名はavisports/HelloLayoutです。
すべてのコンテンツ・アセットにはテンプレート・メタデータがあります。このメタデータは、「コンテンツ」タブを選択して表示できます。このフィールドでは、テンプレート名が格納されます。可能な値として、アセット・タイプやサブタイプに適用可能なすべてのレイアウト・テンプレートがあります。
WebCenter Sitesはどのようにテンプレート・フィールドを使用するのでしょうか。基本的に、ContributorインタフェースのWebモードでアセットを調査または編集する際、WebCenter Sitesは割り当てられたレイアウト・テンプレートをデフォルトのテンプレートとして使用し、アセットをレンダリングします(これは、単にアセットをプレビューするのみの場合でもあります)。つまり、Webモードでアセットを使用する際に使用できるのはレイアウト・テンプレートのみです。プレビューする場合、レイアウト・テンプレートは必要ありません。詳細は、第23.7.5項「テンプレート・アセット、CSElementアセットおよびSiteEntryアセットのプレビュー」を参照してください。
Webモードを使用している場合は、(ツールバーまたはメニューバーから)レイアウト変更機能を使用し、テンプレート・ピッカーを使用してレイアウト・テンプレートをビジュアルに選択することによって、デフォルトのレイアウト・テンプレートを割り当てることもできます。いずれの場合でも、アセットのテンプレート・フィールドの値は変更されます。
標準のWebページは、ドキュメント内に区画(通常は次の図に示すように、ヘッダー、フッター、サイド・バーおよびメイン領域)を定義するために<DIV>エレメントを使用して、HTMLコードで作成されます。
ヘッダー、フッター、サイド・バーおよびメイン領域を持つ標準的なWebページを示す次の例では、avisportsサンプル・サイトで使用するHTML構造が使用されています。
<!DOCTYPE html>
<html>
<head>
</head>
<body class="inner">
<div id="main">
<div id="header">
<!--contains the top menu bar -->
</div>
<div id="container">
<div class="content">
<!--contains the main area -->
</div>
<div class="side-bar">
<!--contains the side nav bar -->
</div>
</div>
<div id="footer">
<!--contains the footer -->
</div>
</div>
</body>
</html>
実際のJSPページには、タグ・ライブラリ・ディレクティブ、開始と終了の<cs:ftcs>タグ、およびキャッシュ・マネージャが使用する<render:logdep>タグが含まれています。詳細は、第4章「Oracle WebCenter Sitesを使用したプログラミング」を参照してください。
<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %>
<%@ taglib prefix="render" uri="futuretense_cs/render.tld" %>
<cs:ftcs>
<!DOCTYPE html>
<%
// The render:logdep tag is mandatory. It allows the cache manager
// to automatically flush any page/pagelet generated using this
// template ("tid" is automatically populated with the Template
// asset id)
%>
<render:logdep cid='<%=ics.GetVar("tid")%>' c="Template" />
<html>
<head>
</head>
<body class="inner">
<div id="main">
<div id="header">
<!--contains the top menu bar -->
</div>
<div id="container">
<div class="content">
<!--contains the main area -->
</div>
<div class="side-bar">
<!--contains the side nav bar -->
</div>
</div>
<div id="footer">
<!--contains the footer -->
</div>
</div>
</body>
</html>
</cs:ftcs>
ドキュメントは、<cs:ftcs>タグで囲む必要があります。このタグは、WebCenter Sitesのコンテキストを作成して、開始と終了の<cs:ftcs>タグの内側に含まれているコードにWebCenter Sitesのタグが格納されることを、WebCenter Sitesに通知します。WebCenter Sitesは、これらのタグの外側にあるコードは一切認識しません。<cs:ftcs>タグおよび<render:logdep>タグの詳細は、第4.5項「WebCenter Sitesのタグ」を参照してください。
この項では、記事アセット用にレイアウト・テンプレートを定義します。
EclipseをWebCenter Sites Developer Toolsプラグインと同時に使用して、次の特性を備えたテンプレートをavisportsサンプル・サイトに新規作成します。
サイト: avisports
名前: HelloArticleLayout
アセット・タイプ: AVIArticle
サブタイプ: Article
エレメントの使用: エレメントがレイアウトとして使用されます。
エレメント・タイプ: JSP
ルート・エレメント: AVIArticle/HelloArticleLayout
ストレージ・パス: AVIArticle/HelloArticleLayout.jsp
次のJSPコードを使用します。
標準のavisportsヘッダーとフッター、およびヘッド・セクションをレンダリングするために、avisports用にすでに作成済のコンポーネントをいくつか再使用していることに注意してください。これにより、avisportsスタイルシートをインポートできるようになります。
<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %>
<%@ taglib prefix="render" uri="futuretense_cs/render.tld" %>
<cs:ftcs>
<!DOCTYPE html>
<render:logdep cid='<%=ics.GetVar("tid")%>' c="Template" />
<html>
<head>
<!--inserts the standard avisports head -->
<render:calltemplate
tname="/Head"
args="c,cid"
style="element" />
</head>
<body class="inner">
<div id="main">
<div id="header">
<!--inserts the avisports navbar -->
<render:satellitepage
pagename="avisports/navbar" />
</div>
<div id="container" style="height: 350px">
<div class="content">
<!--contains the main area -->
</div>
<div class="side-bar" style="height: 300px">
<!--contains the side nav bar -->
</div>
</div>
<div id="footer">
<!--inserts the avisports footer -->
<render:callelement
elementname="avisports/footer" />
</div>
</div>
</body>
</html>
</cs:ftcs>
新しいタブで任意の記事アセットを開きます。
HelloArticleLayoutテンプレートをアセットに割り当てます。次のようなWebページが表示されます。
コンテナとサイド・バーの<DIV>エレメントに一時的なスタイルをいくつか追加して、これらが表示されるようにしています。実際のコンテンツが含まれたときには、これらを削除します。
レイアウト・テンプレートにコードを追加して、実際のコンテンツがレンダリングされるようにします。このコードは、ヘッドライン、投稿日、関連イメージと本文の各フィールドをレンダリングします。属性値の詳細は、第11章「データ・デザイン: アセット・モデル」を参照してください。
<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld"%>
<%@ taglib prefix="ics" uri="futuretense_cs/ics.tld"%>
<%@ taglib prefix="render" uri="futuretense_cs/render.tld"%>
<%@ taglib prefix="assetset" uri="futuretense_cs/assetset.tld"%>
<%@ taglib prefix="dateformat" uri="futuretense_cs/dateformat.tld"%>
<cs:ftcs>
<!DOCTYPE html>
<render:logdep
cid='<%=ics.GetVar("tid")%>'
c="Template"/>
<%
// load article content
%>
<assetset:setasset
name="article"
type='<%=ics.GetVar("c") %>'
id='<%=ics.GetVar("cid") %>' />
<%
// fetch the headline, relatedImage, and postDate attributes
// from the database
%>
<assetset:getmultiplevalues
name="article"
prefix="article">
<assetset:sortlistentry
attributename="headline"
attributetypename="ContentAttribute" />
<assetset:sortlistentry
attributename="relatedImage"
attributetypename="ContentAttribute" />
<assetset:sortlistentry
attributename="postDate"
attributetypename="ContentAttribute" />
</assetset:getmultiplevalues>
<%
// fetch the body attribute
// body has to be fetched separately, since it is a 'text'
// attribute, and the getmultiplevalues tag does not support
// 'text' attributes
%>
<assetset:getattributevalues
name="article"
listvarname="bodyList"
attribute="body"
typename="ContentAttribute" />
<%
// read the related AVIImage asset id
%>
<ics:listget
listname="article:relatedImage"
fieldname="value"
output="imageId" />
<%
// read the date value and format it
%>
<ics:listget
listname="article:postDate"
fieldname="value"
output="postDate" />
<dateformat:create
name="df"
datestyle="long" />
<dateformat:getdate
name="df"
varname="formattedDate"
valuetype="jdbcdate"
value='<%=ics.GetVar("postDate") %>' />
<html>
<head>
<!--inserts the standard avisports head -->
<render:calltemplate
tname="/Head"
args="c,cid"
style="element" />
</head>
<body class="inner">
<div id="main">
<div id="header">
<render:satellitepage
pagename="avisports/navbar" />
</div>
<div id="container">
<div class="content">
<div class="top-section section-title">
<h1>
<ics:listget
listname="article:headline"
fieldname="value" />
</h1>
<span class="date">
<ics:getvar name="formattedDate" />
</span>
</div>
<div class="article post">
<render:getbloburl
outstr="imageURL"
c="AVIImage"
cid='<%=ics.GetVar("imageId")%>'
field="largeThumbnail" />
<img class="photo left"
src='<%=ics.GetVar("imageURL")%>' />
<render:stream list="bodyList" column="value" />
</div>
</div>
<div class="side-bar" style="height: 300px">
<!--contains the side nav bar -->
</div>
</div>
<div id="footer">
<render:callelement elementname="avisports/footer" />
</div>
</div>
</body>
</html>
</cs:ftcs>
HelloArticleLayoutを使用してContributorインタフェースのWebモードでアセットを表示すると、次に示すような記事詳細を載せたWebページがレンダリングされます。サイド・バーは意図的に空にしてあります。
ページレット・テンプレートは「使用」フィールドが「エレメント」に設定されているテンプレート・アセットで、HTMLページ内で使用されます。
ページレット・テンプレートの特性は、次のとおりです。
次の項では、それぞれの特性を詳述し、ユースケース例を引き続き拡張しています。また、「ユースケース2: ページレット・テンプレートの使用」についても説明しています。
ページレット・テンプレートにはページ名がありますが、WCS URLを使用してブラウザから直接ページレット・テンプレートにアクセスしようとすると、403 HTTPエラー・コード(アクセス拒否)が表示されます。
アセットのテンプレート・フィールドで使用できるのはレイアウト・テンプレートだけです。つまり、ページレット・テンプレートを使用してこれらのアセットを直接プレビューすることはできません。ただし、プレビュー・テンプレートを設定して、編集ユーザーがページレット・テンプレートを簡単にプレビューできる方法を提供することは可能です(詳細は、第24.1.3項「ページ・テンプレート」を参照)。
ページ・テンプレートは、Webページ全体ではなく、Webページ・フラグメントをレンダリングします。ページレット・テンプレートで再使用可能なページ・フラグメントをレンダリングすることが理想的です。たとえば、ページレット・テンプレートで次のような記事概要ブロックをレンダリングできます。
その後でレイアウト・テンプレートを使用して複数のページ・フラグメントをアセンブルし、完全なWebページを作成できます。再利用性を最大限に活かすために、ルック・アンド・フィールの観点から中立的なフラグメントをページレット・テンプレートで提供します。その際に、CSSスタイルシート・ルールを使用して見栄えを効果的に制御します(特定のフラグメントをどの位置に使用するかに基づき、明確なスタイルシート・ルールを適用するのみでレンダリングは異なってきます)。
これまでの手順については、第24.1.1.4項「ユースケース1: 記事アセット用にレイアウト・テンプレートを作成」を参照してください。
記事詳細をレンダリングするコードを複数のコンテキストで再使用する場合は、コードをレイアウト・テンプレートから抽出し、ページレット・テンプレートに変換することをお薦めします。
次の特性を備えたテンプレート・アセットを作成してみましょう。
EclipseをWebCenter Sites Developer Toolsプラグインと同時に使用して、次の特性を備えたテンプレートをavisportsサンプル・サイトに作成します。
サイト: avisports
名前: HelloDetail
アセット・タイプ: AVIArticle
サブタイプ: Article
エレメントの使用: エレメントをHTMLページ内で使用します。
エレメント・タイプ: JSP
ルート・エレメント: AVIArticle/HelloDetail
ストレージ・パス: AVIArticle/HelloDetail.jsp
<div class="content">エレメント内で記事フィールド値を検索およびレンダリングするコードを抽出して、それを別個のJSPに変換します。
<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld"%>
<%@ taglib prefix="assetset" uri="futuretense_cs/assetset.tld"%>
<%@ taglib prefix="ics" uri="futuretense_cs/ics.tld"%>
<%@ taglib prefix="render" uri="futuretense_cs/render.tld"%>
<%@ taglib prefix="dateformat" uri="futuretense_cs/dateformat.tld"%>
<cs:ftcs>
<render:logdep
cid='<%=ics.GetVar("tid")%>'
c="Template" />
<assetset:setasset
name="article"
type='<%=ics.GetVar("c") %>'
id='<%=ics.GetVar("cid") %>' />
<assetset:getmultiplevalues
name="article" prefix="article">
<assetset:sortlistentry
attributename="headline"
attributetypename="ContentAttribute" />
<assetset:sortlistentry
attributename="relatedImage"
attributetypename="ContentAttribute" />
<assetset:sortlistentry
attributename="postDate"
attributetypename="ContentAttribute" />
</assetset:getmultiplevalues>
<assetset:getattributevalues
name="article"
listvarname="bodyList"
attribute="body"
typename="ContentAttribute" />
<ics:listget
listname="article:relatedImage"
fieldname="value"
output="imageId" />
<ics:listget
listname="article:postDate"
fieldname="value"
output="postDate" />
<dateformat:create
name="df"
datestyle="long" />
<dateformat:getdate
name="df"
varname="formattedDate"
valuetype="jdbcdate"
value='<%=ics.GetVar("postDate") %>' />
<div class="top-section section-title">
<h1>
<ics:listget
listname="article:headline"
fieldname="value" />
</h1>
<span class="date">
<ics:getvar name="formattedDate" />
</span>
</div>
<div class="article post">
<render:getbloburl
outstr="imageURL"
c="AVIImage"
cid='<%=ics.GetVar("imageId") %>'
field="largeThumbnail" />
<img class="photo left"
src='<ics:getvar name="imageURL" />' />
<render:stream list="bodyList" column="value" />
</div>
</cs:ftcs>
さらに、<render:calltemplate>タグを使用して起動したHelloDetailを利用するのみで、レイアウト・テンプレートを変更できます。
<html>
<head>
<render:calltemplate
tname="/Head"
args="c,cid"
style="element" />
</head>
<body class="inner">
<div id="main">
<div id="header">
<render:satellitepage
pagename="avisports/navbar" />
</div>
<div id="container">
<div class="content">
<render:calltemplate
tname="HelloDetail"
args="c,cid" />
</div>
<div class="side-bar" style="height: 300px">
<!-contains the side nav bar -->
</div>
</div>
<div id="footer">
<render:callelement
elementname="avisports/footer" />
</div>
</div>
</body>
</html>
ページ・テンプレートは、「使用」フィールドが「エレメントはHTMLページ全体を定義するため、外部から呼び出すことができます。」に設定されているテンプレート・アセットです。
ページ・テンプレートの特性は、次のとおりです。
この項では、それぞれの特性を説明し、ページ・テンプレートの実際の使用方法を示します。
ページ・テンプレートはブラウザから起動可能
レイアウト・テンプレートと同様に、ページ・テンプレートは、Satelliteサーブレットを通してページ名を起動することによって、ブラウザでのWebページのレンダリングに使用できます。
ページ・テンプレートはアセットに割り当てできない
レイアウト・テンプレートのみが割当て可能です。つまり、編集ユーザーはContributorインタフェースの「Webモード」でページ・テンプレートを使用できないことになります。したがって、レイアウト・テンプレートを使用する必要があります。
ページ・テンプレートはプレビュー用に使用可能
編集ユーザーはアセットを表示できるのみであり、編集機能は含まれないという点で、アセットのプレビューはContributorインタフェースでWebモードを使用する場合と異なります。アセットをプレビューする場合、デフォルトでは、WebCenter Sitesはアセットのテンプレート・フィールドに設定されたレイアウト・テンプレートを使用します。
「プレビュー・テンプレートの変更」ダイアログが表示されると、テンプレート・ピッカーは次の有効なオプションを表示します。
現在のアセットに適用できるすべてのレイアウト・テンプレート
現在のアセットに適用できるすべてのページ・テンプレート
レイアウト変更テンプレート・ピッカーとは異なり、別のプレビュー・テンプレートを選択しても、このテンプレートはアセットのテンプレート・フィールドに割り当てられません。選択されたプレビュー・テンプレートを使用して現在のアセットがレンダリングされるのみです。
ラッパーは通常、マークアップを一切レンダリングしません。かわりに、ラッパーは通常は未キャッシュであり、実際のレイアウト・テンプレートをレンダリングする前に実行される予定のビジネス・ロジックが含まれています。これは、セキュリティ・チェックの実装のためにセッション・データにアクセスしたり、設定するロケールを決定したり、フレンドリURLを逆アセンブルするといったアクションを実行する場合に役立ちます。
この項では、ラッパーについて次の内容を説明します。
ラッパー・ページの作成
ラッパーは、「ラッパー・ページ」フラグが「はい」に設定されている普通のSiteEntryアセットです。これにより、作成中のアセットがラッパー・ページとして指定されます。「いいえ」フラグを選択すると、「ページレットのみ」フィールドが表示されます。詳細は、第23.6項「SiteEntryアセットの作成」を参照してください。
ラッパーとプレビュー
実装によっては、レイアウト・テンプレートを使用してアセットをレンダリングする前に、ラッパーを実行する必要もあります。アセットをプレビューする場合、またはContributorインタフェースのWebモードを使用している場合、WebCenter Sitesは、現在のサイトで少なくとも1つのラッパーが有効になっている場合に系統的にラッパーを実行します。
デフォルトのプレビュー・ラッパーが現在の編集サイトに対して構成されている場合は、このラッパーが使用されます。そうでない場合は、リストに記載されている最初のラッパーが使用されます。複数のラッパーが使用可能な場合は、「表示」、「ラッパーを使用したプレビュー」を選択して、別のラッパーを変更できます。
プレビュー・モードでは、ラッパーは、レイアウト・テンプレートがWebページを正しくレンダリングするために追加の引数を必要とする場合に(たとえば、locale引数が実行できる場合がある)、特に役立ちます。これは、デフォルトで、WebCenter Sitesが、それぞれテンプレート・ページ名とレンダリング対象のアセットのタイプおよびIDを持つアセット・タイプ(c)とアセットID (cid)を使用して主にページ名を設定する最小限のプレビューURLを生成するためです。
この場合は、必要に応じて追加の引数を設定し、レイアウト・テンプレートのレンダリングを進めることによって、プレビュー・ラッパーを定義できます。コールされるページ名は、childpagename変数で使用可能です。
<cs:ftcs>
<%
// establish appropriate values for required template arguments
%>
<ics:setvar name="foo" value="bar" />
<render:satellitepage
pagename='<%=ics.GetVar("childpagename")%>'
args="c,cid,foo" />
</cs:ftcs>
...
