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调用组件的例子。
?
