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

评论

1 楼 ghpaas 2014-06-12  

orbeon作为xforms标准的实现，不论其设计器还是运行时度存在很多问题：
设计器：仅仅是提供一个简单的工具，其实更加复杂的功能还需要开发人员手动编码。
并且需要花费大量的时间去熟悉、学习orbeon自身的功能。
运行时：提供的运行时开发人员几乎不能随便修改，造成不够灵活，譬如需要提供一个进度条、定制展现样式、定制对话框等，非常的复杂。
在此向博主及各位推荐使用GForms开发平台http://blog.csdn.net/ghpaas/article/details/30222989，GForms开发平台让开发人员甚至非技术人员在短短几分钟内创建全功能的展现服务，让开发团队更加适应客户和市场的需求，从而提高客户服务和速度实现收益。该开发平台提供可视化的设计器、运行时，设计器基于eclipse开发，非常的简单，完全实现xforms1.1标准，并且支持开发人员编写样式、javascript处理函数等。

GForms开发平台百度上有大量资料，且有iaas云管理平台Demo例子： http://yun.baidu.com/s/1bnznec3#dir/path=%2Fghorse