基于ExtJS开发的海洋科学数据共享服务平台

宋转玲, 刘海行, 代 亮, 张 平, 韩 彬 贾 贞 周 林

(1．国家海洋局 第一海洋研究所, 山东 青岛266061; 2. 海洋环境科学和数值模拟国家海洋局重点实验室, 山东 青岛266061; 3. 中国科学院 海洋研究所, 山东 青岛266071)

基于ExtJS开发的海洋科学数据共享服务平台

宋转玲1,2, 刘海行1,2, 代 亮3, 张 平3, 韩 彬1, 贾 贞1, 周 林1

(1．国家海洋局 第一海洋研究所, 山东 青岛266061; 2. 海洋环境科学和数值模拟国家海洋局重点实验室, 山东 青岛266061; 3. 中国科学院 海洋研究所, 山东 青岛266071)

为了改善系统界面友好性、增强系统功能性并提高开发效率, 运用ExtJS框架实现了基于B/S架构的青岛海洋科学数据共享平台专项数据库系统的前台界面。系统界面美观, 操作方便, 开发效率高,维护规范。

专项数据库; ExtJS; RIA

B/S系统因为部署简单、客户端零维护、可重用性、易维护、交互性强等诸多优势, 在当前应用程序开发中适用性较强。但 B/S客户端采用的标准浏览器的功能特点限制, 使其易用性、用户界面友好性不如C/S系统。

享用网络便利服务已久的用户对应用程序的需求已经不只局限于满足业务需要, 还希望它具有丰富的用户界面, 能够提供即时响应, 最大限度地提高工作效率; 另外尽管B/S不如C/S的用户界面强大,但开发者认为单纯为改进用户体验, 而安装、配置和管理客户机代码的成本太高, 因此更倾向于纯粹的基于服务器的交付模型。现有的Web开发技术能够提供比浏览器更好的用户体验, 同时不必在客户机上手工安装代码, 这些满足双方需求的技术构建的应用程序被称为 Web 2.0 应用程序[1]。

Web 2.0 应用程序提供了2种环境的优点：低成本高效率的基于服务器的部署模型和几乎可以与C/S应用程序媲美的用户体验。为Java EE 应用程序提供丰富的用户体验, 有5种技术可供选择：(1) Flex和 OpenLaszlo; (2)IBM® Workplace™ Managed Client 和 IBM Lotus® Expeditor; (3)Faces Client Components ; (4)Ajax; (5)HTML[2]。

Ajax是Jesse James Garrett于2005年提出的新概念, 经过将近 3年的发展, Ajax技术已经比较成熟。成功发布的Google Maps促使开发者使用Ajax技术改进自己应用程序的易用性和响应性。Ajax发展至今, 各种框架层出不穷, 但 ExtJS最受欢迎。ExtJS是一组扩展自Yahoo!UI, 具有C/S风格的Web用户界面组件。主要UI包括dialog, grid, layout, tabs等。ExtJS主要用于创建前端用户界面, 直接影响用户对软件的体验。

青岛海洋科学数据共享平台专项数据库(以下简称青岛专项数据库)项目要求实现B/S架构的共享服务系统, 为了丰富用户界面,改善用户体验, 采用ExtJS技术实现UI。界面美观大方, 操作方便; 开发效率高, 维护规范。客户端只需标准浏览器, 无需安装任何组件。

ExtJS框架在青岛专项数据库系统中的成功应用对相关平台的开发具有较好的借鉴和应用意义, 对推动海洋信息的共享与应用起着良好的推动作用。

1 系统简介

青岛海洋科学数据共享平台是一个区域海洋科学数据共享服务平台, 是国家科技基础条件平台的一个组成部分。其中专项数据库系统主要针对青岛地区各海洋科研单位的研究特色和数据积累现状,选择具有显著地域、时间和学科特点的数据集, 建设数据库, 开发数据共享系统, 为科研开发、数据管理及公众提供科学数据服务。

青岛专项数据库目前共 19个数据集, 涉及地质、化学、生物、渔业、水文、测绘等多个专业。数据共享系统设计为B/S架构, 采用JSP, WebGIS等技术实现。客户端只需标准浏览器即可浏览、查询、下载数据和信息产品。

