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