コンポーネントツリーへの挿入

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://www.ibm.com/xsp/core xsdxp://localhost/xsp~core.xsd" style="margin:50px">
  <xp:link id="link2" text="Dynamicallly inject a Date picker...">
    <xp:eventHandler event="onclick" submit="true"
      refreshMode="complete">
      <xp:this.action>
        <![CDATA[#{javascript:
          importPackage(com.ibm.xsp.convert);
          importPackage(com.ibm.xsp.component.xp);
          try{
            if(null == getComponent("inputText1")){
              view.setDojoParseOnLoad(true);
              view.setDojoTheme(true);
              var div = getComponent("injectionPoint");
              var inputText = new XspInputText();
              inputText.setId("inputText1");
                  var binding = facesContext.getApplication().createValueBinding("#{viewScope.date}");
              inputText.setValueBinding("value", binding);
              div.getChildren().add(inputText);
                var converter = new DateTimeConverter();
                converter.setType("date");
              inputText.setConverter(converter);
              var dateTimeHelper = new XspDateTimeHelper();
              dateTimeHelper.setId("dateTimeHelper1");
              inputText.getChildren().add(dateTimeHelper);
              inputText.setRendered(true);
            }
          }catch(e){
            print("Error injecting component: " + e);
            throw e;
          }
        }]]>
      </xp:this.action>
    </xp:eventHandler>
  </xp:link>
 
  <xp:div id="injectionPoint" style="margin:20px;"></xp:div>
 
  <xp:text escape="true" id="computedField1" value="#{viewScope.date}"></xp:text>
   
  <xp:br></xp:br>
  <xp:br></xp:br>
 
  <xp:button value="Submit" id="button1">
    <xp:eventHandler event="onclick" submit="true"
      refreshMode="complete" immediate="false" save="true">
    </xp:eventHandler>
  </xp:button>
</xp:view>





この XSP はあるコントロール(ここでは日付ピッカー)を動的にコンポーネントツリーに挿入し、同時にビュースコープ編集に値をバインディングしています。

この XPage をロードしリンクの部分をクリックします。すると日付ピッカーがサーバーサイドのコンポーネントツリーに挿入され、クライアントサイドでレンダリングされます。
このコントロールから日付を適当に選択し、「Submit」ボタンをクリックします。
選択した日付が計算結果フィールドに表示され、同時に viewScope.date 変数にバインドされます。

XPages
katoman
August 19, 2015 at 1:43 PM
Rating
0





No comments yetLogin first to comment...