ExtJS技术论文

ExtJS技术论文（共7篇）

ExtJS技术论文 篇1

0 引 言

社区管理内容信息化带来了极大的信息量,而对于信息的有效管理和分析,不论是在数量还是种类上都大大增加。因此我们根据用户需求设计出社区管理信息平台来满足日益增加的服务需求和管理需求。社区管理中的一个重要环节就是对于系统权限的管理,系统权限的管理涉及到信息平台的所有功能模块、权限、角色、等级、部门、用户的动态管理,对于整个平台起到一个整体构架和引导作用,因此权限管理系统就成为社区信息平台的一个重要组成部分,而且是必不可少的一部分。

对于传统的HTML页面来说,要自己实现显示树比较困难,需要写很多的Javascript,特别是对于基于Ajax 异步加载的树来说,不但涉及到Ajax 数据加载及处理技术,还需要考虑跨浏览器支持等,处理起来非常麻烦。ExtJS 中提供了现存的树控件,通过这些控件可以在B/S 应用中快速开发出包含树结构信息的应用。本文结合ExtJS树的优点,并通过后台SSH架构设计,打破了以往功能模块以及部门管理设计固定化的限制,实现了全动态的权限管理。

1 系统使用技术

1.1 ExtJS技术

ExtJS[1]的前身即YUI(Yahoo User Interface),经过不断发展与改进,已经成为最完整与成熟的一套构建RIA Web应用的JavaScript即出库。在各种树结构组件中,ExtJS的树形组件不但功能强大而且美观使用,实现了拖动、排序、异步加载等实用功能。权限管理中的部门管理和模块管理所涉及到的部门组织结构和多级模块结构,都可以用树形结构来表示。因此,系统结合ExtJS树形组件,实现了多级部门动态树和多级功能模块动态树。

1.2 SSH框架

Struts框架是基于MVC(modelviewcontroller)模式的框架,是Apache 软件基金会旗下的Jakarta 项目组的一部分,是一个免费开源的Web 层的应用框架。ExtJS页面不需要配置Struts中的Action的Forward标签,而是直接将业务数据通过HttpSerbletResponse写回到客户端。

Spring 框架[2]是在J2EE 的基础上实现的一个轻量级J2EE框架。它服务于所有层面的应用程序,提供了Bean 的配置基础、AOP 的支持、JDBC 提取框架、抽象事务支持等,它还有效地组织了系统中的中间层对象,消除了组件对象创建与使用耦合紧密的问题。

Hibernate是一个功能强大的对象/关系映射ORM(Object Relational Mapping) 框架[3], 对JDBC 访问数据库的操作进行了轻量级封装。利用Hibernate的ORM技术,可以将关系数据库中表的数据映射成为对象,保证源码的简练和完全面向对象的风格。

这样,在整套权限系统中Struts用于从页面表单获取数据并调用业务层进行数据的各种业务处理。权限系统中用户登录后,在后台对用户权限的分析和检索处理就是通过Struts来完成的;Hibernate用于dao层与数据库进行交互,对数据进行增删改查,在权限系统中Hibernate主要用于对权限管理中各功能数据表进行操作;Spring则是封装Hibernate和Struts,以便对二者进行管理,提高应用效率。SSH框架在本系统中的实现如图1所示。

2 系统结构及分析设计

2.1 系统结构

权限管理系统分为功能模块、权限、角色、等级、用户、部门管理六个功能。其中功能模块管理以ExtJS页面的树型结构来完成对整个信息平台所需的多级功能模块的动态管理;权限管理属于对多级功能模块的最终子节点的动态管理,也就是对用户最终需要操作的模块动态管理;等级管理功能完成了对于用户操作的分配,不同等级的用户将分别拥有不同的操作等级;角色功能完成了对指定角色所拥有的等级和权限的分配;用户功能完成了对于整个信息平台用户的动态管理,并且可为指定用户分配指定的角色,以实现不同的用户对于系统不同模块的不同操作;部门管理功能以ExtJS页面的树型结构来完成对整个街道内部所需的多级部门的动态管理。权限功能结构图如图2所示。

2.2 系统分析与设计

2.2.1 部门ExtJS动态树的异步实现

在应用程序中[4],我们经常会涉及到要显示或处理树状结构的对象信息,比如部门信息、地区信息,或者是树状的菜单信息,操作系统中的文件夹信息等。

虽然默认的Ext JS的图标[5]设置显示为文件和文件夹树节点,但是它不仅限于文件系统的概念,文件图标和树节点中显示的内容无需自定义代码,并且是可以基于动态改变的。权限管理中的部门管理和模块管理都是通过ExtJS动态树结合SSH后台框架来实现的。下面以部门管理的设计为例来说明动态树的应用。

ExtJS树节点动态加载的核心是通过Ajax技术返回一组JSON(JavaScript Object Notation) 对象来实现的,[{id: 1,text:′子节点′,leaf: false}]是一组最常见的实现树节点的JSON对象形式。其中id属性用于标记树节点,text属性的内容将在页面的节点上显示,leaf属性用来标记该树节点是否有子节点,如果值为true,则代表该节点没有子节点。相反则代表该节点有子节点。针对这些基本属性,我们在数据库中设计了如表1所示的与JSON对象形式对应的字段来实现部门动态列表。

remark字段实际代表的是节点的级别,我们定义‘1’代表是有子节点,‘0’代表无子节点,子节点根据fatherid(父节点的ID)来判断加载顺序。这样,我们就可以按照各个树节点的级别来创建一颗如图3所示的多级部门动态树。

根据树节点的这些特点,加载树节点的设计思路分为两步,第一步按照fatherid和remark加载所有的根节点。

if (node.equals(″0″)) {//展开根节点(0)

for(int i=0;i<count; i++){

//…获取部门名称、ID标识、父节点、是否有子节点

if (1 == fatherid && ″0″.equals Remark) departmentList += (″{id :″″ + ID + ″″,text :″″+ Department +″″,leaf : true},″);}

else if (1 == fatherid && ″1″.equals(Remark)) {

departmentList += (″{id :″″ + ID + ″″,text :″″+ Department +″″,leaf : false},″);}}}

第二步,由于前台ExtJS动态树节点是以Ajax异步实现的,每次展开节点事件时都会触发一个事件并且可以把该节点(node)的属性传到后台。在展开根节点时,我们把根节点的ID做为检索对象,对应数据库中记录的fatherid,加载所有根节点对应的下一级子节点。

for (int i = 0; i < count; i++) {

if(node.equals(Integer.toString(fatherid))&&″0″.equals Remark) {

departmentList += (″{id :″″ + ID + ″″,text : ″″+ Department +″″,leaf : true},″);}

else if(node.equals(Integer.toString(fatherid))&&!″0″.equals Remark) {

departmentList += (″{id : ″″ + ID + ″″,text : ″″+ Department + ″″,leaf : false},″);}}

最后返回对应的JSON对象到前台并且以树形结构在Web页面上显示。效果如图4所示。

2.2.2 用户-功能模块-权限的ExtJS动态树的加载

功能模块-权限的后台管理设计同样是按照与部门管理类似的ExtJS动态树来实现的,但是,由于整个权限管理系统中不同的用户拥有不同的权限,也就是说,不同的用户将会被分配指定的树节点,并且在加载功能模块时会根据该用户所分配的指定的树节点对整棵树进行选择性动态加载。而部门ExtJS动态树设计加载的是整棵树的所有节点,而无法实现对指定树节点的选择性加载。因此,我们在部门树的基础上加以改进,模块数据库设计时加入模块加载顺序(moduleorder)字段,权限设计时加入权限加载顺序(powerorder)字段,用户将根据权限加载顺序在前台加载模块节点。结构图如图5所示。这样,我们就可以按照各个树节点的级别和加载顺序来创建一棵如图6所示的多级功能模块-权限动态树,并且实现了不同用户对于多级功能模块-权限动态树选择性加载。

根据树节点的这些特点,用户登录后加载模块树节点的设计思路分为三步,第一步从数据库读取登录用户拥有的权限(powerorder),并把所有的权限放到一个List数组powerorderList中。

List powerorderList=new ArrayList();

powerorderList.add(powerorder);

第二步对数组中的所有元素进行截取并且筛选然后加载所有根节点。例如我们第一步读出的数组为{001001,001002001,001001002,002001,002002001,003,…},由图5可知一级功能模块的moduleorder都是三位数值。

因此,我们需要截取List数组每个元素中的前三位进行重新排列,并且去掉其中重复出现的元素。对于例子数组的元素我们将通过筛选去重,得出一个新的数组{001,002,003,…}来加载节点。这样我们就设计了另一个List数组moduletempList来存放该用户所需要加载的根节点。同时把需要加载的节点的加载顺序(moduleorder)放到JSON对象的id属性中。

