制作主框架界面
主界面说明
本系统的主界面功能菜单设计如下:
系统 | 人事管理 | 报表管理 |
---|---|---|
查看我的信息 | 分公司信息查询以及维护 | 员工报表打印 |
修改密码 | 部门信息查询以及维护 |
|
退出 | 员工信息查询以及维护 |
|
| 综合管理 |
|
主界面中的界面风格如下:
页面的最上方为菜单工具栏(MenuBar),左侧为OutlookBar样式的菜单。MenuBar与OutlookBar中显示的是上方菜单表格中的菜单。当用户点击某个菜单项的时候,系统会自动地将指定页面在右侧框架区域中显示。
开发步骤
新建视图模型
在com.bstek.dorado.demo.hr目录下新建一个View用来作主框架页面(命名为Main)。创建方式参考Login视图模型的创建。
添加菜单对象
选择Controls节点,并添加Menu对象:
修改新增的Menu对象的id为menuHr,并在内部增加一系列的菜单项。菜单项的基本属性说明如下:
属性 | 说明 |
---|---|
name | 菜单的名称,请不要使用中文或特殊符号命名 |
label | 菜单项会使用该属性作为菜单标题显示 |
icon | 用于定义菜单项的图标,通过这个属性指定一个图标资源的URL |
效果如图:【图 11】
图 11
以下为menuHr的配置代码:
<Control id="menuHr" type="Menu"> <MenuItem label="系统" name="system"> <MenuItem label="查看我的信息" name="viewInfo" /> <MenuItem label="修改密码" name="modPwd" /> <MenuItem label="退出" name="exite" /> </MenuItem> <MenuItem label="人事管理" name="hrManage"> <MenuItem label="分公司信息查询以及维护" name="branchOperate" /> <MenuItem label="部门信息查询以及维护" name="deptOperate" /> <MenuItem label="员工信息查询以及维护" name="employeeOperate" /> <MenuItem label="综合管理" name="integrateOperate" /> </MenuItem> <MenuItem label="报表管理" name="reportManage"> <MenuItem label="员工报表打印" name="employeeReportPrint" /> </MenuItem> </Control>
新建MenuBar
选择Controls节点,并添加MenuBar对象:
将新增的MenuBar对象的id修改为menubarHr,并设定menu属性为menuHr。其他属性设置如下图:
新建OutlookBar
选择Controls节点,并添加OutlookBar对象:
设定新增的OutlookBar的属性为outlookbarHr并设定menu属性为menuHr。【图 12】
图 12
创建JSP
到此为置止,主框架的大部分元素都完成了,下一步利用视图模型提供的JSP生成向导自动生成JSP页面。确保在视图模型处在Properties Inspector标签页上:
Main视图模型中选中view(根节点),点左边的工具按钮(Generate a sample JSP)生成JSP:
图表 5 1
选择web目录,并单击旁边的New Folder按钮生成新的目录,命名为hr,并选中新增的hr目录,单击OK按钮,在hr目录下生成新的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.Main"> <d:OutlookBar id="outlookbarHr" /> <d:MenuBar id="menubarHr" /> </d:View> </body> </html>
下面我们利用dorado提供的布局管理器实现页面的快速布局:
在<d:OutlookBar>标签的上方添加空行,并在光标定位在这个空行的时候。双击右侧的X-Insert面板中的Layout(Border).并调整OutlookBar与MenuBar的位置:
调整之后代码如下:
<%@ 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.Main"> <d:Layout type="border"> <d:Pane position="top"> <d:MenuBar id="menubarHr" /> </d:Pane> <d:Pane position="left"> <d:OutlookBar id="outlookbarHr" /> </d:Pane> <d:Pane position="center"> <iframe src="welcome.html" id="frameHr" name="hr" frameborder="0" style="width: 100%; height: 100%"> </iframe> </d:Pane> </d:Layout> </d:View> </body> </html>
代码中新增了iframe对象frameHr,后面的各个菜单的功能界面将会在frameHr中打开。
其中welcome.html为一个欢迎页面,也同样在web/hr目录下:
<html> <head> <title></title> </head> <body> <table border="0" width="100%" height="100%"> <tr> <td align="center"> <img src="../images/bannerfree.jpg" border="0"> </td> </tr> </table> </body> </html>
预览
保存所有的修改之后,在浏览器中输入(如果还没有启动服务则先选择Project菜单项下的Start Up Service):
让我们来看一下效果。【图 13】
图 13
添加菜单连接功能
现在整个框架元素都显示出来了,可是菜单项还没有链接功能,现在我们选择不同的菜单项时,系统并没有反应。
接下来我们实现菜单项的的链接功能。
首先,menuHr中的每一个菜单项中都有path属性,该属性是用于用户选择菜单项时要打开的URL。
例如:system/viewInfo.jsp【图 14】
图 14
后面的范例都会利用menuHr中菜单项的path属性关联上。本范例的菜单配置如下:
<Control id="menuHr" type="Menu"> <MenuItem label="系统" name="system"> <MenuItem label="查看我的信息" name="viewInfo" icon="../images/viewinfo.gif" path="system/viewInfo.jsp" /> <MenuItem label="修改密码" name="modPwd" path="system/modPwd.jsp" icon="../images/modpwd.gif" /> <MenuItem label="退出" name="exite" path="../login.jsp" icon="../images/exit.gif" /> </MenuItem> <MenuItem label="人事管理" name="hrManage"> <MenuItem label="分公司信息查询以及维护" name="branchOperate" path="hrmanage/branchOperate.jsp" icon="../images/branch.gif" /> <MenuItem label="部门信息查询以及维护" name="deptOperate" path="hrmanage/deptOperate.jsp" icon="../images/dept.gif" /> <MenuItem label="员工信息查询以及维护" name="employeeOperate" path="hrmanage/employeeOperate.jsp" icon="../images/employee.gif" /> <MenuItem label="综合管理" name="integrateOperate" path="hrmanage/integrateOperate.jsp" icon="../images/integrate.gif" /> </MenuItem> <MenuItem label="报表管理" name="reportManage"> <MenuItem label="员工报表打印" name="employeeReportPrint" path="report/employeeReportPrint.jsp" icon="../images/report.gif" /> </MenuItem> </Control>
你也可以自己添加一个测试页面,看一下跳转效果。
这样我们就完成了主界面的设计以及菜单项配置工作,下面实际实现菜单中的各个功能界面。
Attachments:
worddav50ba4fe2e1e34246406f868840764e8d.png (image/png)
worddav2ca3424f5e33688926bf80f40284c9b0.png (image/png)
worddav43508d88586f5bc4f8d4b9f16f815999.png (image/png)
worddavbb88579c5998dc89a7d3a41213f4d014.png (image/png)
worddavb3d81b004aeef6a55ee4898b4dfdc79f.png (image/png)
worddav97b88fefa3fdae8b298d5949bd38a035.png (image/png)
worddavce001f3558faf3ea7d9bfcea12f39042.png (image/png)
worddav31253367369d31402556f46da87d35ac.png (image/png)
worddave7823f420a5415a8d604388abd25ede4.png (image/png)