xforms中首页面与iframe间的通信

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"/>

xforms中首页面与iframe间的通信

相关推荐