第三步在展开根节点时,把根节点的id作为检索对象,筛选出所有powerorder数组中前3位等于根节点id的元素。假如我们展开的是id为001的根节点,那么需要加载的数组就应该是{001001,001002,…}。依此类推,加载二级模块节点筛选的是6位id,三级9位,直到加载的节点的haveleaf为0,即加载到最终子节点结束。

3 结束语

整套权限管理系统打破了以往功能模块设计固定化的限制,用户只要了解功能模块简单的加载模式就可以根据自己的需要在权限管理系统中添加自己需要的多级功能模块。由于模块功能的动态实现,对于程序员而言,只需要了解用户所需功能模块的具体内容来开发相应的界面,而不用在程序设计的时候固定设计所需模块。整套权限管理系统的实现,不但使系统具有更强的灵活性、可维护性和可扩展性,而且让用户更有效、更规范地参与开发过程。

本文主要就权限管理系统的整体设计进行分析,文中检索节点的算法并没有经过优化。随着信息平台信息量的增加,系统功能模块以及部门的检索算法的速度将直接影响BS架构系统的网络展示效率。因此,权限管理系统会在检索算法上进行优化,从而进一步完善整套系统的实用性。

参考文献

[1]卫军,夏慧军,孟腊春,等.ExtJS Web应用程序开发指南[M].机械工程出版社,2009.

[2]谌湘倩,狄文辉,孙冬.基于SSH框架与AJAX技术的Java Web应用开发[J].计算机工程与设计,2009,30(10):2590-2591.

[3]吴茂昌,阳玉琴.基于MVC模式的Java主流框架整合技术研究[J].计算机与数字工程,2009,37(10):92.

[4]龚辟愚,等.ExtJs实用简明教程[M].wlr.easyjf.com.

[5]Shea Frederick,Colin Ramsay,Steve′Cutter′Blades.Learning Ext JS.Packt Publishing Ltd,November 2008.

ExtJS技术论文 篇2

随着现代信息技术的快速发展, 以网络化、数字化、多媒体化和智能化为特征的网络教学正在改变着人们的工作和学习方式。网络教学实质上就是在网络环境下进行的教学活动, 它不仅具有传统教学的优点, 还能够借助网络的优势给教学双方带来便利。网络教学平台可以充分整合优质教学资源, 使得学习者通过网络获取相关知识, 提高自主学习能力。同时, 异地的教师和学生之间、学生和学生之间还可以通过平台互相交流、互相借鉴。

作为一种新型教学模式, 网络教学极大地拓宽了学习空间和知识传授的范围, 目前它已经成为教育领域的研究热点, 各大高校都在积极开发和使用网络教学平台。但现在网络教学平台存在的问题是系统模块耦合度高, 模块的可移植性差, 不利于系统升级扩展, 导致维护成本过高。本文提出基于SSH (Struts2+Spring2.5+Hibernate3) 集成框架的网络教学平台设计方案。这种技术框架是目前Web应用开发中先进设计思想和开发技术的代表, 能够有效实现基于B/S结构的MVC软件构架, 细化软件开发分工, 在降低开发成本和系统维护工作量的同时, 构造松耦合的可复用的软件构件。

一、系统设计与分析

1.1系统架构

网络教学平台采用B/S模式, 用户只需要在网络环境下使用WEB浏览器登陆网络教学平台就可以进行相关教学活动。它可以细化为三层:表示层、业务层和数据持久层[1]。

在网络教学平台系统架构的三个层次中, 位于系统最底层的是数据持久层, 该层直接与后台数据库交互, 完成数据库中数据表和Java对象的映射操作和持久化操作, 这样业务层就能以面向对象的方式对底层数据库进行管理。第二层是业务层, 作为整个教学平台的核心所在, 负责具体的业务处理, 是表示层和数据层进行数据交互的逻辑控制层。第三层是表示层, 该层是各类用户与网络教学平台进行交互的接口层, 负责采集各类信息和展现用户请求返回的数据, 用户通过浏览器使用网络教学平台提供的各种功能, 服务器通过网页将处理结果显示给用户。

1.2功能模块

根据实际需求, 网络教学平台主要由系统管理员子系统、教师子系统和学生子系统构成, 每个子系统又有若干功能模块。

(1) 系统管理员子系统提供的功能包括对老师、学生的基本信息进行添加、删除和修改等操作;根据不同的用户身份设置角色并分配相应的权限, 使不同身份角色的用户能够进行不同的操作;对课程信息进行设置, 审核老师提交的课程, 向学生发布课程信息, 对课程信息进行添加、删除和修改等操作;对各类教学资源的下载情况和访问情况进行统计、监控记录学生的学习过程并生成相应的文档报告, 不仅能帮助教师调整授课策略, 还可以提高教学资源的利用率;备份和恢复各类数据, 保证网络教学平台的正常使用。

(2) 教师子系统的功能包括修改个人资料, 查看各类通告信息, 发布与课程有关的教学信息;对网络课程的教学内容进行设置, 增加、修改和删除课程章节内容;添加或者删除网络课程需要的课件、音视频、网络教材、参考资料等教学资源;对网络课程的题库进行管理, 合理增加、删除或者修改相应的试题条目;根据题库内容和学习进度生成考试试卷, 并对学生答题情况进行批阅;创建并发布作业信息, 对学生上交的作业进行批阅;在线浏览本门课程的学习人数, 掌握学生在线学习网络课程的时间;通过使用BBS、邮箱等工具与学生进行协作交流, 提供复习答疑的空间。

(3) 学生子系统的功能包括对个人信息进行维护, 查看网络教学平台发布的通告;选择需要学习的网络课程, 在线学习相关教学课件和视频资料, 也可以下载参考资料方便离线学习;完成教师发布的作业练习和测验考核, 并在作业评阅和考试结束后查看参考答案;针对相关课程知识要点提出疑问, 并浏览以前提过的问题和老师的答复, 同时参与回复其他同学的提问。

二、关键技术

网络教学平台采用SSH[2,3]集成框架, 该框架提供了轻量级的J2EE软件开发模型, 是目前较为流行的一种开发Web应用程序的技术框架, 可以帮助开发人员快速研发可复用的、结构良好的Web应用程序。其中, Struts2的作用是提供MVC控制, 实现视图层、业务逻辑层和数据层的分离, 降低各层之间的耦合度[4]。

Spring是一个模块化的多层开源框架, 能够控制和管理框架中各层之间的连接关系, 实现和上层MVC框架、下层ORM框架的无缝集成;能采用控制反转技术 (inversion o f c o n t r o l, I o C) 和面向切面编程 (A s p e c t-O r i e n t e d Programming, AOP) 技术管理应用组件与管理组件之间的依赖关系, 消除硬编码方式造成的组件过度耦合现象;提供数据访问对象 (data access object, DAO) 模块实现各种不同数据访问技术的统一接口。

Hibernate对JDBC API进行了轻量级的对象封装, 负责Java对象的持久化。它利用DAO设计模式实现面向对象语言中对象和关系数据库之间的映射 (object-relation mapping, ORM) , 使得程序员可以使用面向对象的思维方式操作数据库, 简化数据库的各种操作。上层应用程序无需考虑底层数据库的类型、结构, 只要修改Hibernate中的配置文件和相应的映射文件, 就能适应数据库管理系统和数据表结构的改变。

Ext JS是用来开发RIA客户端的前端Ajax框架。它与后台技术无关, 完全基于Javascript、CSS技术开发, 可以集成到采用Java、.Net等语言开发的应用中。Ext JS框架开发了一系列跨浏览器的UI组件, 可以很方便得实现美观的页面布局、自动更新控件视图信息、解决分页显示树状结构显示等复杂UI操作问题。它采用JSON/XML格式实现数据交互, 能真正降低表示层和数据层异步数据通信的压力, 从而满足构建客户端MVC应用的需求。

三、系统实现

本文采用自底向上的开发模式来实现各模块的功能。下面以网络教学平台中教师管理模块的实现过程为例来说明整个系统的实现方式。

3.1数据持久层的实现

数据持久层由Spring和Hibernate整合构建, 完成数据库连接、事物管理等操作, 实现数据库中数据表和Java持久化对象的映射。通常, 持久化对象是一个包含若干属性的POJO (plain object Java object) 类, 通过Hibernate映射文件把POJO类映射为对应的数据表, 而POJO类的属性则对应到数据表中的相关数据列。如系统中的教师表tb_teacher对应的POJO类及Hibernate映射文件分别是Teacher和Teacher.hbm.xml, Teacher类的各项属性则映射为教师表的各个字段。通常持久化类和映射文件不用手工创建, 可采用My Eclipse提供的Hibernate数据库反转工程工具自动生成。

3.2业务层的实现

