宋轉(zhuǎn)玲, 劉海行, 代 亮, 張 平, 韓 彬 賈 貞 周 林

(1．國家海洋局 第一海洋研究所, 山東 青島266061; 2. 海洋環(huán)境科學(xué)和數(shù)值模擬國家海洋局重點實驗室, 山東 青島266061; 3. 中國科學(xué)院 海洋研究所, 山東 青島266071)

基于ExtJS開發(fā)的海洋科學(xué)數(shù)據(jù)共享服務(wù)平臺

宋轉(zhuǎn)玲1,2, 劉海行1,2, 代 亮3, 張 平3, 韓 彬1, 賈 貞1, 周 林1

(1．國家海洋局 第一海洋研究所, 山東 青島266061; 2. 海洋環(huán)境科學(xué)和數(shù)值模擬國家海洋局重點實驗室, 山東 青島266061; 3. 中國科學(xué)院 海洋研究所, 山東 青島266071)

為了改善系統(tǒng)界面友好性、增強系統(tǒng)功能性并提高開發(fā)效率, 運用ExtJS框架實現(xiàn)了基于B/S架構(gòu)的青島海洋科學(xué)數(shù)據(jù)共享平臺專項數(shù)據(jù)庫系統(tǒng)的前臺界面。系統(tǒng)界面美觀, 操作方便, 開發(fā)效率高,維護規(guī)范。

專項數(shù)據(jù)庫; ExtJS; RIA

B/S系統(tǒng)因為部署簡單、客戶端零維護、可重用性、易維護、交互性強等諸多優(yōu)勢, 在當(dāng)前應(yīng)用程序開發(fā)中適用性較強。但 B/S客戶端采用的標(biāo)準(zhǔn)瀏覽器的功能特點限制, 使其易用性、用戶界面友好性不如C/S系統(tǒng)。

享用網(wǎng)絡(luò)便利服務(wù)已久的用戶對應(yīng)用程序的需求已經(jīng)不只局限于滿足業(yè)務(wù)需要, 還希望它具有豐富的用戶界面, 能夠提供即時響應(yīng), 最大限度地提高工作效率; 另外盡管B/S不如C/S的用戶界面強大,但開發(fā)者認(rèn)為單純?yōu)楦倪M(jìn)用戶體驗, 而安裝、配置和管理客戶機代碼的成本太高, 因此更傾向于純粹的基于服務(wù)器的交付模型。現(xiàn)有的Web開發(fā)技術(shù)能夠提供比瀏覽器更好的用戶體驗, 同時不必在客戶機上手工安裝代碼, 這些滿足雙方需求的技術(shù)構(gòu)建的應(yīng)用程序被稱為 Web 2.0 應(yīng)用程序[1]。

Web 2.0 應(yīng)用程序提供了2種環(huán)境的優(yōu)點：低成本高效率的基于服務(wù)器的部署模型和幾乎可以與C/S應(yīng)用程序媲美的用戶體驗。為Java EE 應(yīng)用程序提供豐富的用戶體驗, 有5種技術(shù)可供選擇：(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年提出的新概念, 經(jīng)過將近 3年的發(fā)展, Ajax技術(shù)已經(jīng)比較成熟。成功發(fā)布的Google Maps促使開發(fā)者使用Ajax技術(shù)改進(jìn)自己應(yīng)用程序的易用性和響應(yīng)性。Ajax發(fā)展至今, 各種框架層出不窮, 但 ExtJS最受歡迎。ExtJS是一組擴展自Yahoo!UI, 具有C/S風(fēng)格的Web用戶界面組件。主要UI包括dialog, grid, layout, tabs等。ExtJS主要用于創(chuàng)建前端用戶界面, 直接影響用戶對軟件的體驗。

青島海洋科學(xué)數(shù)據(jù)共享平臺專項數(shù)據(jù)庫(以下簡稱青島專項數(shù)據(jù)庫)項目要求實現(xiàn)B/S架構(gòu)的共享服務(wù)系統(tǒng), 為了豐富用戶界面,改善用戶體驗, 采用ExtJS技術(shù)實現(xiàn)UI。界面美觀大方, 操作方便; 開發(fā)效率高, 維護規(guī)范?？蛻舳酥恍铇?biāo)準(zhǔn)瀏覽器, 無需安裝任何組件。

ExtJS框架在青島專項數(shù)據(jù)庫系統(tǒng)中的成功應(yīng)用對相關(guān)平臺的開發(fā)具有較好的借鑒和應(yīng)用意義, 對推動海洋信息的共享與應(yīng)用起著良好的推動作用。

