DBFound 快速应用开发平台

DBFound 宗旨：解决开发技术复杂、难度高、开发速度慢等问题。提供快速、便利、高效率的开发平台。

DBFound 简介：通过配置实现前端与后端的交互，实现功能强大、快捷简便的操作方式。只需配置一系列的 Model 实体文件，外界通过访问 Model 文件就能访问数据库，从而进行数据的增删改查。通过 jstl 标签配置就能实现强大而美观的 UI 界面。

DBFound 标签分为两类：Model 实体标签 和 JSP 标签

JSP 标签又分为： UI 标签 和 控制标签

更多请关注：https://code.google.com/p/dbfound/

演示环境： 演示demo下载


一、平台搭建 案例演示

新建一个 web项目，如下图所示目录结构部署 DBFound 框架。

Model 实体文件的跟目录为 WEB-INF 下面的 model 文件夹。dbfound-conf.xml 放在

WEB-INF 下。DBFoundUI 放在 WebRoot 下。如下图：

1.1 UI界面实例

UI布局提供八大UI组件：grid、form、buttonGroup、tab、panel、tree、treeGrid、menu。

下图为简单的 form-button-grid 布局，注：对于复杂布局，建议先用div布局，然后用组件填充。标签与原生html兼容

实现代码如下：

<d:form id="queryForm" title="角色查询" labelWidth="80">
    <d:line columnWidth="0.33">
        <d:field name="role_code" upper="true" width="180" editor="textfield" prompt="角色编号"/>
        。 。 。 。 。 。 。 。 。 。 。 。 。
    </d:line>
    <d:line columnWidth="0.33">
        <d:field name="timefrom" width="180" editor="datefield" prompt="创建日期从" />
        <d:field name="timeto" width="180" editor="datefield" prompt="创建日期到" />
    </d:line>
</d:form>

<d:buttonGroup>
    <d:button id="query" title="查询" click="query" />
    <d:button title="重置" click="reset" />
</d:buttonGroup>

<d:grid id="roleGrid" isCellEditable="isCellEditable" queryForm="queryForm" model="sys/role" >
    <d:toolBar>
        <d:gridButton type="add"/>
        <d:gridButton type="save"/>
        <d:gridButton type="delete" />
    </d:toolBar>
    <d:columns>
        。 。 。 。 。
        <d:column name="create_date" prompt="创建时间" width="120" />
        <d:column name="last_update_date" prompt="最后修改时间" width="120" />
        <d:column name="last_update_user" prompt="最后经手人" width="150" />
    </d:columns>
</d:grid>

界面效果预览

1.2 Model实体文件query实例演示

<?xml version="2.0" encoding="UTF-8"?>
<model xmlns="http://dbfound.googlecode.com/model" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://dbfound.googlecode.com/model https://dbfound.googlecode.com/svn/tags/v2/model.xsd">
    <query>
		<sql>
		 <![CDATA[
			SELECT
				u.user_id,
				u.user_name,
				u.role_id,
				u.user_code,
				u.status,
				DATE_FORMAT(u.create_date,‘%Y-%m-%d‘) create_date,
				DATE_FORMAT(u.last_update_date,‘%Y-%m-%d‘) last_update_date,
				(select CONCAT(CONCAT(user_code,‘-‘),user_name) from sys_user where user_id =u.last_update_by) last_update_user,
				u.create_date date,
				u.password
			FROM SYS_USER u
			#WHERE_CLAUSE#
			order by u.user_code
		 ]]>
		</sql>
		<filter name="timefrom" express="create_date &gt;= ${@timefrom}" />
		<filter name="timeto" express="create_date &lt;= ${@timeto}" />
		<filter name="user_code" express="user_code like ‘#{@user_code}‘" />
		<filter name="user_name" express="user_name like ${@user_name}" />
		<filter name="role_id" express="role_id = ${@role_id}" />
		<filter name="status_code" express="status = ${@status_code}" />
	</query>
</model>

上述为一个查询 表 fnd_teacher 的一个 model 文件,目录：model/sys/user.xml，有六个过滤条件 timefrom、timeto、user_code、user_name、role_id、status_code。当前台传入这些参数时，过滤条件生效。

我们可以通过 http://localhost:8080/dbfound/sys/user.query访问。得到如同下图的 json 数据。执行 sql 自动根据传输过来的参数，拼接过滤条件。

1.3 Model实体文件execute 实例演示

<?xml version="2.0" encoding="UTF-8"?>
<model xmlns="http://dbfound.googlecode.com/model" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://dbfound.googlecode.com/model https://dbfound.googlecode.com/svn/tags/v2/model.xsd">
    <execute name="add">
        <param name="teacher_code" dataType="varchar" />
        <param name="teacher_name" dataType="varchar" />
        <param name="email" dataType="varchar" />
        <param name="telphone_num" dataType="varchar" />
        <param name="user_id" dataType="number" scope="session" />
        <sqls>
            <executeSql>
                <![CDATA[
                    INSERT INTO fnd_teacher
                            (teacher_code,
                            teacher_name,
                            email,
                            telphone_num,
                            create_by,
                            last_update_by,
                            create_date,
                            last_update_date)
                    VALUES (${@teacher_code},
                            ${@teacher_name},
                            ${@email},
                            ${@telphone_num},
                            ${@user_id},
                            NOW(),
                            NOW())
                  ]]>
            </executeSql>
        </sqls>
    </execute>
</model>

上述为一个添加表 fnd_teacher 的一个 model 文件,目录： model/fnd/teacherAdd.xml，参数前台传入，用${@参数名}获取。我们可以通过 http://localhost:8080/dbfound/fnd/teacherAdd.execute!add 访问。得到一个 json 的反馈对象，告知是否操作成功。

*****注解

fnd/teacherAdd 表示访问 model 目下下面 fnd 子目录下面的 teacherAdd.xml。

.execute 说明访问 execute 对象。

!add 表示访问 名为 add 的 execute 对象。

******

二、jsp UI标签详细API

2.1 网格容器grid