青岛专项数据库系统包括数据服务和用户服务两个模块, 其中用户服务主要针对部分子库的数据服务有权限要求。系统结构如图1所示。数据服务内容主要包括：数据库简介、元数据、数据提供者信息、数据查询、可视化产品浏览等。其中“数据库简介”主要有数据库名称、简介、数据资源、数据资料格式、数据排重方法、质量控制标准和文档等。“元数据”项提供发布日期、内容、负责人、发布机构、联系方式、类型、分类编码、关键字、资料来源等信息。

图1 系统结构Fig. 1 The structure of system

2 ExtJS简介

ExtJS是一种跨浏览器的 Ajax框架, 有丰富的UI组件, 模块化、可设计性、可扩展性强, 主要用于开发RIA即富客户端应用, 增强 B/S应用系统的功能性和友好性。

ExtJS最初基于YUI技术,Ext的UI组件模型和开发理念成型于Yahoo组件库YUI和Java平台的Swing, 为开发者屏蔽了大量跨浏览器方面的处理,要比开发者直接针对DOM、W3C对象模型开发UI组件轻松。虽然Ext扩展于YUI, 自1.1版开始Ext已经可以独立运行, 不需要依赖其他外部库。Ext 2.0版可使用多种基础库, 例如YUI, JQuery和Prototype,或者独立运行。从UI中CSS样式的应用到数据解析上的异常处理, ExtJS都是一种优秀的JavaScript客户端技术, 目前为大多数开发人员热衷尝试、使用。

ExtJS是用JavaScript编写与后台技术无关的前端框架, 因此ExtJS可用在.Net, Java, Php等各种语言开发的应用中。

2.1 ExtJS优点

用ExtJS做开发的初衷是可以节约开发时间, 免去繁琐的界面美工。Ajax的异步通讯、减少浏览器和服务器之间不必要的数据往返以及减轻服务器负载等优势也是考虑因素之一。

ExtJS的核心是基于面向对象的前台应用设计方法, 精华是完美封装且扩展性极强的各类 Web应用控件与事件体系, 不懂美工和网页制作的纯编程人员使用 OO方法(Object-Oriented Method, 面向对象方法)可以快速高效地开发出界面清爽、效果出众、可扩展性强的Web应用系统。

2.2 ExtJS不足

应用Ajax可大幅度地改善人机交互感受, 但应用多个DIV, 会降低页面性能。这有2种原因：加载“慢”和渲染“慢”。如果系统越用越慢, 通常是因为内存泄露。缓解“慢”的途径有2种：定制ExtJS(即只加载需要的组件)或对ext-base.js和ext-all.js设置过期时间。

本系统选用定制ExtJS方法。使用ExtJS官网提供的定制工具, 以文件名ext_own.js定制了ExtJS中core的Components, Utilities, Date Parsing and Formatting和Layout, DataView, QuickTips, Button Widget, CycleButton Widget, SplitBar Widget, Menu Widget、Loading Mask Widget, Date Picker Widget,Toolbar Widget, MessageBox, Slider, Data - JSON Support, Form - Basic Fields, Form - Date Field, Grid–Core等本系统需要的组件。

难维护也是开发人员使用 ExtJS面临的问题之一。因为用该框架实现工作量大, 多个元素比如：JsonReader, RowNumberer等都是硬性的通过代码打印出来的。开发完成后, 客户端需要调整和更改时就会量级地增加工作量。解决方法是JS代码采用命名空间并以包含或继承的方式实现, 提高可扩展性、可维护性、可重用性。

本系统各子库中用到的grid, form分别以DBName-Grid.js和DBNameForm.js实现被数据浏览查询页面包含的方式, 减少了页面代码量, 便于维护。

3 系统界面实现

该系统的主要功能有基于用户权限的浏览查询子库信息与数据。ExtJS实现这些功能的用户界面包括4个界面。

3.1 系统首页

ExtJS的布局类Ext.Viewport主要用于应用程序的主界面, 依布局搭建风格各异的界面。Ext.Viewport代表浏览器窗口的整个显示区域,document body为其渲染对象, 自适应浏览器窗口的大小, 一个页面中只允许单个 ViewPort实例。此外它没有提供对滚动条的支持, 如果使用滚动条需要在其子面板中设置。Viewport简化了主页面的开发,也是 ExtJS开发应用程序时主界面布局设计的首选类。但是因为它对浏览器窗口大小的自适应, 在具体开发应用中也有不适用的时候。