作为整个系统的核心, 业务层处于数据持久层和表示层之间, 可以细分为控制层、业务逻辑层和数据访问对象层。基于Struts2实现的控制层负责接收表示层的用户请求, 从中取得参数值, 比如分页的起始位置、每页的记录数、检索的字段内容、需要新建的教师对象等, 然后根据参数文件Struts.xml中的URL资源配置信息, 将HTTP请求映射到具有不同功能的业务逻辑方法, 比如增加教师信息add Teacher、删除教师信息del Teacher、检索教师信息find Teacher等方法, 由具体的业务逻辑方法执行业务操作, 最后返回执行结果。业务逻辑层主要由实现各种业务逻辑处理的类构成, 每个业务逻辑类都由Spring统一管理, 并在配置文件中申明。同时, 各类之间的依赖关系也基于Spring IOC在配置文件中表明, 避免在类的调用过程中出现硬编码实现类, 这种插件式编程方法能提高整个系统的扩展性和灵活性。例如当删除某个教师Teacher实体时, 可能需要同时修改与其有关的课程信息、题库信息等, 需要调用课程和题库类的find和del方法来完成, 这时候就要由Spring IOC为Teacher类注入课程和题库等多个类。

数据访问对象层的实现采用DAO设计模式, DAO模式在业务逻辑层和数据库持久层之间增加了DAO接口及其实现类DAOImpl, 各个DAO实现类均继承自Spring提供的Hibernate Dao Support类, 该类的Hibernate Template对象封装了对持久化对象的基本操作, 因此, 继承于它的系统DAO实现类都能访问、操作持久化层中的数据。DAO接口和实现类都可以通过Hibernate数据库反转工具自动生成, 但自动生成的类一般不能完全满足实际应用的需要, 可以采用手工方法添加新的功能, 本文在Teacher Dao类中就添加了用于多关键字检索的Getby Field Page方法。

3.3表示层的实现

表示层采用JSP技术和Ext JS技术相结合的方式实现, 以教师信息管理模块为例, 其显示界面的功能不仅包括对教师信息进行修改、增加、删除、查询等操作, 还应该能够根据选中的当前教师记录展示该教师负责的课程和题库信息, 并对教师负责的课程和题库信息进行修改调整。这涉及到多个具有关联关系的数据表之间的相关查询、表格分页显示等UI操作, Ext JS框架提供的可重用对象和可扩展的Web UI库, 可以帮助开发者快速开发具有复杂交互功能的页面。

采用Ext JS技术开发Web应用与传统Web应用开发模式不同, 开发时可以直接把各种Ext JS UI库组件拖放到Web页面上, 然后对组件进行设置和编码操作, 类似常见的桌面图形界面软件, 采用“事件-响应”方式实现网页动态交互功能。这是因为Ext JS组件能监听鼠标单击、回车、服务器返回数据等页面中的事件, 并通过改变网页的文档对象模型 (Document Object Model, DOM) 实现页面的动态交互。例如, 当用户单击教师信息列表时, 教师列表Grid Panel中的鼠标单击事件监听程序会将当前数据行的信息作为参数传递给Store组件, 该组件负责向服务器中对应的get Teacher Course.action控制器请求教师的课程数据。当服务器传回请求的数据时, 监听数据返回事件的Store组件将自动更新教师的课程信息。

从以上过程不难看出, Ext JS UI库组件与服务器端的交互实质上还是“请求-响应”的方式, 只不过Ext JS页面中数据提交和获取都采用Ajax方式。Ext JS动态生成的Javascript对象处理各种向服务器端发送的异步请求, 然后通过客户端的Ajax引擎将异步请求映射成Http请求, 业务层返回的处理结果以JSON数据格式封装, 同样经过客户端Ajax引擎解析, 最后返回给客户端Ext JS组件, 实现服务器层和表示层的异步数据通信。

四、结语

本文在网络教学平台的实现中采用了SSH+Ext JS集成方案, 在充分整合Struts、Spring、Hibernate和Ext JS等开源框架的基础上对网络教学平台进行分层和组件化的开发设计, 实现了数据层、业务层、表示层的分离, 不仅提高了系统的开发效率, 而且进一步优化了Web应用的架构, 使得系统各个模块之间的耦合度降低, 为系统的后期管理和二次开发提供了有力支持。Ext JS技术的引入不仅提高了Web界面品质和用户体验, 还能有效解决多表联动查询、树状菜单显示等传统AJAX动态技术开发的复杂度, 同时也有效降低了服务器端压力。实践证明, 采用SSH+Ext JS集成方案构建的Web应用程序具有可维护性高、扩展性好、开发效率高等优点, 在Web应用开发中具有广阔的应用前景。

摘要：网络教学平台是提高院校信息化建设水平的重要支撑, 能有效发挥网络在人才培养中的作用。本文提出了一种基于SSH+ExtJS集成框架构建网络教学平台的设计方案, 实现了数据层、业务层、表示层分离的多层体系结构, ExtJS技术在表示层的引入提高了Web界面品质和用户体验。实践证明该网络教学平台具有可维护性高、扩展性好、开发效率高等优点。

关键词：Struts Spring Hibernate ExtJS,网络教学平台

参考文献

[1]刘志军.基于SSH架构的语文教学系统设计[J].沧州师范学院学报, 2012 (3) :65-68.

[2]黄美林, 马建华, 李东.基于SSH框架与泛型的通用分页方法设计与实现[J].计算机技术与发展, 2012 (1) :67-71.

[3]孙萧寒, 孙卫喜.基于SSH架构的网络购物系统设计与实现[J].信息技术, 2012 (12) :136-138.

ExtJS技术论文 篇3

关键词：土地资源管理,信息系统,ExtJS,B/S架构

0 引言

土地是资源, 也是资产, 是企业生产必不可少的条件, 是非常重要的生产资料[1]。目前大型企业特别是国有大型工矿企业土地资源管理存在的问题非常突出。这些企业的用地状况十分复杂, 土地利用情况几经变迁、土地资源利用类型广、来源复杂、权属管理千丝万缕等诸多不利因素导致企业土地管理工作难度大、效率低[2]。随着信息技术和网络技术的不断发展, 当前企业的业务管理已经从传统的管理模式走向网络化和信息化, 其中基于Web的B/S多层体系架构受到广泛的关注, 信息技术已成为企业管理的重要工具[3]。Ext JS主要用于创建用户界面, 直接影响用户体验, 是与后台技术无关的前端Ajax框架, 提供了灵活而接近实用的物件, 具有其他框架无法比拟的优势[4]。神华集团土地资源管理信息系统要求实现B/S架构的土地信息的集中存储与分级共享, 为了改善用户体验、丰富用户界面, 系统采用Ext JS技术实现客户端UI界面, 开发效率高、维护方便。土地管理信息系统中的成功构建对Ext JS技术在网络开发中的应用起到了推动作用, 对大型企业土地资源信息化建设起到了良好的示范效果。

1 关键技术

1.1 Ajax与Ext JS框架

Ajax即“Asynchronous Java Script and XML” (异步Java Script和XML) , 是指一种创建交互式网页应用的网页开发技术。它是Web 2.0的基石。通过Ajax, Java Script可使用Java Script的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象, Java Script可在不重载页面的情况与Web服务器交换数据。这样就可以实现无刷新重载整个页面[5]。基于Ajax技术的框架有j Query、Mootools、Dojo和Ext JS等, 其中Ext JS基于组件化的设计思想, 提供了强大的UI控件, 这些控件性能好, 可以直接使用, 功能强大, 可扩展性强, 和Ajax无缝集成, 是比较理想、易用的前台Ajax框架。

1.2 JSON数据规范

JSON (Java Script Object Notation) 是一种轻量级的数据交换格式。它基于Java Script (Standard ECMA-262 3rd Edition-December 1999) 的一个子集。JSON采用完全独立于语言的文本格式, 易于人们阅读和编写, 同时也易于机器解析和生成。JSON可以使用Java Script中的对象和数组两种结构表示各种复杂的结构。它可以将Java Script对象中表示的一组数据转换为字符串, 然后就可以在函数之间轻松地传递这个字符串, 或者在异步应用程序中将字符串从Web客户机传递给服务器端程序。这种设计使JSON简化了数据访问, 开创了一条比DOM技术更便捷的数据访问途径, 无需解析可以直接嵌入到Java Script中, 各种语言如PHP、JAVA、C#等更容易生成JSON格式的数据, 从而更适于进行Web交换处理[6]。

1.3 Spring框架及Spring MVC