<d:grid id="userGrid" title="用户列表" height="365" queryUrl="sys/user.do!query" isCellEditable="isCellEditable" queryForm="queryForm" autoQuery="true" >
	<d:toolBar>
		<d:gridButton type="add" afterAction="initDefaultValue"/>
		<d:gridButton type="save" action="sys/user.do!save" />
		<d:gridButton type="delete" action="sys/user.do!delete" />
	</d:toolBar>
	<d:columns>
		<d:column name="user_code" sortable="true" upper="true" required="true" editor="textfield" prompt="用户编号" width="120" />
		<d:column name="user_name" sortable="true" required="true" editor="textfield" prompt="用户名" width="120" />
		<d:column name="password" required="true" editor="password" prompt="密码" width="120" />
		<d:column name="role_id" editor="combo" options="roleStore" displayField="role_name" valueField="role_id" prompt="角色" width="140" />
		<d:column name="status" required="true" editor="combo" options="statusStore" displayField="status_name" valueField="status_code" prompt="状态" width="100" />
		<d:column name="create_date" prompt="创建日期" width="110" />
		<d:column name="last_update_user" prompt="最后经手人" width="110" />
	</d:columns>
</d:grid>

Grid效果预览：

扩展Ext gridPanel对象函数：

function userGrid.query(); //grid 数据加载
function userGrid.addLine(json,autoCommit); //grid 添加一行，
//json 为数据,autoCommit 是否提交修改
function userGrid.getCurrentRecordData(); //得到当前行记录，返回 json 对象
function userGrid.setCurrentRecordData(json); //设置当前行数据，并且提交修改
function userGrid.initCurrentRecordData(json); //设置当前行数据，不提交修改
function userGrid.getSelectionsData(returnJson);
//选中的行记录，当参数为 true 时返回 Object 数组，false 返回 String 字符串
function userGrid.getModifiedData(returnJson);
//发生修改的行记录，当参数为 true 时返回 Object 数组，false 返回 String 字符串
function userGrid.getSelectionsModifiedData(returnJson);
//选中并且修改的记录，当参数为 true 时返回 Object 数组，false 返回 String 字符串

属 性：

id：声明一个 grid 对象，全局唯一；

model：绑定后台逻辑运算的 model 文件，如 sys/user；

autoQuery :自动查询；

queryForm：对应过滤的查询表单；

isCellEditable： 判断单元格是否可以编辑， 对应 js 函数， 返回 true 可以编辑。

