Contributorインタフェースのアセット・フォームのカスタマイズ

62 Contributorインタフェースのアセット・フォームのカスタマイズ

Oracle WebCenter Sites: Contributorインタフェースのアセット・フォームをカスタマイズする場合、アセット・フォーム・ヘッダーを変更することや、サポートされているデータ型の単一値属性エディタおよび複数値属性エディタを構築することもできます。

トピック:

アセット・フォームのカスタマイズについて

アセット・フォームのヘッダーの変更、および属性エディタのカスタマイズまたは構築を行うことができます。

「属性エディタのカスタマイズ」および「属性エディタの構築」を参照してください。

ノート:

Contributorインタフェースの他のコンポーネントとは異なり、アセット・フォームは、Contributorフレームワークにはありません。そのため、アセット・フォームのリクエストは、UIコントローラによって処理されません。

アセット・フォームのヘッダーの変更

カスタムassettype固有のエレメントを作成し、追加のスタイルシートやJavaScriptコードを含めて、アセット・フォームのヘッダーを変更できます。

アセット・フォームのヘッダーを変更するには、OpenMarket/Xcelerate/AssetType/<AssetTypeName>/ディレクトリのカスタムassettype固有のエレメントを作成します。

HTMLページの本文を変更するのではなく、追加のスタイルシートまたはJavaScriptコードを含めることができます。エレメントの名前はHeaderにする必要があります。

属性エディタの構築

WebCenter Sitesでサポートされているデータ型のカスタム属性エディタを作成できます。既存の使用準備済の属性エディタのルック・アンド・フィールをカスタマイズすることもできます。

属性エディタのカスタマイズを参照してください。

このトピックでは、データ型text、string、integerまたはmoneyの単一値をサポートするカスタム属性エディタを構築する方法について説明します。また、この項では、同じデータ型の複数値属性エディタを実装するためのポインタおよびサンプル・コードも提供します。

ノート:

blobまたはassetデータ型のカスタム属性エディタを作成するには、blob型はUPLOADER属性エディタを、assetデータ型はPICKASSET属性エディタを実装の基準にします。

トピック:

Dojoウィジェットとそのテンプレートの作成

この項では、データ型text、string、integerまたはmoneyの単一値を処理するDojoウィジェットを作成する方法について説明します。

この項には次のトピックが含まれます:

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>
```
このコードをテンプレートで使用する場合、エンド・ユーザーからの入力を入力ノードが受け取った後、その入力ノードの値は、「Dojoウィジェットの作成」で作成するDojoウィジェットで保持されます。
テンプレート・ファイルを保存します。

Dojoウィジェットの作成

Dojoウィジェットを作成するには:

WebCenter Sitesインストールのjs/extensions/dijitディレクトリに移動します。

次の必須機能を実装することにより、dojoウィジェット、たとえば、MyWidget.jsを作成します(次の例を参照)。

_setValueAttr: このsetterメソッドは、属性の値を設定します。
_getValueAttr: このgetterメソッドは、属性値を取得します。
isValid: このメソッドは、指定された値が有効かどうかを確認するために検証を実行します。
focus: これは、属性エディタにフォーカスを設定します。
onChange: このメソッドは、ユーザーが属性の値を更新するたびにコールされます。
onBlur: このメソッドは、属性値がユーザーによって入力されるときに、ウィジェットを更新します。ユーザーが別のフィールドを選択すると、更新がトリガーされます。

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, that is, 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ウィジェットの作成の詳細は、次を参照してください。

http://dojotoolkit.org/

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インストールで、<OracleHome>\wcsites\webcentersites\sites-home\sites.war\WEB-INF\sites\presentationobject.dtdファイルまたは<OracleHome>\wcsites\webcentersites\sites-home\sites-samples.war\WEB-INF\sites\presentationobject.dtdファイル(インストールに適用されるパス)に移動します。
presentationobject.dtdファイルで、次を実行します。
- 新しいタグ(プレゼンテーション・オブジェクト)を<!ELEMENT PRESENTATIONOBJECT …>文内のリストに追加します。この例では、新しいタグにはMYATTREDITORという名前が付けられます。
  
  次の行では、MYATTREDITORは、その名前が「属性エディタ・エレメントの作成」で作成するエレメントの名前に一致するカスタム属性エディタです。他のすべてのタグは使用準備済の属性エディタです。
```
<!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ディレクトリに配置される必要があります。エレメント名は、タグで起動できるように、「プレゼンテーション・オブジェクトとしての属性エディタの定義」で定義したタグの名前と正確に一致している必要があります(この例では、MYATTREDITOR)。