Spring框架是为解决企业应用程序开发复杂性而创建的, 它是一个开源且基于POJO的轻量级J2EE应用框架。它的主要优势之一是分层架构, 使组件化的开发成为可能。其最引人注目的是基于IOC反转控制和AOP面向切面的设计思想。通过这样的机制, 可以在运行期配置组件所需资源, 降低组件之间的耦合和依赖, 可以改善代码的可重用性和可维护性[7]。Spring MVC是一个全功能的构建Web应用的MVC实现。通过接口, MVC框架变成高度可配置的MVC。它和其他MVC框架相比具有以下特点:MVC角色划分更清晰、灵活配置、提供大量控制器接口和实现类、面向接口编程、提供国际化支持。

2 土地管理信息系统构建

2.1 系统的分析与功能

本文以神华集团为例建立了适合企业自身特点的土地管理信息系统, 系统把分散的土地管理业务, 包括土地权属管理、土地利用管理、土地复垦管理、新增用地管理和土地处置管理集成在一个Web平台中, 把分散的土地业务相关数据整合到一个系统中, 数据的范围包括煤、电、路、港、油、航运等多个业务板块和内蒙、新疆、宁夏、山西、陕西、河北、福建、四川、安徽等多个省份。系统使得土地日常管理、新增用地管理和土地处置管理在Web上运行, 实现了土地管理和土地信息的数据传递与共享。

系统功能上实现Web上的新增用地管理、土地日常管理、土地处置管理、土地信息统计查询等业务, 以下是主要的业务功能模块。

(1) 新增用地管理模块:实现用地计划、用地预审、用地审批、土地登记等业务的网上填报、查询、审核、编辑、删除等功能, 实现了新增用地的全流程管理。

(2) 土地日常管理模块:实现永久用地和临时用地的土地权属登记、查询、审核、编辑、删除;实现土地利用调查的业务数据填报、审核、编辑、删除;实现土地复垦任务、土地复垦计划、年度复垦项目、年度复垦验收的填报、查询、审核、编辑、删除等功能。

(3) 土地处置管理模块:实现了土地处置方案和土地处置结果的填报、查询、审核、编辑、删除等功能。

(4) 土地查询统计模块:实现了全集团的土地信息按公司、按省份、按用地类型、按土地现状的查询统计, 根据查询结果生成统计报表的功能。

2.2 系统的技术架构

从技术架构来说, 土地资源管理信息系统采用B/S架构, 分为集团及子分公司两级用户, 实现了数据的集中存储和分级共享。系统以J2EE为设计规范, 遵循层次化和组件化的设计方法, 采用MVC (模型-视图-控制器) 的设计思想, 前端框架使用Ext JS技术, 后台以Spring框架为基础, 系统可以分为页面视图层、控制层、业务逻辑层和数据访问层、数据存储层五个层次。

2.2.1 视图层

视图层是用户和系统进行交互的接口。视图层以JSP页面和Java Script编写的控件 (基于Ext JS框架) 为基础组成, 提供动态交互数据请求和异步刷新用户的浏览器界面。视图层接受用户的界面动作, 使用Ajax技术把用户请求发送到控制层, 控制层处理完成后, 把数据结果集以JSON数据格式组织成字符串返回给表现层, 视图层解析字符串, 把最终运行结果展示给用户。

2.2.2 控制层

该层根据用户不同的业务请求, 调用不同的业务逻辑处理方法进行业务处理, 并把处理结果组织成JSON数据串返回给客户端, 该层实现了业务控制的流转。系统中使用@Controller注解来标注控制层的组件。控制层的主控制器在web.xml进行配置, 在web.xml中定义了主控制器对象和所作用的URL。

2.2.3 业务逻辑层

业务逻辑层是后台业务处理的核心, 该层用Java Beans实现, 对业务数据进行封装, 按照用户的业务要求处理业务逻辑。系统中使用@Service注解进行标注业务逻辑层的组件。该层调用数据存储层的基本CRUD (Creat、Read、Update、Delete) 操作完成数据库的记录增加、删除、修改、查找。该层将业务对象和数据实现分离, 提高了系统整体可读性和开发效率, 为系统的灵活性和健壮性提供了保障。

2.2.4 数据访问层

数据访问层面向数据库, 使用基于注解的Hibernate框架, 实现了数据库的表和实体映射, 系统中使用@Repository注解进行标注数据访问层的组件 (DAO) 。DAO组件实现了数据库的基本操作。

2.2.5 数据存储层

该层使用数据库管理系统管理土地管理信息系统的土地管理业务数据。系统中使用的是Oracle11g。

2.3 系统的功能实现

土地资源管理信息系统前台以JSP页面调用Ext JS控件开发, 后台以Spring容器为基础框架, 使用Spring MVC控制业务数据的流向, 基于反转控制和依赖注入的思想, 使用@Service、@Controller、@Repository注解组织相互依赖、相互调用的对象, 提供服务, 实现各层之间的系统整合。以土地权属录入模块为例, 举例说明各个功能的实现方法。

2.3.1 视图层

土地权属模块的视图层由quanshu.jsp文件和quanshu Form.js (土地权属信息表单) 、quanshu Search Form.js (土地权属查询表单) 、quanshu SearchResult.js (土地权属查询结果表格) 、quanshu Mainpanel.js (土地权属面板) 、qusnshu Window.js (土地权属窗口) 等js文件组成。在quanshu.jsp中引入这些写好的js文件、Ext JS框架基础文件 (ext-all.js和ext-all.css) , 这样有利于增强系统的可维护性。以下详细介绍该土地权属模块中相关的Ext JS技术。

(1) Ext JS控件的引入和字符集

在使用Ext JS进行界面代码的编写时, 所有文件都是以UTF-8编码方式, 对Eclipse中的Preference选项进行设置, 防止数据出现乱码。在JSP页面使用以下代码导入:

(2) 组件和布局

土地权属功能模块界面中使用了Ext JS框架库中的Panel、Form Panel、Grid Panel、Window、Button等组件来编写各个业务功能界面。整体界面风格布局使用Ext.Viewport来设计。Viewport代表整个浏览器窗口, 直接渲染到document.body节点, 取代页面中的所有内容。系统中使用Viewport把界面分为三个工作区:顶部提示区、左部功能菜单区和中心功能区。顶部提示区显示登录信息、欢迎信息、帮助和系统LOGO标志。左边菜单区显示功能菜单。中心功能区链接具体的业务功能面板 (扩展自Panel) 。

Ext JS的Panel控件可以嵌套, 本功能模块中使用quanshu Panel为主面板, 嵌套quanshu Search Form (扩展自Form Panel) 和quanshu Grid Panel (扩展自Grid Panel) , 点击添加土地权属按钮, 弹出quanshuForm (扩展自Ext.Form Panel) , 嵌套于Form Panel。

(3) 事件监听

Ext JS库里的UI组件通过监听鼠标、键盘和服务器返回事件来监听页面的事件和服务器的事件, 操作网页DOM的改变实现网页的内容显示, 从而实现页面和服务器的动态交互。在quanshu GridPanel中, 可以添加监听事件listeners:{rowclick:function () {…}}, 从而实现单击某行数据, 触发响应函数, 在响应函数里可以实现发送请求给后台的控制器。当服务器传回数据时, 还可以触发数据返回事件实现特殊的业务功能。

(4) 与后台交互

页面中的用户请求数据和后台返回的处理结果数据是基于Ajax方式进行的。Ext JS框架底层与Ajax引擎无缝集成。使用Ext JS控件提供的方法即可以发送Ajax请求或者解析JSON数据来完成页面渲染。以下是获取后台处理结果和发送查询请求的代码片段:

(5) 超时管理

Session会话时常通过后台运用对用户记录的sessionid获取属性值, 依靠是否抛出异常来判断。对于session过期的用户, 可以定义过期标志, 返回到前台页面, 代码如下:

2.3.2 控制层

控制层对应于MVC模式中的Controller, 控制层的主控制器对象由org.springframework.web.servlet.Dispatcher Servlet实现, @Controller是标注控制层组件的注解, @Request Mapping是映射url和请求方法的注解, 服务启动时根据web.xml定义, 加载配置文件进行系统环境配置, 对指定的包名进行扫描, 实现控制层组件的加载。

2.3.3 业务逻辑层

业务逻辑层组件使用@Service注解来标注, 调用DAO访问数据库。使用@Transactional注解定义事务。代码如下:

2.3.4 数据持久层

数据持久层的设计可以减少业务代码访问数据库的次数, 增加应用程序的执行速度, 系统中使用了基于JPA规范的Hibernate框架, 通过DAO和ORM实现数据的持久化操作。代码中使用@Entity注释声明该类为持久类, @ID可以声明属性是该类中的独特标识符。土地资源管理信息系统中设计了Basic DAO基类 (扩展自org.springframework.orm.hibernate3.support.Hibernate Dao Support) , 该基类定义了一些方法, 实现了常用的增、删、改、查等数据访问操作。

2.4 系统的运行及分析