function isCellEditable(col, row,name,record) {//col 列号 row 行号 name 为列名 record 对应行记录}

pagerSize：每页显示多少行；

queryUrl：查询对应的服务器地址，优先级高于 model 的查询地址；

selectable：是否可以行选择，默认为 true；

singleSelect: 是否单行选择，默认 false

forceFit：列是否强制占满窗体，默认 true

viewForm：行展示 form，展示一行记录；

title：对应标题；

navBar: 是否显示分页工具条，默认为 true

rowNumber：是否显示行号，默认为 true

height：高度；

width：宽度，不设置时 屏幕自适应；

子标签：gridButton 定义 grid 左上角的控制按钮。

属性：id：唯一标示；

title：对应显示文本；

action：服务器响应 url；

disabled：是否失效；

icon：对应图标；

type：用于系统内置类型，如：save，add，delete，excel

beforeAction：响应之前调用的 js 函数，return true 继续执行。type = add 类型

function beforeAction(grid,button){
//grid 当前grid对象
//button 当前点击的button对象
}

其它类型

function beforeAction(records,grid,button){
//records 选择的所以行记录
//grid 当前grid对象
//button 当前点击的button对象
}

afterAction：响应之后调用的 js 函数，return true 继续执行

type = add 类型

function afterAction(record,grid,button){
//record 新建的行记录
//grid 当前grid对象
//button 当前点击的button对象
}

其它 类型

function afterAction(records,resObj,button){
//record 选择的所有行记录
//服务器反馈的ResponseObject对象
//button 当前点击的button对象
}


子标签：column 定义 grid 对应的列。

属性：id：唯一标示；

name：对应后台取值名称；

prompt：对应文本描述；

sortable: 是否支持排序；

width：对应宽度

editor：对应编辑器（textfield,datefield,numberfield,password，

datetimefield,combo,datetimefield,lov,lovcombo）；

upper：是否输入大写 true 为大写，false 为不限制；

required：是否必须；

options：下拉列表对应的数据集，editor 为 combo 时起效。

displayField：显示的列，editor 为 combo 时起效。

valueField：实际值，editor 为 combo 时起效。

mode：下拉框的数据模型是 remote 或 local

lovUrl：lov 对应的页面。

lovWidth：打开窗口宽度。

lovHeight：打开窗口高度。

editable: 对应下拉框组件 combo、lov、lovcombo 是否可手动编辑。

align： 对其方式 center、left、right。

sortable：是否可排序。

allowDecimals允许为负数，对 numberfield 生效。

allowNegative允许为小数，对 numberfield 生效。

renderer：渲染，调用 js 函数，返回显示的值.

function(value, cellmeta, record, row, col, store){
//value 对应的值，record 对应行记录
}

vtype: 校验类型 dbfound 内置五种类型。课根据 Ext 接口自定义。

1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）

2.alphanum//只能输入字母和数字，无法输入其他

3.email//email验证，要求的格式是"[email protected]"

4.url//url格式验证，要求的格式是http://www.sina.com

5.ip //ip 地址

2.2 表单容器form

    <d:form id="queryForm" title="表单元素" labelWidth="120">
		<d:line columnWidth="0.33">
			<d:field name="function_code" editor="textfield" prompt="文本输入框" />
			<d:field name="function_des" upper="true" editor="textfield" prompt="强制大写文本框" />
			<d:field name="function_aa" required="true" editor="textfield" prompt="必输文本框" />
		</d:line>
		<d:line columnWidth="0.33">
			<d:field name="functisdf" editor="numberfield" prompt="数字输入框" />
			<d:field name="dfdrt" required="true" editor="numberfield" prompt="必输数字框" />
			<d:field name="dfdrtio" editor="spinnerfield" prompt="spinner数字框" />
		</d:line>
		<d:line columnWidth="0.33">
		    <d:field name="function_module" options="moduleStore" valueField="module_id" displayField="module_name" editor="combo" prompt="下拉框" />
			<d:field name="function_ulesad" options="moduleStore" valueField="module_id" displayField="module_name" editor="lovcombo" prompt="多选下拉框" />
		    <d:field name="ae" editor="treecombo" options="treedata" displayField="area_name" parentField="parent_id" valueField="area_id" prompt="下拉tree">
			</d:field>
		</d:line>
		<d:line columnWidth="0.33">
			<d:field name="funcfon_code" editor="datefield" prompt="日期选择框" />
			<d:field name="funopion_des" editor="datetimefield" prompt="日期时间选择框" />
			<d:field name="funopion_des" editor="monthfield" prompt="月份择框" />
		</d:line>
		<d:line columnWidth="0.33">
		    <d:field name="user_name" editor="lov" lovUrl="modules/sys/userLov.jsp" lovHeight="440" lovWidth="600" prompt="弹出选择框">
			   <d:event name="commit" handle="commit"></d:event>
			</d:field>
			<d:field name="area_name" editor="lov" lovUrl="modules/test/treeLov.jsp" lovHeight="440" lovWidth="340" prompt="弹出tree选择框">
			   <d:event name="commit" handle="commit"></d:event>
			</d:field>
			 <d:field name="funcdfdik" required="true" emptyText="请输入文字" editor="textfield" prompt="为空提示" />
		</d:line>
		<d:line columnWidth="0.33">
			<d:field name="funode" required="true" editor="password" prompt="密码输入框" />
			<d:field name="functies" editor="file" prompt="文件选择文本框" />
			<d:field name="funcdfd" readOnly="true" value="hello kity" editor="textfield" prompt="只读框" />
		</d:line>
		<d:line columnWidth="0.4">
			<d:field name="enable_flagas" editor="checkboxgroup" items="enableItmes" prompt="多选组" />
			<d:field name="enable_flag" editor="radiogroup" items="sexItmes" prompt="单选组" />
		</d:line>
		<d:line columnWidth="1">
			<d:field name="endf" height="70" anchor="95.5%" editor="textarea" prompt="大文本输入框" />
		</d:line>
		<d:line columnWidth="1">
			<d:field name="htmle" anchor="95.5%" editor="htmleditor" prompt="html文本输入框" />
		</d:line>
		<d:toolBar>
		    <d:formButton title="保存" icon="DBFoundUI/images/save.gif" action="job/jobHeader.execute!add" afterAction="afterSave"/>
		    <d:formButton title="重置" beforeAction="reset" action="" />
		</d:toolBar>
	</d:form>

Form效果预览：

扩展对象函数：

function viewForm.setData(json); //给 formPanel 设置数据，扩展了隐藏域
function viewForm.getData(); //得到 formPanel 的数据，包括隐藏域
function viewForm.reset(); //重置 formPanel
function viewForm.clear(); //清空 formPanel
function $D.setFieldReadOnly(filedId, status); //设置字段是否只读

属 性： 

id：声明一个 form对象，全局唯一；

labelWidth: 输入框说明文字宽度；

title：标题；

fileUpload：是否文件上传 form；

width：宽度，不设置时 自适应；

height：高度；

子标签：field 定义 form对应的输入框。

属性：id：唯一标示；

name：对应后台取值名称；

prompt：对应文本描述；

width：对应宽度，px 为单位；

anchor：对应宽度百分比，当没有设置 width 时生效。

editor：对应编辑器（combo，textfield，numberfield，datefield，

monthfield， datetimefield， htmleditor， textarea， password， file， checkbox， lov， lovcombo） ；

lovUrl：lov 对应的页面。

lovWidth：打开窗口宽度。

lovHeight：打开窗口高度。

hidden：是否为隐藏列；

hideLabel：是否为隐藏标签；

upper：是否输入大写 true 为大写，false 为不限制；

required：是否必须；

emptyText：为空时显示内容；

readOnly：是否只读；

options：下拉列表对应的数据集，editor 为 combo 时起效。

displayField：显示的列，editor 为 combo 时起效。

valueField：实际值，editor 为 combo 时起效。

hiddenField：隐藏字段，对应 combo 的实际值。

checkedValue：复选框选中时值是多少，默认为 Y。

allowDecimals：是否允许为小数，对 numberfield 生效。

allowNegative：是否允许为负数，对 numberfield 生效。

vtype: 校验类型 dbfound 内置五种类型。课根据 Ext 接口自定义。

1.alpha //只能输入字母，无法输入其他（如数字，特殊符号等）

2.alphanum//只能输入字母和数字，无法输入其他

3.email//email验证，要求的格式是"[email protected]"

4.url//url格式验证，要求的格式是http://www.sina.com

5.ip //ip 地址

子标签：formButton 定义 form 下面的控制按钮。

属性：id：唯一标示；

title：对应显示文本；

disabled：是否失效；

action：服务器响应 url；

icon：对应图标；

beforeAction：响应之前调用的 js 函数，return true 继续执行

function beforeAction(data,form,button){
    //data form中的数据
    //form 当前form对象
    //button 当前点击的button对象
}

afterAction：响应之后调用的 js 函数

function afterAction(res,data,form,button){
    //res服务器返回对象
    //record 选择的当前行记录
    //grid 当前grid对象
    //button 当前点击的button对象
}

2.3 树tree

<d:dataSet id="treedata" modelName="test/tree"></d:dataSet>
<d:tree id="tree" title="树测试" bindTarget="treedata" idField="id" parentField="pid"
displayField="text" width="300" height="600" />

Tree效果预览：

扩展对象函数：

function tree.init(); //初始化树
function tree.refresh(); //刷新树
function tree.getCurrentNode(); //得到当前节点
function tree.getSelectedText(); //在有 checkbox 的情况下，得到选中节点描述。
function tree.getSelectedId(); //在有 checkbox 的情况下，得到选中节点 id。

Dataset：数据集，modelName 对应后台的 model 文件。

Tree：父子结构关系的对象，idField 和 parentField 进行关联。

Click：单据响应事件，对应 js 函数。

function click(node){

// node 当前节点的信息

// node.json 对应dataset的行记录

}

2.4 树表treeGrid

treeGrid 继承 tree，对 grid 部分特性做了的相关实现。

<d:treeGrid id="treegrid" style="width:650px;position:absolute;left:0px;margin-top:0px"  autoQuery="true" viewForm="viewForm" queryForm="queryForm" title="功能树表" idField="id" parentField="pid" showCheckBox="true" queryUrl="menu.query" height="$D.getFullHeight(‘treegrid‘)">
	<d:toolBar>
	    <d:gridButton icon="DBFoundUI/images/add.gif" title="添加模块" beforeAction="add" />
	    <d:gridButton icon="DBFoundUI/images/add.gif" title="添加功能" beforeAction="addc" />
	    <d:gridButton icon="DBFoundUI/images/check.png" title="选中功能" beforeAction="getSelect" />
	</d:toolBar>
	<d:columns>
		<d:column name="text" prompt="功能名称" width="150"></d:column>
		<d:column name="id" hidden="false" prompt="功能id" width="100"></d:column>
		<d:column name="url" prompt="对应jsp页面" width="200"></d:column>
		<d:column name="priority" prompt="优先级" width="100"></d:column>
	</d:columns>
</d:treeGrid>

TreeGrid效果预览：

扩展对象函数：

function tree.init(); //初始化树
function tree.refresh(); //刷新树
function tree.getCurrentNode(); //得到当前节点
function tree.getCurrentNodeData(); //得到当前节点数据，返回 json
function tree.setCurrentNodeData(json); //设置当前节点数据
function tree.getSelectedText(); //在有 checkbox 的情况下，得到选中节点描述。
function tree.getSelectedId(); //在有 checkbox 的情况下，得到选中节点 id。

属 性：

id：声明一个 treegrid 对象，全局唯一；

autoQuery :自动查询；

queryForm：对应过滤的查询表单；

queryUrl：查询对应的服务器地址，优先级高于 model 的查询地址；

viewForm：行展示 form，展示一行记录；

title：对应标题；

height：高度；

width：宽度，不设置时 屏幕自适应；

idField：tree 的 node id；

parentField: tree node 的父节点 id；

showCheckBox：是否显示选择框，默认 false；

2.5 组件tabs

<d:tabs> 
   <d:tab height="450" title="功能定义">
       ........
   </d:tab>
   <d:tab height="450" title="角色定义">
       <d:tree style="width:220px;position:absolute;left:0px;top:0px" id="menuTree" title="树测试" bindTarget="treedata" idField="id" parentField="pid" displayField="text" height="440" >
	   </d:tree>
       <d:grid style="margin-left:230px;"  id="roleGrid" height="440" model="sys/role" autoQuery="true" pagerSize="10">
			<d:toolBar>
				<d:gridButton type="add" id="add_cmp"/>
				<d:gridButton type="save" action="test.jsp"/>
				<d:gridButton type="delete" />
			</d:toolBar>
			<d:columns>
				<d:column name="role_code" required="true" editor="textfield" prompt="角色编号" width="120" />
				<d:column name="role_description" required="true" editor="textfield" prompt="描述" width="150" />
				<d:column name="create_date" prompt="创建时间" width="120" />
				<d:column name="last_update_date" prompt="最后修改时间" width="120" />
				<d:column name="last_update_user" prompt="最后经手人" width="150" />
			</d:columns>
		</d:grid>
   </d:tab>
   <d:tab height="450" title="角色定义">
       .......
   </d:tab>
   <d:tab height="200" title="模块定义">
       ........
   </d:tab>
   <d:tab height="480" id="userDefine" title="用户定义" url="modules/sys/user.jsp"></d:tab>
</d:tabs>

Tab预览效果：

js函数扩展：

function $D.getTab(tabId); //得到 tab 中 iframe 对象，用于访问 ifrme 的内容

2.6 组件panel

<d:panel height="480" title="panel测试">
    <d:tree style="width:22%;position:absolute;" id="menuTree" >
    </d:tree>
    <d:grid style="width:76.5%;position:absolute;left:22.4%" id="roleGrid">
    </d:grid>
</d:panel>

Panel 为容器组件，可以在里面放在 form、grid、buttongroup、tree 等组件。

2.7 按钮button

<d:buttonGroup>
    <d:button id="query" title="查询" icon="" click="query" />
    <d:button title="重置" click="reset" />
</d:buttonGroup>

使用方法如上例

2.8 菜单menu

<d:menu id="menu">
<d:menuItem title="添加子节点" icon="DBFoundUI/images/add.gif" click="say"></d:menuItem>
<d:menuItem title="修改"></d:menuItem>
</d:menu>
function rootmenu(tree,e){
menu.showAt([e.getPageX(),e.getPageY()]);
}

2.9 数据集 dataStore与dataSet

<d:dataSet id="roleStore" modelName="sys/role" name="combo" />
<d:dataStore id="useStore" fields="user_name,user_id" url="user.do" />

Dataset 和 datastore 都是数据存取的容器。

Dataset 能够直接绑定一个 model 文件，进行数据的异步与同步加载。

Datastore 绑定一个 url 连接进行异步赋值，dataProvideClass 实现同步赋值，指定一个 java 类进行赋值

dataProvideClass 必须实现 StoreDataProvide 接口

2.10 图像报表chart

饼图：

<d:dataSet id="pieStore" modelName="test/chart" name="pie" />
<d:pieChart title="月考成绩饼图" dataLabel="true" bindTarget="pieStore" height="450"
valueField="totalnum" displayField="grade" />

柱状图：

<script type="text/javascript">
    var yAxis = [ {
        name : ‘10月份‘,
        field : ‘total_num_10‘
    } ,{
        name : ‘11月份‘,
        field : ‘total_num_11‘
    } ,{
        name : ‘12月份‘,
        field : ‘total_num_12‘
    }];
    
    var xAxis = {
        name : ‘人数‘,
        field : ‘grade‘
    };
</script>

<d:dataSet id="barStore" modelName="test/chart" name="bar" />
<d:barChart title="月考分析柱状图" yAxis="yAxis" xAxis="xAxis" bindTarget="barStore"
height="450" />
柱状图：
<d:lineChart title="月考分析折线图" yAxis="yAxis" xAxis="xAxis" bindTarget="barStore"
height="350" />

图像chart效果预览：

2.11 事件event

目前事件支持在 field、column、grid、tree 组件中用标签定义事件。

例一、Lov 编辑器提交时触发 commit 事件。

<d:field name="user_name" editor="lov" lovUrl="modules/sys/userLov.jsp" >
    <d:event name="commit" handle="commit"></d:event>
</d:field>

例二、树的节点点击时触发

<d:tree bindTarget="treedata" idField="id"parentField="pid" >
    <d:event name="click" handle="sayHello"></d:event>
</d:tree>

同时我们可以用 js 对 UI 对象添加事件：

Ext.get(“treedata”).on(“click”,function(){});

对于子对象添加事件方式，我们只能用 js 处理，如 grid 的 store 的 load 事件;

grid.getStore().on(“load”,function(){});

具体对象对应的有那些事件，我们可以参照 extjs 官方文档。

2.12 DBFound弹框

一般提示消息 $D.showMessage(message,fn);

警告提示消息 $D.showWarning(message,fn);

错误提示消息 $D.showError(message,fn);

确认提示消息 $D.showConfirm(message,fn);

参数 message 为消息，fn 为回调函数。

模态框: $D.open(id, title, width, height, url, closeFunction);

2.13 Ajax 数据交互

Dbfound 数据交互， 直接支持 json 对象传递。 及 param 可以是一个多层次的 json 对象。 服务器接收到参数后，

将数据转化为 list 的 map 形式。 服务器的数据存储见 第七章。

传递方式有下面两种

方式一：

 $D.request(url,param,callback,mask,maskTitle);

方式二：

$D.request({
    url : url,
    param : param,
    mask : mask,
    maskTitle : maskTitle,
    callback : callback
});
//url 为请求地址
//param 为 json 格式参数
//callback(resObj,response,action);回调函数 resObj 为服务器反馈对象
//mask 是否需要 mask 锁屏，默认为 false
//maskTitle 锁屏标题

2.14 国际化i18n

dbfound 提供了国际化标签接口。

在 dbfound 标签内的多语言：采用 i18n:user.define 方式获取，如

<d:form id="queryForm" title="i18n:user.define" width="750" labelWidth="80">

其它区域的多语言的实现方式如下：<d:text value="user.define"/>方式获取，如

var a =‘<d:text value="user.define"/>‘;
<div><d:text value="user.define"/></div>

2.15 dbfound布局style

dbfound 每个组件都提供了 style 属性，来实现布局效果。同时 dbfound ui 组件可以和

div 混用，对应复杂的可以先用 div 布局好，然后填充。

一、style 绝对路径布局。如下代码我们让树宽度为屏幕的49.9%，左边距为50%，上

边距为 0 像素。

<d:tree style="width:49.9%;position:absolute;left:50%;top:0px" id="menuTree">
</d:tree>

二、div 绝对路径布局。这样达到和上面同样的效果，一般情况下我们的宽度不要达到

100%，留一点点缓冲区对应不同浏览器的兼容性好一些。

<div style="width:49.9%;position:absolute;left:50%;top:0px">
    <d:tree id="menuTree" >
    </d:tree>
</div>

三、混合布局。我们先用两个 div 先屏幕划分为左右两个区域。然后分别添入两个 grid。

由于组件默认情况下左右边距都为 margin 5px，这样导致中间有了 10px 的间距，所以我们在

右边的 grid 设置 marin-left 0px，调整边距。

<div class="dbfound-td" style="width:50%;position:absolute;">
    <d:grid id="userGrid0"
    </d:grid>
    <d:grid id="userGrid1" >
    </d:grid>
</div>
<div style="width: 49.9%;position:absolute;left:50%">
    <d:grid id="userGrid2" style="margin-left:0px" >
    </d:grid>
    <d:grid id="userGrid3" style="margin-left:0px" >
    </d:grid>
</div>

三、jsp控制标签

<%@ taglib uri="dbfound-tags" prefix="d"%>
<d:controlBody>
    <d:batchExecute modelName="sys/role" sourcePath="table"></d:batchExecute>
</d:controlBody>
<!--上述为一个简单的 jsp 控制标签实例。controlBody 声明一个独立的事务处理。在带展现层的 jsp，应该用下面这种方式声明事务。-->
<d:initProcedure>
    <d:query modelName="sys/role" name="load" rootPath="user_ds" />
</d:initProcedure>

3.1 execute标签

<d:execute modelName="sys/role" name="add" sourcePath="user_ds" />

描 述：execute 标签用于 JSP 中调用 model 实体中定义的 execute 对象。

属 性：modelName：调用那一个 model 文件

Name：调用 model 文件中的哪一个 execute 对象

sourcePath：取数据的路径

3.2 query 标签

<d:query modelName="sys/role" name="load" rootPath="user_ds" />

描 述：query 标签用于 JSP 中调用 model 实体中定义的 query 对象。

属 性：modelName：调用那一个 model 文件

name：调用 model 文件中的哪一个 query 对象

rootPath：取存储数据结构的路径

sourcePath：读取数据参数的路径

3.3 batchExecute 标签

<d:batchExecute modelName="sys/role" sourcePath="table">

描 述：batchExecute 标签用于 JSP 中批量执行 model 实体中定义的 execute 对象。

属 性：modelName：调用那一个 model 文件；

name：调用 model 文件中的哪一个 execute 对象，当 name 不指定时根据每一行

的"_status"状态为判断调用那个 execute 对象，NEW 调用 add, OLD 调

用 update,没有指定状态位时调用 addOrUpdate；

sourcePath：读取数据参数的路径；

3.4 forward 标签

<d:forward modelName="sys/role" name="load" />

描 述：forward标签用于 JSP 中跳转到实体中定义的 query 对象。

属 性：modelName：调用那一个 model 文件；

name：调用 model 文件中的哪一个 query 对象；

3.5 其它控制标签

dbfound 继承了 jstl 标签，并做了扩展 使其支持解析 json 数据格式。

<d:forEach items="" var="" sourcePath="" ></d:forEach>

<d:if test=""></d:if>

<d:choose>
    <d:when test=""></d:when>
    <d:otherwise></d:otherwise>
</d:choose>

等等其它标签。

四、Model实体文件详细API

4.1 model 标签

<model persistenceUnit="mysql" xmlns="http://dbfound.googlecode.com/model">

描 述：Model 为最顶层 root标签 命名空间为 http://dbfound.googlecode.com/model

属 性：persistenceUnit：用来指定使用那个数据库连接单元，

与 persistence.xml 中对应一致。可以不设置（调用默认单元）。

子标签：<param> 、 <execute> 、 <query>

4.2param标签

<param name="user_id" dataType="number" scope="session" />

描 述：param 标签可以在<model>、<execute>、<query>中定义,作为 sql 执行的参数，

modle 中定义的参数为全局的，所有的 execute 和 query 中都能够使用。

属 性：name：必须，作为唯一标示

dataType：声明为那种数据类型（varchar、number、file）

scope： 声明从那个空间里面取值 （session、 request、 param、 page、 outParam）

sourcePath：声明取值的路径，遵循 el 表达式规范 如 session.user.id

autoSession：是否将参数放入到 session 中（true，false）

autoCookie：是否将参数放入到 cookie 中（true，false）

fileSaveType：文件是保存到数据库，还是文件夹（db，disk）

ioType：声明是输入，还是输出参数（in，out）

Value： 指定默认值

注 意：param 取值有两种方式 ${@paramName} 和 #{@paramName}。前者为动

态设值，后者为静态设值。

4.3 query标签

<query name="load" pagerSize="10">

描 述：query 为 model 标签的子标签，在 model 中可以定义多个 query，用 name

属性区分， 一个 model 下 面只能有一个默认的 query 对象， 及没有 name 属性。

属 性：name：唯一标示 model 中的多个 query 对象

pagerSize：设置分页大小

子标签：<param>、 <sql> 、<filter>

<sql>
    select * from sys_user where user_id = ${@user_id}
</sql>

描 述：sql 为 query 的子标签，用于定义 query 中对应的 sql 语句；

语句中可以用${@param 名}取定义的 param 参数。

4.4 filter标签

<filter name="user_id" express="user_id = ${@user_id}" >

描 述：sql 为 query 的子标签，用于定义 query 中对应的过滤条件

属 性：name：作为唯一标示，当前台传过来的参数与 name 属性匹配时

过滤条件生效。

Express：按照值进行过滤，express中可以遵循${@变量名}取值

声 明：express取值默认是从 parameter 里面取值，如果 param 没有，则

寻找 request，如果还是没有，选择 currentPath 里面的值。

#WHERE_CLAUSE# 和 #ADN_CLAUSE# 为 express 的落脚处

4.5 execute标签

<execute name="add">

描 述：execute 为 model 标签的子标签，在 model 中可以定义多个 execute，

用 name 属性区分，一个 model 下 面只能有一个默认的 execute 对象，

及没有 name 属性。

属 性：name：唯一标示 model 中的多个 execute 对象

子标签：<param>、 <sqls>

4.6 sqls标签

<sqls>
    <executeSql></executeSql>
    ...子标签...
</sqls>

描 述：sqls 为 execute 中需要执行的 sql 集合

属 性：无

子标签：<executeSql>、<batchSql>、<whenSql>、<querySql>、<collisionSql>、

<javaAction>、<execute>、<query>（调用 model 中的 query对象）

4.7 executeSql标签

<executeSql>
    insert into sys_user(user_id)values(${@user_id})
</executeSql>

描 述：executeSql 为 sqls 的子标签，用于定义 execute 执行对应的 sql 语句；

语句中可以用${@param 名}取定义的 param 参数。

属性：generatedKeyParam 自动生成主键 返回值放入对应的param，该param的ioType为out

affectedCountParam 修改或删除记录对应的条数，放入对应的param，该param的ioType为out

4.8 batchSql 标签

<batchSql cursor="select * from sys_user">
    <executeSql></executeSql>
    ...子标签...
</batchSql>

描 述：把 cursor 作为查询游标，查询出多行记录，然后循环的执行其子标签。

语句中可以用${@param 名}取定义的 param 参数。查询出来的结果

将放入到 outParam 这个 map 中，参数 param 可以取到里面的值。

子标签：<executeSql>、<batchSql>、<whenSql>、<querySql>、<collisionSql>、

<javaAction>、<execute>、<query>（调用 model 中的 query对象）

4.9 whenSql标签

<whenSql when="${@user_id} = 1">
    <executeSql></executeSql>
    ...子标签...
</whenSql>

描 述：把 when 作为条件，当成立的时候执行其子标签。

语句中可以用${@param 名}取定义的 param 参数。

子标签：<executeSql>、<batchSql>、<whenSql>、<querySql>、<collisionSql>、

<javaAction>、<execute>、<query>（调用 model 中的 query对象）

4.10 querysql标签

<querySql>
    Select * from sys_user
</querySql>

描 述：querySql 为 sqls 的子标签，用于定义 execute 执行对应的 sql 语句；

语句中可以用${@param 名}取定义的 param 参数。 查询出来的结果对对应参数

进行赋值操作。

4.11 collisionSql标签

<collisionSql where="${@user_id} = 1" message="user_id 为 1 的数据已存在！">

描 述：把 where 作为条件，当成立的时候抛出 message 定义的消息。

属 性：where：碰撞条件

Message：抛出的错误消息

4.12 java 标签

<java className="com.nfwork.test" method="sayHello">

描 述：调用 java 方法，对应的 class 要继承 ActionSupport 类。从来可以得到

pagerContext、params 等 dbound 内置对象

属 性：className：类名

method：方法名

五、文件上传与下载

5.1、DBFound文件上传

1、首先定义一个 form，代码如下

<d:form id="uploadform" width="400" labelWidth="70" fileUpload="true" >
    <d:line columnWidth="1">
        <d:field name="file" id="file_cmp" required="true" prompt="附 件" editor="file"/>
    </d:line>
</d:form>

2、调用下面 JavaScript 进行 form 提交，代码如下

uploadform.form.submit({
    url:‘upload.execute!add?pk_value=${param.pk_value}
    &table_name=${param.table_name}‘,
    method:‘post‘
});

3 、服务器端 model 写法，代码如下

<execute name="add">
    <param name="file_id" UUID="true" />
    <param name="file_name" dataType="varchar" />
    <param name="file_type" dataType="varchar" />
    <param name="file_size" dataType="number" />
    <param name="file" dataType="file" />
    <sqls>
        <executeSql>
            <![CDATA[
            insert into sys_upload_file
                (file_id,
                file_name,
                file_content,
                file_type,
                file_size,
                table_name,
                pk_value)
            values (${@file_id},
                    ${@file_name},
                    ${@file},
                    ${@file_type},
                    ${@file_size},
                    ${@table_name},
                    ${@pk_value})
             ]]>
        </executeSql>
    </sqls>
</execute>

这样就轻松的实现了 将文件上传到数据库。同时 dbfound 支持上传文档到文件夹。只需要设置 param 的

fileSaveType 属性（db 保存到数据库、disk 保存到文件夹，默认 db） 。

_name, _size , _type 根据上传的文件的param，dbfound自动分析得到。 如果上传的param的name为file。

所以我们就可以根据 file_name, file_type, file_size 得到对应属性。

当 file 保存到文件夹时参数 file 的 value 为对应硬盘上保存的文件名称。

5.2 、DBFound 文件下载

dbfound 文件下载支持从数据库下载 和 从文件系统下载两种方式。

根据 fileSaveType 区分，如果是 db 就从数据库取，如果是 disk 就从文件系统取。默认为 db。

下面为从数据库取文件的 execute 例子

<execute>
    <param name="file_id" dataType="varchar" />
    <param name="file_name" dataType="varchar" />
    <param name="content" dataType="file" ioType="out" fileNameParam="file_name" />
    <sqls>
        <querySql>
            <![CDATA[
            SELECT f.file_name , f.file_content content
              FROM sams.sys_upload_file f
             WHERE f.file_id = ${@file_id}
            ]]>
        </querySql>
    </sqls>
</execute>

下面为从文件系统取的例子

<execute name="diskdown">
    <param name="file_name" dataType="varchar" />
    <param name="content" dataType="file" ioType="out" fileSaveType="disk" fileNameParam="file_name" />
    <sqls>
        <querySql>
            <![CDATA[
            select ‘应用服务器安装报告.doc‘ file_name,
                    ‘AQEYDSHID.doc‘ content
            from dual
            ]]>
    </querySql>
    </sqls>
</execute>

参数 content 说明文件夹下 这个文件叫什么名字，参数 file_name 说明下载文件实际的名字。通过设置

fileNameParam属性来实现绑定。

如果在知道文件名字的前提下 dbdound 提供了更简单的下载方式，代码如下

<execute name="download">
    <param name="file_name" dataType="varchar" value="应用服务器安装报告.doc" />
    <param name="content" dataType="file" ioType="out" fileSaveType="disk" value="AQEYDSHID.doc"
fileNameParam="file_name" />
</execute>

这样我们就实现了轻松下载。 我们根据参数content的value可以就到对应的文件， 然后根据fileNameParam

找到最终的文件名称，从而进行下载。

写好了 model 文件，我们就可以反问 url 进行下载了

通过访问：http://localhost:8080/dbfound/download.execute!download

我们通过名为 download 的 execute 就得到了应用服务器安装报告.doc 这个文件。

六、excel导入与导出

6.1、excel导入

A、定义 form：

<d:form id="uploadform" width="400" labelWidth="70" fileUpload="true" >
    <d:line columnWidth="1">
        <d:field name="file" width="280" required="true" prompt="excel文件" editor="file"/>
    </d:line>
</d:form>

B、提交 js 函数与文件上传一致。

uploadform.form.submit({
    url:‘upload.execute!batch_add‘,
    method:‘post‘
});

C、后台 model 写法： excelReader 将 excel 内容转化为 list<map>

<execute name="batch_add">
    <param name="发货单号" dataType="varchar" />
    <param name="单据日期" dataType="varchar" />
    <param name="收发类别" dataType="number" />
    <param name="客户编码" dataType="varchar" />
    <param name="部门编码" dataType="varchar" />
    <param name="file_name" dataType="varchar" />
    <param name="file" dataType="file" />
    <sqls>
        <excelReader sourceParam="file" rootPath="exceldatas"/>
        <batchSql sourcePath="exceldatas[0]">
        <executeSql>
            <![CDATA[
                insert into shipments_document(
                        shipments_code,
                        document_time,
                        take_type ,
                        customer_code,
                        unit_code)
                values(${@发货单号},
                        ${@单据日期},
                        ${@收发类别},
                        ${@客户编码},
                        ${@部门编码})
                ]]>
            </executeSql>
        </batchSql>
    </sqls>
</execute>

6.2、excel导出

dbfound excel 导出，只需要在 grid 定义 gridButton 声明 type = ‘excel’；

<d:grid id="itemGrid" queryUrl="report/buyItems.query!count_query" >
    <d:toolBar>
        <d:gridButton type="excel" />
    </d:toolBar>
    <d:columns>
        <d:column name="item_code" width="110" prompt="产品编号" />
        <d:column name="item_name" width="360" prompt="产品名称" />
        <d:column name="purchase_number" prompt="数量" width="80" />
        <d:column name="sigle_price" prompt="含税单价" width="100" />
        <d:column name="total_price" width="100" prompt="含税金额" />
    </d:columns>
</d:grid>

七、数据交互与存储

dbfound 前后台以 json 格式数据进行交互。前台传过来的数据，后台转化为一个 List<Map>的

数据树结构。

dbfound 的数据存储 分为四大区域

1、param （对应前台传过来的参数） 。

2、request （对应 http request 中设置的属性） 。

3、session （对应 http session 中设置的属性） 。

4、outParam （对应 dbfound Model中的 out 参数，将其返回到客户端） 。

案例说明：

一、在jsp页面中我们用$D.request 来请求服务器地址。传递了user 和 role两个对象

到服务器端。

function test() {
    var param = {};
    param.user = {code:"10000",name:"黄炯"};
    param.role = {code:"ADMIN",name:"管理员"}
    $D.request("sys/user.do!test",param,function(resObj){
        $D.showMessage(resObj.message);
    });
}

DBFound 框架（暖枫工作室）

26

二、在服务器端，我们在thread中可以得到传输过来的数据。

public ResponseObject test(Context context) throws Exception {
    LogUtil.info("path /: "+context.getDatas());
    LogUtil.info("path /param: "+context.getData("param"));
    LogUtil.info("path /param/user: "+context.getData("param.user"));
    LogUtil.info("path /param/user/name: "+context.getData("param.user.name"));
    ResponseObject ro = new ResponseObject();
    ro.setMessage("测试成功啦！ ！");
    ro.setSuccess(true);
    return ro;
}

打印出来的数据：

2013-06-02 16:16:41,270 INFO [dbfound] - path /:{session={role_id=3, user_code=admin, user_id=2},param={role={name=管理员, code=ADMIN}, user={name=黄炯, code=10000}}}
2013-06-02 16:16:41,270 INFO [dbfound] - path /param:{role={name=管理员, code=ADMIN}, user={name=黄炯, code=10000}}
2013-06-02 16:16:41,270 INFO [dbfound] - path /param/user:{name=黄炯, code=10000}
2013-06-02 16:16:41,270 INFO [dbfound] - path /param/user/name:黄炯

三、在服务器端 new 一个ResponseObject 对象返回到客户端。客户端接收到服

务器端的反馈消息。

时间： 2024-10-14 00:24:24

DBFound 快速应用开发平台的相关文章

畅捷通T+ RAP(Rapid Application Platform)快速应用开发平台

RAP概述 RAP(Rapid Application Platform)快速应用开发平台 是一个通过B/S方式操作平台数据的轻量级工具,轻松实现档案.单据和报表的开发,普通用户无需编写任何代码,即可轻松完成复杂的功能,真正做到所见即所得. 该开发平台基于.NET体系,是在T+架构之上,通过框架重用.组件重用完成了业务逻辑和元数据自动生成的过程.RAP涵盖了整个T+业务开发的全过程,包括档案.单据.报表.自定义页面等,可以快速对档案.单据和报表的列和栏目进行增删改,快速自定义页面和自定义按钮.

快速应用开发（RAD）平台 - 20 年的演进

过去几年中,现代软件开发的整体环境发生了巨大的变化.对我个人来说,这种变化与宇宙的加速膨胀差不多.第二个千年刚到来时,产业的发展看起来还不是那么快,只是逐步在前进.现在技术发展的复杂度和多样性已经可以用超音速来形容了,越来越快,出现了新的编程语言.开发工具.开发方法论等等. 由于类似 Uber.Facebook.Google 这样的企业需要构建全球解决方案的需求越来越多,使得技术变得更加全面也更加复杂.这种超级的复杂度,是能构建全球性巨大系统而必须付出的代价.但是对于构建相对简单的典型业务自动化

实用开发平台对比分析

1 概述 随着软件行业日新月异的发展,使用传统的开发工具已经不能满足现有程序员的诉求,每个项目都要从零开始,代码无复用率:所有的基础功能需要一行一点的敲代码,一个预置基本功能模型,可以快速生成代码的开发平台已经成为了"码农"的迫切需要. 笔者作为"码农"中的一员也深受其害,今天与大家分享笔者对开发平台的认知以及为大家推荐几款实用的开发平台. 2 必备要素 考量一个款实用的开发平台 2.1 操作简单 实用的开发平台作为开发工具需要是操作简便如预置导航引导,以及代码编辑

力软敏捷开发平台 7.0.6 框架源码下载

接触这个框架有三年的时间了,初次接触b/s型开发项目时,是在指导人员的帮助下完成的,技术上确实也学到了一些东西,但个人觉得最大的收获是在开发软件项目的过程中,自己意识上的提升,如做项目是考虑其合理性安全性以及并发性的重要性与必要性,这么想来发现我们以前开发的项目简直太肤浅了,接来下我还是踏下心来研究处理好创业项目的测试以及后台程序并发性,安全性的问题吧. 任何一个框架都是不完美的,此框架也是,有其便利的地方,我们用起来很舒服,开发起来很方便,但是每当我们想要加入个性化要求的时候这便是一件比较蛋疼

jplogic 快速开发平台开发案例其一

jplogic v1.0开发陆续更新,意在和广大网友分享交流,通过寻求合作伙伴,交流群376447127.下面是jplogic的关于知识库模块的部分功能,如下进行功能展示: 知识库主界面: 新增知识类别: 新增文档: 调整类别结构: 附件明细操作: 文档信息查看:(将上传的各种文本文件转化成swf格式,便可以实现仿百度文库在线阅读功能) 海量知识库文档高级检索(数据库检索.索引检索(全文检索))等功能. jplogic 快速开发平台开发案例其一,布布扣,bubuko.com

开发指南专题八：JEECG微云快速开发平台数据字典

   开发指南专题八:JEECG微云快速开发平台数据字典的使用 1.标签中使用数据字典 数据字典为系统中可能用到的字典类型数据提供了使用的便利性和可维护性.以下拉框标签<t:dictSelect>为例进行讲解 1.1. 标签参数 属性名 类型 描述 是否必须 默认值 typeGroupCode string 字典分组编码 是 null field string 对应表单 是 null id string 唯一标识 否 null title string 显示文本 否 null defaul

HFun.快速开发平台（二）=》自定义列表实例

应用系统中数据列表的展现是开发内容之一,实现的方式基本是通过编号具体的访问列表页实现,通过检索条件进行数据源的获取,列字段的描述,还可能会有检索条件的实现,列表数据的导出等功能. 为了将重复工作进行简化,同时为了实现多个开发人员编写同样风格的程序,降低应用系统的后期运维成本,HFun.开发平台中将列表的实现进行抽象,实现统一的列表对象,通过统一的访问页面,传递相应的参数,系统进行数据源的处理及展现.程序的实现结构如下: 程序根据功能分为文件夹Controls,Data,ExportExcel,F

HFun.快速开发平台（三）=》通用系统用户选择

系统中用户的选择使用特别多,将该功能统一实现可提升系统效率. 用户的选择实现相对简单,系统中基本都会提供,HFun.快速开发平台中的实现特点主要有: 1.用户的选择分为单用户选择和多用户选择. 2.用户的选择可通过部门进行筛选. 3.可通过用户名进行筛选. 4.提供Url传递默认选中项处理 5.提供全选.反选.取消选择操作. 6.提供回调方法供引用程序自定义数据处理. 7.数据加载.查询筛选使用jquery框架实现. 系统界面如下: 1.单人选择: 2.多人选择:

开发指南专题十：JEECG微云快速开发平台--表单校验组件ValidForm

10.4Validform对象[方法支持链式调用] 如示例 var demo=$(".formsub").Validform(),那么demo对象会有以下属性和方法可以调用: tipmsg[object] 如:demo.tipmsg.s="error! no messageinputed."; 通过该对象可以修改除 tit 以外的其他提示文字,这样可以实现同一个页面的不同表单使用不同的提示文字. 具体可修改的提示文字 $.Tipmsg={//默认提示文字; tit: