21 コンテキスト内編集およびプレゼンテーション編集用テンプレートのコーディング
コンテンツ・コントリビュータおよびコンテンツ編集者は、コンテンツを柔軟に作成および管理できる方法を求めています。たとえば、フォームを使用するのではなくWebモードでコンテンツを追加する方法や、ページ・レイアウトおよびコンテンツ・レイアウトで表示を制御する方法などです。この柔軟性を提供するためには、属性データ・タイプ・フィールドを編集可能にし、適切なコードを記述します。
この章で使用する新しいタグの詳細は、『Oracle WebCenter Sitesリファレンス・タグ・リファレンス』を参照してください。
21.1 コンテキスト内コンテンツ編集用テンプレートのコーディング
コンテンツ担当者が標準のコンテンツ・フォームを使用するのではなくWebサイトのコンテキストでコンテンツを作成および編集できるように、テンプレートをインスツルメント処理できます。コンテキスト内とは、Oracle WebCenter Sites: ContributorインタフェースのWebモードのことです。
このトピックでは、「テンプレートとラッパーの作成」で紹介したHelloDetailテンプレートを変更します。HelloDetailテンプレートに基づいている次の以前の項を参照してください。
-
ノート:
DoctypeおよびInternet Explorer: Internet Explorerで不適切なモードを使用してページがレンダリングされている場合、コンテキスト内編集UIが完全に機能しないことがあります。ローカル設定によってユーザー・インタフェースが影響を受けることのないように、ページのレンダリングでは必ず適切な
doctype
値を使用するようにしてください。詳細は、Microsoft Libraryの『HTML/XHTML Reference』(
http://msdn.microsoft.com/
)にある、DOCTYPE
エレメントの説明を参照してください
次のトピックを参照してください。
21.1.1 属性のデータ型
アセット・タイプは、次のタイプが指定可能な1つ以上の属性により定義されます。
-
string: 短い文字列(通常は、最大255文字)
-
text: 長い文字列。通常は、CLOBデータベース・タイプにマップされます(最大サイズは基礎データベースにより異なります)。
-
date: 日付フィールド
-
binary: BLOB属性。通常は、イメージ・ファイル、PDFなどのバイナリ・ファイルの格納を対象としています。
-
asset: 別のアセットに対する参照
-
number: integer、floatまたはmoneyデータ型
21.1.2 文字列フィールドの編集可能化
文字列フィールドを編集可能にすることができます。これらのフィールドには長さ制限があり(通常は255文字)、記事ヘッドライン、作成者などのコンテンツ・メタデータの保持に最適です。
次のステップでは、「テンプレートとラッパーの作成」で紹介したHelloDetailテンプレートを変更し、記事ヘッドライン・フィールドを編集可能にします。
ics:listget
タグを使用して、ヘッドライン・フィールド(article:headline
リストのvalue列に格納されています)の値を出力できます。
<h1> <ics:listget listname="article:headline" fieldname="value" /> </h1>
21.1.2.1 <insite:edit/>タグのバリアント
保存済フィールドの値はリスト内に格納されます。これは、assetsetタグが動作する仕組みです。このタグはデータベースに問い合せて、属性が単一値か複数値かにかかわらず、属性値をリスト・オブジェクトで返します。
この値は変数に利用できる場合もあります。その場合は、次のinsite:edit
のバリアントが使用できます。
<h1> <insite:edit variable="headlineVar" field="headline" /> </h1>
フィールド値が変数またはリストで使用できない場合には、insite:edit
タグでvalue
属性を直接使用して、そのフィールド値を指定できます。
<%String headline = getHeadlineValueFromSomewhere(); %> <insite:edit value="<%=headline%>" field="headline" />
また、insite:edit
タグは、フィールド値がWebCenter Sitesプロパティ・ファイルまたはセッション変数で使用可能な場合に、それぞれproperty
属性とssvariable
属性をサポートします。これらのバリアントはほとんど使用されません。
21.1.3 テキスト・フィールドの編集可能化
テキスト・フィールドを編集可能にすることができます。このトピックは、テンプレートとラッパーの作成で紹介したHelloDetailテンプレートに基づいています。
文字列フィールドの場合と同様に、HelloDetailテンプレートのrender:stream
タグをinsite:edit
タグに置換できます。HelloDetailテンプレートでの文字列フィールドの使用例については、「文字列フィールドの編集可能化」を参照してください。
前回、これはrender:stream
タグでした。
<render:stream list="bodyList" column="value" />
このフィールドを編集可能にするには:
CKEditorの構成を参照してください。
21.1.4 日付フィールドの編集可能化
日付フィールドを編集可能にすることができます。この情報は、「テンプレートとラッパーの作成」で紹介したHelloDetailテンプレートに基づいています。
日付フィールドをコンテキスト内で編集可能にするには、文字列フィールドまたはテキスト・フィールドに使用したものと同じinsite:edit
タグを使用します。ただし、日付の書式設定が必要になる場合は、いくつかの追加ステップが必要になります。最初にデータベースから取得した日付フィールドの値は、JDBC書式(2012-01-01 00:00:00.0
)で表示されます。この書式はWebサイトでのレンダリングには不適切です。通常、Webサイトでは、日付はJanuary 1, 2012
というような読みやすい文字列でレンダリングされるためです。
さらに、日付はサーバーのタイムゾーンで解釈されます。この日付は、別のタイムゾーンで表示できます。最初に、java.util
のTimeZone APIを使用して、タイムゾーンIDを取得します。その後で、long
日付書式(事前定義された書式)を使用して、日付を書式設定します。
日付を書式設定する場合は、次の項で説明されている、いずれかの日付書式設定APIを使用できます。書式の選択に応じて、日付とカレンダ・ウィジェットは次の図のサンプルのいずれかの外観になります。
21.1.4.1 日付書式設定API
HelloDetailテンプレートでは、日付の表示にformattedDate
を使用しています。ユースケース1: 記事アセット用にレイアウト・テンプレートを作成を参照してください。
<span class="date"> <ics:getvar name="formattedDate" /> </span>
formattedDate
変数は、日付書式設定APIのfmt:formatDate
、またはWebCenter Sitesのdateformat
APIのいずれかを使用して設定する必要があります。
formattedDate
は、時間スタイルのパラメータを追加すると、タイムスタンプを使用したレンダリングが可能になります。また、タイムゾーンのパラメータを追加すると、特定のタイムゾーンでのレンダリングが可能になります。タイムゾーンのパラメータを省略すると、その日付は、サーバーのタイムゾーンで解釈されてレンダリングされます。次に、各APIの説明を示します。
-
fmt:formatDate
(EL式をサポートする)は、該当するAPIの1つです。このAPIは、次に示すように、文字列書式のjava.util.Date()
で日付を取得し、timeZone
パラメータをとります。<fmt:formatDate value="${asset.postDate}" dateStyle="long" type="both" timeStyle="long" var="formattedDate" timeZone="US/Eastern" />
-
WebCenter Sitesの
dateformat
APIには、timezoneid
という追加パラメータがあります。このAPIは、fmt:formatDate
のかわりに使用できます。<dateformat:create name="dateFormat" datestyle="long" timestyle="long" timezoneid="US/Eastern" />
タイムスタンプが必要な場合は、次に示すように、
dateformat:getdatetime
を使用します。<dateformat:getdatetime name="dateFormat" value='<%=postDate%>' valuetype="jdbc" varname="formattedDate"/>
タイムスタンプが必要ない場合は、次に示すように、
dateformat:getdate
を使用します。<dateformat:getdate name="dateFormat" value='<%=postDate%>' valuetype="jdbc" varname="formattedDate"/>
WebCenter Sitesの
dateformat
APIは、valuetype
引数で、millis
またはjdbc
をとります。
21.1.4.2 Webモードでの日付フィールの編集の有効化
書式設定された日付をinsite:edit
タグ内で使用できます。Webモードでの日付フィールドの編集を有効にするには、次のステップを実行します。
日付書式は、params
属性を使用してinsite:edit
タグに渡されます。params
属性は、JSON文字列として書式設定された追加の構成設定をDojoウィジェットに渡すために使用します。この場合、次のようになります。
{constraints: {formatLength: 'long'}, timePicker : true, timeZoneID:'US/Eastern' }
使用可能なウィジェット設定の詳細は、Dojoドキュメント(http://dojotoolkit.org/
)を参照してください。
21.1.5 バイナリ・フィールドの編集可能化
バイナリ・フィールドは通常、データベースのBLOBフィールドまたはCLOBフィールドに相当します。一般に、バイナリ・フィールドにはイメージまたはダウンロード可能なドキュメントが格納されます。デフォルトでは、insite:edit
タグはファイル・アップロード・コンポーネントを通じてバイナリ・フィールドを編集可能にします。
ノート:
この項は、WebCenter SitesのURL列にも当てはまります。つまり、ファイル・システムに格納されているファイルへの参照を格納したURL列です。
HelloDetailテンプレートは、関連するAVIImageアセットのlargeThumbnailフィールドをレンダリングします。
このフィールドをコンテキスト内で編集可能にするには:
イメージ上にマウス・ポインタを移動すると、コンテンツ・コントリビュータにツールチップが表示されてアップロード・コンポーネントにアクセス可能になり、largeThumbnail
フィールドをクリアできます。
ノート:
HelloDetailテンプレートでは、コントリビュータは同じページで2つの異なるアセット(AVIArticleアセットのheadline
、date
、body
、relatedImage
の各フィールドと、関連するAVIImageアセットのlargeThumbnailフィールド)を編集できます。通常は、同じページに複数のアセットをレンダリングして、それらを同時に編集可能にすることができます。
21.1.6 アセット・フィールドの編集可能化
アセット・フィールドには、他のアセットに対する参照が格納されます。アセット・フィールドを編集可能にすることができます。
この手実行は、「テンプレートとラッパーの作成」の「ユースケース1: 記事アセット用にレイアウト・テンプレートを作成」で作成した、HelloArticleLayoutテンプレートに基づいています。
HelloArticleLayoutテンプレートを拡張し、relatedStories
フィールドを通じて記事に関連付けられた記事アセットをレンダリングすることでサイド・バーを移入します。
ノート:
relatedStories
は複数値フィールドですが、この項では単一値フィールドとして扱います。つまり、このフィールドには関連記事コンテンツ・アセットが1つだけ保持されます。したがって、この項に示すコード・サンプルは、すべての単一値フィールドに適用できます。複数値フィールドの処理の詳細は、「複数値フィールド」を参照してください。
21.1.6.1 アソシエーションの編集
データ型asset
のフレックス属性のかわりにアセット・アソシエーションを使用する場合は、field
属性を次のように指定する必要があります。
Association-named:<associationName>
たとえば、topStory
というアソシエーションの場合、コードは次のようになります。
<insite:calltemplate field="Association-named:topStory" ... />
21.1.7 数値フィールド
数値属性(整数、ダブル、金額など)を扱う場合、未加工の値がデータベースから取得され、通常は現在のロケールに従って書式設定されます。
たとえば、price
が金額属性であるとすると、その属性値を読み取って書式設定された文字列としてレンダリングするJSPは、次のように記述できます。
<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %> <%@ taglib prefix="assetset" uri="futuretense_cs/assetset.tld" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <cs:ftcs> <assetset:setasset name="theAsset" type='<%=ics.GetVar("c")%>' id='<%=ics.GetVar("cid")%>' /> <assetset:getattributevalues name="theAsset" attribute="price" listvarname="pricelist" typename="ContentAttribute" /> <ics:listget listname="pricelist" fieldname="value" output="price" /> <fmt:formatNumber type="currency" value='<%=ics.GetVar("price")%>' var="formattedValue" currencySymbol="&eur;" /> The price is: ${formattedValue} </cs:ftcs>
未加工の値が123456
である場合は、€123,456
(en_US
ロケール)としてレンダリングされます。この値は、次のようにinsite:edit
タグを使用すると編集可能になります。
<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %> <%@ taglib prefix="assetset" uri="futuretense_cs/assetset.tld" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <cs:ftcs> <assetset:setasset name="theAsset" type='<%=ics.GetVar("c")%>' id=''<%=ics.GetVar("cid")%> /> <assetset:getattributevalues name="theAsset" attribute="price" listvarname="pricelist" typename="ContentAttribute" /> <ics:listget listname="pricelist" fieldname="value" output="price" /> <fmt:formatNumber type="currency" value='<%=ics.GetVar("price")%>' var="formattedValue" currencySymbol="&eur;" /> The price is: <insite:edit field="price" value="${formattedValue}" params="{currency: 'EUR'}" /> </cs:ftcs>
編集ウィジェットは書式設定済の値(通貨記号を含む)に渡されます。このため、通貨ISOコードはparams
フィールドを使用して指定されます。
構成オプションの詳細は、Dojoドキュメント(http://dojotoolkit.org/
)を参照してください。
21.1.8 複数値フィールド
既存値の編集だけでなく複数値フィールドを扱う場合、次のようなタスクに対してエディタを使用する必要があります。
-
新しい値の追加
-
既存値の削除
-
既存値の並替え
このため、複数値テキスト・フィールドおよび複数値アセット・フィールドは特別に扱う必要があります。
21.1.8.1 例1: 複数値テキスト・フィールドの編集
単一値フィールドとの明白な相違点は、WebCenter Sitesに編集中の値の索引を通知するindex
属性を追加したことのみです。
この時点では、既存値の編集のみ実行可能です。既存値の追加、削除、並替えの方法については、次の項を参照してください。
21.1.8.3 異なる順序の指定
前述の例では、最初にネストされたinsite:calltemplate
タグでarticle #1がレンダリングされ、2番目のiinsite:calltemplate
タグでarticle #2
がレンダリングされるというように、記事は順番にレンダリングされています。
<div class="top-stories"> <div>article #1</div> <div>article #2</div> <div>article #3</div> <div>...</div> </ul>
サイトで使用するHTMLマークアップの構造によって、構造が異なる場合があります。たとえば、次のような列レイアウトで記事を表示したい場合があります。
article #1 article #2 article #3 article #4 etc.
基礎となるHTMLマークアップは次のようになる場合があります。
<div class="left-column"> <div>article #1</div> <div>article #3</div> ... </div> <div class="right-column"> <div>article #2</div> <div>article #4</div> ... </div>
この例では、フィールドの順序とは一致しない順序(#1、#3、#5、その後で#2、#4、#6など)で記事がレンダリングされています。このような場合、WebCenter Sitesでは順序を意識する必要があります。そのためには、「複数値フィールド」で示したように、index
属性を使用して、編集中のリスト・アイテムの索引を明示的に指定する必要があります。
21.1.8.4 モードの編集とキャッシング
「Webモード」→「ビューの編集」で作業している場合、キャッシングは無効化されません。したがって、キャッシングできるように構成されたテンプレートは、「ビューの編集」でのレンダリング時にもキャッシングされます。
アセットを使用している場合、WebCenter Sitesは、適切な依存性がログ記録されていることを条件として、キャッシュ・フラッシュを自動的に処理します。たとえば、特定の属性の定義を変更すると(アセット参照フィールドで許可されるタイプの変更など)、その特定の属性にレンダリングが依存しているすべてのページレットが自動的にフラッシュされます。
ただし、次のような場合、ページ・キャッシュは手動でフラッシュする必要があります。
-
アソシエーション・フィールドの定義を変更する。
-
ロールが
roles
属性を通じてinsite:calltemplate
タグから直接参照される場合、このロールをWebCenter Sitesから削除する -
アセット・タイプまたはサブタイプが
clegal
属性を通じてinsite:calltemplate
タグから直接参照される場合、このアセット・タイプまたはサブタイプをWebCenter Sitesから削除する
21.2 プレゼンテーション編集用テンプレートのコーディング
コンテンツ・コントリビュータは、サイトの訪問者にアピールするために様々なレイアウトでコンテンツを提示することを好みます。そのため、コンテンツ・コントリビュータがページやコンテンツのプレゼンテーションを制御できるようにすることができます。たとえば、どのページ・レイアウトでWebページ全体をレンダリングするか、どのコンテンツ・レイアウトでページの一部にアセットをレンダリングするか、どの引数をページレット・テンプレートに送信するかを選択できるようにします。
次の情報では、コンテキストについて、およびプレゼンテーションの変更をローカルにする(指定されたWebページのみで表示可能にする)、またはグローバルにする(1つのページでのプレゼンテーションの変更をサイト上の複数のページに反映させる)方法について説明します。
この項は、「テンプレートとラッパーの作成」で紹介したHelloDetailテンプレートと、「コンテキスト内コンテンツ編集用テンプレートのコーディング」の例に基づいています。
次のトピックを参照してください。
21.2.1 Webページ全体に対する異なるレイアウトの選択
編集ユーザーは、2つの方法でレイアウト・テンプレートをアセットに割り当てることができます。
-
template
フィールドの値をContributorインタフェースのフォーム・モードで直接変更する。 -
ツールバーまたはメニュー・バーからレイアウト変更機能を選択する。
アセットに対してレイアウト・テンプレートを選択すると、そのテンプレートは、ContributorインタフェースのWebモードでのアセットの使用時またはアセットのプレビュー時に、デフォルトとして選択されます。
ライブ・サイトで指定されたアセットのレンダリングに使用されたページ・レイアウトをコンテンツ・コントリビュータが管理できるようにするには、次の例に示すように、テンプレート・フィールドの値を検索してアセット・ハイパーリンクの計算に使用する必要があります。
<asset:list type='<%=ics.GetVar("c")%>' list="asset" field1="id" value1='<%=ics.GetVar("cid")%>' /> <ics:listget listname="asset" fieldname="template" output="template" /> <render:gettemplateurl outstr="pageURL" tname='<%=ics.GetVar("template")%>' args="c,cid" />
21.2.2 ページ・フラグメントに対する異なるレイアウトの選択
この情報は、「コンテキスト内コンテンツ編集用テンプレートのコーディング」で使用したHelloArticleLayoutテンプレートに基づいています。フラグメントの使用の詳細は、「MVCフレークワークおよびAPIを使用したWebsサイト開発」の「開発者のサンプルWebサイト」を参照してください。
前回、HelloArticleLayoutレイアウト・テンプレートでは、このコード・スニペットに示すようにHelloDetailテンプレートを使用して、記事ページのメイン領域がレンダリングされました。
<div id="container"> <div class="content"> <render:calltemplate tname="HelloDetail" args="c,cid" /> </div> <div class="side-bar"> ... </div> </div>
このテンプレートは、図に示すような出力をレンダリングします。
ノート:
コード・スニペットで使用した構文は、次のとおりです。
<render:calltemplate tname="HelloDetail" args="c,cid" />
これは次のコード・スニペットに対するショートカット(これとまったく同じもの)です。
<render:calltemplate tname="HelloDetail" c='<%=ics.GetVar("c")%>' cid='<%=ics.GetVar("cid")%>' />
avisportsサンプル・サイトは、記事アセットに対するDetailテンプレートも提供します。Detailページレット・テンプレートは、HelloDetailテンプレートと機能的に同じです。つまり、記事の詳細ビューを提供し、図に示すように、ページのメイン領域でレンダリングすることになっています。
21.2.2.1 プレゼンテーション編集用のスロットの定義
技術者以外のユーザーが特定の記事ページのレンダリングに使用するプレゼンテーション(つまり、ページレット・テンプレート)を選択できるようにするには、スロットを定義する必要があります。
HelloArticleLayoutレイアウト・テンプレートの前出のコードでは、HelloDetailテンプレートを使用して記事ページのメイン領域をレンダリングしました。
<div id="container"> <div class="content"> <render:calltemplate tname="HelloDetail" args="c,cid" /> </div> <div class=side-bar> ... </div> </div> ...
スロットを定義するには:
21.2.2.2 スロット・タイトルの調整
slotname
の値を青のオーバーレイに表示するのではなく(これは通常、開発者のみに意味のある技術的な文字列です)、この値を任意の文字列に置き換えることができます。
これを行うには:
-
次のコードに示すように、
title
属性をinsite:calltemplate
タグに追加します。<insite:calltemplate slotname="HelloSlot" tname="HelloDetail" args="c,cid" variant="HelloDetail|Detail" title="Article Detail Area" />
title
属性を定義すると、デフォルトのスロット・タイトルがオーバーライドされます。
21.2.2.3 テンプレート引数の管理
この項では、テンプレート引数の管理の例を示します。image-align
という追加の引数を受け入れるように、HelloDetailテンプレートを変更します。この引数は、記事イメージの左揃えまたは右揃えに使用します。
このプロセスは、次のとおりです。
-
image-align
引数をHelloDetailテンプレートの適切な引数として登録する必要があります。このステップを省略した場合、コントリビュータは編集UIからこの値を設定できません。 -
キャッシングが正しく機能するように、新しい引数をキャッシュ基準として宣言する必要があります。
-
最後に、新規定義された引数を使用するようにテンプレート・コードが変更されます。
ノート:
Eclipse with the WebCenter Sites Developer Toolsプラグインの使用方法について: Adminインタフェースからテンプレート・アセットを編集する際、このテンプレートがWSDTでも同時に開いている場合には、変更をWSDTワークスペースに同期化することを忘れないでください。そうしないと、WSDTワークスペースに格納されたテンプレート・メタデータによって、Webインタフェースから入力された値がオーバーライドされます。
-
image-align
をHelloDetailテンプレート・アセットの適切な引数として宣言します。-
Adminインタフェースから、HelloDetailテンプレート・アセットを編集します。
-
「適切な引数」に対して、
image-align
と入力して「引数の追加」をクリックします。 -
「必須」を選択します。
-
「引数の説明」に対して、
Image Alignment
と入力します。 -
「有効な値」に対して、次の説明を追加します。
-
「値」がleftの場合は、「値の説明」に
Aligned Left
と入力します。 -
「値」がrightの場合は、「値の説明」に
Aligned Right
と入力します。
-
-
「保存」をクリックします。
-
-
WebCenter Sitesで加えた変更を必ずWSDTワークスペースに同期化してください。
-
WebCenter Sites Developer Toolsプラグインを使用して、
image-align
をキャッシュ基準セットに追加します。-
WebCenter SitesワークスペースでHelloDetailテンプレートを右クリックします。
-
「プロパティ」を選択します。
-
「キャッシュ基準」フィールドで、リストの末尾に
image-align
を追加します。 -
「送信」をクリックします。
-
-
オプションとして、「追加エレメント・パラメータ」フィールドを使用して、
image-align=right
などの値を指定することで、デフォルト値を定義できます。 -
HelloDetailページレット・テンプレート・コードを変更します。:
<insite:edit field="largeThumbnail" assettype="AVIImage" assetid='<%=ics.GetVar("imageId")%>' > <img class='photo <ics:getvar name="image-align"/>' src='<ics:getvar name="imageURL" />' /> </insite:edit> ...
特にこの場合、パラメータの値は別のCSSクラスの設定に使用されています。
スロット・プロパティ・パネルに移動した場合、HelloDetailが現在選択されているレイアウトであるとすると、「詳細」タブには位置合せオプションが表示されます。
21.2.3 プレゼンテーションとコンテンツの同時編集
編集ユーザーは、insite:calltemplate
タグの使用によって、関連付けられたコンテンツの編集とレイアウトの編集を行えます。この項では、コンテンツ編集可能スロットとプレゼンテーション編集可能スロットの相違点を説明し、この2つの機能を組み合せて編集ユーザーが関連付けられたコンテンツと、そのコンテンツのレンダリングに使用されるテンプレートの両方の編集を行える方法を説明します。
この項には次のトピックが含まれます:
21.2.3.1 コンテンツ編集可能スロットとプレゼンテーション編集可能スロットの理解
コンテンツ編集可能スロットを使用すると、ユーザーはドロップ可能ゾーンを指定することで、関連付けられたコンテンツを編集できます。プレゼンテーション編集可能スロットを使用すると、別のテンプレートを選択してコンテンツをレンダリングできます。
コンテンツ編集可能スロットを作成(ユーザー用にドロップ可能ゾーンを作成)するには、insite:calltemplate
タグを次の定義済パラメータとともに使用します。
-
assetid
: 編集済アセットID。 -
assettype
: 編集済アセット・タイプ。 -
field
: 編集済フィールド。 -
cid
: コールされたテンプレートによってレンダリングされるアセットのID。 -
c
: コールされたテンプレートによりレンダリングされるアセット・タイプ。 -
tname
: 関連付けられたアセットのレンダリングに使用されるページレット・テンプレート。
次のコードでは、ユーザーに対してドロップ可能ゾーンを作成するコンテンツ編集可能スロットが定義されます。
<insite:calltemplate assetid=" " assettype=" " field=" " cid=" " c=" " tname=" " />
(ユーザーが別のテンプレートを選択してコンテンツをレンダリングできるようにする)プレゼンテーション編集可能スロットを作成するには、insite:calltemplate
タグを次の定義済パラメータとともに使用します。
-
slotname
: この属性により、コールされたテンプレートで入力中のスロットの識別子が定義されます。これはわかりやすいものとし、すべてのテンプレートで一意である必要があります。 -
cid
: コールされたテンプレートによってレンダリングされるアセットのID。 -
c
: コールされたテンプレートによりレンダリングされるアセット・タイプ。 -
tname
: コールされるデフォルトのページレット・テンプレート。
このコードでは、ユーザーが別のテンプレートを選択してコンテンツをレンダリングできるプレゼンテーション編集可能スロットが定義されます。
<insite:calltemplate slotname=" " cid=" " c=" " tname=" " />
21.2.3.2 コンテンツ編集可能スロットとプレゼンテーション編集可能スロットの組合せ
コンテンツ編集可能スロットとプレゼンテーション編集可能スロットの機能を組み合せて、編集ユーザーが関連付けられたコンテンツとそのコンテンツのレンダリングに使用されるテンプレートの両方を編集することを可能にできます。
コンテンツ編集可能スロットとプレゼンテーション編集可能スロットの機能を組み合せるには、insite:calltemplate
タグを、コンテンツ編集可能スロットとプレゼンテーション編集可能スロットの両方に必要なすべての属性とともに使用します。
-
これらの属性は、(ユーザーに対してドロップ可能ゾーンを作成する)コンテンツ編集可能スロットに必須です。
field, assetid, assettype
-
この属性は、(ユーザーが別のテンプレートを選択してコンテンツをレンダリングできる)プレゼンテーション編集可能スロットに必須です。
slotname
このコードでは、コンテンツ編集可能スロットとプレゼンテーション編集可能スロットに対する属性が組み合されます。
<insite:calltemplate slotname=" " assetid=" " assettype=" " field=" " cid=" " c=" " tname=" " />
コンテンツ編集可能スロットとプレゼンテーション編集可能スロットの組合せ
この項は、「コンテキスト内コンテンツ編集用テンプレートのコーディング」で作成したHelloSideBar
テンプレートに基づいています。
前回、HelloSideBar
テンプレートは次のようにコーディングされました。
<%@ 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="insite" uri="futuretense_cs/insite.tld"%>
<cs:ftcs>
<render:logdep cid='<%=ics.GetVar("tid")%>' c="Template"/>
<assetset:setasset name="article"
type='<%=ics.GetVar("c") %>' id='<%=ics.GetVar("cid") %>' />
<assetset:getattributevalues name="article"
listvarname="relatedStories" attribute="relatedStories"
typename="ContentAttribute" />
<insite:slotlist field="relatedStories">
<ics:listloop listname="relatedStories">
<ics:listget listname="relatedStories" fieldname="value"
output="articleId" />
<insite:calltemplate
tname="Summary/SideBar"
c="Article"
cid='<%=ics.GetVar("articleId") %>' />
</ics:listloop>
</insite:slotlist>
</cs:ftcs>
...
このテンプレートでは、関連記事がコンテンツ編集可能スロット(ドロップ・ゾーン)によって編集可能になります。つまり、関連記事は、編集ユーザーが別のテンプレートを選択する可能性を生じずに、Summary/SideBarテンプレートを使用してレンダリングされます。ただし、関連記事のレンダリング方法は変更できません。変更するには、HelloSideBar
テンプレートを次のように変更する必要があります。
<%@ 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="insite" uri="futuretense_cs/insite.tld"%> <cs:ftcs> <render:logdep cid='<%=ics.GetVar("tid")%>' c="Template"/> <assetset:setasset name="article" type='<%=ics.GetVar("c") %>' id='<%=ics.GetVar("cid") %>' /> <assetset:getattributevalues name="article" listvarname="relatedStories" attribute="relatedStories" typename="ContentAttribute" /> <insite:slotlist slotname="RelatedStoriesSlot" field="relatedStories"> <ics:listloop listname="relatedStories"> <ics:listget listname="relatedStories" fieldname="value" output="articleId" /> <insite:calltemplate tname="Summary/SideBar" c="Article" cid='<%=ics.GetVar("articleId") %>' variant="Summary.*" /> </ics:listloop> </insite:slotlist> </cs:ftcs>
これは、slotname
属性およびvariant
属性を指定した点を除き、前回使用したコードと同じです(この場合は、使用可能なテンプレートのリストはSummaryで始まるすべてのページレット・テンプレートに制限されます)。
slotname
はinsite:slotlist
タグの内側に組み込まれているため、内部のinsite:calltemplate
タグ用に追加する必要はありません。この値は、tname
およびfield
の値と同様に、自動的に継承されます。
次に例を示します。
<insite:slotlist slotname=" " field=" "> <insite:calltemplate tname=" " c=" " cid=" " /> </insite:slotlist>
これで、Summary/SideBarは関連記事に対してデフォルト・テンプレートとして動作するようになります。任意の関連記事を右クリックし、「コンテンツ・レイアウトの変更」機能を選択すると、代替テンプレートが選択できるようになります。
21.2.4 コンテキスト・システム変数の理解
WebCenter Sitesテンプレートでは、context
は内部で保持されるシステム変数です。その値を取得するには、JSPタグics:getvar
またはics.GetVar()
メソッドを使用します。
次に例を示します。
<ics:getvar name=context/> ics.GetVar(context)
コンテキストの値は、デフォルトで決定済です。最初は空の文字列に設定されています。その後、render:calltemplate
またはinsite:calltemplate
を使用してテンプレートをコールするたびに、context
の値は、次のロジックに従って、コールされたテンプレート内で変更されます。
if parent_context is empty context = <c>:<cid>:<tname> otherwise context = <parent_context>;<c>:<cid>:<tname>
この項には次のトピックが含まれます:
21.2.4.1 スロットの有効範囲の定義について
スロットを定義するときに、テンプレート開発者はスロットの有効範囲を決定できます。通常は、このスロットで加えられたプレゼンテーション変更をローカルにするかグローバルにするかを決定します。
-
ローカル: 現在編集しているWebページのみに表示されます。
-
グローバル: サイト内の複数のWebページ(おそらく、サイト内のすべてのWebページ)にわたります。
これはcontext
変数の値を操作することで実行されます。これについては、次の各項で説明します。
21.2.4.2 動作中のコンテキスト変数の使用方法
WebCenter Sitesには、次のアイテムに対して新しく選択されたテンプレートを記録することによってプレゼンテーションの変更が格納されます。
-
スロット名
-
現在のサイト名
-
コンテキスト
スロット・コンテンツのレイアウトを変更するには:
その結果、スロット・コンテンツ・レイアウトをHelloDetail
からDetail
に変更したときに、次のプレゼンテーション・データが記録されました。
-
site: avisports
-
slotname: ArticleDetail
-
context: (空)
-
tname: Detail
HelloArticleLayout
テンプレートの実行時にコンテキストは最初は空であっため、コンテキストは空であり、スロットがレンダリングされても変更されることはありません。このため、HelloArticleLayout
テンプレートを使用してレンダリングされたavisportsのWebページはすべて、前述の記録されたプレゼンテーション・データと一致します。その結果、すべての記事ページに対してDetail
テンプレートが使用できるようになりました。
21.2.4.3 コンテキスト値の初期化
前の項で観察した動作は意図された動作でもあります。しかし、編集ユーザーはローカルなプレゼンテーション変更を必要とする場合もあります。つまり、変更を現在編集中のWebページでのみ表示できるようにすることです。
これを行うには、context
変数を、指定されたWebページを一意に識別する値に設定する必要があります。ここでは、コンテキストの初期化に、たとえば、テンプレート名、ID、およびレンダリングされたアセットのタイプを使用するだけで十分です。
<ics:setvar name="context" value='<%=ics.GetVar("c") + ":" + ics.GetVar("cid") + ":HelloArticleLayout"%>' />
意図される結果によっては、その他のパラメータを追加してコンテキストを初期化できます。前述の行をHelloArticleLayout
テンプレートに追加して、プレゼンテーションの変更が記事ページごとにローカルであることを検証できます。
21.2.4.4 コンテキストのオーバーライド
render:calltemplate
タグとinsite:calltemplate
タグの両方にオプションのcontext
属性が割り当てられているため、この属性を使用して現在のコンテキストをオーバーライドできます。
21.2.5 CSElementアセットとSiteEntryアセットによるスロットの使用
前出の例では、スロットはコンテンツの保持に使用されました。この項では、ナビゲーション・バー、ログイン・ボックス、パブリッシュされた最後の10個の記事をサイトに表示するコード・スニペットなどの機能の保持にスロットを使用する方法を検討します。これらの機能は、CSElementアセットまたはSiteEntryアセットとして使用できます。
CSElementアセットまたはSiteEntryアセットをスロットにドロップできるようにすることで、技術者以外のユーザーは、コードを変更する必要もなく、特定のWebページの動作を変更できるようになります。
この項には次のトピックが含まれます:
21.2.5.1 CSElementアセットを含むスロットの定義
CSElementアセットを含めるためのスロットは通常、次のように定義されます。
<insite:calltemplate slotname="Navbar" clegal="CSElement" />
または、サイトの全ページにわたって同じコンテンツを表示するためのスロットの場合は、次のように定義できます。
<insite:calltemplate slotname="Navbar" clegal="CSElement" context="Global" />
CSElementアセットとSiteEntryアセットは、これらのレンダリングを行うJSPエレメントを直接参照しているため、この場合はtname
属性を指定する必要はありません。
スロットに許可されるアセット・タイプのリストにSiteEntryまたはCSElementを表示するには、両方のアセット・タイプのCan Be Child AssetフラグがTrueに設定されていることを確認する必要があります(これは、このアセット・タイプがアソシエーション・フィールドで別のアセット・タイプの子アセット・タイプになりえることを意味します)。ベーシック・アセット・タイプの作成のアセット・タイプの構成を参照してください。
ノート:
スロットに許可されるアセット・タイプのリストにSiteEntryまたはCSElementを表示するには、両方のアセット・タイプのCan Be Child AssetフラグがTrueに設定されていることを確認する必要があります(これは、このアセット・タイプがアソシエーション・フィールドで別のアセット・タイプの子アセット・タイプになりえることを意味します)。「ベーシック・アセット・タイプの設計」を参照してください。
21.2.5.2 CSElementアセットまたはSiteEntryアセットを使用するタイミング
SiteEntryアセットはコードを保持しないで、単にCSElementアセットを指します。この2つのケースの唯一の相違点として、SiteEntryを使用した場合、エレメントはキャッシュ・エンジンを通して呼び出されます。そのため、SiteEntryアセットをドロップしても、それに関連するCSElementアセットをドロップしても結果は同じです。
したがって、SiteEntryまたはCSElementのいずれを使用するかの決定は、実装に依存します。機能をSiteEntryとして表示しても、このコード・スニペットのレンダリングにはキャッシングが使用されることが確認できるだけです。
21.2.5.3 適切な引数の定義について
テンプレートと同様、CSElementアセットに対して適切な引数を定義できます。CSElementがスロットにドロップされると、スロット・プロパティ・パネルから適切な引数が使用できるようになります。
これはSiteEntryアセットをドロップする場合にも当てはまりますが、スロット・プロパティ・パネルに表示される適切な引数は関連のCSElementアセットの適切な引数であることが異なります。(SiteEntryアセットには、専用の適切な引数が割り当てられていません)。
21.2.6 アセット・タイプの制約
デフォルトでは、WebCenter Sitesでスロットにドロップできるアセット・タイプは次のとおりです。
-
field
を定義した場合(コンテンツ編集可能スロット): フィールド定義により指定された任意の適切なアセット・タイプ -
field
が未定義の場合(プレゼンテーション編集可能スロット): Can Be Child AssetフラグがTrueに設定されている任意のアセット・タイプ。
次のようにclegal
属性を使用して、許可されるアセット・タイプをさらに制限することもできます。
<insite:calltemplate slotname="Main" clegal="Article,Product" ... />
次の構文では、アセット・サブタイプによってさらに制限できます。
<insite:calltemplate slotname="Main" clegal="type1:subtype1,type2:subtype2" ... />
ノート:
"type:*"
(ワイルドカードとしてアスタリスクを使用)も有効であり、これは"type"
値のように動作します。
21.2.7 CSSとJavaScriptの競合回避
コンテキスト内UIは、Contributorインタフェースで「Webモード」→「ビューの編集」からレンダリングするときに(この場合のみ)、スタイルとJavaScriptをWebページに挿入します。
この結果、次のようになる場合があります。
-
CSS競合: たとえば、サイトCSSルールが適用されるために、スロットが不適切に表示されます。
-
JavaScript競合: 編集中ビューのページに挿入されたJavaScriptと競合するJavaScriptがWebページに設定されています。その結果、編集UIまたはページ自体のいずれかが適切に機能しません。
CSS競合は通常、追加のCSSルールを追加することによって解決できます。このルールは、テンプレートが編集モードで、編集UIの中でレンダリングされる場合のみロードされます。これを行うには、JSPテンプレートが編集モードで実行されている場合のみJSPコードの実行を許可するinsite:ifedit
タグを使用します。
<insite:ifedit> <%-- This stylesheet import will only occur in editing mode. -- It will not have any impact on the actual rendering of the -- live site. --%> <link rel="stylesheet" type="text/css" href="/css/editorial.css" /> </insite:ifedit>
追加のCSSクラスをスロットに追加するには、insite:calltemplate
タグのcssstyle
属性を使用して、スロットに対して特定のCSSルールを指定します。
CSSは通常、フローティングしているエレメントの周りでスロットをレンダリングするときに競合します。この場合、スロット領域をマークする青または緑のオーバーレイのディメンションが不適切であることが考えられます。
JavaScript競合は通常、スクリプトが編集UI機能によって正しく注入されるようにするために、編集モードのみでWebページの動作を低下させることによって解決できます。Contributorインタフェースの「Webモード」→「ビューの編集」でページ機能の一部を無効化する場合もあります。
21.3 Webモードでのコンテンツ作成の有効化
そのために必要なのは、Insite
タイプのスタート・メニュー・アイテム、コントリビュータが使用しているアセット・タイプに適用できる1つ以上のレイアウト・テンプレート、および編集固有のプレゼンテーション・ロジックを提供することだけです。コントリビュータのニーズに従って、さらに変更を加えることができます。
次のトピックを参照してください。
21.3.1 コンテンツ内作成用のスタート・メニューの定義
コンテキスト内作成用に特定のアセット・タイプを有効にするために、タイプinsite
のスタート・メニューを用意する必要があります。つまり、「タイプ」ドロップダウン・メニューで「新規Insite」オプションを選択する必要があります。
さらに、作成中のアセットに1つ以上の必須フィールドを割り当てる場合は、「デフォルト値」メニューを使用してスタート・メニューにデフォルト値を提供する必要があります。
必須値が不足している場合、ユーザーはアセット・フォームに送られます。
ユーザーが「新規Insite」スタート・メニューを選択すると、編集ユーザーは、最初にレイアウト・テンプレートと新規作成したアセット用の名前を選択するよう促されます。
「続行」をクリックすると、ワークフローが構成されていない場合、アセットがバックグラウンドに新規作成され、選択したレイアウト・テンプレートを使用してレンダリングされます。
21.3.2 コンテキスト内作成用のレイアウト・テンプレートの提供
編集に使用したものと同じレイアウト・テンプレートが、コンテキスト内作成にも使用できます。ただし、テンプレートが空のアセットを使用して適切にレンダリングできるように、特別の注意を払う必要があります。
通常、これには次が必要です。
-
スタイル調整: 値はレンダリングされませんが、ページ上の各種エレメントは適切な位置にレンダリングされます
-
意味のあるヘルプ・テキスト(値なしインジケータ): 編集可能フィールドが空のときにユーザーに表示されます
-
追加のプレゼンテーション・ロジック: 編集プラットフォーム上で、テンプレートが編集モードで実行しているときのみ実行されます
この項には次のトピックが含まれます:
21.3.2.1 スタイルシートの調整
特にコンテンツの作成または編集用にスタイルシートの調整が必要な場合は、次に示すように、対応するimport文をinsite:ifedit
タグで囲みます。
// import "delivery" stylesheets <link type="text/css" rel="stylesheet" href="somecss.css" /> ... // then import "editing only" stylesheets. using the insite:ifedit // tag ensures that only those stylesheets will be imported // when rendering the template in create/edit mode. <insite:ifedit> <link type="text/css" rel="stylesheet" href="edit.css" /> ... </insite:ifedit>
21.3.2.2 スロット用のスタイルシート調整
スロットのレンダリング用にスタイルを調整する場合、insite:calltemplate
タグのcssstyle
属性を使用して追加のクラス名を指定できます。このクラス名は、CSSルールで使用できるようになります。
<insite:calltemplate slotname="mySlot" ... cssstyle="myClassName" ... />
たとえば、mySlot
が空のときにその高さを強制的に50pxに設定する場合は、次のCSSルールを指定できます。
.myClassName .emptyIndicator {height: 50px !important;}
CSSルールは、特定のスタイルシート内でグループ化でき、JSPタグinsite:ifedit
を使用してContributorインタフェースの「Webモード」→「ビューの編集」のコンテキストでテンプレートを実行している場合のみ、条件付きでインポートできます。
21.3.3 空の値インジケータの提供
スロットの場合は、insite:calltemplate
タグのemptytext
属性を使用します。
<insite:calltemplate slotname="mySlot" emptytext="Drag an Article here" ... />
その他の編集フィールドの場合は、insite:edit
タグのnoValueIndicator
パラメータを使用します。
<insite:edit field="headline params="{noValueIndicator: 'Enter Headline Here'}" ... />
21.3.4 編集固有のプレゼンテーション・ロジックの提供
プレゼンテーション・ロジックは、作成/編集モードと比較した場合、配信モードでは若干異なる場合があります。
たとえば、作成/編集モードでコンテキスト内の編集可能な記事リストをレンダリングしているときに、常に5つの追加の空スロットを表示する場合があります。 その場合は、配信モードと編集モードの両方に対応できるロジックが必要になります。このロジックは次のように作成できます。
<% // assuming that "relatedArticles" contains a list of // related articles %> <insite:slotlist field="someAssetField"> <ics:listloop listname="relatedArticles"> <ics:listget listname="relatedArticles" fieldname="value" output="articleid" /> <div class="post"> <insite:calltemplate tname="Summary" c="Article" cid='<%=ics.GetVar("articleid")%>' /> </div> </ics:listloop> </insite:slotlist> <% // in this example, we add five extra empty slots %> <insite:ifedit> <% // To not disrupt rendering in delivery, this code is // added inside the insite:ifedit tag %> <c:forEach begin="0" end="4"> <div class="post"> <% // no c, cid specified, this renders an empty slot %> <insite:calltemplate tname="Summary" /> </div> </c:forEach> </insite:ifedit>
明らかに、このコードは特定のロジックを受け入れるように調整できます。たとえば、空かどうかに関係なく、最大5つのスロットを表示する必要があるとします。その場合、コード・スニペットの最後の部分を次のように作成できます。
<% // get how many articles are in the list %> <ics:listget listname="relatedArticles" fieldname="#numRows" output="nbArticles" /> <c:forEach begin='<%=Integer.valueOf(ics.GetVar("nbArticles"))%>' end='4'> <div class="post"> <insite:calltemplate tname='Summary" /> </div> </c:forEach>