1 系統(tǒng)簡介

青島海洋科學(xué)數(shù)據(jù)共享平臺是一個區(qū)域海洋科學(xué)數(shù)據(jù)共享服務(wù)平臺, 是國家科技基礎(chǔ)條件平臺的一個組成部分。其中專項數(shù)據(jù)庫系統(tǒng)主要針對青島地區(qū)各海洋科研單位的研究特色和數(shù)據(jù)積累現(xiàn)狀,選擇具有顯著地域、時間和學(xué)科特點的數(shù)據(jù)集, 建設(shè)數(shù)據(jù)庫, 開發(fā)數(shù)據(jù)共享系統(tǒng), 為科研開發(fā)、數(shù)據(jù)管理及公眾提供科學(xué)數(shù)據(jù)服務(wù)。

青島專項數(shù)據(jù)庫目前共 19個數(shù)據(jù)集, 涉及地質(zhì)、化學(xué)、生物、漁業(yè)、水文、測繪等多個專業(yè)。數(shù)據(jù)共享系統(tǒng)設(shè)計為B/S架構(gòu), 采用JSP, WebGIS等技術(shù)實現(xiàn)?？蛻舳酥恍铇?biāo)準(zhǔn)瀏覽器即可瀏覽、查詢、下載數(shù)據(jù)和信息產(chǎn)品。

青島專項數(shù)據(jù)庫系統(tǒng)包括數(shù)據(jù)服務(wù)和用戶服務(wù)兩個模塊, 其中用戶服務(wù)主要針對部分子庫的數(shù)據(jù)服務(wù)有權(quán)限要求。系統(tǒng)結(jié)構(gòu)如圖1所示。數(shù)據(jù)服務(wù)內(nèi)容主要包括：數(shù)據(jù)庫簡介、元數(shù)據(jù)、數(shù)據(jù)提供者信息、數(shù)據(jù)查詢、可視化產(chǎn)品瀏覽等。其中“數(shù)據(jù)庫簡介”主要有數(shù)據(jù)庫名稱、簡介、數(shù)據(jù)資源、數(shù)據(jù)資料格式、數(shù)據(jù)排重方法、質(zhì)量控制標(biāo)準(zhǔn)和文檔等?！霸獢?shù)據(jù)”項提供發(fā)布日期、內(nèi)容、負(fù)責(zé)人、發(fā)布機構(gòu)、聯(lián)系方式、類型、分類編碼、關(guān)鍵字、資料來源等信息。

圖1 系統(tǒng)結(jié)構(gòu)Fig. 1 The structure of system

2 ExtJS簡介

ExtJS是一種跨瀏覽器的 Ajax框架, 有豐富的UI組件, 模塊化、可設(shè)計性、可擴展性強, 主要用于開發(fā)RIA即富客戶端應(yīng)用, 增強 B/S應(yīng)用系統(tǒng)的功能性和友好性。

ExtJS最初基于YUI技術(shù),Ext的UI組件模型和開發(fā)理念成型于Yahoo組件庫YUI和Java平臺的Swing, 為開發(fā)者屏蔽了大量跨瀏覽器方面的處理,要比開發(fā)者直接針對DOM、W3C對象模型開發(fā)UI組件輕松。雖然Ext擴展于YUI, 自1.1版開始Ext已經(jīng)可以獨立運行, 不需要依賴其他外部庫。Ext 2.0版可使用多種基礎(chǔ)庫, 例如YUI, JQuery和Prototype,或者獨立運行。從UI中CSS樣式的應(yīng)用到數(shù)據(jù)解析上的異常處理, ExtJS都是一種優(yōu)秀的JavaScript客戶端技術(shù), 目前為大多數(shù)開發(fā)人員熱衷嘗試、使用。

ExtJS是用JavaScript編寫與后臺技術(shù)無關(guān)的前端框架, 因此ExtJS可用在.Net, Java, Php等各種語言開發(fā)的應(yīng)用中。

2.1 ExtJS優(yōu)點

用ExtJS做開發(fā)的初衷是可以節(jié)約開發(fā)時間, 免去繁瑣的界面美工。Ajax的異步通訊、減少瀏覽器和服務(wù)器之間不必要的數(shù)據(jù)往返以及減輕服務(wù)器負(fù)載等優(yōu)勢也是考慮因素之一。

