（机械电子工程专业论文）基于web的网络化天线监控平台设计.pdf

摘要 i i i l l i i l l l l l l l l i i l i 1 1 1 1 1 1 1 1 1 1 i i l l 1 1 1 1 1 1 1 1 1 1 u l y 2 0 6 7 3 9 1 利用网络技术实现远程监控，对企业降低生产成本，提高劳动生产率，提高 企业产品的科技含量，以及增强企业的综合竞争实力等方面都具有十分重要的意 义。而远程监控系统对客户端系统的界面、实时响应、耦合性的要求也越来越高。 本文首先研究了客户端技术，通过对远程监控系统客户端系统的交互性、实 时性及实现方案进行了较深入的研究和探讨，通过对不同软件结构模式的比较， 确立了基于a j a x 的e x t j s 技术框架，并和服务器端采用j s o n 数据格式通信的解 决方案。 其次从服务器系统的角度出发，分析了s o c k e t 通信技术，研究了 s t r u t s + h i b e r n a t e + s p r i n g 的框架整合。在上述理论分析的基础上，结合e x t j s 技术， 提出了使用s s h 框架和e x t j s 技术相结合的开发设计模式。 最后，通过对网络化天线监控系统的分析与研究，研究开发了基于w e b 的远 程监控系统。该系统拥有良好的操作界面，实时的响应速度，通用的实现框架， 对今后远程监控系统项目的开发具有重要意义。 关键词：远程监控富客户端e x t j s s s hs o c k e t a b s t r a c t i ti ss i g n i f i c a n tt ou t i l i z en e t w o r kt e c h n o l o g i e st or e a l i z er e m o t em o n i t o r i n gi n o r d e rt ol o w e rp r o d u c t i o nc o s ti ne n t e r p r i s e s ，e n h a n c et h ee f f i c i e n c yo fl a b o r , i n c r e a s e t h et e c h n o l o g yp o r t i o ni np r o d u c t s ，a n di n c r e a s ep r o d u c tc o m p e t i t i o na b i l i t yi nm a r k e t m o r e o v e rc u r r e n tr e m o t em o n i t o r i n gs y s t e mp u tm o r ea n dm o r ea t t e n t i o no nh u m a n i n t e r f a c e ，r e a lt i m er e s p o n s ea n dl o wc o u p li n g a sab e g i n n i n g ，t h i st h e s i sa n a l y z e st h ec l i e n tt e c h n o l o g yb yi n v e s t i g a t i n gt h e i n t e r f a c ea n dr e a lt i m e i m p l e m e n t a t i o no f r e m o t e m o n i t o r i n gs y s t e m t h r o u g h c o m p a r i n gd i f f e r e n ts o f t w a r es t r u c t u r e s ，w eg e tt h es o l u t i o nb a s e do ne x t j sf r a m e w o r k d e r i v e df r o ma j a x ，a n dc o m m u n i c a t i n gw i t hs e r v e r sb yj s o nd a t af o r m a t t h e ns t a r t i n gf r o mt h ea s p e c to fs e r v e rs y s t e m s ，w ea n a l y s i ss c o k e tc o m m u n i c a t i o n m e c h a n i s m ，a n dt h ec o m b i n a t i o no ff r a m e w o r kb a s e do ns t r u t s ，h i b e r n a t ea n ds p r i n g b a s e do nt h i s f r a m e w o r k ，w ea d d i t i o n a l l ya d o p t e de x t j s ，p r o p o s e d an o v e l d e v e l o p m e n td e s i g nm o d eb yc o m b i n i n gs s hf r a m e w o r ka n de x t j st e c h n o l o g y f i n a l l y ，t h r o u g ha n a l y s i so fn e t w o r ka n t e n n am o n i t o r i n gs y s t e m ，w ed e v e l o p e da s y s t e mb a s eo nw e bt e c h n o l o g y i tn o to n l yo w r i sf r i e n d l yo p e r a t i o ni n t e r f a c e ，r e a lt i m e d e s p o n d e n c e ，b u t a l s o g e n e r a l i z e di m p l a n t a t i o nf r a m e w o r k ，w h i c hw i l l b e v e r y p r o m i s i n gf o rt h ef u t u r er e m o t em o n i t o r i n gp r o j e c t k e y w o r d s ：r e m o t em o n i t o r i n g r i c hi n t e r f a c ee x t j ss s hs o c k e t 第一章绪论 第一章绪论 1 1 远程监控的概念 计算机网络技术兴起时间并不是很长，但是它对现代社会的影响是重大的。 它己经渗透到工农业、商业、新闻、电信、出版、文化娱乐、交通、金融、教育、 科研、旅游等领域，给这些传统行业注入了新的活力。现在，大型企业可通过内 部网络管理生产、销售和开发，农业管理部门可通过网络远程指导农民选择市场 热销的作物品种，金融机构可通过网络进行各种金融业务的处理，网上即时通信、 社交平台、网上购物、电子书刊等也都闯入了人们的现实生活。简而言之，计算 机网络己遍布各个领域j 。 远程监控技术是计算机网络技术渗透到工业控制领域的结果。远程监控是指 利用计算机通过网络系统实现对远程工业生产过程控制系统的监视和控制，从字 面上理解可以分为“监”和“控”两部分，其中“监”是指通过网络获得信息为 主，而“控”是指通过网络对远程设备进行操作的方法。能够实现远程监控的计 算机软硬件系统称为远程监控系统1 2 j 。 远程控制所实现的功能如下： 】采集与处理功能：主要是对生产过程的各种模拟或数字量进行检测、采样 和必要的预处理，并且以一定的形式输出，如打印报表、显示屏和电视等， 为生产人员提供详实的数据，帮助他们进行分析，以便了解生产情况p j ： 2 监督功能：将检测到的实时数据、还有生产人员在生产过程中发出的指令 和输入的数据进行分析、归纳、整理、计算等二次加工，并分别作为实时 数据和历史数据加以存储1 4 j ； 3 管理功能：利用己有的有效数据、图像、报表等对工况进行分析、故障诊 断、险情预测，并以声光电的形式对故障和突发事件报警： 4 控制功能：在检测的基础上进行信息加工，根据事先决定的控制策略形成 控制输出，直接作用于生产过程。 基于b s 和c s 的远程监控系统是以网络作为通信平台的监控系统，以h t t p 技术为基础，具有简单、高效等优点，已经成为信息网络的一种最普遍应用的信 息交互平台。利用s o c k e t 技术、数据采集技术及面向对象等软件技术实现了整个 系统的系统管理、用户管理、设备监控数据显示及报警等模块，其优点是充分利 用了现有的局域网资源和广域网资源，以最高的性能价格比，以信息的实时获取 和实时控制为中心，实现信息、资源及任务的综合共享和全局一体化的管理。 2 基于w e b 的网络化天线监控平台设计 网络化天线监控系统采用b s 监控模式，在现场监控层，采用以太网作为底 层控制网络。远程监控系统网络拓扑结构图如图1 1 所示，系统主要由以下几个环 节组成： 1 嵌入式工业现场控制设备，能向应用服务器返回数据并接受应用服务器发 送的控制指令； 2 能够向i n t e m e t 提供信息和应用程序服务的w e b 应用服务器； 3 提供数据处理、数据查询、数据修改以及数据更新存档等服务的数据库服 务器； 4 连接工业控制现场，作为w e b 服务器、工业控制现场和数据库服务器的桥 梁的代理服务器。 5 客户端计算机及访问w e b 页面所需的i n t e r n e t 浏览器软件。 ，； 图1 1 远程监控系统网络拓扑结构图图1 2 远程监控系统的软件框架 远程监控系统的软件框架如图1 2 所示，本文主要的研究目的是实现网络化天 线监控系统的软件框架。 1 2 课题意义 由于软件技术实现方案多种多样，不同的方案带来的结果将截然不同，在没 有使用框架的情况下，开发人员需要花费大量的精力去考虑系统的设计，比如， 如何获取工业现场设备的数据? 如何处理业务数据? 如何持久化业务数据? 如何 建立用户接口? 每层中还有各自独立需要考虑的问题，需要采用何种技术实现， 如何保证层与层间松耦合? 层的替换不会影响到其他层? 如何处理容器级别的服 务? 由于j a v a e e 设计复杂，开发人员在技能和开发经验不足的情况下，容易造成 项目的失败，也由于开发周期长和部署费用高，使得中小企业不能利用j a v a e e 来 构建企业信息系统。随着j a v a e e 开源框架的兴起，传统的e j b 框架逐渐没落，轻 第一章绪论 3 量级、低侵入、松耦合、易维护和低成本的开源框架成为主流【6 1 。如何建立用户接 口? 越来越多的成功案例证明采用开源框架设计企业级系统是一种有效的解决方 案，适合多数企业b s 信息系统的开发。采用传统的开发模式如j s p 代码跟h t m l 耦合在一起，企业级开发需求的不确定性必然带来开发中方案的不断修改，这种 方式开发方便，但修改维护带给程序员将会是噩梦1 7 】；在e j b 中实现实体b e a n 都 是重量型封装，功能过于复杂，同时用于部署运行e j b 的商用容器价格过于昂贵， 开发周期长，开发成本高。 同时远程监控系统对客户端系统的界面、实时响应、耦合性的要求也越来越 高。响应速度慢的原因除了硬件设备制约、网络带宽限制、业务逻辑复杂等因素 外还有页面频繁刷新，每次响应都是整个页面等。r i a 就是在这种情况下产生的。 r i a ( r i c hi n t e m e ta p p l i c a t i o n s ) 富互联网应用，具有高度互动性、丰富用户体验以 及功能强大的客户端，可以理解为运行于b s 架构上的c s 应用【8 】。应用客户端采 用标准的浏览器，但浏览器内支持c s 应用的操作，所以r i a 应用可以提供强大 的功能，让用户得到高交互性、高响应效率的体验。可以说，r i a 应用代表着目 前w e b 应用的发展趋势。e x t 便是方便快速开发桌面式w e b 富客户端的优秀框架， 它开发了一系列非常简单易用的控件及组件，我们只需要使用这些组件就能实现 各种丰富多彩的u l 的开发。 而富客户端的概念将服务器与客户端的逻辑耦合性降到了最低，e x t j s 开源框 架结合j a v a e e 技术的运用，解决了企业开发中的上述问题，降低了开发成本、缩 短了开发周期、实现软件松耦合，提高了软件的可靠性和扩展性。 目前，越来越多的企业集团呈跨地域的发展趋势，利用网络技术实现远程监 控，对企业降低生产成本，提高劳动生产率，提高企业产品的科技含量，以及增 强企业的综合竞争实力等方面都具有十分重要的意义【6 】。所以，提出一个远程监控 系统的开发框架对于远程系统的开发有很强的实际意义以及实践难度。 本文提出了一种使用开源软件的b s 架构的j a v a e e 和e x t j s 开源框架相结合 的开发设计模式，解决了在传统w e b 开发中所遇到紧耦合、难扩展和难维护等问 题，同时也解决软件开发商对降低软件开发成本、缩短开发周期的要求。 1 3 论文内容和结构 本文按照网络化天线监控系统的架构，介绍了开发网络化天线监控系统所需 软件基本知识，包括富客户端w e b 页面开发技术，本文所采用和详细介绍的是 e x t j s 技术。然后介绍了服务器端不同模块通信所用的s o c k e t 通信技术，研究s s h 框架和e x t j s 结合的方法。接着结合网络化天线系统，论述了系统开发的分析方法。 最后给出了项目开发中的关键代码，展现了监控系统开发技术的流程。 4 基于w e b 的网络化天线监控平台设计 本文结构如下： 第一章，绪论：简介课题背景、课题意义以及本文的主要工作及章节安排。 第二章，客户端技术研究：讨论了富客户端模式的优缺点，阐述了a j a x 技 术和e x t j s 技术，说明了j s o n 数据格式，为系统的客户端开发做好铺垫。 第三章，服务器端技术研究：简单介绍了s o c k e t 通信技术，并介绍了s t r u t s 、 h i b e r n a t e 、s p r i n g 框架及其整合，最后研究了s s h 框架和e x t j s 技术的整合。 第四章，系统分析与设计：首先进行了系统的需求分析，定位了设计目标， 然后设计了系统的总体架构，设计了系统的功能结构。 第五章，网络化天线监控系统的实现：本章详细介绍了系统的实现，包括客 户端系统的实现、w e b 服务器端的实现和代理服务器端的实现。 第二章客户端技术研究 5 第二章客户端技术研究 w e b 是一种典型的分布式应用架构。w e b 应用中的每一次信息交换都要涉及 客户端和服务器端两个层面。因此，w e b 开发技术大体上也可以被分为客户端技 术和服务器端技术两大类【9 1 。我们先从富客户端起，分别研究属于富客户端技术的 a j a x 和e x t j s 技术，并介绍j s o n 数据格式。 2 1 富客户端模式的优点 2 1 1b s 结构与c s 构的比较 c s 结构( c l i e n t s e r v e r ) i p 客户端朋艮务器结构。在c s 结构中，服务器提供必 要的资源，比如文件服务器，而客户端应用服务器提供的资源。c s 结构中客户端 充分使用客户端机器的资源部署应用程序，客户端分布有很强的处理能力，而服 务器端只负责提供客户端所需要的资源，这样使系统总负载更加均衡的分布在各 节点中。c s 结构的管理信息系统目前还在广泛使用，因为其处理数据的速度快， 在客户端本地处理仅需和服务器端进行数据通信，减少了客户端与服务器端的通 信开销，也降低了系统的安全风险。但使用c s 结构的系统对客户端和服务器端 的软硬件环境要求都比较高，针对不同的客户端操作系统需要开发相应的软件， 系统开放性受限制，不适合大规模的局域网中应用。 b s 结构( b r o w s e r s e r v e r ) b p 浏览器和服务器结构。b s 结构是为适应互联网 环境下的w e b 应用环境对c s 结构的一种改进，在b s 结构的应用中，将主要的 数据处理逻辑部署在服务器端，客户端工作界面通过浏览器展现，而数据信息存 储在数据库中，这样就形成了客户端、服务器端和数据库服务器端的三层架构。 客户端的操作是通过浏览器向服务器端发送处理请求，服务器端将处理结果返回 给客户端，客户端不再直接处理数据，这样就大大简化了客户端的开销，降低了 对客户端软硬件环境的需求。b s 结构克服了c s 结构系统不易扩展，开发周期长， 维护升级成本高等缺点，但也带来了系统响应速度降低、个性化特点不明显、用 户体验差等不足l l o j 。 通过对b s 结构和c s 结构比较，很显然b s 结构在以下几方面占有优势： 1 开放性。b s 结构对客户端要求较低，只需安装浏览器即可，所以其开放 性较好，支持跨平台的应用。 2 易于维护和升级。系统的维护和升级主要针对服务器端，降低了维护和升 级的成本。 6 基于w e b 的网络化天线监控平台设计 3 标准化。客户端只要使用标准的浏览器就可以进行操作，简化了用户的操 作难度。 4 安全性。与传统的c s 结构相比，b s 结构的信息系统采用了分层的设计 方法，将客户端和数据库服务器隔离开，在中间层添加w e b 服务器，使 客户端不能直接访问数据库服务器，增加了系统的安全性。另外，由于 b s 结构的信息系统中数据是集中存放的，比c s 结构更容易保持数据一 致性j 。 在此网络化天线监控系统开发中，结合实际应用环境，为了易于系统升级和 扩展，使用了基于浏览器服务器结构的w e b 应用系统，采用m v c 三层结构的设 计思想，将业务处理和数据访问等逻辑放在服务器端处理。 2 1 2 富客户端模式与传统客户端模式 由于传统b s 架构的应用系统具有部署和维护成本低、h t m l 易于学习和使 用等特点，基于h t m l 的应用程序变得十分流行i l 引。由于b s 结构的应用将主要 的逻辑处理程序放在了服务器端，客户端的操作需要大量与服务器进行通信，而 且在通信期间，客户端浏览器只能等待服务器返回数据结果。随着互联网的发展， 各种应用需求不断产生，客户端与服务器端通信量也会不断增加，用户对操作体 验的要求和交互性需求变得越来越重要，这使得传统的“瘦客户端”应用程序很 难满足用户对程序性能及功能的需求。 富客户端的应用程序，英文名为r i c hi n t e m e ta p p l i c a t i o n s ( r i a ) ，它的出现改 变了传统客户端不能满足用户需求的现状。富客户端技术使用了异步交换机制， 使得客户端与服务器端的交互在后台进行，客户端无法察觉，而且不需要用户提 交页面再进行交互，而是在需要交互的时候行处理，不需要对整个页面的提交， 服务器端返回的数据只对页面进行局部刷新，不刷新整个页面。 “r j a ”的概念包含以下两个方面： 1 丰富的数据模型。将页面中能够和浏览器交互并与服务器端进行通信的组 件定义为数据模型，这些组件模型部署在客户端来处理客户端与服务器的 交互，并将服务器端的响应数据正确呈现给用户。充分利用客户端资源， 将部分数据处理功能放在客户端而减轻服务器端的压力，创建更高效且更 具交互性的网络应用。 2 丰富的用户界面。砒a 为用户界面提供丰富的布局和界面控制元素，控制 元素与数据模型相结合，共同对应用程序做出响应。 r i a 是集桌面应用程序的最佳用户界面功能与w e b 应用程序的普遍采用和快 速、低成本部署以及互动多媒体通信的实时快捷之特性于一体的新一代网络应用 第二章客户端技术研究 7 程序【”】。r i a 能够提供内容密集、响应速度快和图形丰富的用户界面。网络化天 线监控系统框架的客户端采用r i a 技术是因为它有如下优势： l 、零部署。客户无须安装任何专用的软件，用浏览器就可以使用r i a 技术； 2 、良好的用户体验。提供桌面应用程序的界面特性：在无刷新页面的情况下 提供快速的用户响应； 3 、r i a 可以继续使用现有的应用程序模型( 如j 2 e e ) ，因而无需大规模替换现 有的w e b 应用程序。通过富客户端技术，可以轻松构建更为直观、易于 使用、反应更迅速并且可以脱机使用的应用程序f 1 4 】。 2 2a j a x 技术 2 2 1 a j a x 的定义 a j a x 即a s y n c h r o n o u sj a v a s c f i p ta n dx m l ( 异步j a v a s c f i p t 和x m l ) ，a j a x 并非缩写词，而是由j e s s ej a m e sg a i i e t t 创造的名词，是指一种创建交互式网页应 用的网页开发技术。a j a x 不是一项新的技术，只是多种技术的综合，或是设计方 式1 1 5 】。 a j a x 构建于动态h t m l d h t m l 技术之上，包括如下常见技术： 1 w e b 标准( s t a n d a r d s b a s e dp r e s e n t a t i o n ) x h t m l + c s s 的表示。c s s 的主要 作用就是让用户页面更加友好，它可以有效地对页面的布局、字体、颜色、 背景等实现更加精确的控制。 2 使用d o m ( d o c u m e n to b j e c tm o d e ) 进行动态显示和交互。d o m 是一个应 用程序编程接e l ，定义了j a v a s c f i p t 程序如何访问和操作当前由浏览器显 示的h t m l 文档d 6 1 。 3 使用x m l o 三x t e n s i b l em a r k u pl a n g u a g e ) 和x s l t ( e x t e n s i b l es t y l e s h e e t l a n g u a g e t r a n s f o r m a t i o n s ) 进行数据交换及相关操作。x m l 可以规范地定 义结构化数据，使网上传输的数据和文档符合统一的标准。用x m l 表述 的数据和文档，可以很容易地让所有程序共享。x s l t 是用来转换x m l 文档结构的语言，它可以把x m l 文档转化为另一文档形式( 如h t m l ) 。 x s l t 是基于x m l 的，它本身符合x m l 本身的语法规范。x m l 和x s l t 二者的主要作用是动态的生成h t m l 文本，将服务器端返回的数据显示 在其中。 4 使用x m l h t t p r e q u e s t 进行异步数据查询、检索。x m l h t t p r e q u e s t 是 x m l h t t p 组件的对象，它允许j a v a s c r i p t 、v b s c r i p t 等脚本语言与远程 服务器建立h 1 口连接并交换数据i l7 。 8 基于w e b 的网络化天线监控平台设计 5 使用j a v a s c r i p t 将所有的东西绑定在一起。客户端j a v a s c r i p t 通过动态修改 d o m 树和c s s 来更新w e b 页面。 a j a x 的主要特点在于，将客户端和服务器端传统的同步交互通信方式改为异 步通信方式，从而丰富了浏览器客户端功能，解决了浏览器频繁刷新页面等待数 据传输的问题，改善了w e b 应用程序的用户体验【1 引。 2 2 2a j a x 工作原理 在传统w e b 应用模式中，用户通过界面动作触发一个连接到w e b 服务器的 h t t p 请求，服务器完成对这些请求的处理后返回一个h t m l 页面到客户端。这 是一种“点击一等待一看到新的页面一再点击一再等待”的割裂的用户体验。a j a x 技术采用异步的方式实现用户与程序的交互，这样大部分工作都是在后台交由服 务器去完成的，用户无须等待服务器的通讯便能继续浏览页面，这种方式大大地 改善了用户体验。图2 1 描述了传统w e b 应用的同步交互过程和a j a x 的异步交 互过程的区别l l w 。 恃奎危鸿：府用黔同步_ 雯互过程 二l 的舞步交麒i 王挫 塞声嫱 用卢疆作 - - - _ 。卜 霭 时润黉 ； 参 、 噩务- _ m a n m 煳 囊 鬯 麓 皇 麓i 车晕：、薷两酾嘲1 1 广7 7 时嘲 登 耋 袈 耋 漆鬻涛鞭 毒擘豢曩 ol 务熏羹曩麓番精叠迥 壹囊 图2 1 传统w e b 应用和a j a x 的交互过程的比较 a j a x 的工作原理是在用户和服务器之间加了一个中间层a j a x 引擎1 20 。通 过j a v a s c r i p t 调用a j a x 引擎来产生一个h t t p 请求，而不再是直接传到服务器。 x m l h 郇r e q u e s t 对象是a j a x 技术的基础。在使用a j a x 技术构建的w e b 应用程序中，当用户触发事件时，程序调用j a v a s c r i p t 事件处理函数进行处理， j a v a s c r i p t 函数通过x m l h t t p r e q u e s t 对象向服务器发送请求信息。在j a v a s c r i p t 事件处理函数中向x m l h t t p r e q u e s t 注册一个回调函数，这样，控制权马上就返回 到浏览器，应用程序继续响应用户的操作。信息发送之后，x m l h t t p r e q u e s t 实时 判断h 1 v r p 请求的状态，从h t t p 请求状态中判断服务器是否完成数据处理并成 功返回信息，当服务器响应到达时，回调函数将会被调用。 在j a v aw e b 服务器上，请求同其他h t t p s e r v l e t r e q u e s t 一样到达。在解析了请 求参数之后，s e r v l e t 调用必要的应用程序逻辑，把响应序列化成x m l ，并吧x m l 第二章客户端技术研冗 9 写入h t t p s e r v l e t r e s p o n s e 。回到客户端时，调用注册在x m l h t t p r e q u e s t 上的回调 函数，处理服务器返回的x m l 文档。最后，根据服务器返回的数据，用j a v a s c r i p t 操纵页面的h t m ld o m ，把用户界面更新。这样，就完成了一个a j a x 异步处理 过程。图2 2 说明了a j a x 的工作过程。 2 3 1e x t j s 简介 图2 2a j a x 工作过程 2 3e x t j s 技术 w e b 应用程序和c s 程序最大的区别之一就是界面层。w e b 应用程序界面层 的开发往往复发、繁琐且代码量大，怎样利用好一些j s 框架来完成界面开发任务 成为提高开发效率的重要突破点。目前已经有很多开发成熟的a j a x 框架，例如 d o j o 、y u i 、j q u e r y 、p r o t o t y p e 、g w t 和e x t j s 等。其中e x t j s 提供了大量高级的 1 0 基于w e b 的网络化天线监控平台设计 用户界面元素，如消息框、组合框、g r i d 和图表等控件；e x t 3 s 具有良好的兼容性 和良好的用户体验、响应速度快；e x t j s 是完全面向对象且可扩展的。e x t j s 的这 些优点使其成为a j a x 框架中的佼佼者。 e x t j s 是一个非常优秀的a j a x 框架，它是基于j a v a s c r i p t ，h t m l 和c s s 开发 而成，与后台技术无关，它可以用来开发具有绚丽外观的客户端应用。e x t j s 所开 发的多彩界面是它最具优势的特点，因为对于没有多少美术功底的程序员来说， 它天生拥有的绚丽外表是非常有吸引力的。同时，有很多用其它技术无法实现或 者是很难实现的功能，却能用e x t j s 轻易实现，比如e x t j s 中的表格、树型、布局 等控件能为我们的日常开发工作节约大量的时间和精力。 【囵 + 匿n ，。 卧 h j 堋霄一f 文 n 一“可： 国 l = ：l r m h m x 滴一， 圈 图2 3 采用e x t j s 的w e b 应用开发模式 图2 3 展示了采用了e x t j s 后w e b 应用开发的情况。空白的w e b 页面依然是 我们的开发对象，与传统的w e b 应用开发方式不同的是，因为引入了e x t j s 库， 有了一套完整的u i 组件可以使用。所以可以在空白的w e b 页面上组合放置各种 e x t j s 的u i 组件，与开发桌面软件放置w i n d o w $ u i 组件一样。 运行时，e x t j s 组件库会自动生成形成界面的h t m l 、j a v a s c r i p t 、c s s 和图片 等元素，并最终在浏览器上渲染出e x t j s 的w e bu i 。在这个过程中最重要的是开 发者不再需要直接面向h t m l 、j a v a s c r i p t 、c s s 和图片等基础元素，也无须去管 理这些元素烦琐的放置组合，这一切都由e ) 【t j s 的库来代劳；开发者要面对的是 u i 组件，只要按照组件的开发规则进行开发即可。操作组件相对于操作h t m l 等 元素来说粒度更大：粒度越大，就会获得更多的简易性，但是会失去灵活性。比 如说由于某种特殊需要，需要制作一个特别的u i 组件，那么就必须重新开发一个 e x t j s 组件或者基于现有组件进行扩展，而这个工作显然会比直接修改h t m l 更加 复杂。 妙 第二章客户端技术研究 1 1 由于e x t j s 框架文件太大，为了提高e x t j s 的执行效率，可以简化e x t j s 框架 中所引用的库，把一些不需要的库去掉。当然使用服务器缓存也可以减小用户对 代码的下载量。 e x t j s 面板从使用方式上来说更接近于j a v a s w i n g 中的面板，为其指定不同的 布局或者进行面板嵌套，就可以达到复杂布局的目的，因此布局方式是否丰富， 能否进行嵌套，是衡量e x t j s 布局灵活性的重要指标。e x t j s 面板支持1 1 种不同风 格的布局样式，并且允许无限制的进行嵌套，这就给我们创造了一个尽情发挥的 舞台。 e x t j s 将组件与数据解耦，设计用户界面时，不必考虑各种各样的数据形式， 可以通过统一的数据接口来操作数据。这也是e x t j s 与后台技术无关的原因所在， 可以将其用在j a v a 、n e t 、p h p 等各种开发语言开发的应用中。 2 3 2e x t j s4 0 的改进 事实证明e x t j s 的开发方式正在成为开发r i a 应用事实上的标准。2 0 11 年4 月2 6 日，e x t j s4 0 正式发布，大量的新特性成为大家关注的焦剧2 1 】。 1 动态加载和新的类系统 j a v a s c r i p t 没有真正的面向对象的类系统，因而对主流的熟悉面向对象语言的 开发者来说存在着技术障碍。e x t j s 通过提供自己的类系统，从而让开发者可以编 写一个更传统的面向对象的代码。e x t j s4 0 对旧的类系统进行了全面的更新提供 了一个全新的类系统，从而让开发更简单、更灵活。e x t j s4 0 推出4 个新特性： 类定义、m i x i n s 、输入和输出配置及依赖加载，如图2 4 所示。 令 囤曰 曰 图2 4e x t j s4 0 新的类系统 1 2 基于w e b 的网络化天线监控平台设计 类定义。e x t j s4 0 引入了e x t d e f i n e 方法，可以通过类的字符串名定义和 继承类，这就避免了由于类不存在报出的错误。类管理器会自动检查类之 间的依赖关系，因此，我们不再需要维持一个严格的加载顺序。 m i x i n s 。许多动态语言都支持m i x i n s 的特性，比如r u b y 、p y t h o n 。而 j a v a s c r i p t 在语言层面没有m i x i n s 支持，e x t j s4 0 自己实现了m i x i n s 的功 能，m i x i n s 类似于多继承，是一种细粒度的代码复用单元，它定义了一套 可重用的行为和配置，如果一个类需要某个特性，只需要将特性类混入目 标类中。 输入和输出配置。即为配置项动态生成g e r e r 和s e t t e r 方法，并且这些方 法也允许我们进行覆盖，这大大减少了代码量。 依赖加载。在4 0 之前的版本中，都要在使用之前加载整个框架，4 0 中提 供了e x t r e q u i r e 函数，通过它可以动态加载任何类，并且它会加载依赖类， 通过动态加载可以有效地减少客户端加载的库文件体积。 2 图形和图表 图表，浏览器客户端绘图一直没有统一的标准，许多时候我们使用a d o b e f l a s h ，但是f l a s h 开发使用的并不是页面开发人员熟悉的j a v a s c r i p t ，并 且需要安装专用插件，这限制了f l a s h 的使用范围。e x t j s4 0 中提供了纯 j a v a s c r i p t 实现的e x t d r a w 绘图包，它可以适应不同的绘图引擎自动选择 v m l 和s v g 实现，并且提供了统一的绘图a p i 。 以绘图a p i 为基础，e x u s4 0 还提供了丰富的图表组件，包括：柱状图、 折线图、面积图、雷达图等，并将图表与数据模型无缝地整合在一起，图 表可以直接从s t o r e 中获取数据。图表功能是e x t j s4 0 中的一大亮点，是 每一个开发人员都不容错过的精彩内容。 3 数据包 m o d e l 与s t o r e ，e x o s4 0 对数据包进行了全面地重构，并加强扩展到了 4 3 个类，e x t d a t a m o d e l 取代e x t d a t a r e c o r d 成为数据包的核心，在m o d e l 中可以直接定义p r o x i e s ，不需要通过s t o r e 就可以直接在模型中加载和保 存数据。同时s t o r e 的功能也得到了加强，它不但支持本地排序、筛选和 分组，也支持远程排序、筛选和分组，标准的s t o r e 中就可以实现多列排 序、筛选和分组功能。 模型关联，e x t j s4 0 提供了关联a p i ，现在可以通过关联a p i 将模型关联 起来。大多数应用程序会处理许多不同的模型，而且模型之间是相关的。 每一个模型不但可以拥有许多关联模型，而且与它们的定义顺序无关。一 旦我们有一个模型实例，我们就可以很容易地遍历相关数据。 4 动态加载和新的类系统 第二章客户端技术研究 1 3 核心改进：检视框架的架构和重塑其基础。这些变化不单提供了产品性能， 还提高了其健壮性。 测试框架：在所有支持的浏览器上对框架进行了持续全面的测试。 类系统：作为e x o s4 0 架构更新的一部分，引用了一个功能更完整的类系 统。 沙盒：在e x t j s 历史上，e x t j s4 0 首次提供了完整的沙盒模式。从e x t j s 4 0 开始，框架不再扩展数组或函数等原生对象，因此，与其它的框架同时加 载到页面时，再也不会产生冲突。 应用架构：在e x t j s4 0 ，引入了一个标准化的几乎适合任何e x t j s 应用程 序的m v c 风格的应用架构。使用m v c ，开发团队只需要学习一种架构 就能理解任何e x t j s4 0 的应用。 s d k 工具：正在测试b e t a 版的s e n c h as d k 工具，在第一版本中包括了优 化工具、生成器和s l i c e r 工具。这些工具可让你优化j a v a s c r i p t 程序，以确 保主题能在i e 6 正常工作。 全新的图表库：e x t j s4 0 中，全新的、插件自由的图表库是最激动人心的 新功能之一，创建了饼图、线图、面积图、雷达图等等，所有这些都是动 画的、易于配置的和可扩展的。 更智能的渲染和布局：引入了新的渲染和布局管道，只有在需要的时候才 更新d o m ，从而让应用更快。改进了布局本身，删除了f o r m l a y o u t ，意 味着你能使用任何布局组合创建最完美的表单。 增压的数据包：e x t j s 一个基础性的作品就是数据包。不管你将数据加载 到g r i d 、t r e e 或其它组件，改进的数据包，都比以往更容易。新架构还支 持h t m l 的i o c a l s t o r a g e ，数据流可轻松在你的应用中进出。 2 3 3e x t j s 的组件 组件特别是u l 组件对e x t j s 的重要性不言而喻，可以这样说，学习e x t j s 就 是学习组件的使用。e x o s4 0 对框架进行了重构，其中最重要的就是形成了一个 结构及层次分明的组件体系，由这些组件形成了e x t 的控件【2 引。e x t 组件由 c o m p o n e n t 类定义，每种组件都有指定的x t y p e 属性值，通过该值可以得到一个组 件的类型或者是定义一个指定类型的组件。e x t j s4 0 的组件体系中有近1 0 0 种组 件，而这些组件又可以大致分成四大类，容器类组件、工具栏及菜单栏组件、表 单及元素组件、其他组件。整个e x t j s4 0 的组件体系如图2 5 所示。 基于w e b 的网络化天线监控平台设计 p 科 白_ _ - i _ - ： 翱- l q j i i 一t 一。 ：糍一! 舅! 睁 v 幅i 西j 舐五t塑爨绍皇黧寰7 一7 ：l m i r , _ 一。- f - 一? 黑舞穗恐塑啤哆 豫伊牌紫”峥啊髀煦 j 叠= 箱：= 气 东丽茹萄矗i i 西丽i 弱蕊；罱i 浯磊蒜嚣南再 ，。茬；萄蒜苗一瓦盏甾一： 。 一 l 瓣_ i ： l | i - - 籼一3 ：鲰? m 一呻。 t 攀芝鲤爰i 銎 1 | h 一，- -i 掣- 如他一镬釜! 鲤味鲢! i ! 照 脚p m “ 、。? ，嘎瑚_ m “_ 耐 。心酾亭蕊i“。抽_ “二= 蠢茹蔷j c 鼍- h ：函_ 雌，i 赫蕊茹w j 。 _ 狮砷协“_ 埽、嚣；葫霹j j - _ _ 螂i- ，- _ j i 髀爰韬函蛾 。 琳o 酬t “，觋型蛹苎； ，l _ - 懈榭柏_ 露痈棚瓶二 j - _ ，- - t ： 飞磊；蕊 ! 鼍删矧，墨墨篡；。，塞兰嚣耸，i 知- - u 、一u 畔，l 譬- v - 、- - h - ，| _ “_ h m 姆擎眇蔷嚣戮蓄霸溢 # h - 捌叫：惜 扣轴 堑翌蛐慧! 二竖t - - 鞋t * “：煳岫 ”觯h t w 曼! 芝璺竺三竺! ! ：! ! t i ，i _ n ；i ；i t - - 日- 抖p 氅一 一一 一“o o - 。j 葛茹；茹蔷；：_ ：婶姆_ i 蝌挣睁町 。照黧塑些j 醢- 辅 、一楚鲢! 堂翌嚣j 一一 ：u - i i j 、i 茹：赭j 转恕螬噬! ! 鲤嗡 “= o ，i 甓乏 遣誊誊篱擎z f _ - i 、 l _ 呻c 删- 喇_ 踟艟：岫- ”絮眵峨幽 嗡、n 矗。_ t 一_ 函茹莓i t 戡 竺! 竺1 2 。一罡i i 誓v 一、 酗”一：鬯 珏嚣磊 图2 5e x f l s4 0 的组件体系 容器组件是构成w e bu i 的主体组件，因为这些组件在其他开发体系中也都有 部分存在。这些组件丰富了传统w e bu i 的表现，是e x t j s 改善w e bu i 的重要体 现。 工具栏及菜单栏组件经常配合使用，在w i n d o w s 桌面软件中，它们随处可见， 以其方便性与集成性为用户所称道。e x t j s 的工具栏及菜单栏组件能够在w e b 上 构造表现和功能与桌面软件上完全一样的效果的w e b 页面。 在传统w e bu i 中，表单是最重要的界面元素了。e x t j s 的表单组件对普通 h t m l 的表单进行了封装，不仅提供了更靓丽的外观表现，同时也扩充了功能。 使用e x t j s 实现w e b 应用时，表单组件也是使用最为频繁的组件。 除了上边列出的主要组件外e x t j s 还有大量的其他组件，这其中包括图表组 件、视图组件、编辑组件、按钮组件等。 g r i d 、t r e e p a n e l 和l a y o u t 是e x t 最重要以及特有的组件。下面简约介绍这三 个常用的e x t 特有的组件： g r i d 。是e x t 中使用最频繁的，也是最流行的一个组件。它是一个表格， 表格的数据源可以是多种形式的，可以是内存中的数据，也可以通过访问后台数 据库获得。只需要做一些简单的配置即可。g r i d 己经封装好了一些排序，只需在 界面上进行选择。g r i d 对分页也是很容易实现，也只需几个参数的配置即可。 第二章客户端技术研究 1 5 t r e e p a n e l 。一般的管理系统的导航都会由一个t r e e 来担当，t r e e p a n e l 的 功能就是提供了一个模版，只要把你需要的一级导