浪潮通信公司页面展现框架的设计与实现
|
摘要
浪潮通信信息系统有限公司是一家专门为信息与通信网络业务提供运营管理和支撑服务的公司。该公司的主要产品是性能管理平台,用于管理通信网络中的对象,并根据这些对象的属性,监控通信网络的运行情况,对网络异常及时提出告警。该平台目前已经在印度尼西亚、巴基斯坦、沙特阿拉伯等国家上线运行,并且还在继续向其他国家推广。在推广的过程中,平台都需要根据新客户的要求进行修改。因为通信网络涉及的业务已经比较成熟,所以客户提出的修改意见,往往都是针对页面的。这些针对页面的修改意见主要有两类：一类是要求修改页面静态文本,包括修改语言、语法、文本格式等；另一类是要求增强系统访问的友好度,为客户提供更好的交互性。
性能管理平台是B／S架构的系统,其前台Web界面是使用HTML和JavaScript开发的JSP页面。该平台在修改和扩展过程中,经常遇到两个问题：1.静态文本是直接写在JSP页面上的,分散在整个系统的每一个页面上,修改时容易遗漏,而且每次都要修改页面源代码,哪怕修改一个单词也要重新发布一次系统；2.HTML功能简单,要想增加复杂的功能,需要在系统中添加大量的JavaScript代码,代码的正确性和稳定性不能得到保证,而且代码的风格也不统一,以后的维护会变得比较困难。再者HTML语法也不严格,容易引起页面HTML代码层次的混乱。本课题的最终目的,就是开发一个页面展现框架,解决性能管理平台维护和扩展过程中出现的这两个问题。
本文首先提出解决上述两个问题的基本思路。对于第一个问题,可以借鉴其他框架和开发平台实现软件国际化和本地化的技术,将静态文本从JSP页面中分离出来,存储到配置文件里。这样做有三个好处,一是让静态文本集中,二是可以重用静态文本,三是修改页面的静态文本时页面源代码可以不发生变化。要解决第二个问题,可以使用比较成熟的JavaScript库来开发页面。JavaScript库能以较少的代码实现很多复杂功能,并且它们都不需要对HTML底层对象进行操作。
因此,页面展现框架需要在页面开发人员和JSP页面之间添加一个额外的层次,开发人员在这个层次上编写页面内容,然后框架提供解析程序将该层次的内容转换为JavaScript库实现的JSP页面。采用这样的开发结构,可以在新增加的层次上放置静态文本的对应“占位符”,在新层次向JSP页面转换过程中将“占位符”替换为真正的静态文本。如果新增加的层次使用语法严格的语言编写,也可以避免出现HTML标签嵌套混乱的情况。经过分析,页面展现框架以XML作为新增加层次的开发语言,选用功能强大的ExtJS实现页面。
接下来,本文在分析性能管理平台页面的基础上,对静态文本的配置文件及其读取程序、对扩展和封装ExtJS的方案以及对XML的解析程序分别进行了详细设计。然后根据这些详细设计,通过为ExtJS扩展多选列表组件和居中布局方式,并对ExtJS进行封装,实现了页面展现框架,并将此框架应用到了最新版本的性能管理平台开发中。
使用页面展现框架后,无论是页面开发还是页面维护,所需要的时间和人力都不同程度的降低,开发和维护的周期缩短,人力投入减少,节约的人力和时间可以用于开发其他项目。因为时间和经验的约束,该框架还存在一些问题,但是经过两个项目的试用,该框架不断被完善。在框架稳定之后,Web系统开发和维护会变得更加简单。
Inspur Communication Information System Co.,Ltd. specialises in providing operations management and supporting services for the communication network business. This company's main product is Performance Management System for managing the objects in communications network, monitoring the operation of the network, and giving an alarm when the network is abnormal. Now, the system is running in Indonesia, Pakistan and other countries, and continues to other countries. In the promotion process, the system need to modify accroding to the new customers' requirements. Because the business of the communication network is relatively mature, the amendments often are targeted to the pages. These amendments can be classified to two types:one is to amend the static text on the pages; the other one is to improve the friendliness of the system.
The Performance Management System is a Browser/Service structure system, and its user interface is java server pages(JSP) which are developed in HTML and JavaScript. This system encounters two problems in the process of revision and expansion:1. Static text is written directly in the JSP, and dispersed throughout the system, so it is easy to miss some text when changing the static text. And it must change the source code, and must republish the system after changing one word.2. The functions provided by HTML are very simple, so it need a lot of JavaScript code for implementing complex functions. It will become more difficult to maintain the system. Furthermore HTML syntax is not strict, and it may cause confusion. The ultimate goal of this paper is to develop a Page Presentation Framwork to resolve these two problems.
At first, this paper proposes the basic ideas to resolve these two problems. For the first problem, we can learn the technology of software internationalization and localization from other frameworks and development platforms. We can separate the static text from the JSP and store it in the configuration files. This approach has three advantages, static text can be put together and can be reused, and the source code need not be changed when changing static text. To solve the second problem, we can use more mature JavaScript libraries to implement pages. JavaScript libraries can use less code to implement more complex functions, and the programmers need not to operate the HTML underlying objects.
Therefore, the page presentation framework needs to add an extra level between the page developers and JSP. The developers write page contents at this level, then a program provided by the framework converts the contents on this level to JavaScript libraries-implemented JSP. Using this structure, developers can put "placeholder" in the new level, and when the program converts the new level to JSP, the placeholder can be replaced with the real static text. If the language syntax used in the new level is very strict, we can avoid the confusion caused by nested HTML tags. After analysising, the page presentation framework uses XML to develop the new level and chooses ExtJS to implement JSP.
After analyzing the pages of the performance management system, this paper designs the static text configuration files and the resolver, the solutions of expanding and packaging ExtJS, and the program converting XML to JSP. Then this paper implements the page presentation framework through adding multi-select list component and center layout and packaging ExtJS. Finally, this framework is applied to the development of the latest version of the performance management system.
The time and human required in page developing and mantenance reduced after using this framework, so much time and more human can be used to develop other projects. Because of the constraints of time and experience, the framework has some problems. We will improve it continuously throughout using it int developing projects.When the framework become stable, Web system's development and maintenance will be easier.
性能管理平台是B／S架构的系统,其前台Web界面是使用HTML和JavaScript开发的JSP页面。该平台在修改和扩展过程中,经常遇到两个问题：1.静态文本是直接写在JSP页面上的,分散在整个系统的每一个页面上,修改时容易遗漏,而且每次都要修改页面源代码,哪怕修改一个单词也要重新发布一次系统；2.HTML功能简单,要想增加复杂的功能,需要在系统中添加大量的JavaScript代码,代码的正确性和稳定性不能得到保证,而且代码的风格也不统一,以后的维护会变得比较困难。再者HTML语法也不严格,容易引起页面HTML代码层次的混乱。本课题的最终目的,就是开发一个页面展现框架,解决性能管理平台维护和扩展过程中出现的这两个问题。
本文首先提出解决上述两个问题的基本思路。对于第一个问题,可以借鉴其他框架和开发平台实现软件国际化和本地化的技术,将静态文本从JSP页面中分离出来,存储到配置文件里。这样做有三个好处,一是让静态文本集中,二是可以重用静态文本,三是修改页面的静态文本时页面源代码可以不发生变化。要解决第二个问题,可以使用比较成熟的JavaScript库来开发页面。JavaScript库能以较少的代码实现很多复杂功能,并且它们都不需要对HTML底层对象进行操作。
因此,页面展现框架需要在页面开发人员和JSP页面之间添加一个额外的层次,开发人员在这个层次上编写页面内容,然后框架提供解析程序将该层次的内容转换为JavaScript库实现的JSP页面。采用这样的开发结构,可以在新增加的层次上放置静态文本的对应“占位符”,在新层次向JSP页面转换过程中将“占位符”替换为真正的静态文本。如果新增加的层次使用语法严格的语言编写,也可以避免出现HTML标签嵌套混乱的情况。经过分析,页面展现框架以XML作为新增加层次的开发语言,选用功能强大的ExtJS实现页面。
接下来,本文在分析性能管理平台页面的基础上,对静态文本的配置文件及其读取程序、对扩展和封装ExtJS的方案以及对XML的解析程序分别进行了详细设计。然后根据这些详细设计,通过为ExtJS扩展多选列表组件和居中布局方式,并对ExtJS进行封装,实现了页面展现框架,并将此框架应用到了最新版本的性能管理平台开发中。
使用页面展现框架后,无论是页面开发还是页面维护,所需要的时间和人力都不同程度的降低,开发和维护的周期缩短,人力投入减少,节约的人力和时间可以用于开发其他项目。因为时间和经验的约束,该框架还存在一些问题,但是经过两个项目的试用,该框架不断被完善。在框架稳定之后,Web系统开发和维护会变得更加简单。
Inspur Communication Information System Co.,Ltd. specialises in providing operations management and supporting services for the communication network business. This company's main product is Performance Management System for managing the objects in communications network, monitoring the operation of the network, and giving an alarm when the network is abnormal. Now, the system is running in Indonesia, Pakistan and other countries, and continues to other countries. In the promotion process, the system need to modify accroding to the new customers' requirements. Because the business of the communication network is relatively mature, the amendments often are targeted to the pages. These amendments can be classified to two types:one is to amend the static text on the pages; the other one is to improve the friendliness of the system.
The Performance Management System is a Browser/Service structure system, and its user interface is java server pages(JSP) which are developed in HTML and JavaScript. This system encounters two problems in the process of revision and expansion:1. Static text is written directly in the JSP, and dispersed throughout the system, so it is easy to miss some text when changing the static text. And it must change the source code, and must republish the system after changing one word.2. The functions provided by HTML are very simple, so it need a lot of JavaScript code for implementing complex functions. It will become more difficult to maintain the system. Furthermore HTML syntax is not strict, and it may cause confusion. The ultimate goal of this paper is to develop a Page Presentation Framwork to resolve these two problems.
At first, this paper proposes the basic ideas to resolve these two problems. For the first problem, we can learn the technology of software internationalization and localization from other frameworks and development platforms. We can separate the static text from the JSP and store it in the configuration files. This approach has three advantages, static text can be put together and can be reused, and the source code need not be changed when changing static text. To solve the second problem, we can use more mature JavaScript libraries to implement pages. JavaScript libraries can use less code to implement more complex functions, and the programmers need not to operate the HTML underlying objects.
Therefore, the page presentation framework needs to add an extra level between the page developers and JSP. The developers write page contents at this level, then a program provided by the framework converts the contents on this level to JavaScript libraries-implemented JSP. Using this structure, developers can put "placeholder" in the new level, and when the program converts the new level to JSP, the placeholder can be replaced with the real static text. If the language syntax used in the new level is very strict, we can avoid the confusion caused by nested HTML tags. After analysising, the page presentation framework uses XML to develop the new level and chooses ExtJS to implement JSP.
After analyzing the pages of the performance management system, this paper designs the static text configuration files and the resolver, the solutions of expanding and packaging ExtJS, and the program converting XML to JSP. Then this paper implements the page presentation framework through adding multi-select list component and center layout and packaging ExtJS. Finally, this framework is applied to the development of the latest version of the performance management system.
The time and human required in page developing and mantenance reduced after using this framework, so much time and more human can be used to develop other projects. Because of the constraints of time and experience, the framework has some problems. We will improve it continuously throughout using it int developing projects.When the framework become stable, Web system's development and maintenance will be easier.
引文
[1](英)Paul Haine.静态HTML:语义、标准和样式[M].北京：人民邮电出版社,2008.15-18.
[2]童春杰.全球化软件开发最佳实践[M].北京：电子工业出版社,2008.20-21
[3](美)Patrick Lightbody, Jason Carreira. Web Work in Action[M].谭颖华,张云飞,唐勇译.北京：电子工业出版社,2006.
[4]Kent Tegels, Tony Baer..NET Framework编程思想[M].北京：清华大学出版社,2002.59-61.
[5]Juval Lowy..NET组件程序设计[M].北京：电子工业出版社,2007.
[6]曾登高..NET系统架构与开发[M].北京：电子工业出版社,2003.
[7]刘斌.精通Java Web整合开发JSP+AJAX+Struts+Hibernate[M].北京：电子工业出版社,2007.
[8]王安保,蒋文蓉,朱彬.Struts框架Web应用的国际化[J].计算机技术与发展,2007,17(4)：189-191.
[9]许晖,李涓子.J2EE系统国际化问题的解决方案[J].计算机工程,2005,31(15)：79-80.86.
[10]马林,黄文培.Struts应用程序中文显示方案及其国际化技术[J].计算机技术与发展,2007,17(2)：31-34.
[11]张南平,朱富利.基于MVC模式的Struts框架的研究与应用[J].计算机技术与发展,2006,16(3)：229-234.
[12](法)Christophe Porteneuve. Prototype与script.aculo.us终极揭秘[M].陆开一译.北京：电子工业出版社,2008.23-25.
[13]张银鹤.JSP完全学习手册.北京：清华大学出版社,2008.
[14](美)James E, Harmon. Dojo构建Ajax应用程序[M].张龙译.北京：机械工业出版社,2009.12-13.
[15](美)Rawld Gill.精通Dojo[M]. DOJOChina译.北京：人民邮电出版社,2009.
[16](美)Jonathan Chaffer, Karl Swedberg. jQuery基础教程[M].李松峰,卢玉平 译.北京：人民邮电出版社,2009.
[17](美)Bear Bibeault, Yehuda Katz. jQuery实战[M].陈宁译.北京：人民邮电出版社,2009.
[18]卫军,夏慧军,孟腊春.ExtJS Web应用程序开发指南[M].北京：机械工业出版社,2009.
[19]彭仁夔.ExtJS源码分析与开发实例宝典[M].北京：电子工业出版社,2010.
[20]张鑫,黄灯桥,杨彦强.JavaScript凌厉开发——Ext详解与实践[M].北京：清华大学出版社,2009.
[21]Flanagan David. JavaScript权威指南[M].李强译.北京：中国电力出版社,2001.
[22]周爱民.JAVASCRIPT语言精髓与编程实践.北京：电子工业出版社,2008.
[23](美)Shelley Power. JavaScript核心技术[M].北京：机械工业出版社,2007.
[24]Nicholas C.Zakas. JavaScript高级程序设计[M].曹力等译.北京：人民邮电出版社,2006.
[25](美)Douglas Crockford. JavaScript语言精粹[M].赵泽欣,鄢学鹍 译.北京：电子工业出版社,2009.
[26](美)阿斯利森,舒塔.Ajax基础教程[M].金灵等译.北京：人民邮电出版社,2006.
[27]涂传滨,杨先亭.征服RIA——基于JavaScript的Web客户端开发[M].北京：电子工业出版社,2009.
[28]叶青.完全手册HTML+CSS+JavaScript实用详解[M].北京：电子工业出版社,2008.
[29]卜维丰.AJAX技术应知应会90题[M].北京：电子工业出版社,2008.
[30](加)David Johnson, Alexei White, Andre Charland. Ajax企业级开发[M].张祖良,荣浩,高冰 译.北京：人民邮电出版社,2008.
[31]沈时宇.Google成功背后的技术——Ajax网页程序设计[M].北京：电子工业出版社,2008.
[32](美)Shelley Powers. Adding Ajax[M].李秀忠译.北京：电子工业出版社, 2008.
[33]孙更新,裴红义,杨金龙.XML完全开发指南[M].北京：科学出版社,2008.
[34]阮彤,高小伍,宋韬.Web内容管理系统中的可复用展示模型[J].计算机工程,2009,35(22)：19-22.
[35]Don Box, Aaron Skonnard, John Lam. XML本质论[M].卓栋涛译.北京：中国电力出版社,2003.
[36]耿刚,陈平.一种基于XML的WEB应用框架的设计[J].西安：计算机工程与应用,2004,40卷(16)：124-128,226.
[37]XML Schema. http://www.w3.org/XML/Schema
[38]XSL Transformations(XSLT) Version 1.0. http://www.w3.org/TR/xslt
[39](美)Heather Williamson. XML技术大全.北京：机械工业出版社,2002.
[40]叶青.HTML+CSS+JavaScript实用详解[M].北京：电子工业出版社,2008.
[41]王津涛.HTML, CSS, JavaScript整合详解[M].北京：机械工业出版社,2009.
[42]赵辉.HTML+CSS网页设计指南[M].北京：清华大学出版社,2010.
[43](美)Hans Bergsten. JSP设计[M].林琪,朱涛江译,北京：中国电力出版社,2004.
[2]童春杰.全球化软件开发最佳实践[M].北京：电子工业出版社,2008.20-21
[3](美)Patrick Lightbody, Jason Carreira. Web Work in Action[M].谭颖华,张云飞,唐勇译.北京：电子工业出版社,2006.
[4]Kent Tegels, Tony Baer..NET Framework编程思想[M].北京：清华大学出版社,2002.59-61.
[5]Juval Lowy..NET组件程序设计[M].北京：电子工业出版社,2007.
[6]曾登高..NET系统架构与开发[M].北京：电子工业出版社,2003.
[7]刘斌.精通Java Web整合开发JSP+AJAX+Struts+Hibernate[M].北京：电子工业出版社,2007.
[8]王安保,蒋文蓉,朱彬.Struts框架Web应用的国际化[J].计算机技术与发展,2007,17(4)：189-191.
[9]许晖,李涓子.J2EE系统国际化问题的解决方案[J].计算机工程,2005,31(15)：79-80.86.
[10]马林,黄文培.Struts应用程序中文显示方案及其国际化技术[J].计算机技术与发展,2007,17(2)：31-34.
[11]张南平,朱富利.基于MVC模式的Struts框架的研究与应用[J].计算机技术与发展,2006,16(3)：229-234.
[12](法)Christophe Porteneuve. Prototype与script.aculo.us终极揭秘[M].陆开一译.北京：电子工业出版社,2008.23-25.
[13]张银鹤.JSP完全学习手册.北京：清华大学出版社,2008.
[14](美)James E, Harmon. Dojo构建Ajax应用程序[M].张龙译.北京：机械工业出版社,2009.12-13.
[15](美)Rawld Gill.精通Dojo[M]. DOJOChina译.北京：人民邮电出版社,2009.
[16](美)Jonathan Chaffer, Karl Swedberg. jQuery基础教程[M].李松峰,卢玉平 译.北京：人民邮电出版社,2009.
[17](美)Bear Bibeault, Yehuda Katz. jQuery实战[M].陈宁译.北京：人民邮电出版社,2009.
[18]卫军,夏慧军,孟腊春.ExtJS Web应用程序开发指南[M].北京：机械工业出版社,2009.
[19]彭仁夔.ExtJS源码分析与开发实例宝典[M].北京：电子工业出版社,2010.
[20]张鑫,黄灯桥,杨彦强.JavaScript凌厉开发——Ext详解与实践[M].北京：清华大学出版社,2009.
[21]Flanagan David. JavaScript权威指南[M].李强译.北京：中国电力出版社,2001.
[22]周爱民.JAVASCRIPT语言精髓与编程实践.北京：电子工业出版社,2008.
[23](美)Shelley Power. JavaScript核心技术[M].北京：机械工业出版社,2007.
[24]Nicholas C.Zakas. JavaScript高级程序设计[M].曹力等译.北京：人民邮电出版社,2006.
[25](美)Douglas Crockford. JavaScript语言精粹[M].赵泽欣,鄢学鹍 译.北京：电子工业出版社,2009.
[26](美)阿斯利森,舒塔.Ajax基础教程[M].金灵等译.北京：人民邮电出版社,2006.
[27]涂传滨,杨先亭.征服RIA——基于JavaScript的Web客户端开发[M].北京：电子工业出版社,2009.
[28]叶青.完全手册HTML+CSS+JavaScript实用详解[M].北京：电子工业出版社,2008.
[29]卜维丰.AJAX技术应知应会90题[M].北京：电子工业出版社,2008.
[30](加)David Johnson, Alexei White, Andre Charland. Ajax企业级开发[M].张祖良,荣浩,高冰 译.北京：人民邮电出版社,2008.
[31]沈时宇.Google成功背后的技术——Ajax网页程序设计[M].北京：电子工业出版社,2008.
[32](美)Shelley Powers. Adding Ajax[M].李秀忠译.北京：电子工业出版社, 2008.
[33]孙更新,裴红义,杨金龙.XML完全开发指南[M].北京：科学出版社,2008.
[34]阮彤,高小伍,宋韬.Web内容管理系统中的可复用展示模型[J].计算机工程,2009,35(22)：19-22.
[35]Don Box, Aaron Skonnard, John Lam. XML本质论[M].卓栋涛译.北京：中国电力出版社,2003.
[36]耿刚,陈平.一种基于XML的WEB应用框架的设计[J].西安：计算机工程与应用,2004,40卷(16)：124-128,226.
[37]XML Schema. http://www.w3.org/XML/Schema
[38]XSL Transformations(XSLT) Version 1.0. http://www.w3.org/TR/xslt
[39](美)Heather Williamson. XML技术大全.北京：机械工业出版社,2002.
[40]叶青.HTML+CSS+JavaScript实用详解[M].北京：电子工业出版社,2008.
[41]王津涛.HTML, CSS, JavaScript整合详解[M].北京：机械工业出版社,2009.
[42]赵辉.HTML+CSS网页设计指南[M].北京：清华大学出版社,2010.
[43](美)Hans Bergsten. JSP设计[M].林琪,朱涛江译,北京：中国电力出版社,2004.