ExtJS的核心是基于面向?qū)ο蟮那芭_應(yīng)用設(shè)計方法, 精華是完美封裝且擴展性極強的各類 Web應(yīng)用控件與事件體系, 不懂美工和網(wǎng)頁制作的純編程人員使用 OO方法(Object-Oriented Method, 面向?qū)ο蠓椒?可以快速高效地開發(fā)出界面清爽、效果出眾、可擴展性強的Web應(yīng)用系統(tǒng)。

2.2 ExtJS不足

應(yīng)用Ajax可大幅度地改善人機交互感受, 但應(yīng)用多個DIV, 會降低頁面性能。這有2種原因：加載“慢”和渲染“慢”。如果系統(tǒng)越用越慢, 通常是因為內(nèi)存泄露。緩解“慢”的途徑有2種：定制ExtJS(即只加載需要的組件)或?qū)xt-base.js和ext-all.js設(shè)置過期時間。

本系統(tǒng)選用定制ExtJS方法。使用ExtJS官網(wǎng)提供的定制工具, 以文件名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等本系統(tǒng)需要的組件。

難維護也是開發(fā)人員使用 ExtJS面臨的問題之一。因為用該框架實現(xiàn)工作量大, 多個元素比如：JsonReader, RowNumberer等都是硬性的通過代碼打印出來的。開發(fā)完成后, 客戶端需要調(diào)整和更改時就會量級地增加工作量。解決方法是JS代碼采用命名空間并以包含或繼承的方式實現(xiàn), 提高可擴展性、可維護性、可重用性。

本系統(tǒng)各子庫中用到的grid, form分別以DBName-Grid.js和DBNameForm.js實現(xiàn)被數(shù)據(jù)瀏覽查詢頁面包含的方式, 減少了頁面代碼量, 便于維護。

3 系統(tǒng)界面實現(xiàn)

該系統(tǒng)的主要功能有基于用戶權(quán)限的瀏覽查詢子庫信息與數(shù)據(jù)。ExtJS實現(xiàn)這些功能的用戶界面包括4個界面。

3.1 系統(tǒng)首頁

ExtJS的布局類Ext.Viewport主要用于應(yīng)用程序的主界面, 依布局搭建風(fēng)格各異的界面。Ext.Viewport代表瀏覽器窗口的整個顯示區(qū)域,document body為其渲染對象, 自適應(yīng)瀏覽器窗口的大小, 一個頁面中只允許單個 ViewPort實例。此外它沒有提供對滾動條的支持, 如果使用滾動條需要在其子面板中設(shè)置。Viewport簡化了主頁面的開發(fā),也是 ExtJS開發(fā)應(yīng)用程序時主界面布局設(shè)計的首選類。但是因為它對瀏覽器窗口大小的自適應(yīng), 在具體開發(fā)應(yīng)用中也有不適用的時候。

青島專項數(shù)據(jù)庫是青島海洋科學(xué)數(shù)據(jù)共享平臺的子系統(tǒng), 界面設(shè)計中需要保持統(tǒng)一風(fēng)格, 因此使用青島海洋科學(xué)數(shù)據(jù)共享平臺的頭腳文件, 不選用Viewport設(shè)計系統(tǒng)首頁的布局, 而是只用 TabPanel實現(xiàn)。TabPanel是ExtJS的選項卡面板類, 它可以無限嵌套控件, 可以嵌入靜動態(tài)內(nèi)容。

系統(tǒng)首頁主要是靜態(tài)信息, 使用HTML和CSS在布局中設(shè)置靜態(tài)內(nèi)容有2種參數(shù)。(1) HTML參數(shù)：可直接在 JavaScript腳本中寫靜態(tài)信息的內(nèi)容;(2) contentEl參數(shù)：引用頁面中某DIV的ID, 在顯示Panel時將該DIV中的內(nèi)容顯示在對應(yīng)的布局域中。HTML參數(shù)更適合簡單的內(nèi)容, 如果需要引入格式復(fù)雜的靜態(tài)信息, 使用contentEl參數(shù)。本文中, 選擇contentEl參數(shù)為系統(tǒng)首頁制定靜態(tài)信息部分的內(nèi)容。顯示效果如圖2所示。

系統(tǒng)子庫的簡介、元數(shù)據(jù)、數(shù)據(jù)提供者、子庫列表、數(shù)據(jù)查詢等數(shù)據(jù)庫信息頁面是動態(tài)信息, 也選用TabPanel實現(xiàn), 效果如圖3所示。

圖2 系統(tǒng)首頁Fig. 2 The home page

