xforms中主頁面與iframe間的通信

=============================================
======使用OPS提供的dialog實現對話框功能======
=============================================
 OPS提供的dialog實現對話框功能有兩種使用方式: 內嵌和引用
一. 內嵌
 基本原理: 與一般的XForms元素一樣, 直接將對話框內容嵌入頁面中.
 語法: 參考OPS相關的文檔
 案例: 參考OPS提供的案例
 
二. 引用
 基本原理: xxforms:dialog + iframe
 語法: 在xxforms:dialog中, 通過iframe來引用對話框的內容;
 關鍵技術點:
  1. 主頁面與對話框之間的通信
   1.1 主頁面刷新對話框的機制
    通過OPS中在submission上擴展的xxforms:target來實現.
   1.2 主頁面訪問對話框中的方法[數據傳遞]
    通過iframe提供的機制實現[window.iframe-name.fun-name()], 通過參數傳遞數據;
   1.3 對話框訪問主頁面中的方法[數據傳遞]
    通過iframe提供的機制實現[parent.fun-name()], 通過參數傳遞數據;
  2. 如何控制對話框中的iframe只刷新一次
   基本原理: 在xxforms-dialog-open事件中有條件的刷新iframe.
   案例:
    <xforms:action ev:event="xxforms-dialog-open"
     if="string(instance('dialog-flag')/is-load-dialog-content)=''">
     <xforms:setvalue ref="instance('dialog-flag')/is-load-dialog-content" value="'true'"/>
     <xforms:send submission="load-dialog-content"/>
    </xforms:action> 
  
  3. 主頁面如何觸發對話框中xforms action
   第一步, 主頁面通過window.iframe-name.fun-name()調用對話框中的一個js方法;
   第二步, 在對話框中的js方法中使用  JUSTEP.dispatchEvent(target, event-name)向某個control[一個model或trigger]派發一個事件;
   第三步, 在這個control上使用xforms action來監控這個事件即可.
  
  4. js如何訪問xforms instance中的數據[單個節點內容或整個DOM對象]
   第一步, 使用一個xforms展現組件[xforms:input\xforms:output\xforms:textarea]顯示需要訪問的數據
   對於單個節點的內容, 可以直接使用ref; 對於整個DOM的內容, 可以使用saxon:serialize(instance('user-checked-id'), 'xml')將某個DOM
  進行序列化.
   例如:
    <xforms:trigger>
     <xforms:label>xforms instance to js</xforms:label>
     <xforms:action ev:event="DOMActivate">
                  <xforms:setvalue ref="instance('output')/data"
                   value="saxon:serialize(instance('user-checked-id'), 'xml')"/>
                  <xxforms:script>
                   var data = JUSTEP.getXformsValue("dialog-output");
                  </xxforms:script>
     </xforms:action>
    <xforms:trigger>
    <xforms:textarea style="display:none" id="dialog-output" ref="instance('output')/data"/> 
    
   
   第二步, js訪問相應control的內容
   使用JUSTEP.getXformsValue(control-id)來實現.
   最終, js通過control作爲中介, 訪問到xforms instance中的內容.
   
  5. js如何修改xforms instance中的節點[單個節點的內容或爲某個節點添加子節點] 
   第一步, 將js中的數據賦值到某個control上
   使用JUSTEP.setXformsValue(control-id, value)來實現, 其中這個control與xforms instance的某個節點關聯[如果修改是xforms instance中
  單個節點的值, control與那個節點關聯即可; 否則control關聯的節點是一箇中間節點, 並進行以下操作]
   例如:
    JUSTEP.setXformsValue("dialog-output", data);  
    <xforms:textarea style="display:none" id="dialog-output" ref="instance('dialog-flag')/data"/>    
   
   第二步, 將控制權轉交給標準的xforms:action
   通過JUSTEP.dispatchEvent(target, even-name)來實現
   例如:
    JUSTEP.dispatchEvent('close-dialog-trigger', 'DOMActivate');
    
    <xforms:trigger id="close-dialog-trigger">
     <xforms:label>close</xforms:label>
     <xforms:action ev:event="DOMActivate">
      <xforms:insert context="instance('select-material-output-instance')"
       origin="saxon:parse(instance('dialog-flag')/data)/form/FSelected"/>          
     </xforms:action>
    </xforms:trigger>    
   第三步, 在xforms:action中使用xforms:insert + saxon:parse來實現
   例如:
    <xforms:insert context="instance('select-material-output-instance')"
     origin="saxon:parse(instance('dialog-flag')/data)/form/FSelected"/>