青岛专项数据库是青岛海洋科学数据共享平台的子系统, 界面设计中需要保持统一风格, 因此使用青岛海洋科学数据共享平台的头脚文件, 不选用Viewport设计系统首页的布局, 而是只用 TabPanel实现。TabPanel是ExtJS的选项卡面板类, 它可以无限嵌套控件, 可以嵌入静动态内容。

系统首页主要是静态信息, 使用HTML和CSS在布局中设置静态内容有2种参数。(1) HTML参数：可直接在 JavaScript脚本中写静态信息的内容;(2) contentEl参数：引用页面中某DIV的ID, 在显示Panel时将该DIV中的内容显示在对应的布局域中。HTML参数更适合简单的内容, 如果需要引入格式复杂的静态信息, 使用contentEl参数。本文中, 选择contentEl参数为系统首页制定静态信息部分的内容。显示效果如图2所示。

系统子库的简介、元数据、数据提供者、子库列表、数据查询等数据库信息页面是动态信息, 也选用TabPanel实现, 效果如图3所示。

图2 系统首页Fig. 2 The home page

图3 数据库信息页面Fig. 3 The page of the database information

3.2 查询界面

该系统主要功能是数据查询。查询条件由子库数据特点决定, 多为关键字(经纬度)和日期组合。

传统的查询用表单提交实现, ExtJS使用Ext.form.FormPanel表单类, 在 FormPanel中根据需要选用输入组件, 并设定items的xtype属性。关键字使用textfield输入组件,xtype为'textfield'; '经纬度'输入框限制用户只能输入数字, 使用Ext.form.NumberField数字输入组件,xtype：'numberfield'; '日期'输入框只能输入日期格式, 使用Ext.form.DateField组件, 根据数据库里日期格式设定 format。最后设置“查询”、“重置”按钮, 并为“查询”按钮添加事件即为其 handler参数指定一个处理函数, 提交该表单。效果如图4所示。

图4 查询页面表单Fig. 4 The form of the inquiring page

3.3 数据浏览页面

提交表单后, 后台根据前台提供的查询条件查询数据, 需要和服务器端通信。ExtJS主要通过以下3种方式和服务端进行通信：(1)Ext.Ajax.request：做普通的异步请求, 服务端可以根据实际情况返回JSON形式数据或者 HTML片段; (2)Ext.tree.Tree-Loader：加载树形结构, 服务端必须返回JSON形式数据, 而且要符合Ext.tree.TreeNode的配置要求, 否则自己做转换; (3)Ext.data.Store及其派生类：加载表格形式的数据, 服务端可以根据实际情况返回JSON形式数据或者 XML形式数据, 如果没有特殊要求,推荐返回JSON格式的数据。

由于ExtJS只是一个客户端的框架, 和服务端技术没有关系, 没有相应的服务端的适配层, 因此必须提供它需要的数据结构。ExtJS只支持 Josn 和XML, 因为Microsoft.XMLHTTP只能返回这2种方法。XML作为无边界语言已经广泛应用,JSON是HTTP返回的串, 可看作JavaScript的一个子类,操作较方便。大数据量测试, JSON效率较高。本系统选用JSON传递数据。

ExtJS提供后台数据请求控件, 如JsonStore, 通过配置 url和 method来向后台发送请求, 后台将JSON格式数据响应给前台。服务器端处理前台传递的参数, 包括start, limit, sort, dir等4个参数。start和limit用来进行分页查询, start表示从第几条数据进行查询, limit表示最多返回几条查询数据。sort和dir用来对查询的结果排序, sort表示对某个字段排序, dir表示排序时使用升、降序。因为使用 HTTP协议只能传递字符类型的参数, 所以在 SearchData.jsp中, 需要对这几个参数类型转换。当有可能出现转换失败时, 需要为对应的参数设置默认值, 此文默认start为0, limit为15。page.toString()返回JSON格式的字符串, 并使用UTF-8编码格式发送给前台。

前台用 Ext.data.Store处理从后台获得的字符串。使用Ext.data.HttpProxy从SearchData.jsp中获得数据信息, 返回信息中的 total-Property和 root两个参数分别指定数据的记录总数和当前页面显示信息的队列。

创建 Store 后调用 store.load({params：{start：0,limit：15}});, 并创建列模型 Ext.grid.ColumnModel,将 Grid中每列显示的数据与 store中的数据相对应。可根据数据特点为列设置 sortable：true, 实现该列的可排序功能, 也可用 columns.defaultSortable = true; 把所有列设置成可排序。

