基于组件的机制的客户端-SimpleFramework

如何使用组件：

描述文件的位置

XML描述文件的位置由请求参数__xmlpath决定，比如：

 

http://simpleframework.net/t.do?__xmlpath=/demo/t.xml&p1=data1&p2=data2 

如果访问的是JSP文件，则__xmlpath可以不定义，此时， XML描述文件的位置被默认为和JSP文件同路径并且同文件名的XML文件。

在Eclipse等IDE下，可以通过引入本地XMLSchema来加快开发及合法性验证：

 

<?xml version="1.0" encoding="UTF-8"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:noNamespaceSchemaLocation="/xsd/default/simple.xsd"> 
    ...  
</page> 

 

 

组件的定义

SimpleFramework的所有组件都是在XML描述文件中的components标签下定义的， 这有别于标签库 (TagLibs)，能更好的把展示(HTML/JSP)和定义(XML)进行有效的分离。比如，定义一个树组件：

 

<?xml version="1.0" encoding="UTF-8"?> 
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xsi:noNamespaceSchemaLocation="/xsd/default/simple.xsd"> 
    <components> 
        <tree name="doc2Tree" containerId="doc2Tree"> 
        </tree> 
        ...  
    </components> 
</page>    

 

 

 

组件和页面文档元素的绑定

组件和页面文档元素的绑定是通过CSS Selector实现的，有了这种绑定关系， 一般来讲，组件会对页面DOM元素进行如下可能性的增强：

为绑定的元素添加属性和事件

为绑定的元素添加子元素

移动绑定的元素到适合的位置

添加脚本支持

这种增强性的操作都是由SimpleFramework自动完成的，客户端只需要根据组件的差异来定义不同的绑定关系，如上述的树组件，containerId属性定义了基于ID的选择器，这样，组件生成的代码为绑定的元素添加需要子元素(树)。

通过Javascript调用组件

组件的调用是通过一个内置的Javascript对象$Actions来完成的，更多关于$Actions的介绍请参考$Actions是什么。

$Actions是什么

$Actions是一个Javascript对象

$Actions是一个Javascript对象，是window的一个子对象，可以通过window.$Actions或则直接$Actions访问。

$Actions的目标及组件对象

$Actions的目标是客户端(浏览器)能通过Javascript来调用组件对象。绝大多数组件都会在$Actions里生成一个操作自己行为的组件对象，该组件对象可以通过$Actions["name"]访问， name是组件的名称，在组件描述文件中必须定义该名称。

组件对象定义了自己的属性及方法，可以通过Javascript来调用这些属性及方法。比如刷新树组件：

 

$Actions["treeName"].refresh(); 

$Actions["name"]()是组件的缺省函数，在大部分情况下，缺省函数体现了这个组件的主要特性，比如，$Actions["ajaxRequest"]()即发出一个AJAX请求; $Actions["treeName"]()即构造了整棵树。

$Actions.callSafely函数

$Actions定义了callSafely函数来安全的访问组件对象。因为在页面装载的时候，组件对象可能还没生成，就有脚本开始调用该组件对象，通过callSafely函数可以确保组件对象已经存在再开始调用。