dorado5的一个模板实例实现过程
•发布于   •作者 Choices()  •403 次浏览  •来自 博客

                                                员工信息的查询和维护

一.效果图:


需求分析

  1.EXCEL表格导出

  2.树形结构的下拉框

  3.员工字段的非空检验

  4.日期格式

  5.薪水化为XXX元

实现步骤:

    1.       添加视图模型EmployeeOperate

    2.       定义员工记录集(从数据库中像数据集中导入数据)

    3.       添加基本组件(数据表、autofrom、导航栏(分页、数据)、更新操作命令、按钮)

    4.       添加自定义下拉框CustomDropDown(在employeeOperate中添加一个自定义下拉框,这个下拉框是导入文件进来,另个文件是一个以树形结构组成的。这个是可变的)

    5.       构建这个树形视图

        5.1在control中建立树节点

        5.2设置部门和公司之间的联系

        5.3将两表之间进行关联

        5.4添加单击事件

    6.Excel表格的导出,添加这个操作指令

    7.最后生成可以浏览的视图

具体实现

1.1.1.     步骤一:添加视图模型

首先选择source节点的com.bstek.droado.demo.hr.hrmanager,并利用快捷键添加View对象:


命名为EmployeeOperate。

1.1.2.     步骤二:定义员工记录集

在新建的视图模型中选中Datasets节点,点左边工具条上的AutoSqlDataset按钮:


利用AutoSqlDataset向导选择该dataset关联数据库中的employee:


在AutoSqlDataset的向导视图中,将employee中的所有字段添加到右侧的列表中:


选择向导设计窗体顶部的的add按钮,打开join设计向导窗体:


并在该窗口中的Join Table中选择DEPT表格,之后在Fields from Source Table列表中选中DEPT_ID,Fields from Join Table中选中DEPT_ID,并单击Add按钮添加到Join Relations中,这表示EMPLOYEE与DEPT通过DEPT_ID字段建立JOIN关系。单击OK按钮确定JOIN设计。回到AutoSqlDataset设计的主向导界面。


激活上方的图形视图中的DEPT图标(激活后图表的背景变蓝),可以在Columns标签中看到DEPT表对应得字段列表,选中DEPT_NAME,并添加到右侧的列表中,并利用列表右侧的Move Up快捷按钮向上调整到EMPLOYEE_NAME字段前面。单击OK按钮,确定所有的设定。

将新增的dataset的id修改为datasetEmployee。

1.1.3.     步骤三:添加基本的组件

添加DataTable对象(参考创建数据表格),并修改id为tableEmployee设定其dataset属性为datasetEmployee;如下图:


添加AutoForm对象(参考创建AutoForm),并修改id为formEmployee设定其dataset属性为datasetEmployee;如下图:


添加DataPilot对象(参考创建DataPilot),并修改id为dataPilotEmployee设定其dataset属性为datasetEmployee;如下图:


添加PagePilot对象(参考创建PagePilot),并修改id为pagepilotEmployee设定其dataset属性为datasetEmployee; 如下图:


添加UpdateCommand对象(参考创建UpdateCommand),并修改id属性为commandEmployee,展开commandEmployee对象,在datasetInfos节点中添加datasetInfo节点,并设定其dataset属性为datasetEmployee;如下图:


添加Button对象(参考创建Button),并修改id属性为buttonEmployee,该按钮用于实现数据保存功能,buttonEmployee的command属性设置为commandEmployee;如下图:


1.1.4.     步骤四:添加自定义部门下拉框

为了实现部门下拉选择,该处我们使用了自定义下拉框(CustomDropDown),CustomDropDown是dorado中用以引用另一个dorado JSP页面的特殊下拉框,通过引用配置,该下拉框能够将另一个JSP页面再下拉框展示,并通过CustomDropDown的数据处理机制,实现数据输入或数据选择,如下图所属部门字段维护时,通过选择下拉框中的树节点实现,而不是用户直接在编辑框中输入:


下拉框中的树,采用了二级树展现部门信息,其中树的一级节点为分公司信息,二级节点为部门信息,在数据库中他们的关联关系如下:





CREATE MEMORY TABLE BRANCH(
      BRANCH_ID VARCHAR(20) NOT NULL PRIMARY KEY,
      BRANCH_NAME VARCHAR(50)
)
 
CREATE MEMORY TABLE DEPT(
      DEPT_ID VARCHAR(16) NOT NULL PRIMARY KEY,
      BRANCH_ID VARCHAR(16),
      DEPT_NAME VARCHAR(30)
)

Dept表通过branch_id字段与branch表建立关联关系。

 

实现部门树形下拉框的两个关键部分:

l  定义CustomDropDown并引用包含Tree的JSP;

l  创建包含Tree组件JSP;

下面逐一说明其开发过程。

1.1.4.1.       定义CustomDropDown

为了实现部门的树形下拉框,首先需要使用CustomDropDown实现。

选中Controls文件夹,点左边工具栏中的图标(从上往下数第5个),在列表中选择CustomDropDown。


图  SEQ \* ARABIC 43

选中创建的CustomDropDown,修改其id属性为dropdownDept。并设置其他的属性:

属性

说明

path

本例为:deptTree.jsp,该页面将在后面创建

定义下拉框中显示的内容,可以设置为指向一个页面的路径

autoDropDown

true

决定下拉框得到焦点时是否自动触发

cachable

true

是否缓存下拉框中的内容

fixed

true

决定编辑框中的值是否可编辑

属性设置图示:


图  SEQ \* ARABIC 44

1.1.4.2.       创建包含Tree的JSP

在本例中我们对部门列表信息采用树形结构的方式显示。

添加视图模型

参考步骤一中添加视图模型的方法,在source的com.bstek.droado.demo.hr.hrmanager目录下创建一个viewModel,命名为DeptTree。

添加DataTree

选中Controls文件夹,点左边工具栏中的图标(从上往下数第3个),在列表中选择DataTree。


图  SEQ \* ARABIC 45

并修改ID属性为TreeDept。选择TreeDept,并利用快捷按钮添加Tree中的Level对象:


并将name属性修改为levleBranch。选中levelBranch节点,并使用同样的方式在levleBranch上再添加一个子节点。并设置name属性为levelDept。如下图:


树的层设计为:树的第一层(level 1)显示分公司数据,第二层(level 2)显示部门数据。下面再作详细设计。

添加datasetBranch,datasetDept

因为treeDept的每一层都需要显示不同的信息:分公司信息或某个分公司下的部门信息。Tree提供的Level对象提供了dataset属性用于绑定Dataset,在系统运行时,Level会自动的根据dataset中的数据初始化Tree的节点。因此下一步我们首先创建这两个Level所对应的AutoSqlDataset,其id分别为datasetBranch和datasetDept。

