上篇文章介绍了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>
更多$Actions介绍,请参考下面的文档:
组件的调用是通过一个内置的Javascript对象$Actions来完成的,更多关于$Actions的介绍请参考$Actions是什么。