Grid需要的组件部分完全设置好后创建 Grid显示数据信息列表。为丰富 Grid显示信息, 除了前文提到的store和columns, 为Grid设置标题title;用 loadMask：true开启读取数据时的提示功能, 在后台读取数据时自动显示等待提示信息; 在 tbar添加数据库简介和查询按钮; 在 bbar添加分页工具条, 可以实现 Grid的分页跳转和数据刷新等操作。显示效果如图5所示。

图5 数据浏览页面Fig. 5 The page for browsing data

3.4 用户登陆

本系统一些数据库的数据浏览是基于用户权限的, 如东海赤潮数据库。在用户登录后, 才能浏览某航次某项测定的详细数据信息。

用Ext.form.FormPanel类实现用户登陆, 账户、密码使用textfield输入组件, 设置items的xtype为'textfield', 其中密码的inputType为“password”, 并设定二者的 allowBlank ：false和 blankText。用handler设定“登陆”按钮的响应事件, 填写账户和密码后, 点击“登陆”,系统以进度条形式显示登陆过程, 如图6所示。

图6 用户登陆界面Fig. 6 The page for login

4 结语

ExtJS是用于富客户端界面开发的跨浏览器的Ajax框架, 兼有Ajax异步通讯优势的同时高效实现的用户界面友好便捷, 减少页面间的跳转。使用ExtJS实现青岛专项数据库系统的客户端界面, 系统界面美观大方, 功能操作简明。该系统多个子库界面风格统一单调, 可修改ExtJS中的CSS文件改善; 对专业性的检索方式和检索结果的要求体现不够充分,可根据需求修改界面组件。

作为Web2.0的一个产物, ExtJS也有不足, 而且应用程序需求不同, 对客户端界面要求不同。因此,虽然ExtJS具备简便开发、实现界面友好等诸多优势,但要根据实际的情况有选择地使用这些技术。

[1]O'Reilly. What Is Web 2.0? Design Patterns and Business Models for the Next Generation of Software[EB/OL]. http：//www.oreillynet.com/lpt/a/6228, 2005-09-30.

[2]Thompson S. Web 2.0 用户界面技术——让服务器部署的应用程序具有优于浏览器的用户体验[EB/OL].http：//www.ibm.com/developerworks/cn/web/wa-web2ui.html,2007-02-26.

[3]吴建, 张旭东. JSP网络开发入门与实践[M]. 北京：人民邮电出版社, 2006.

[4]徐会生, 何启伟, 康爱媛. 深入浅出 ExtJS[M].北京：人民邮电出版社, 2009. 76-114.

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

[6]Maintz T, Conran A, Donaghue J,et al. Ext Core中文手册[EB/OL]. http：//jstang.cn/manual/,2009-05-25.

[7]龚辟愚. ExtJS实用简明教程[EB/OL]. http：//down.zxbc. cn/java/20080813/3506.html, 2008-08-13.

Qingdao oceanic data service system based on ExtJS

SONG Zhuan-ling1,2, LIU Hai-xing1,2, DAI Liang3, ZHANG Ping3, HAN Bin1, JIA Zhen1, ZHOU Lin1
(1. First Institute of Oceanography, State Oceanic Administration, Qingdao 266061, China; 2. Key Laboratory of Marine Science and Numerical Modeling, State Oceanic Administration, Qingdao 266061, China; 3. Institute of Oceanography, the Chinese Academy of Sciences, Qingdao 266071, China)

Sep. ,16, 2009

Specialized DataBase;ExtJS; RIA

ExtJS is used to realize the user interface which is part of Qingdao Oceanic Data Service System based on B/S taking on sharing data for scientific research for improving user friendliness, strengthening the functionality and enhancing efficiency. The system has many advantages such as the distinct interface and the easy manipulation. Moreover,the system has developing efficiency and standard maintenance, too.

P208 文献标识码：A 文章编号：1000-3096(2010)02-0004-06

2009-09-16;

2009-12-07

国家自然科学基金资助项目(40676058)

宋转玲(1979-), 女, 河南新乡人, 助理工程师, 硕士, 主要从事海洋环境信息系统研究, 电话：0532-88962091, E-mail：songzhuanling@fio.org.cn

刘珊珊)