圖3 數(shù)據(jù)庫信息頁面Fig. 3 The page of the database information

3.2 查詢界面

該系統(tǒng)主要功能是數(shù)據(jù)查詢。查詢條件由子庫數(shù)據(jù)特點決定, 多為關(guān)鍵字(經(jīng)緯度)和日期組合。

傳統(tǒng)的查詢用表單提交實現(xiàn), ExtJS使用Ext.form.FormPanel表單類, 在 FormPanel中根據(jù)需要選用輸入組件, 并設(shè)定items的xtype屬性。關(guān)鍵字使用textfield輸入組件,xtype為'textfield'; '經(jīng)緯度'輸入框限制用戶只能輸入數(shù)字, 使用Ext.form.NumberField數(shù)字輸入組件,xtype：'numberfield'; '日期'輸入框只能輸入日期格式, 使用Ext.form.DateField組件, 根據(jù)數(shù)據(jù)庫里日期格式設(shè)定 format。最后設(shè)置“查詢”、“重置”按鈕, 并為“查詢”按鈕添加事件即為其 handler參數(shù)指定一個處理函數(shù), 提交該表單。效果如圖4所示。

圖4 查詢頁面表單Fig. 4 The form of the inquiring page

3.3 數(shù)據(jù)瀏覽頁面

提交表單后, 后臺根據(jù)前臺提供的查詢條件查詢數(shù)據(jù), 需要和服務(wù)器端通信。ExtJS主要通過以下3種方式和服務(wù)端進(jìn)行通信：(1)Ext.Ajax.request：做普通的異步請求, 服務(wù)端可以根據(jù)實際情況返回JSON形式數(shù)據(jù)或者 HTML片段; (2)Ext.tree.Tree-Loader：加載樹形結(jié)構(gòu), 服務(wù)端必須返回JSON形式數(shù)據(jù), 而且要符合Ext.tree.TreeNode的配置要求, 否則自己做轉(zhuǎn)換; (3)Ext.data.Store及其派生類：加載表格形式的數(shù)據(jù), 服務(wù)端可以根據(jù)實際情況返回JSON形式數(shù)據(jù)或者 XML形式數(shù)據(jù), 如果沒有特殊要求,推薦返回JSON格式的數(shù)據(jù)。

由于ExtJS只是一個客戶端的框架, 和服務(wù)端技術(shù)沒有關(guān)系, 沒有相應(yīng)的服務(wù)端的適配層, 因此必須提供它需要的數(shù)據(jù)結(jié)構(gòu)。ExtJS只支持 Josn 和XML, 因為Microsoft.XMLHTTP只能返回這2種方法。XML作為無邊界語言已經(jīng)廣泛應(yīng)用,JSON是HTTP返回的串, 可看作JavaScript的一個子類,操作較方便。大數(shù)據(jù)量測試, JSON效率較高。本系統(tǒng)選用JSON傳遞數(shù)據(jù)。

ExtJS提供后臺數(shù)據(jù)請求控件, 如JsonStore, 通過配置 url和 method來向后臺發(fā)送請求, 后臺將JSON格式數(shù)據(jù)響應(yīng)給前臺。服務(wù)器端處理前臺傳遞的參數(shù), 包括start, limit, sort, dir等4個參數(shù)。start和limit用來進(jìn)行分頁查詢, start表示從第幾條數(shù)據(jù)進(jìn)行查詢, limit表示最多返回幾條查詢數(shù)據(jù)。sort和dir用來對查詢的結(jié)果排序, sort表示對某個字段排序, dir表示排序時使用升、降序。因為使用 HTTP協(xié)議只能傳遞字符類型的參數(shù), 所以在 SearchData.jsp中, 需要對這幾個參數(shù)類型轉(zhuǎn)換。當(dāng)有可能出現(xiàn)轉(zhuǎn)換失敗時, 需要為對應(yīng)的參數(shù)設(shè)置默認(rèn)值, 此文默認(rèn)start為0, limit為15。page.toString()返回JSON格式的字符串, 并使用UTF-8編碼格式發(fā)送給前臺。

前臺用 Ext.data.Store處理從后臺獲得的字符串。使用Ext.data.HttpProxy從SearchData.jsp中獲得數(shù)據(jù)信息, 返回信息中的 total-Property和 root兩個參數(shù)分別指定數(shù)據(jù)的記錄總數(shù)和當(dāng)前頁面顯示信息的隊列。