系统采用Eclipse为开发工具, 以Oracle 11g为数据库, Websphere为Web服务器, 使用Java语言, 基于J2EE平台开发。用户界面采用JSP+Ext JS实现, 界面在Ext JS现有控件的基础上扩展开发了业务组件, 后台以Spring框架为容器, 使用注解、DAO, 结合Spring MVC和Hibernate, 对系统进行了模块化和层次化的设计与开发。在网页地址栏输入系统IP地址, 即可进入系统的登录界面, 输入正确的用户名和密码登录, 系统判断用户的类型和权限, 用户根据权限不同使用不同的功能菜单, 从而保证了系统的数据安全性。

系统中使用的Ext JS技术框架和Spring技术框架的结合, 在土地管理系统的构建中具有以下特点。

(1) 丰富的可扩展组件。Ext JS框架提供了丰富的组件库, 包括可视化的组件和非可视化的组件。可视化的组件表格组件、表单组件、页面布局组件、树状结构组件、面板组件、窗口组件等, 在系统中根据特定需要使用Ext.extend () 方式来实现。非可视化组件封装了一定的逻辑和数据结构, 系统中使用非可视化组件完成数据的UI端验证和数据的组织等功能。土地管理信息系统中使用上述组件实现了系统页面的结构化布局、土地信息数据的查询和填报表单、查询结果的表格展示、数据的合规性验证和数据的回显等功能。

(2) 模块化的实现, 提高了系统的可维护性和复用性。系统基于模块化和结构化的开发思想, 在UI端, 使用Ext JS的组件, 扩展开发了信息表单和信息显示表格等业务组件, 信息表单组件可以复用在填报、编辑、浏览等功能模块里, 信息表格组件可以调用不同的后台URL数据源实现不同业务数据的回显。

(3) 表现层和业务层更容易分开。Ext JS框架和Ajax引擎做到了无缝的集成, 在土地管理信息系统中可以使用Ajax技术发送用户请求, 接受系统后台返回的JSON格式的数据。这种实现方式不仅加强了异步通信、节省了网络带宽, 而且更加有效地使表现层和业务逻辑层分离, 可以促进开发人员更好的分工, 使开发人员专注于控制层、业务逻辑层和数据层的实现, 专注于后台业务逻辑的开发。前台UI开发人员更专注于界面的友好性和易用性的设计和开发。

3 结束语

针对大型企业土地资源管理走向网络化和信息化的趋势, 以神华集团为例, 设计并实现了基于Ext JS的土地资源管理信息系统。Ext JS框架的使用, 使系统的界面友好性, 用户操作方便性、组件化编程性、可维护性和可扩展性都得到了保障和实现。该系统的成功应用提高了土地资源管理工作者的工作效率, 使土地资源的管理水平更上一个台阶, 成为土地资源信息化管理的一个良好示范。

参考文献

[1]唐连宇.浅谈如何提高对油田企业土地管理的认识[J].科学与财富, 2011 (3) :42-42.

[2]邵志强.企业土地管理与办公自动一体化系统建设探析[J].山东国土资源, 2011, 27 (11) :50-53.

[3]王建文, 张俊明, 韩李鹏.基于ExtJS的物资管理系统的设计与实现[J].计算机工程与设计, 2010, 31 (23) :5012-5013.

[4]任伟, 林晓东.基于Spring框架和ExtJS的药品库房管理系统实现[J].计算机工程与设计, 2009, 30 (18) :4312-4315.

[5]孟庆瑞, 田兆峰, 阎楚良.Ajax技术在农业装备信息网中的应用[J].农业机械学报, 2008, 28 (12) :133-135.

[6]杨树林, 胡洁萍.JSON数据交换格式及其在数据验证中的应用[J].北京印刷学院学报, 2008, 16 (4) :56-58.

ExtJS技术论文 篇4

轨道交通建设是近年来城市基础设施发展的重点, 城市轨道交通在城市住宅区、交通运输中心和工作地点之间提供了一个快捷便利的连接。当前, 我国城市轨道交通建设步入了快速发展的阶段, 未来将拥有超过5 000公里地铁、轻轨等的庞大轨道交通网络。

城市轨道交通相对于道路交通具有单位周转量能耗较低的优点, 但由于作业任务繁重, 其消耗能源的总量很大。作为城市大运量、公共服务性质浓厚的运输方式, 城市轨道交通在节能降耗方面有较大潜力。因此, 在政府倡导的“节能减排”的大背景下, 从技术设施设备选型和运营管理角度研究轨道交通系统的节能问题对于对降低运输成本、提高经济效益、提升科技进步能力以及促进轨道交通的可持续发展都具有重要的现实意义[1,2]。

在WEB2.0时代, 我们可以利用AJAX技术实现客户端与服务器端之间的数据交互, 在服务器端收到客户端的请求后, 服务器会把处理好的有效数据返回给客户端, 只更新访问页面中部分内容的模式大大优化了用户体验。基于Ext JS技术的上述优势, 本文设计并实现了一种基于Ext JS的轨道交通能源管理系统, 运行测试结果表明该系统具有良好的可操作性、能耗优化的可建设性等优点。

1 Ext JS技术

Ext JS可以用来开发RIA也即富客户端的AJAX应用, 是一个用javascript写的, 主要用于创建前端用户界面, 是一个与后台技术无关的前端ajax框架。Ext JS是一个用于构建富因特网应用程序 (RIA:Rich Internet Applications) 的跨浏览器Java S-cript框架, 它包含高性能可定制的UI组件, 良好设计和可扩展的面向对象组件模型, 更直观更简便的API使用方式, 能够实现各组件之间的无缝隙调用。它完全采用面向对象的思想进行架构, 框架中的所有组件和工具都被定义为类, 并分布在特定的命名空间中;它提供了可重用的对象和部件, 简化了开发, 丰富了客户端界面效果[3]。

1.1 Ext JS的MVC架构设计

大规模客户端应用通常不好实现、不好组织、不好维护, 因为功能和人力的不断增加, 这些应用的规模很快就会超出掌控范围, Ext JS4带来了一个新的应用架构, 不但可以组织代码, 还可以减少实现的内容。在Web应用中, 更多的是利用AJAX技术进行数据验证、自动更新、数据检索、交互数据等。由于Ext JS嵌套了AJAX, 使得Ext JS视图与MVC模型结合更加具备优势。加入Ext JS的MVC开发模式如图1所示[4,5]。

模型层 (Model层) :主要用于管理数据。模型是字段和数据的集合, 模型知道如何持久化自己的数据, 并且可以和其他模型关联。通常模型对象负责在数据库中存取数据。

视图层 (View层) :专注于图形界面的显示, 通过浏览器展示给用户, 接收用户的请求。通常视图是依据模型数据创建的。

控制层 (Controller层) :属于应用程序的业务逻辑层。主要负责转发请求, 并对请求进行业务逻辑的处理, 根据不同的用户请求调用视图、模型, 在相关业务处理完成后再由模型中的数据更新视图。通常控制器负责从视图读取数据, 控制用户输入, 并向模型发送数据。

1.2 Ext JS与后台的交互

传统的表单提交等响应操作会触发页面刷新动作, 而Ext JS技术可以完美支持HTML5和Ajax技术, 这两种方式均是以异步方式提交, 不会造成整个页面的刷新, 而只是刷新局部页面。

在系统中对实时性要求不高的模块, 客户端与服务器端的交互可采用传统的Ajax请求响应模式, Ext JS中采用AJAX方式提取和获取数据, 在Ext JS中对于请求主要是通过Ext.Ajax.request对象的url属性进行设置。Ext JS页面数据通过JSON与后台进行交互, 页面通过AJAX将参数传给后台, 后台再将操作结果以JSON格式的数据返回给前端界面。

而在系统中对实时性能要求比较高或流量负载增大的模块中, HTML5的Web Socket方案相比传统的AJAX轮询方案有更大的性能优势。

例1:Web Socket方法获取数据

2 能源管理系统的结构

2.1 系统功能结构

本轨道交通能源管理系统利用统一的模型、数据、网络通信、人机界面、系统管理等服务, 实现能耗统计、能耗分析和能耗优化, 在功能结构上可以分成四层, 如图2、图3所示。

(1) 数据库层:用于存储数据, 包括电压、电流、有功功率、无功功率、电量、功率因素、谐波等电力参数;客流信息、空气质量、环境温度、冷量供应等环境参数。

(2) 数据采集服务层:使用电力系统常见的104规约、Modbus规约采集轨道交通能耗电表及其他相关设备上的能耗数据, 并存入数据库。

(3) 服务算法层:该层包括能耗统计分析算法和能耗优化管理算法。能耗统计分析算法是根据历史存库数据对能耗指标参数进行统计分析;能耗优化管理是结合能耗数据及环境参数、设备模式等数据进行能耗优化分析, 最终达到节能减排目的。

