DBFound 快速应用开发平台

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

DBFound 简介:框架分为三个部分:dbfoundui,dbfoundmvc,dbfoundmodel;分别对应UI界面,mvc框架,model数据库编程。框架以配置化编程为宗旨,提供一套开发便利,风格一致,维护与学习成本低的开发平台。开发人员无需花费太多精力在代码处理上,实现以业务目标为导向的编程理念。


Google CODE开源地址:https://code.google.com/p/dbfound/

GitHub开源地址:https://github.com/nfwork/dbfound

演示环境: 演示demo下载

在线演示地址:http://dbfound.coding.io/index.jsp 用户名:admin 密码:admin


一、平台搭建 案例演示

新web项目,集成步骤

a、web.xml中加入dbfound的启动程序

<filter>
    <filter-name>DBFound</filter-name>
    <filter-class>com.nfwork.dbfound.web.DispatcherFilter</filter-class>
    <init-param>
    <param-name>configFilePath</param-name>
    <param-value>${@projectRoot}/WEB-INF/dbfound-conf.xml</param-value>
    </init-param>
</filter>
<filter-mapping>
    <filter-name>DBFound</filter-name>
    <url-pattern>/*</url-pattern>
</filter-mapping>

b、dbfound-conf.xml和dbfound-mvc.xml 放在WEB-INF 下(样例子请在demo中查找)。

c、Model 实体文件的跟目录为 WEB-INF 下面的 model 文件夹。

d、引入jar包,maven项目引入:(非maven项目自动映入jar和依赖jar)

<dependency>
    <groupId>com.github.nfwork</groupId>
    <artifactId>dbfound</artifactId>
    <version>2.3.4</version>
</dependency>

e、DBFoundUI 放在 WebRoot 下。如下图:

092412_MeWd_448179.jpg


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>

界面效果预览

092958_KZss_448179.jpg

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 自动根据传输过来的参数,拼接过滤条件。

092556_Ki9C_448179.jpg


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效果预览:

093553_zCYP_448179.jpg

扩展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,textfield,numberfield,datefield,monthfield, datetimefield, password, checkbox, 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验证,要求的格式是"usc@sina.com"

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效果预览:

094019_2AuY_448179.jpg

扩展对象函数:

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验证,要求的格式是"usc@sina.com"

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效果预览:

094157_NfHi_448179.jpg

扩展对象函数:

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效果预览:

094308_noDu_448179.jpg

扩展对象函数:

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预览效果:

095445_wIVF_448179.jpg

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效果预览:

095703_iRYD_448179.jpg


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弹框

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

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

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

d、确认提示消息 $D.showConfirm(message,fn); 参数 message 为消息,fn 为回调函数。

$D.showConfirm("您确定要删除吗?", function(btn) {
      if(btn=="no"){
          return;
      }else{
          //逻辑处理
      }
 });

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

 var url = "modules/sys/pagerAssign.jsp?ac_id="+id;
 DBFound.open("role_window","分配到功能",600,370,url,function(){});

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 对象返回到客户端。客户端接收到服

务器端的反馈消息。


转载于:https://my.oschina.net/nfwork/blog/322892

  • 0
    点赞
  • 0
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值