ElementCatalogのOpenMarket/Gator/AttributeTypesディレクトリに移動します。
新しいエディタの属性エレメントを作成します(この例では、MYATTREDITOR.jsp。)このエレメントの名前がpresentationobject.dtdファイルで定義したタグ名に一致していることを確認します。
属性エディタがデフォルトでレンダリングされないようにするには、doDefaultDisplay変数をnoに設定します。
属性名を表示するには、エレメントOpenMarket/Gator/FlexibleAssets/Common/DisplayAttributeNameをコールします。コードは次のとおりです。
```
<ics:callelement
  element="OpenMarket/Gator/FlexibleAssets/Common/DisplayAttributeName"/>
```

ウィジェットをレンダリングするには、次のパラメータを使用して、エレメントOpenMarket/Gator/AttributeTypes/CustomTextAttributeEditorをコールします。

editorName: 「Dojoウィジェットの作成」で作成したウィジェットの名前。この例では、extensions.dijit.MyWidgetです。
editorParams: この引数は、パラメータのJSON文字列をウィジェットに渡します。この例では、maxAllowedLength値を渡しています。たとえば、値は次のようになります。{ maxAllowedLength: "10" }
maximumValues: 複数値ウィジェットでのみ必要です。これは、複数値ウィジェットでレンダリング可能な値の最大数です。

単一値ウィジェットの場合、初期化パラメータおよびフォーマット・スタイルを使用した完全なコードは、次のコード例のコードのようになります。

次の例で指定されるコードを使用する場合、単一値属性エディタはエディタのようになります。

図62-1 単一値属性エディタ

「図62-1 単一値属性エディタ」の説明

ノート:

次の例では、新規属性エディタを使用して単一値属性をレンダリングするために、次のコア・ロジックが実装されます。

<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テンプレートの入力ノードが同じ名前になるように、エレメントでコード化される名前はics.GetVar("cs_SingleInputName")にする必要があります。この入力ノード値は、属性を保存するためにサーバーに送信されます。

<%@ 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>

属性エディタの作成

このトピックでは、属性エディタ・アセットを作成して、コンテンツ・コントリビュータがコンテンツ管理サイトで使用できるようにする方法について説明します。このアセットは、「属性エディタ・エレメントの作成」で定義した入力タイプ、たとえば、チェック・ボックス、ラジオ・オプションおよびドロップダウン・リストをサポートします。開発者は、属性を作成または変更する際にこのエディタを選択します。

サイトのAdminインタフェースを開きます。
「名前」列の「新規」ページで、「新規属性エディタ」をクリックします。
「名前」に、エディタのわかりやすい名前を入力します。たとえば、MyAttrEditorです。
「XML」で、属性エディタのXMLコードを入力します。このコードの属性エディタの名前が、エレメント名とまったく同じであることを確認します。たとえば:
```
<?XML VERSION="1.0"?> 
<!DOCTYPE PRESENTATIONOBJECT >
<PRESENTATIONOBJECT NAME="MYATTREDITOR">
<MYATTREDITOR MAXALLOWEDCHARS="10"> </MYATTREDITOR> </PRESENTATIONOBJECT>
```
「属性タイプ」で、適切な値を受け入れます。
「保存」アイコンをクリックします。

次の図のエディタに類似した属性エディタが作成されます。

図62-2 サイトのサンプル属性エディタ

「図62-2 サイトのサンプル属性エディタ」の説明

複数値属性エディタの実装

「属性エディタ・エレメントの作成」の2番目の例には、単一値属性エディタの実装が示されています。

text、integer、stringまたはmoneyデータ型の複数値属性エディタを実装するには、次の例のコードに類似したコードを記述します。

<%@ 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>

前述の例のコードを使用すると、複数値属性エディタは、この図のエディタのようになります。

図62-3 複数値属性エディタ

「図62-3 複数値属性エディタ」の説明

コードの例に関する次の点に注意してください。

単一値ウィジェットを使用して複数値表現をレンダリングする、複数値ウィジェットをインスタンス化できます。
no値を指定したMultiValueEntry変数は、属性エディタが単一値をレンダリングすることを示します。この変数値をyesに変更すると、属性エディタが複数値をレンダリングできるようになります。
JSONオブジェクトまたは他の任意の形式の値を受け入れる複数値ウィジェットを実装できます。
複数値属性エディタの場合、RenderMultiValuedTextEditorエレメントは、Saveロジックに必要な非表示入力ノードを作成します。各ノードの値はサーバーに送信されます。

複数値ウィジェットは、前述の例の次のコードを使用して、OpenMarket/Gator/AttributeTypes/RenderMultiValuedTextEditorエレメントをコールしてレンダリングされます。

<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属性エディタを実装の基準にします。