(4) WEB页面层:人机接口层, 以友好的界面展示在用户面前。包括实时能耗展示模块、能耗报表、历史趋势查询、换表管理、负荷曲线、实时日均线/月均线、满码回滚、电能质量分析、节能管理和用户权限管理模块。

2.2 系统网络结构

本能源管理系统采用中央级-现场级网络结构设计, 在整条线路只设置了一个中央级能源管理系统作为全线管理中心, 并在各车站、变电所设置FEP通信管理器用于采集车站内多功能电力监控终端与各类计量装置的数据。

(1) 中央级能源管理系统

设置在控制中心, 完成全线所有车站的能源数据实时动态采集, 监控, 趋势图显示、故障异常报警以及能耗管理及分析等功能。系统通过地铁骨干网从各车站通信控制模块获取实时数据。

(2) 现场级数据采集终端

通过其通信控制模块, 现场总线及高低压开关柜内计量装置 (带通信接口和电能累计功能) 连接, 并通过以太网模块, 将信息转换到以太网层面, 与中央能源管理系统服务器连接。

能源管理系统主要包括系统服务器、操作站、网络打印机、网络存储转发设备等。系统服务器分为实时数据服务器和历史数据服务器并采用冗余配置可进行无扰切换, 实时数据服务器, 负责接收、处理、存储现场设备上传的实时数据, 为网络中其他服务器和工作站提供实时数据;历史数据库服务器是系统历史数据仓库和管理中心, 用于完成历史数据的存储、管理, 并为网络中的其他服务器和工作站提供历史数据。操作员工作主站负责系统的图形、画面配置、制作和系统的各种维护工作。操作员站是监视、浏览实时历史数据画面及图形的窗口, 用于人机接口, 作为系统的客户机, 通过局域网与服务器互联并交换信息。网络打印机可为网络上任一节点提供打印服务。网络存储转发设备负责与外网交互数据。在每一个车站、车辆段、或其他附属建筑利用FEP网络管理器及现场控制网络采集多功能电力监控终端与各类计量装置的数据通过内部以太网络上传至能源管理中心, 其中FEP网络管理器负责解析各种不同的规约、完成通讯接口数据处理及数据转发, 现场控制网络和能源管理中心都采用双以太网冗余布线。

3 能源管理系统的设计与实现

城市轨道交通能源管理系统的基本工作流程如图4所示。

FEP通信管理器通过现场以太网络并依据各种标准/可定制通讯规约与现场运行的各种智能终端通信进行数据采集并通过运行于当前城市轨道交通能源管理系统的各种标准/可定制通讯规约程序将数据转发到系统主服务器的实时数据库;运行于局域网中的各台服务器和工作站通过数据总线同步地获取相应的数据和信息。人机界面 (HMI) 实时数据图形及画面展示模块和实时报警模块基于实时数据库对其感兴趣的数据进行监听, 并在接收到数据变化的消息通知时相应的执行声光报警、画面闪烁、图形刷新等动作;操作员通过人机界面执行的远程节能控制及调节操作被写入实时数据库中的相关数据点对象, 由通讯规约模块监听到控制命令消息后将操作员命令发送至FEP通信服务器再由FEP通信服务器转发至现场的智能终端实现对远方智能设备的调节控制;运行于后台的历史数据存储转存服务程序将以用户指定的时间间隔保存重要数据的快照, 按照系统配置的存储规则存储历史数据比如对需要存库的数据点对象, 按照变化存储或按不同数据聚合方式 (固定时间间隔中的最大、最小、平均值) 或按约定配置的其他存储规则存入历史库, 对于所有告警记录则全部保存到报警库中;基于历史数据库及报警历史库操作员可以人机界面对历史数据进行查询显示及统计分析, 包括历史数据趋势查询、能耗信息统计分析、设备对象数据查询比对、报警历史查询展示及历史数据报表订制和展示以及能耗与设备运行模式相关性分析功能等。

本系统包括数据采集、数据存储与统计、实时能耗数据查询、能耗报表、历史趋势查询、换表管理、负荷曲线、电能质量分析、节能管理、和用户权限管理十大功能模块。

(1) 数据采集模块:城市轨道交通能源管理系统在每个车站现场都配置了FEP通信服务器通过现场以太网络与现场智能终端设备相连, 负责采集数据和控制调节命令的转发。数据采集模块作为与FEP通信服务器的接口部分, 通过通讯规约实现原始数据的采集, 报文解析处理, 数据输出和节能控制调节功能, 通过规约通信接口, 按双方约定的通讯协议, 采集设备的遥信、遥测、遥脉等数据信息, 实现节能控制调节命令的下发。

(2) 数据存储与统计:数据库转存模块用于将完整的历史数据库中的数据, 按照约定好的划分原则, 转存到若干个较小的历史数据表中。转存后删除原数据库中的数据。相比原来完整的历史数据表, 同步转存之后的历史数据表数据量大大减少, 可以大幅提高数据检索效率, 也便于数据库的维护和管理。

(3) 实时能耗数据查询:该模块用于将用户关注度较高或经常需要查看的不同数据测点的数据放在一起以某种类型的图形 (曲线图、柱状图等) 显示以便更直观显示和对比不同数据测点的数据。该模块可以以固定时间间隔自动刷新图形。

(4) 能耗报表:该模块是系统历史数据展示和分析功能的一部分, 为用户提供各站、系统、子系统、设备等的能耗查询、展示等功能。该模块采用曲线图、面积图、柱状图、堆积图、饼图等多种方式将数据展示出来, 可以实现多个车站、多个系统或子系统之间能耗对比。另外通过系统与综合监控系统等其他管理系统的数据交互, 也可以实现能耗与控制参数、控制模块的对比, 为控制策略和设备诊断提供依据。

(5) 历史趋势查询:该模块是历史数据展示功能的一部分, 用于查询历史能耗数据。软件模块可以查询任意能耗测点在一日、一月、一年或者自定义时间段内的历史数据, 历史趋势能够以曲线、柱状图或表格的形式展示给用户。同时, 查询时可以选定一组对比的时间用于历史数据之间的对比。

(6) 换表管理:在用户人工更换电能表或对电能表手动清零之后, 能源管理系统应具有相应的操作区域用于记录用户的本次操作, 记录内容包括:更换电表或手动清零的时间、操作前电表电度量计数、操作后电表电度量计数。且在用户执行数据查询时, 自动根据记录对电度量数据进行修正。

(7) 负荷曲线:该模块能够根据实时采集和保存的历史功率数据实现负荷曲线统计功能, 用于分析用电规律和用电特点。

(8) 电能质量分析:该模块可查询和统计一段时间内供电电压偏差、频率偏差、电压波动与闪变、三相电压不平衡度、波形畸变、各次谐波电压含有率、各次谐波电流含有率等能源参数的最大值、最小值、平均值、CP95值, 根据统计数值判断各项参数是否合格。用户可根据诊断结果有针对性地优化配电系统。

(9) 节能管理:该模块可根据客流量、车辆运行次数、环境温湿度、照度、空气质量等参数, 对重点用能主体及重点能耗设备科学合理地进行系统的管理。

(10) 用户权限管理模块:该模块用于系统对用户进行管理, 包括用户的增加、修改、删除、重置密码、和权限修改等。系统包括系统管理员、运行操作人员、浏览用户等不同级别的用户权限。系统管理员可进行用户配置、电站配置、模型训练等操作;运行操作人员可以进行数据修正与上报、模型选择、数据浏览、下载与打印等一般操作。浏览用户仅能进行页面浏览, 数据下载与打印。

4 结语

城市轨道交通能源管理系统通过分析城市轨道线路、车站耗能体系的基础上, 可以实现全线路完备的能耗和用电设备电能质量的监测、数据分析功能, 建立能耗评估体系并以此为依托, 重点分析车站动力系统的能耗, 结合轨道综合监控系统、轨道变电站自动化系统, 逐步实现对线路各车站动力的能耗的优化控制实现, 最终以达到持续改善轨道车站能耗的目的。

利用Ext JS前端技术开发出的能源管理系统具有良好的实用性和可扩展性, 而且界面友好、操作方便、统计分析结果准确, 为城市轨道交通的科学用能提供了有力依据。

摘要：城市轨道交通能源管理系统通过分析城市轨道线路、车站耗能体系基础上, 实现全线路完备的能耗和用电设备电能质量的监测、数据分析功能, 对持续改善轨道车站能耗有着极为重要的意义。本文详细介绍了一种基于ExtJS的城市轨道交通能源管理系统的实现方式。首先介绍了系统开发过程中使用的开源前端技术ExtJS, 然后罗列了能源管理系统所包含的功能, 最后简单介绍了系统的应用。实验室运行测试结果表明, 该系统具有良好的可操作性、易维护性和准确性。

关键词：ExtJS,城市轨道交通,能源管理,系统设计