创建过程与步骤二定义员工记录集的方式一样。datasetBranch对应关联数据库中的branch表,datasetDept对应数据库中的dept表。(操作技巧可以参考步骤二

设置datasetDept与datasetBranch的关联关系
设置datasetDept 的MatchRules。

datasetBranch与datasetDept定义好之后,选中dataetDept的MatchRules,点左边工具栏的按钮BaseMatchRule,增加一个匹配规则:


图  SEQ \* ARABIC 49

设置相关匹配属性:

1.     table属性,设置为这个Dataset的数据表DEPT。

2.     originField属性,设置为进行匹配的字段BRANCH_ID。

3.     value属性,设置为匹配参数“:BRANCH_ID”。(冒号是参数声明,表示是一个参数)

4.     operator属性,设置匹配规则为“=”,表示完全匹配。

5.     level属性,设置为1,表示此规则处于匹配规则的第一层。

6.     dataType属性,是originField的字段属性,是string类型。

7.     escapeEnabled属性,设置逃逸规则,当参数值为空时,是否使用此匹配规则。


图  SEQ \* ARABIC 50

以上参数的主要作用是确保AutoSqlDataset查询数据时根据参数:BRANCH_ID的值做过滤。

MasterLink属性

下面我们将datasetBranch与datasetDept建立关联,确保datasetDept中:BRANCH_ID的参数值来源于datasetBranch。在dorado中通过dataset的MasterLink对象建立这种关联关系。

选中datasetDept的MasterLink,点属性masterDataset的编辑框,会出现一个按钮,点这个向导按钮。


图  SEQ \* ARABIC 46

进入MasterLink编辑向导窗口


图  SEQ \* ARABIC 47

选择Fields from Master Dataset中的BRANCH_ID,以及Fields from Detial Dataset中的BRANCH_ID,点下面的Add按钮。


图  SEQ \* ARABIC 48

系统将会在Join Relations编辑框中出现 “BRANCH_ID=BRANCH_ID”数据行。

这样就通过MasterLink的配置给两个Dataset之间定义了一个关联关系。datasetDept会自动的通过MasterLink对象的配置动态的从datasetBranch中获取BRANCH_ID的值并作为datasetDept的参数:BRANCH_ID的值。

Level的dataset绑定设置

选中创建的treeDept,选中levelBranch:

1.     labelField属性设置为BRANCH_NAME,用于树节点的标题显示。

2.     dataset属性设置为datasetBranch。


图  SEQ \* ARABIC 52

接下来,选中levelDept

1.     labelField属性设置为DEPT_NAME,用于树节点的标题显示。

2.     dataset属性设置为datasetDept。

3.     hasChild设置为false,表示无子节点,即本层是叶子节点。


图  SEQ \* ARABIC 54

创建下拉框JSP

在视图模型DeptTree中选择View根节点,并利用向导自动创建JSP页面,命名为deptTree.jsp,并保存在web/hr/hrmanage目录中(参考登录界面的JSP创建说明)。

JSP页面向导如下:




<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %>
<html>
<head>
<title></title>
</head>
<body>
  <d:View config="com.bstek.dorado.demo.hr.hrmanage.DeptTree">
    <d:DataTree id="treeDept" />
  </d:View>
</body>
</html>

1.1.5.     步骤五:创建员工维护界面的JSP

在视图模型EmployeeOperate中选择View根节点,并利用向导自动创建JSP页面,命名为employeeOperate.jsp,并保存在web/hr/hrmanage目录中(参考登录界面的JSP创建说明)。

JSP页面代码如下:




<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %>
<html>
<head>
<title></title>
</head>
<body>
  <d:View config="com.bstek.dorado.demo.hr.hrmanage.EmployeeOperate">
    <d:Layout type="vflow" height="100%">
      <d:Pane>
        <d:AutoForm id="formEmployee" />
      </d:Pane>
      <d:Pane>
        <d:Layout type="Hflow">
          <d:Pane>
            <d:DataPilot id="datapilotEmployee" />
          </d:Pane>
          <d:Pane>
            <d:Button id="buttonEmployee" />
          </d:Pane>                 
        </d:Layout>
      </d:Pane>
      <d:Pane height="100%">
        <d:DataTable id="tableEmployee" />
        <d:DataTable id="tableTemplate" />
      </d:Pane>
      <d:Pane align="right">
        <d:PagePilot id="pagepilotEmployee" />
      </d:Pane>   
    </d:Layout>
  </d:View>
</body>
</html>

保存所有的修改,现在我们已经可以浏览基本的执行效果了,浏览器中重新输入:

http://localhost:8180/hr/hrmanage/employeeOperate.jsp

界面效果如下:


选择所属部门的下拉框,可以看到自定义的下拉框已经可以打开,并使用Tree展示数据。

1.1.6.     步骤六:功能完善

以上的界面在操作上还存在一点问题,你不妨打开下拉框选择一个部门看看操作效果:

l  下拉框无法关闭;

l  下拉框因该只允许选择部门,分公司节点应该不允许选择;

接下来,我们继续完善界面功能,解决这两个问题:

在视图模型DeptTree中,选中treeDept组件对象,切换到事件视图(选择窗口最下方的Events Inspector按钮),在treeDept的onClick事件中增加代码:


图  SEQ \* ARABIC 55

if(tree.getCurrentNode().getLevel() != 1)
DropDown.closeFrame(tree.getCurrentNode().getRecord());

以上代码的意思是,当选择节点的层次不是第一层时,也就是说不是分公司节点时,返回选中节点的附属Record对象,并且通过DropDown的closeFrame函数关闭下拉框。由于在treeDept的设计中,我们规定了第一层节点显示分公司的信息,通过这样处理,就可以确保只有在用户选择了部门节点之后,下拉框才会关闭。

回到视图模型EmployeeOperate中,选中dropdownDept对象,设置其中的readFields和writerFields的属性都为DEPT_ID,DEPT_NAME。两个属性保持一致。如下图:


这两个属性在用户选中下拉框的一个部门节点后使用,dropdownDept会自动的从下拉框中返回的record中获取DEPT_ID,DEPT_NAME的信息并设置到主界面上。

完成以上的设定之后,重新刷新employeeOperate.jsp页面,并打开下拉框操作,选择不同的部门后,可以看到主界面上的所属部门信息也发生了变化。

最终页面效果如图:


1.1.7.     步骤七:Excel数据导出

下一步我们实现excel数据导出功能。

在EmployeeOperate视图模型中,选中Controls节点,点左边工具栏中的图标(从上往下数第7个),在列表中选择Export2ExcelCommand。

图  SEQ \* ARABIC 56

选中创建的Export2ExcelCommand,设置属性:

l  id属性,修改为commandExport;

l  dataset属性,与Dataset绑定,设置为datasetEmployee;

l  templateTable属性,表示要导出的DataTable,设置为tableEmployee;

l  exportMode属性,导出模式,设置为download,表示下载为Excel文件;


图  SEQ \* ARABIC 57

下面再创建一个Button对象(参考按钮对象的创建),重名名为buttonExport并设定buttonExport的command属性为commandExport,value属性设定为“导出为Excel文件”,如下图:


图  SEQ \* ARABIC 58

最后在employeeOperate.jsp上添加如下蓝色代码:

<%@ page contentType="text/html; charset=UTF-8" %>
<%@ taglib uri="http://www.bstek.com/dorado" prefix="d" %>
<html>
<head>
<title></title>
</head>
<body>
  <d:View config="com.bstek.dorado.demo.hr.hrManage.EmployeeOperate">
    <d:Layout type="vflow" height="100%">
      <d:Pane>
        <d:AutoForm id="formEmployee" />
      </d:Pane>
      <d:Pane>
        <d:Layout type="Hflow">
          <d:Pane>
            <d:DataPilot id="datapilotEmployee" />
          </d:Pane>
          <d:Pane>
            <d:Button id="buttonEmployee" />
          </d:Pane>
          <d:Pane>
            <d:Button id="buttonExport" />
          </d:Pane>                  
        </d:Layout>
      </d:Pane>
      <d:Pane height="100%">
        <d:DataTable id="tableEmployee" />
        <d:DataTable id="tableTemplate" />
      </d:Pane>
      <d:Pane>
        <d:PagePilot id="pagepilotEmployee" />
      </d:Pane>   
    </d:Layout>
  </d:View>
</body>
</html>

保存所有的修改后,我们在浏览器中重新刷新employeeOperate.jsp,并单击“导出为Excel文件”按钮,就会自动的获得该表格的Excel数据导出。获得如下的效果图。


图  SEQ \* ARABIC 59

单击打开按钮看到如下的excel文件内容:


这样我们就利用dorado中自带的excel导出命令实现将数据导出到excel中的功能了。并且我们可以在客户端利用tableEmployee对象的tableProperties对象动态设定表格的格式。来设定excel的数据导出格式。tableProperties对象的打开方式如下图,单击表格左上角的单元格区域:


在DataTable Properties窗体,我们可以通过该窗体动态设定列的显示与否,以及列标题的修改等。另外我们也可以在利用表格本身提供的列顺序交换功能调整表格的数据列布局,调整之后再次单击excel数据导出按钮,实现excel数据导出,这时候你可以发现到excel得导出数据格式也会发生变化,它始终都与tableEmployee中的格式保持一致,通过这种方式我们可以比较灵活的控制excel的输出格式。


0 回复
回到顶部

©2017 Powered by 三十三行伪代码
皖ICP备17005175号-3