SimpleFramework组件简单使用文档(js调用)

上篇文章介绍了SimpleFramework 的菜单组件的使用方法，其特点是在jsp中不需要用户写Javascript代码，这里需要说明下，用户不写js代码，是因为simple内置的js引擎替代了前端js的编写。当然SimpleFramework是完全支持js，这篇文章主要介绍如何使用Javascript 调用simple组件，为了更容易看到效果，本例就以（窗口及对话框window) 组件为例。

 

1.组件的定义

 

  SimpleFramework的所有组件都是在XML描述文件中的components标签下定义的，window 组件也不例外，我们才开发过程中，只需要把规范XMLSchema拷贝下，然后声明需要使用的组件。本例需要展示js调用window组件，假如命名window.jsp需要在同目录下写一个window.xml, 完整window.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>

<window name="win1" modal="true" maximize="false" title="这是一个模态窗口">

<content>

        Hello!

      </content>

</window>

 

<window name="win2" modal="false" singleWindow="true" title="这是一个普通窗口(单个窗口)">

</window>

 

<window name="win5" modal="false" singleWindow="false" title="这是一个普通窗口(多个窗口)">

</window>

 

<ajaxRequest name="ajax3">

<urlForward>/developer/comps/window/page1.jsp</urlForward>

</ajaxRequest>

<window name="win3" contentRef="ajax3" modal="false" title="这是一个普通窗口">

</window>

 

<window name="win4" popup="true" title="这是一个下拉窗口"

handleClass="net.simpleframework.example.MyWindowHandle">

</window>

</components>

</page>

 

(关于window 组件的属性，请参考 根目录/xsd/default/comps/window.xsd 文件)

 

2. 组件js调用

 

window.jsp 如下：   

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

 

<div style="padding: 10px;">

<p><input type="button" value="打开一个模态对话框" onclick="$Actions['win1']();" /></p>

<p><input type="button" value="打开普通窗口(单个窗口)" onclick="$Actions['win2']();" />

<input type="button" value="打开普通窗口(多个窗口)" onclick="$Actions['win5']();" /></p>

<p><input type="button" value="打开普通窗口，并通过Ajax装载页面" onclick="$Actions['win3']();" /></p>

 

<p><input type="button" value="下拉窗口" onclick="$Actions['win4']();" /></p>

</div>

 

page1.jsp 内容：

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

 

<div style="height: 30px; border: 5px solid #ddd; background: #f6faf6; padding: 10px;">

这是通过ajax装载的页面

</div>

 

 

3. 运行效果  点击查看

 

更多$Actions介绍，请参考下面的文档：

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