| Oracle® Fusion Middleware WebCenter Sites開発者ガイド 11gリリース1 (11.1.1.8.0) E49681-03 |
|
 前 |
 次 |
この章では、WebCenter SitesのContributorインタフェースでアセット・フォームに適用できるカスタマイズについて説明します。また、一部のサポートされているデータ型の単一値または複数値の属性エディタを作成するための手順を追った説明も示します。
この章は、次の項が含まれています。
Contributorインタフェースのアセット・フォームで2つのタイプのカスタマイズを実行できます。1つ目のタイプでは、アセット・フォームのヘッダーを変更できます。もう一方では、第18.3項「属性エディタのカスタマイズ」で説明するように、既存の属性エディタをカスタマイズするか、または第67.3項「属性エディタの構築」で説明するように、WebCenter Sitesによってサポートされているデータ型のカスタム属性エディタを構築できます。
|
注意: Contributorインタフェースの他のコンポーネントとは異なり、アセット・フォームは、Contributorフレームワークにはありません。そのため、アセット・フォームのリクエストは、UIコントローラによって処理されません。 |
OpenMarket/Xcelerate/AssetType/<AssetTypeName>/ディレクトリのカスタムassettype固有のエレメントを作成することによって、アセット・フォームのヘッダーを変更できます。HTMLページの本文を変更するのではなく、追加のスタイルシートまたはJavaScriptコードを含めることができます。エレメントの名前はHeaderにする必要があります。
第18.3項「属性エディタのカスタマイズ」の説明に従って、既存の使用準備済の属性エディタの一部で、ルック・アンド・フィールをカスタマイズできます。WebCenter Sitesでサポートされているデータ型のカスタム属性エディタを作成することもできます。
この項では、データ型text、string、integerまたはmoneyの単一値をサポートするカスタム属性エディタを構築する方法について説明します。また、この項では、同じデータ型の複数値属性エディタを実装するためのポインタおよびサンプル・コードも提供します。
|
注意:
|
属性エディタを構築する手順は次のとおりです。
この項では、データ型text、string、integerまたはmoneyの単一値を処理するDojoウィジェットを作成する方法について説明します。
この項の内容は、次のとおりです。
DojoウィジェットのHTMLテンプレートを作成するには:
WebCenter Sitesインストール・ディレクトリで、<context_root>/js/ディレクトリに移動します。
jsディレクトリの下に、新しいディレクトリ構造extensions/dijit/templatesを作成します。
<context_root>/js/extensions/dijit/templatesディレクトリで、HTMLテンプレート・ファイルを作成し、それにわかりやすい名前を付けます。たとえば、MyWidget.htmlと入力します。
HTMLテンプレート・ファイルで、新しいDojoウィジェットのルック・アンド・フィールを定義します。このHTMLテンプレートの内容は次のようになります。
<div>
<div>
<input type="text" dojoAttachPoint='inputNode'
name='${name}'size='60' class='valueInputNode'>
</input>
</div>
</div>
前述のコードをテンプレートで使用する場合、エンド・ユーザーからの入力を入力ノードが受け取った後、その入力ノードの値は、第67.3.1.2項「Dojoウィジェットの作成」で作成するDojoウィジェットで保持されます。
テンプレート・ファイルを保存します。
第67.3.1.2項「Dojoウィジェット」に進みます。
Dojoウィジェットを作成するには:
WebCenter Sitesインストールのjs/extensions/dijitディレクトリに移動します。
次の必須機能を実装することにより、dojoウィジェット、たとえば、MyWidget.jsを作成します(例67-1を参照)。
_setValueAttr: このsetterメソッドは、属性の値を設定します。
_getValueAttr: このgetterメソッドは、属性値を取得します。
isValid: このメソッドは、指定された値が有効かどうかを確認するために検証を実行します。
focus: これは、属性エディタにフォーカスを設定します。
onChange: このメソッドは、ユーザーが属性の値を更新するたびにコールされます。
onBlur: このメソッドは、属性値がユーザーによって入力されるときに、ウィジェットを更新します。ユーザーが別のフィールドを選択すると、更新がトリガーされます。
例67-1 Dojoウィジェットのサンプル・コード
dojo.provide('extensions.dijit.MyWidget');
dojo.require('dijit._Widget');
dojo.require('dijit._Templated');
dojo.declare('extensions.dijit.MyWidget', [dijit._Widget, dijit._Templated], {
//string.
//The value of the attribute.
value: '',
//int
//The Attribute editor's MAXALLOWEDCHARS should be assigned to this variable.
//maxAllowedLength: 15,
//string
// This variable is required only for single valued instance.
// The server should recieve information from input element with this name.
name: '',
//HTMLElement
// This stores the cached template of the widget's representation.
templateString: dojo.cache('extensions.dijit', 'templates/MyWidget.html'),
//string
// This class will be applied to the top div of widget.
// It will help in managing css well.
baseClass: 'MyWidget',
postCreate: function() {
var self = this;
// Do not allow typing characters more than allowed length.
dojo.connect(this.inputNode, 'onkeypress', function(e) {
if (this.value.length >= self.maxAllowedLength && e.keyCode !=
dojo.keys.BACKSPACE)
e.preventDefault();
});
},
// Start - Mandatory functions
_setValueAttr: function(value) {
// summary:
// Set the value to 'value' attribute and input node
if (value === undefined || !this._isValid(value)) return;
this.value = value;
this._setInputNode(value);
},
_getValueAttr: function() {
// summary:
//Get the latest value and return it.
return this.value;
},
_isValid: function(newVal) {
//summary:
//Verify if the given value is as per the expectation or not.
if (newVal.length > this.maxAllowedLength) {
return false;
}
return true;
},
focus: function() {
//summary:
//Set the focus to the representation node i.e. input node here.
if (typeof this.inputNode.focus === 'function')
this.inputNode.focus();
},
onBlur: function() {
//summary:
//Custom selected browser event when the value should be updated
//Any activity which leads to value change should update
//the widget value as well.
this.updateValue();
},
_onChange: function(newValue) {
//summary:
//Internal onChange method
this.onChange(newValue);
},
onChange: function(newValue) {
//summary:
//A public hook for onChange.
},
// End - Mandatory functions
// Extra functions used in Mandatory functions
_setInputNode: function(value) {
//summary:
//Sets the value to input node.
this.inputNode.value = value;
},
updateValue: function() {
//summary:
//Validate the newly entered value and if it is successful
//then update widget's value.
var newVal = this.inputNode.value;
if (!this._isValid(newVal)) return;
if (this.value != newVal)
this._onChange(newVal);
this.set('value', newVal);
}
});
|
注意: Dojoウィジェットの作成の詳細は、Dojoドキュメント( |
js/extensions/themes/ディレクトリで、このウィジェット用のCSS(たとえば、MyWidget.css)を作成します。CSSファイルの次のコードを使用するか、または独自のコードを記述できます。
.fw .MyWidget .valueInputNode {
color: blue;
}
js/extensions/themes/ディレクトリで、DojoウィジェットのCSS用のimport文を使用してUI.cssを更新します。例: @import url("MyWidget.css");。
作業を保存します。
この項では、フレックス属性の入力タグ(プレゼンテーション・オブジェクト)を定義する方法について説明します。また、入力タグが属性エディタから表示エレメントへ渡すことができる引数を割り当てる方法を説明します。
属性エディタを定義するには:
WebCenter Sitesインストールで、Sites\11gR1\Sites\11.1.1.6.1\presentationobject.dtdファイルに移動します。
presentationobject.dtdファイルで、次を実行します。
新しいタグ(プレゼンテーション・オブジェクト)を<!ELEMENT PRESENTATIONOBJECT …>文内のリストに追加します。この例では、新しいタグにはMYATTREDITORという名前が付けられます。
次の行では、MYATTREDITORは、その名前が第67.3.3項「属性エディタ・エレメントの作成」で作成するエレメントの名前に一致するカスタム属性エディタです。他のすべてのタグは使用準備済の属性エディタです。
<!ELEMENT PRESENTATIONOBJECT (TEXTFIELD | TEXTAREA | PULLDOWN | RADIOBUTTONS | CHECKBOXES | PICKFROMTREE | EWEBEDITPRO | REMEMBER |
PICKASSET | FIELDCOPIER | DATEPICKER | IMAGEPICKER | REALOBJECT |
CKEDITOR | DATEPICKER | IMAGEPICKER | REALOBJECT | CKEDITOR | FCKEDITOR | UPLOAD | MAGEEDITOR | RENDERFLASH | PICKORDERASSET | TYPEAHEAD | UPLOADER |
MYATTREDITOR)>
新しいタグ(プレゼンテーション・オブジェクト)とそれが取得する引数を定義する<!ELEMENT...… >セクションを追加します。この新しいタグには、フォームに表示されるときの対象属性の形式と動作のベースとなるロジックを提供するエレメントが含まれます。MAXALLOWEDCHARSが必須属性としてマークされていることを確認します。
<!ELEMENT MYATTREDITOR ANY> <!ATTLIST MYATTREDITOR MAXALLOWEDCHARS CDATA #REQUIRED> <!ATTLIST MYATTREDITOR MAXVALUES CDATA #IMPLIED>
presentationobject.dtdファイルを保存して閉じます。
この項では、「新規」または「編集」フォームに表示されるときに、属性(単一値)の「編集」ビューを表示するエレメントの作成方法について説明します。このエレメントは、ElementCatalog表のOpenMarket/Gator/AttributeTypesディレクトリに配置される必要があります。エレメント名は、タグで起動できるように、第67.3.2項「プレゼンテーション・オブジェクトとしての属性エディタの定義」で定義したタグの名前と正確に一致している必要があります(この例では、MYATTREDITOR)。
ElementCatalogのOpenMarket/Gator/AttributeTypesディレクトリに移動します。
新しいエディタの属性エレメントを作成します(この例では、MYATTREDITOR.jsp。例67-2を参照。)このエレメントの名前がpresentationobject.dtdファイル(第67.3.2項「プレゼンテーション・オブジェクトとしての属性エディタの定義」)で定義したタグ名に一致していることを確認します。
属性エディタがデフォルトでレンダリングされないようにするには、doDefaultDisplay変数をnoに設定します。
属性名を表示するには、エレメントOpenMarket/Gator/FlexibleAssets/Common/DisplayAttributeNameをコールします。コードは次のとおりです。
<ics:callelement element="OpenMarket/Gator/FlexibleAssets/Common/DisplayAttributeName"/>
ウィジェットをレンダリングするには、次のパラメータを使用して、エレメントOpenMarket/Gator/AttributeTypes/CustomTextAttributeEditorをコールします。
editorName: 第67.3.1.2項「Dojoウィジェットの作成」で作成したウィジェットの名前。この例では、extensions.dijit.MyWidgetです。
editorParams: この引数は、パラメータのJSON文字列をウィジェットに渡します。この例では、maxAllowedLength値を渡しています。たとえば、値は次のようになります。{ maxAllowedLength: "10" }
maximumValues: 複数値ウィジェットでのみ必要です。これは、複数値ウィジェットでレンダリング可能な値の最大数です。
単一値ウィジェットの場合、初期化パラメータおよびフォーマット・スタイルを使用した完全なコードは、例67-2「サンプル単一値属性エディタ(MYATTREDITOR)」のコードのようになります。複数値ウィジェットを実装するには、第67.3.5項「複数値属性エディタの実装」を参照してください。
例67-2で指定されるコードを使用する場合、単一値属性エディタは図67-1のエディタのようになります。
|
注意: 例67-2では、新規属性エディタを使用して単一値属性をレンダリングするために、次のコア・ロジックが実装されます。
<ics:if condition='<%= "no".equals(ics.GetVar("MultiValueEntry")) %>'>
<ics:then>
<div dojoType='<%= ics.GetVar("editorName") %>'
name='<%= ics.GetVar("cs_SingleInputName") %>'
value='<%= attributeValue %>'
>
</div>
</ics:then>
Dojoテンプレートの入力ノードが同じ名前になるように、エレメントでコード化される名前は |
例67-2 サンプル単一値属性エディタ(MYATTREDITOR)
<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %>
<%@ taglib prefix="ics" uri="futuretense_cs/ics.tld" %>
<%@ taglib prefix="satellite" uri="futuretense_cs/satellite.tld" %>
<%//
// OpenMarket/Gator/AttributeTypes/MYATTREDITOR
//
// INPUT
//
// OUTPUT
//%>
<%@ page import="COM.FutureTense.Interfaces.FTValList" %>
<%@ page import="COM.FutureTense.Interfaces.ICS" %>
<%@ page import="COM.FutureTense.Interfaces.IList" %>
<%@ page import="COM.FutureTense.Interfaces.Utilities" %>
<%@ page import="COM.FutureTense.Util.ftErrors" %>
<%@ page import="COM.FutureTense.Util.ftMessage"%>
<cs:ftcs>
<ics:setvar name="doDefaultDisplay" value="no" />
<script>
dojo.require('extensions.dijit.MyWidget');
</script>
<link href="<%=ics.GetVar("cs_imagedir")%>/../js/extensions/themes/MyWidget.css"
rel="stylesheet" type="text/css"/>
<%
FTValList args = new FTValList();
args.setValString("NAME", ics.GetVar("PresInst"));
args.setValString("ATTRIBUTE", "MAXALLOWEDCHARS");
args.setValString("VARNAME", "MAXALLOWEDCHARS");
ics.runTag("presentation.getprimaryattributevalue", args);
args.setValString("NAME", ics.GetVar("PresInst"));
args.setValString("ATTRIBUTE", "MAXVALUES");
args.setValString("VARNAME", "MAXVALUES");
ics.runTag("presentation.getprimaryattributevalue", args);
String maximumValues = ics.GetVar("MAXVALUES");
maximumValues = null == maximumValues ? "-1" : maximumValues;
String editorParams = "{ maxAllowedLength: "
+ ics.GetVar("MAXALLOWEDCHARS") + " }";
%>
<tr>
<ics:callelement
element="OpenMarket/Gator/FlexibleAssets/Common/DisplayAttributeName"/>
<td></td>
<td>
<ics:callelement
element="OpenMarket/Gator/AttributeTypes/CustomTextAttributeEditor">
<ics:argument name="editorName" value="extensions.dijit.MyWidget" />
<ics:argument name="editorParams" value='<%= editorParams %>' />
<ics:argument name="maximumValues" value="<%= maximumValues %>" />
</ics:callelement>
</td>
</tr>
</cs:ftcs>
第67.3.4項「属性エディタの作成」に進みます。
この項では、属性エディタ・アセットを作成して、コンテンツ・コントリビュータがコンテンツ管理サイトで使用できるようにする方法について説明します。このアセットは、第67.3.3項「属性エディタ・エレメントの作成」で定義した入力タイプ、たとえば、チェック・ボックス、ラジオ・オプションおよびドロップダウン・リストをサポートします。開発者は、属性を作成または変更する際にこのエディタを選択します。
サイトのAdminインタフェースにログインします。
「名前」列の「新規」ページで、「新規属性エディタ」をクリックします。
「名前」フィールドに、エディタのわかりやすい名前を入力します。たとえば、MyAttrEditorと入力します。
「XML」ボックスで、属性エディタのXMLコードを入力します。このコードの属性エディタの名前が、エレメント名とまったく同じであることを確認します。例:
<?XML VERSION="1.0"?> <!DOCTYPE PRESENTATIONOBJECT > <PRESENTATIONOBJECT NAME="MYATTREDITOR"> <MYATTREDITOR MAXALLOWEDCHARS="10"> </MYATTREDITOR> </PRESENTATIONOBJECT>
「属性タイプ」ボックスで、適切な値を受け入れます。
「保存」アイコンをクリックします。
図67-2のエディタに類似した属性エディタが、サイトに対して作成されます。
第67.3.5項「複数値属性エディタの実装」に進みます。
第67.3.3項「属性エディタ・エレメントの作成」の例67-2には、単一値属性エディタの実装が示されています。text、integer、stringまたはmoneyデータ型の複数値属性エディタを実装するには、例67-3のコードに類似したコードを記述できます。
例67-3 サンプル複数値属性エディタ(CustomTextAttributeEditor)
<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %>
<%@ taglib prefix="ics" uri="futuretense_cs/ics.tld" %>
<%@ taglib prefix="satellite" uri="futuretense_cs/satellite.tld" %>
<%//
// OpenMarket/Gator/AttributeTypes/CustomTextAttributeEditor
//
// INPUT
//
// OUTPUT
//%>
<%@ page import="COM.FutureTense.Interfaces.FTValList" %>
<%@ page import="COM.FutureTense.Interfaces.ICS" %>
<%@ page import="COM.FutureTense.Interfaces.IList" %>
<%@ page import="COM.FutureTense.Interfaces.Utilities" %>
<%@ page import="COM.FutureTense.Util.ftErrors" %>
<%@ page import="COM.FutureTense.Util.ftMessage"%>
<cs:ftcs>
<%
IList attributeValueList = ics.GetList("AttrValueList", false);
boolean hasValues = null != attributeValueList && attributeValueList.hasData();
String attributeValue = hasValues ? attributeValueList.getValue("value") : "";
%>
<ics:if condition='<%= "no".equals(ics.GetVar("MultiValueEntry")) %>'>
<ics:then>
<div dojoType='<%= ics.GetVar("editorName") %>'
name='<%= ics.GetVar("cs_SingleInputName") %>'
value='<%= attributeValue %>'
>
</div>
</ics:then>
<ics:else>
<ics:callelement
element="OpenMarket/Gator/AttributeTypes/RenderMultiValuedTextEditor">
<ics:argument name="editorName"
value='<%= ics.GetVar("editorName") %>' />
<ics:argument name="editorParams"
value='<%= ics.GetVar("editorParams") %>' />
<ics:argument name="multiple"
value="true" />
<ics:argument name="maximumValues"
value='<%= ics.GetVar("maximumValues") %>' />
</ics:callelement>
</ics:else>
</ics:if>
</cs:ftcs>
例67-3のコードを使用すると、複数値属性エディタは、図67-3のエディタのようになります。
例67-3に関する次の点に注意してください。
単一値ウィジェットを使用して複数値表現をレンダリングする、複数値ウィジェットをインスタンス化できます。
no値を指定したMultiValueEntry変数は、属性エディタが単一値をレンダリングすることを示します。この変数値をyesに変更すると、属性エディタが複数値をレンダリングできるようになります。
JSONオブジェクトまたは他の任意の形式の値を受け入れる複数値ウィジェットを実装できます。
複数値属性エディタの場合、RenderMultiValuedTextEditorエレメントは、Saveロジックに必要な非表示入力ノードを作成します。各ノードの値はサーバーに送信されます。
複数値ウィジェットは、OpenMarket/Gator/AttributeTypes/RenderMultiValuedTextEditorエレメントをコールしてレンダリングされます。その際には、例67-3の次のコードが使用されます。
<ics:else>
<ics:callelement
element="OpenMarket/Gator/AttributeTypes/RenderMultiValuedTextEditor">
<ics:argument name="editorName"
value='<%= ics.GetVar("editorName") %>' />
<ics:argument name="editorParams"
value='<%= ics.GetVar("editorParams") %>' />
<ics:argument name="multiple"
value="true" />
<ics:argument name="maximumValues"
value='<%= ics.GetVar("maximumValues") %>' />
</ics:callelement>
</ics:else>
</ics:if>
blobまたはassetデータ型のカスタム属性エディタを作成する場合、blob型はUPLOADER属性エディタを、assetデータ型はPICKASSET属性エディタを実装の基準にすることができます。
