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