参考文献

[1]马学鹏, 夏国臣.城市轨道交通能源管理系统研究[J].城市轨道交通研究, 2014.

[2]韩治.城市轨道交通能源管理系统设计方案[J].铁道标准设计, 2013.

[3]徐会生, 何启伟, 康爱媛.深入浅出Ext JS[M].北京:人民邮电出版社, 2009.

[4]卫军, 夏慧军, 孟腊春.Ext JSWeb应用程序开发指南[M].西安:机械工业出版社, 2009.

ExtJS技术论文 篇5

在系统开发的过程中,提高代码的重用性是每一个编程人员都必须考虑的问题。在当前的系统前台界面实现中,成熟的开发框架比较少,对代码的重用性不多,导致要实现丰富而动态的前台,程序员需要编写大量的脚本,加重了界面编程人员的系统开发难度。

随着开发技术的不断改进,通过ExtJS框架来实现用户界面的编写将为程序开发人员带来很大的便利。ExtJS可以用来开发富客户端的AJAX应用,通过JavaScript实现页面动态交互以及异步刷新,主要用于创建前端用户界面,是一个与后台技术无关的前端AJAX框架。本文中的考试系统采用ExtJS4开发客户端界面,通过其MVC的设计模式,实现前台代码的高度整合及重用,从而减少代码的复杂度以及提高系统的可维护性。

1 系统界面框架设计

为了提高代码的重用性,提高系统的开发效率,本系统的界面设计采用了ExtJS框架的MVC模式进行开发。如图1所示,考试系统主要采用了四个模块来完成界面的设计管理员模块adminApp、考试模块examApp、学生模块studentApp、教师模块teacherApp。每个模块中的controller层实现逻辑控制、modle与store层实现与后台数据的交互、view层实现具体的界面显示。

如图2所示为管理员模块界面的设计,各目录中通过各自的JavaScript文件实现界面的代码编写,使代码简洁,层次分明,从而提高代码的重用性及可维护性。

(1)controller目录中的控制代码进行model层、store层与view层的整合,实现前台用户请求向后台服务端的提交,以及动态接收后台处理数据结果,下面为admin Controller.js实现管理员模块中各层的功能业务的处理及整合的代码结构。

其中,this.control()函数中添加实现业务功能的函数代码,models:[]、stores:[]、views:[]中分别添加管理员模块中需要整合的模型、数据源以及视图文件。

(2)model目录中的各个js文件与后台实体类进行对应,进行数据的对象化处理,实现前台数据的封装,有利于前台代码的面向对象编程。下面为命题计划的模型代码。

以上代码定义了一个ParperConstruct模型,该模型是从Ext.data.Model模型中继承下来,包含了‘con Id’、‘con Course’、‘conDemand’等属性,该模型与服务器端的cn.edu.dgpt.exam.bean.PaperConstruct类相对应。

(3)store目录中的js文件实现与后台的Struct框架中的action进行数据的交互。以下为allPaperConstructStore.js数据源的代码。

以上代码定义了一个allPaperConstructStore数据源,通过autoLoad属性指定该数据源的数据自动从数据库中加载,页面的数据会根据数据库的数据变化而自动地动态变化,不需要通过页面刷新。

proxy:属性指定了与后台数据交换的方式,如url属性指定调用后台命题计划处理类PapConstructAction中的列举所有命题计划方法listAll(),获取所有的命题计划。另外,reander属性指定从服务器端读取数据的格式。

(4)view目录中的js文件实现客户端界面的显示,与用户进行交互,以下为列举并更新命题计划审核状态的界面部分代码。

以上代码定义了一个listPapConstruct视图,通过extend属性指定该视图为一个grid表格,store属性指定表格显示的数据源,columns属性指定表格的标题栏内容,docked Items属性指定表格的分页栏。

2 主要模块界面实现

下面以管理员及教师模块部分前端界面为例,介绍考试系统的主要模块界面实现。

(1)管理员模块主要包含部门维护、专业维护、课程维护、教师维护、班级维护、学生维护、试卷审批等功能。

1)课程维护界面,如图3所示主要包含课程的添加、更新及删除等操作,用于维护考试系统中需要考试的科目,主要包含课程名称、课程学分、课程学时、开课学年、开课学期以及课程所属专业方向属性。

2)命题计划审核界面,如图4所示主要用于审核教师添加的考试命题计划,管理员可以通过此界面查阅教师提交的考试命题计划,如果命题计划符合要求,则可在审核状态下指定该命题计划通过审核,系统会根据相应的命题计划要求自动组卷来实现课程考试。

(2)教师模块主要包含个人信息维护、添加试题、制作试卷、批阅试卷等功能,部分界面介绍如下:

1)试题添加操作界面,教师可通过此界面实现判断题、选择题、填空题、简答题以及编程题等各种题型的添加操作,如图5所示,为判断题添加界面,包含有课程名称、题目内容、答案、试题分值以及试题难度等属性。

2)命题计划添加操作界面,教师在制作试卷时,可设定试题的类型、分值,但教师制作试卷后必须要由管理员审核才能考试。如图6所示,教师可以指定考试的课程名称、考试日期、考试时间、考试题型的难度及分值等信息。

3 结束语

ExtJS技术论文 篇6

随着技术的发展, Ajax技术的出现, B/S结构的Web应用逐渐向富客户端发展。富客户端技术集成了桌面应用的交互性和传统 Web应用的部署灵活性, 为用户提供一个更丰富、更高和更全方位的网络体验。ExtJS框架便是一种与后台技术无关的, 可以用来开发富客户端的前端Ajax框架。

在开发基于J2EE的中小型企业级的Web应用时, 强调的是系统的敏捷开发、可扩展性以及易于维护。然而, 传统的基于 EJB的重量级框架技术由于其复杂性, 往往使开发过程事倍功半。类似于Spring的轻量级框架的出现, 正好解决上述问题。目前, 轻量级框架的发展已经成为推动J2EE技术发展的重要推动力, 成为新一代J2EE技术构架的基础。

本文通过对ExtJs、Spring和iBATIS的整合研究, 探索用户体验好、系统开发高效、可复用性和易于维护的集成框架平台, 为指标管理系统的开发提供较好的框架技术支撑。

1开源框架介绍

1.1ExtJs框架

ExtJs框架是一个强大的JavaScript类库, 提供了可重用的对象和部件, 简化了开发, 丰富了客户端界面效果。它基于纯HTML/CSS和JavaScript技术, 灵活采用JSON/XML作为交换格式, 提供丰富的跨浏览器UI组件, 使服务端表示层的负荷减轻, 从而达到客户端RIA应用。

1.2Spring框架

Spring是一个提供了解决J2EE问题的一站式框架, 包括核心容器、Spring Context、Spring AOP、Spring DAO、Spring ORM、Spring Web和Spring MVC七个模块。通过IOC (控制反转) 技术, 可以将对象间的依赖关系交由Spring 进行控制, 降低程序的耦合度;通过Spring提供的AOP (面向切面编程) , 可以将业务逻辑与系统服务 (如日志、事务、权限和异常处理等) 进行分离, 达到易维护和重用的目的;通过Spring提供的ORM模块, 可以将Spring和iBATIS进行无缝集成, 并利用iBATIS提供的ORM机制, 提高系统设计和自由度。另外, Spring提供了MVC2模式的实现, 使用非常方便, 无需整合其他MVC框架。

1.3iBATIS框架

iBATIS是一个基于Java的持久层框架, 它提供的持久层框架包括SQL Map和Data Access Objects (DAO) 。相对Hibernate和Apache OJB等“一站式”ORM解决方案而言, iBATIS是一种“半自动化”的ORM实现, 其着力点则在于POJO 与 SQL之间的映射关系。使用iBATIS提供的ORM机制, 对业务逻辑实现人员而言, 面对的是纯粹的 Java对象, 而对于具体的数据要求开发者编写具体的 SQL 语句, 这为系统设计提供了更大的自由空间。

2集成框架实现

将ExtJs、Spirng和iBATIS集成一起, 不仅为用户提供丰富的界面, 而且也达到了提高软件开发效率的目的。集成后的系统结构如图1所示, 分为表现层、控制层、业务逻辑层、数据持久层和数据储存层。另外, 应用Spring AOP代理提供日志、事务处理和异常处理服务。

2.1表现层

表现层主要应用ExtJS技术框架来实现, 通过ExtJs提供的丰富的UI组件, 使用页面效果达到桌面应用程序的风格, 提高业务操作的方便性, 实现友好的人机交互界面。应用ExtJs的Ajax技术与控制层交互, 实现数据的异步更新, 关键代码如下。

代码中, url所示userLogin.htm是Spring MVC urlMapping定义的访问请求, 即表现层通过Ajax向控制层发出userLogin.htm请求, 而params是表现层向控制层传递的参数。请求成功, 则通过success接收控制层返回的处理结果。请求失败则通过failure接收控制层返回的请求失败的消息。

