XPages のダイアログから動的 JS 関数をコールする

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex">
   
  <!-- DIV - to store our function Name and arguments to be triggered after Dialog close -->
  <div id="dlgArg" style="display:none"></div>
   
  <!-- ScriptBlock - Functions to be triggered -->
  <xp:scriptBlock id="scriptBlock1" type="text/javascript">
    <xp:this.value><![CDATA[// Generic Function to call out dynamic functions
function functionTrigger (func){
  window[func](arguments[1]);
}
 
// function 1 - will be called after dialog hide
function calledFunc_showComment(arg1){
    // Do stuff here
    alert("functionName:calledFunc_showComment > arg1:" + arg1);
}]]></xp:this.value>
  </xp:scriptBlock>
 
  <xp:br></xp:br>
   
  <xp:button value="Open Dialog" id="button1">
    <xp:eventHandler event="onclick" submit="false">
      <xp:this.script><![CDATA[// Save local function Name and arguments
dojo.attr("dlgArg", "functionName", "calledFunc_showComment");
 
// Optional - Pass to dialog function arguments before opening it.
// dojo.attr("dlgArg", "arg1", "ferhat");
// dojo.attr("dlgArg", "arg2", "bulut");
 
// Open Dialog
XSP.openDialog("#{id:dialogTest}")]]></xp:this.script>
    </xp:eventHandler>
  </xp:button>
  <xp:br></xp:br>
  <xe:dialog id="dialogTest" title="Comment" style="width:350px">
    <xe:this.onHide><![CDATA[// Trigger function after Dialog Hide
// Function Name is coming from dlgArg node.
// Input Param is coming from Dialog node.
functionTrigger(dojo.attr("dlgArg", "functionName"), dojo.attr("#{id:dialogTest}", "userComment"));]]></xe:this.onHide>
 
    <xp:panel style="padding:2px;">
      <xp:inputTextarea id="inputUserComment"
        style="width:99%;height:150px">
      </xp:inputTextarea>
      <xe:dialogButtonBar id="dialogButtonBar">
        <xp:button value="Save Comment" id="btnOK">
          <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[// Save information which entered from Dialog.
dojo.attr("#{id:dialogTest}", "userComment", dojo.byId("#{id:inputUserComment}").value);
 
/*
alert("functionName:" + dojo.attr("dlgArg", "functionName"));
alert("arg1:" + dojo.attr("dlgArg", "arg1"));
alert("arg2:" + dojo.attr("dlgArg", "arg2"));
 
functionTrigger(dojo.attr("dlgArg", "functionName"), dojo.attr("dlgArg", "arg1"), dojo.attr("dlgArg", "arg2"));
*/
 
XSP.closeDialog("#{id:dialogTest}");]]></xp:this.script>
          </xp:eventHandler>
        </xp:button>
        <xp:button value="Close" id="btnClose">
          <xp:eventHandler event="onclick" submit="false">
            <xp:this.script><![CDATA[XSP.closeDialog("#{id:dialogTest}");]]></xp:this.script>
          </xp:eventHandler>
        </xp:button>
      </xe:dialogButtonBar>
    </xp:panel>
  </xe:dialog>
</xp:view>





この XPages の設計には DIV、スクリプトブロック、ダイアログのオブジェクトがあります。

このサンプルでは、異なる XPages で違う操作をする共通のダイアログカスタムコントロールのオブジェクトを作成してみました。

DIV -> dojo.attr を使って動的関数の詳細を保存するのに使用してます
スクリプトブロック -> 動的関数を起動するメインの関数をコールするのに使用しています。 - triggerFunction-
ダイアログ -> サンプルのダイアログ。ユーザーからのコメントを入手。ダイアログの閉じる/非表示操作のあと、ダイアログが動的関数をコールします。

XPages
katoman
August 19, 2015 at 10:32 AM
Rating
0





No comments yetLogin first to comment...