Takenoff Labs

XPages で、カスタムコントロールによる部品を作っていると、CSJS/SSJS をプロパティで定義できるようにしたいケースが出てくるかと思います。

たとえば、ダイアログ部品を作っていて、「OK」ボタンの動作はプロパティで設定させたい、というような場合です。

CSJS の場合は難しくはないですが、SSJS を渡せるようにするのはちょっと面倒です。以下に手順を記載してみます。

---

1. カスタムコントロールにプロパティを追加し、種類の横にあるボタンをクリックします。

2. ダイアログで、[複合タイプ] → [methodBindingBaseType] を選択します。

3. エディタに「メソッドバインディングエディタ」を選択します。

4. 定義したプロパティを使用する JavaScript を記述し、カスタムコントロールを保存します。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
    <xp:inputText id="inputText1" value="#{document1.test}">
    </xp:inputText>
    <xp:button value="セット" id="button1">
        <xp:eventHandler event="onclick" submit="true"
            refreshMode="partial" disableValidators="true"
            refreshId="inputText1">
            <xp:this.action><![CDATA[
#{javascript:if (compositeData.onSet) {
	compositeData.onSet.invoke(facesContext, null);
}}]]></xp:this.action>
        </xp:eventHandler>
    </xp:button>
</xp:view>

5. [ウィンドウ]メニュー → [Eclipse ビューの表示] → [パッケージ・エクスプローラー]を実行してパッケージ・エクスプローラーを表示し、該当のカスタムコントロールの下にある「～.xsp-config」を開きます。

6. ソースタブで、該当プロパティの「<property-extension>」タグ内に、以下のタグを追加し、保存します。（このタグがないと、表示時に SSJS が何回も実行されてしまったり、プロパティにうまく SSJS が表示されない、といった不具合が発生します。）

<method-binding-property>true</method-binding-property>

（例）

<?xml version="1.0" encoding="UTF-8"?>
<faces-config>
  <faces-config-extension>
    <namespace-uri>http://www.ibm.com/xsp/custom</namespace-uri>
    <default-prefix>xc</default-prefix>
  </faces-config-extension>
  <composite-component>
    <component-type>ccTest</component-type>
    <composite-name>ccTest</composite-name>
    <composite-file>/ccTest.xsp</composite-file>
    <composite-extension>
      <designer-extension>
        <in-palette>true</in-palette>
      </designer-extension>
    </composite-extension>
    <property>
      <property-name>onSet</property-name>
      <property-class>javax.faces.el.MethodBinding</property-class>
      <property-extension>
        <method-binding-property>true</method-binding-property>
        <designer-extension>
          <editor>com.ibm.workplace.designer.ide.xfaces.internal.editors.MethodBindingEditor</editor>
        </designer-extension>
      </property-extension>
    </property>
  </composite-component>
</faces-config>

（※xsp-config ファイルの詳細については、XPages configuration file format を参照してください。5ページにわたる詳細な解説が記載されています。）

---

以上でプロパティ定義は完了です。XPage 側では、以下のようにプロパティを設定できます（GUIでは SSJS 用のエディタになっています）。

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
    xmlns:xc="http://www.ibm.com/xsp/custom">
    <xp:this.data>
        <xp:dominoDocument var="document1" formName="Test">
        </xp:dominoDocument>
    </xp:this.data>
    <xc:ccTest>
        <xc:this.onSet><![CDATA[
#{javascript:var now = I18n.toString(new Date, 'yyyy/MM/dd HH:mm:ss');
document1.replaceItemValue('test', now);}]]>
        </xc:this.onSet>
    </xc:ccTest>
</xp:view>

この XPage 実行すると、以下のような画面になります。プロパティで設定した SSJS が実行されることを確認してください。

• 検証バージョン: R9.0.1

トラックバックURL :