創(chuàng)建 Store 后調(diào)用 store.load({params：{start：0,limit：15}});, 并創(chuàng)建列模型 Ext.grid.ColumnModel,將 Grid中每列顯示的數(shù)據(jù)與 store中的數(shù)據(jù)相對應(yīng)?？筛鶕?jù)數(shù)據(jù)特點為列設(shè)置 sortable：true, 實現(xiàn)該列的可排序功能, 也可用 columns.defaultSortable = true; 把所有列設(shè)置成可排序。

Grid需要的組件部分完全設(shè)置好后創(chuàng)建 Grid顯示數(shù)據(jù)信息列表。為豐富 Grid顯示信息, 除了前文提到的store和columns, 為Grid設(shè)置標(biāo)題title;用 loadMask：true開啟讀取數(shù)據(jù)時的提示功能, 在后臺讀取數(shù)據(jù)時自動顯示等待提示信息; 在 tbar添加數(shù)據(jù)庫簡介和查詢按鈕; 在 bbar添加分頁工具條, 可以實現(xiàn) Grid的分頁跳轉(zhuǎn)和數(shù)據(jù)刷新等操作。顯示效果如圖5所示。

圖5 數(shù)據(jù)瀏覽頁面Fig. 5 The page for browsing data

3.4 用戶登陸

本系統(tǒng)一些數(shù)據(jù)庫的數(shù)據(jù)瀏覽是基于用戶權(quán)限的, 如東海赤潮數(shù)據(jù)庫。在用戶登錄后, 才能瀏覽某航次某項測定的詳細(xì)數(shù)據(jù)信息。

用Ext.form.FormPanel類實現(xiàn)用戶登陸, 賬戶、密碼使用textfield輸入組件, 設(shè)置items的xtype為'textfield', 其中密碼的inputType為“password”, 并設(shè)定二者的 allowBlank ：false和 blankText。用handler設(shè)定“登陸”按鈕的響應(yīng)事件, 填寫賬戶和密碼后, 點擊“登陸”,系統(tǒng)以進(jìn)度條形式顯示登陸過程, 如圖6所示。

圖6 用戶登陸界面Fig. 6 The page for login

4 結(jié)語

ExtJS是用于富客戶端界面開發(fā)的跨瀏覽器的Ajax框架, 兼有Ajax異步通訊優(yōu)勢的同時高效實現(xiàn)的用戶界面友好便捷, 減少頁面間的跳轉(zhuǎn)。使用ExtJS實現(xiàn)青島專項數(shù)據(jù)庫系統(tǒng)的客戶端界面, 系統(tǒng)界面美觀大方, 功能操作簡明。該系統(tǒng)多個子庫界面風(fēng)格統(tǒng)一單調(diào), 可修改ExtJS中的CSS文件改善; 對專業(yè)性的檢索方式和檢索結(jié)果的要求體現(xiàn)不夠充分,可根據(jù)需求修改界面組件。

作為Web2.0的一個產(chǎn)物, ExtJS也有不足, 而且應(yīng)用程序需求不同, 對客戶端界面要求不同。因此,雖然ExtJS具備簡便開發(fā)、實現(xiàn)界面友好等諸多優(yōu)勢,但要根據(jù)實際的情況有選擇地使用這些技術(shù)。

[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 用戶界面技術(shù)——讓服務(wù)器部署的應(yīng)用程序具有優(yōu)于瀏覽器的用戶體驗[EB/OL].http：//www.ibm.com/developerworks/cn/web/wa-web2ui.html,2007-02-26.

[3]吳建, 張旭東. JSP網(wǎng)絡(luò)開發(fā)入門與實踐[M]. 北京：人民郵電出版社, 2006.

[4]徐會生, 何啟偉, 康愛媛. 深入淺出 ExtJS[M].北京：人民郵電出版社, 2009. 76-114.

[5]衛(wèi)軍, 夏慧軍, 孟臘春. ExtJSWeb應(yīng)用程序開發(fā)指南[M]. 西安：機械工業(yè)出版社,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 文獻(xiàn)標(biāo)識碼：A 文章編號：1000-3096(2010)02-0004-06

2009-09-16;

2009-12-07

國家自然科學(xué)基金資助項目(40676058)

宋轉(zhuǎn)玲(1979-), 女, 河南新鄉(xiāng)人, 助理工程師, 碩士, 主要從事海洋環(huán)境信息系統(tǒng)研究, 電話：0532-88962091, E-mail：songzhuanling@fio.org.cn

劉珊珊)