2.2控制层

控制层主要应用Spirng MVC Controller处理用户请求, 向业务层发送请求, 向表现层返回处理结果, 其关键配置如下。

配置中, id为urlMapping的bean定义了映射, 对userLogin.htm的访问会为映射到id为userLoginInt的bean。而id为userLoginInt的bean, 则是定义了一个访问控制器, 通过控制器决定对业务层的调用。参数methodNameResolver定义了多动作参数, 用于决定访问的方法。

该层还应用Spring Security处理用户验证和授权, 为Web应用提供安全支持。

2.3业务逻辑层

业务逻辑层主要应用Spring IOC以及XML配置文件, 实现同各层间的交互, 为控制层提供业务模型组件。业务模型组件通过调用持久层DAO操纵数据库, 完成业务逻辑。

Spring的配置文件见2.2所示的“定义用户登录界面控制器”, 其中, 名称为userService的参数指定了通过Spring IOC依赖注入的id为userService的bean, 而userService中则封装了iBATIS对数据库的操作。

Java关键代码如下所示, getUserService () 用于获取依赖注入的userService, 而userLoginConfig () 方法用于执行控制器通过多动作参数的调用, 并向控制器返回执行结果。

2.4数据持久层

数据持久层主要应用iBATIS DAO调SQL Map, 完成对数据库的操作, 实现业务逻辑层的调用。而Spring和iBATIS实现整合后, 事务交于Spring统一处理, 可以实现事务处理代码和数据库操作代码的分离, 从而提高代码的重用性, 减少代码量。整合关键配置如下:

2.5Spring AOP代理

应用Spring AOP, 可将业务代码和非业务代码 (日志、事务处理和异常处理等) 进行分离, 从而降低两者的耦合性, 达到易维护性和重用性。为减少XML的配置, 采用Spring AOP自动代理, 其配置如下所示。

2.5.1 日志代理

此处日志代理类中, 实现时间记录的功能。

代码中, id为timeHandler的bean采用Around通知类型实现Advice, 而id为timeHandlerAdvisor的bean中参数advice应用IOC依赖注入timeHandler。参数patterns定义了哪些方法需进行日志记录, .*.*表示所有方法均需记录日志, 即当业务层调用任一方法时, autoProxyCreator均进行拦截并调用timeHandlerAdvisor进行日志和时间的记录, 业务代码中无需涉及日志代码。

2.5.2 异常代理

异常代理实现原理同日志代理类似, 此处仅为数据库操作设置异常代理, 因而, 参数patterns定义了以select、insert、update和delete为开头的方法可以实现代理。即, 当业务层调用上述方法时, autoProxyCreator自动进行监听, 抛出异常时进行拦截并处理。

2.5.3 声明式事务处理

事务处理在应用程序开发中起着至关重要的作用, Spring提供了编程式事务处理和声明式事务处理两种方式, 为减少事务处理的代码量, 此处采用声明式事务处理。声明式事务处理借助于AOP来实现, 需要用到开源的aopalliance.jar和cglib-nodep.jar。

配置中, id为baseTransactionProxy的bean是应用BeanNameAutoProxyCreator自动创建事务, 通过事务拦截器, 实现事务管理。而id为transactionInterceptor的bean是事务拦截器, 通过IOC依赖注入事务管理器transactionManager, 通过transactionAttributes参数定义需实现事务管理的方法。Id为interfaceProxy的bean, 则通过beanNames参数指定需实现事务管理的类。即, 当业务层调用tabGyxxYhxxInterface类时, baseTransactionProxy自动为类中涉及以selecte、insert、delete和update开头的方法开启事务管理, 业务代码无需涉及事务处理代码。

代码 (略) 。

3结束语

本文对ExtJs、Spring和iBATIS 3种框架进行了分析, 提出了框架集成方案。结合Spring MVC的特点、Spring IOC依赖注入机制和Spring AOP面向方面编程, 应用示例对集成框架各应用层的实现进行了分析。该方案在用户体验丰富、开发效率以及易维护性方面有较大优势, 但使用此集成框架进行开发时, 将产生较多的配置文件, 需要在开发指标管理系统时加强管理。

参考文献

[1]孙伟, 王蔚.基于Ajax的富客户端技术研究与应用[J〗.微型电脑应用, 2008 (3) .

[2]陆小亮, 卞艺杰.基于Ajax的富客户端电子商务系统设计[J].武汉大学学报 (信息与管理工程版) , 2011 (33) .

[3]王智君, 王时龙, 任亨斌, 等.基于Java EE的AOM-Spring-Hiber-nate架构及应用[J].计算机系统应用, 2011 (20) .

[4]张鑫, 黄灯桥, 杨彦强.JavaScript凌厉开发-Ext详解与实践[M].北京:清华大学出版社, 2009.

[5]郭锋.Spring从入门到精能[M].北京:清华大学出版社, 2006.

ExtJS技术论文 篇7

不管是小学毕业之后、初中毕业之后、高中毕业之后还是大学毕业之后同学之间都希望以后想联系时还能方便、及时找到原来的老同学,如果把同学之间的通讯方式记录在一个通讯簿上,当通讯地址变更时就不能及时更新通讯方式,不便于老同学之间的联系,使用基于Web的毕业生通讯录系统可以充分利用现代计算机技术方便通讯地址、通讯方式及时变更,实现同学之间畅通无阻的联络。传统的毕业生通讯录系统只注重后台功能的实现,往往忽视用户界面的友好,设计出令人耳目一新的漂亮的友好用户界面需要美工的支持,开发成本较高。毕业生通讯录系统采用ExtJS框架实现,不用美工支持就能开发出绚丽多彩的用户界面。

一、ExtJS技术简介

ExtJS简称EXT,用JavaScr ipt编写,它是一^个十分优秀的Ajax框架,同时也跨浏览器支持,它和后台所使用的技术无关。ExtJS有表格、树形、布局、菜单等用户界面,ExtJS提供的这些界面为用户日常开发工作节约了大量的时间和精力。ExtJS有丰富多彩的界面和强大的功能,使用ExtJS能够让页面显示风格与桌面应用程序效果相似。ExtJS通过XML或JSON完成与后台的交互。

二、毕业生通讯录管理系统的体系结构设计

(一)系统模块设计

根据一般毕业生通讯录管理系统的特点,对毕业生通讯录管理系统分析总结,确定本毕业生通讯录管理系统分为访客页面、学生页面、管理员页面三个模块。管理员即超级用户,可查看所有信息、添加所有信息、修改所有信息;学生可查看别人的信息,但只能修改自己的信息;访客只能查看信息,不能修改任何信息。系统结构图1如下。

(二)数据库设计

经过对毕业生通讯录管理系统的需求分析、数据库概念模式设计,得出如下关系模型:学生信息表、院系信息表、学校信息表、学历信息表、类别信息表、管理员信息表。这里只给出学生信息表的设计,学生信息表包括自增编号、密码、学号、姓名、性别、年龄、校名、类别、学历、班级、电话、邮箱、家庭住址、毕业就业单位、院名、系名、备注。

三、在Wob页面中引入ExtJS框架

使用ExtJS框架必须至少在页面中引入:ext-alI.js>adapter/ext/ext-base.js>bui Id/locale/ext-1ang-zh_CN.js和整个resources目录。ext-al l.js和adapter/ext/ext-base,js已经包含了ExtJS的所有功能，所有的JavaScr ipt脚本都在这里;bui ld/locale/extHang-zh_CN.js是简体中文国际化资源文件;resources目录下是CSS样式表和图片。在JSP页面中引入ExtJS框架的代码如下：

Administrators,js是程序员自定义的js文件，所有管理员页面的js代码都写在此js文件中。

四、连接后台数据库的实现

(一)连接数据库的部分代码

(二)操纵数据库的部分代码

五、结束语

毕业生通讯录管理系统采用ExtJS框架,使不懂美工的程序员也能做出友好的用户界面,克服了传统毕业生通讯录管理系统的不足,大大降低了系统的开发成本。系统运行良好,具有一定的推荐使用价值。

参考文献

[1]徐会生,何启伟,康爱媛.深入浅出Ext JS [M].北京:人民邮电出版社,2009:2 33-25 5.

[2]强锋科技,陈衍卿.JavaScr ipt完全自学宝典[M].北京:清华大学出版社,2008:493-505.

[3]封超,晁阳.Tomcat与Java Web开发技术详解[M].北京:清华大学出版社,2 008:322-324.

[4]章志明,张正球,余敏.基于MVC思想的科研管理信息平台[J].计算机与现代化,2005(9):63265.

[5]月影.JavaScript王者归来[M].北京:清华大学出版社,2008:471-488.