SimpleFramework组件简单使用文档
SimpleFramework在技术架构与原理上做了很多介绍，很多关心Simple的用户反馈给我们很多好的建议，这些建议为
simple的发展提供很多的思路，这里表示真诚的感谢。
今天这篇组件的使用文档希望大家看下面的例子就可以入门，重点介绍simple的组件如何使用，这样可以有一个感性上
的认识。Simple提供大量的组件例子，虽然都放到演示demo中，这对于大家对Simple的组件优势还是一个模糊的概念，
今天就以系统中常用的菜单组件为例子，说明Simple组件的使用方法。
1.组件的定义
SimpleFramework的所有组件都是在XML描述文件中的components标签下定义的， 这有别于标签库 (TagLibs)，能更好的把展示(HTML/JSP)和定义(XML)进行有效的分离，比如本例所讲的menu.jsp，就需要定义对于的菜单组件，menu.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>
<menu name="mref" runImmediately="false">
<menuitem title="新建窗口" icon="#add"></menuitem>
<menuitem title="新建标签页"></menuitem>
<menuitem title="打开位置"></menuitem>
<menuitem title="打开文件"></menuitem>
<menuitem title="关闭窗口"></menuitem>
<menuitem title="关闭标签页"></menuitem>
<menuitem title="-"></menuitem>
<menuitem title="页面另存为"></menuitem>
<menuitem title="发送页面"></menuitem>
<menuitem title="-"></menuitem>
<menuitem title="退出"></menuitem>
</menu>
<menu name="menu1" containerId="menu1">
<menuitem title="文件">
<menuitem ref="mref"></menuitem>
</menuitem>
<menuitem title="-"></menuitem>
<menuitem title="编辑">
<menuitem title="撤销"></menuitem>
<menuitem title="重做"></menuitem>
<menuitem title="-"></menuitem>
<menuitem title="查找"></menuitem>
<menuitem title="查找下一个"></menuitem>
</menuitem>
<menuitem title="-"></menuitem>
<menuitem title="查看"></menuitem>
<menuitem title="-"></menuitem>
<menuitem title="历史"></menuitem>
<menuitem title="-"></menuitem>
<menuitem title="书签"></menuitem>
<menuitem title="-"></menuitem>
<menuitem title="工具"></menuitem>
<menuitem title="-"></menuitem>
<menuitem title="帮助">
<menuitem title="检查更新"></menuitem>
<menuitem title="-"></menuitem>
<menuitem title="关于"></menuitem>
</menuitem>
</menu>
<menu name="menu2" menuEvent="contextmenu" formSelector="#menu2">
<menuitem ref="mref"></menuitem>
</menu>
<menu name="menu3" menuEvent="click" formSelector="#menu3">
<menuitem ref="mref"></menuitem>
</menu>
</components>
</page>
2.
组件和页面文档元素的绑定
实现方式是通过CSS Selector实现的，有了这种绑定关系，组件会对页面DOM元素行如下增强：
1.为绑定的元素添加属性和事件
2.为绑定的元素添加子元素
3.移动绑定的元素到适合的位置
4.添加脚本支持
上述由SimpleFramework自动完成的，如本例的菜单组件，containerId属性定义了基于ID的选择器，这样，组件生成的代码为绑定的元素添加需要子元素。
下面是 menu.jsp 具体内容，请看下id 的属性就是上述menu.xml 定义的containerId。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<div id="demoMenu" style="padding: 10px;">
<div style="margin: 5px 0px;">主菜单演示如下</div>
<div id="menu1" style="height: 30px; border: 3px solid #ddd; background: #f6faf6; padding: 2px;"></div>
<div style="margin: 5px 0px;">右键菜单</div>
<div id="menu2"
style="text-align: center; width: 100px; height: 30px; line-height: 30px; border: 3px solid
#ddd; background: #f6faf6;">右键点击这里</div>
</div>
<div style="margin: 5px 0px;">按钮菜单</div>
<input id="menu3" type="button" value="点我" />
具体的效果可以参考：
点击查看
3. 如果本例运行，可以把上述代码按照如下结构拷贝到相应的根目录： /developer/comps/menu/
| menu.jsp
| menu.xml
你可以在浏览器中输入： http://localhost:port/xxx/developer/comps/menu/menu.jsp
需要根据自己的环境修改port, 与 xxx.
如果各位对使用组件还有疑问，欢迎发言，我们会进一步改进。关于其他组件的使用方法都是这样的，当然高级技巧后续单独介绍，比如文件包含使用，不过原理都是一样的。
下篇介绍Javascript调用组件的例子。