周銀萍，王跟成（西藏民族大學(xué) 信息工程學(xué)院，陜西 咸陽(yáng) 712082）

基于MiniUI框架的Web開(kāi)發(fā)實(shí)踐*

周銀萍，王跟成
（西藏民族大學(xué) 信息工程學(xué)院，陜西 咸陽(yáng) 712082）

隨著用戶對(duì)Internet網(wǎng)絡(luò)服務(wù)器提出更高的要求，傳統(tǒng)Web技術(shù)的同步請(qǐng)求-響應(yīng)系統(tǒng)架構(gòu)逐漸顯現(xiàn)出不足，其中最為突出的一點(diǎn)是每次客戶端更新信息、獲取數(shù)據(jù)時(shí)都要浪費(fèi)大量時(shí)間讀取整個(gè)頁(yè)面的數(shù)據(jù)。采用Ajax技術(shù)可以挖掘并開(kāi)發(fā)Web瀏覽器的潛力，借助MiniUI使用戶方便地為網(wǎng)站提供Ajax交互，改變傳統(tǒng)Web應(yīng)用和開(kāi)發(fā)模式，提供全新的用戶上網(wǎng)體驗(yàn)。

Web技術(shù)；Ajax交互；MiniUI

0 引言

傳統(tǒng)Web開(kāi)發(fā)往往在頁(yè)面中嵌入服務(wù)端腳本代碼，如JSP、ASP、PHP等［1］。這種開(kāi)發(fā)方式很容易滋生一種傾向：習(xí)慣不好的程序員會(huì)把大量的業(yè)務(wù)邏輯代碼、數(shù)據(jù)庫(kù)訪問(wèn)代碼夾雜在頁(yè)面中，導(dǎo)致很難讀懂，不易維護(hù)。

服務(wù)端頁(yè)面會(huì)生成很多HTML內(nèi)容進(jìn)行界面展示，必須使用“Form”標(biāo)簽提交錄入的數(shù)據(jù)，這兩種操作都將刷新整個(gè)頁(yè)面［2］。如果服務(wù)端處理、數(shù)據(jù)庫(kù)操作、網(wǎng)絡(luò)加載等任何一個(gè)環(huán)節(jié)發(fā)生延遲，網(wǎng)頁(yè)將處于一種空白“假死”狀態(tài)，造成極差的用戶體驗(yàn)。

Ajax能刷新頁(yè)面局部?jī)?nèi)容可以不通過(guò)“Form”標(biāo)簽提交數(shù)據(jù)［3］。這意味著，在用戶查詢表格、提交表單時(shí)，可以在不刷新頁(yè)面的情況下與Web服務(wù)器交換數(shù)據(jù)，從而獲得良好的用戶體驗(yàn)。

狹義的Ajax僅僅只是一個(gè)數(shù)據(jù)交互技術(shù)，沒(méi)有與之配套的UI體系，一般僅僅為了解決個(gè)別場(chǎng)景的操作優(yōu)化。在狹義的 Ajax開(kāi)發(fā)場(chǎng)景下，開(kāi)發(fā)者需要在服務(wù)端、客戶端分別處理數(shù)據(jù)交互的格式，并且需要編寫(xiě)基礎(chǔ)的界面UI，將獲取的數(shù)據(jù)內(nèi)容進(jìn)行UI填充，進(jìn)而在界面展現(xiàn)。這造成實(shí)際開(kāi)發(fā)的極大困難，提升用戶體驗(yàn)的同時(shí)，開(kāi)發(fā)的工作量大大增加，系統(tǒng)的穩(wěn)定性大大降低，很容易出現(xiàn)瀏覽器兼容不一致、性能變慢、內(nèi)存泄漏、布局錯(cuò)亂等問(wèn)題。而且，用戶體驗(yàn)的提升也是有限的，開(kāi)發(fā)者只能解決一些受到重點(diǎn)關(guān)注的操作場(chǎng)景，不能完整開(kāi)發(fā)出成為媲美C/S應(yīng)用界面風(fēng)格和操作習(xí)慣的應(yīng)用系統(tǒng)。

廣義的Ajax技術(shù)提供了一整套用于快速開(kāi)發(fā)的“富客戶端UI庫(kù)”，為數(shù)據(jù)交互提供快速的開(kāi)發(fā)機(jī)制，讓UI與數(shù)據(jù)的裝配更天然便捷。開(kāi)發(fā)者可以集中精力開(kāi)發(fā)業(yè)務(wù)功能，只需要簡(jiǎn)單的處理步驟，就能快速打造媲美C/ S應(yīng)用系統(tǒng)的B/S軟件。

1 Mi n i UI使用介紹

一般來(lái)說(shuō)，使用 MiniUI框架開(kāi)發(fā) Web應(yīng)用，只需要在Web頁(yè)面的 head區(qū)域引用服務(wù)器端或本地JS庫(kù)文件即可。最新的MiniUI庫(kù)文件可以從http://www.miniui.com/下載，該網(wǎng)站提供了支持不同開(kāi)發(fā)環(huán)境的 MiniUI開(kāi)發(fā)包（.Net版本、java版本、PHP版本），開(kāi)發(fā)人員可以根據(jù)實(shí)際的開(kāi)發(fā)環(huán)境選擇合適的開(kāi)發(fā)包。使用該庫(kù)文件的語(yǔ)法如下（MiniUI庫(kù)文件名為 boot.js，存放在網(wǎng)站根目錄下scripts文件夾中）：

＜scriptsrc="scripts/boot.js"type="text/javascript"＞＜/script＞

一般情況下還需要顯示MiniUI的樣式，否則頁(yè)面布局會(huì)有不規(guī)整的現(xiàn)象，這時(shí)要引入其 css文件（css樣式文件名為 demo.css，存放在網(wǎng)站根目錄下的 css文件夾中），具體如下：

＜link href="css/demo.css"rel="stylesheet"type="text/css"/＞

在HTML文件的body區(qū)域只需要一行簡(jiǎn)單的代碼，就能實(shí)現(xiàn)一個(gè)漂亮的“刪除”按鈕顯示。具體的功能實(shí)現(xiàn)可以在JS中通過(guò)remove（）方法完成。

＜a class="mini-button"iconCls="icon-remove"onclick="remove（）"＞刪除＜/a＞

2 實(shí)例分析及實(shí)現(xiàn)代碼

通過(guò)MiniUI框架開(kāi)發(fā)Web頁(yè)面可以輕松實(shí)現(xiàn)頁(yè)面無(wú)需刷新為前提的各種功能，擁有良好的界面，為用戶提供更好的用戶體驗(yàn)［4-5］。下面用《西藏自治區(qū)高校人文社會(huì)科學(xué)研究項(xiàng)目管理系統(tǒng)》的開(kāi)發(fā)作為實(shí)際的例子來(lái)簡(jiǎn)單說(shuō)明MiniUI的使用，服務(wù)器端開(kāi)發(fā)語(yǔ)言使用Java［6］。

2.1 設(shè)計(jì)思路

HTML頁(yè)面包含一個(gè)tool-bar工具欄和一個(gè) datagrid數(shù)據(jù)網(wǎng)格列表，工具欄負(fù)責(zé)具體的增加、刪除、查詢等操作（以刪除為例），datagrid控件負(fù)責(zé)顯示從數(shù)據(jù)庫(kù)中讀取的相關(guān)數(shù)據(jù)，可根據(jù)每頁(yè)顯示的條數(shù)自動(dòng)進(jìn)行分頁(yè)顯示，包括當(dāng)前頁(yè)和總頁(yè)數(shù)，并內(nèi)置了前一頁(yè)、后一頁(yè)、首頁(yè)、尾頁(yè)、總條數(shù)統(tǒng)計(jì)等功能。打開(kāi)頁(yè)面時(shí)數(shù)據(jù)直接加載至列表中顯示，執(zhí)行刪除操作后頁(yè)面也無(wú)需刷新，操作后的新數(shù)據(jù)直接顯示在頁(yè)面中，同時(shí)數(shù)據(jù)條數(shù)及其總頁(yè)數(shù)也會(huì)隨之變化。效果圖如圖1所示。

2.2 HTML頁(yè)面主要代碼及其分析

＜a class="mini-button"iconCls="icon-remove"onclick="remove（）"＞刪除＜/a＞

＜div id="datagrid1"class="mini-datagrid"style="width：95％；height：310px；"pageSize="10"allowResize="true"url="psmanagerservletzyp？method=getPsList" idField="PSID"multiSelect="true" showSummaryRow="true"＞

首先通過(guò) mini-button在 mini-toolbar工具欄中定義一個(gè)“刪除”按鈕，然后通過(guò) mini-datagrid實(shí)現(xiàn)頁(yè)面列表的展現(xiàn)。在上面的HTML代碼中，MiniUI對(duì)傳統(tǒng)HTML頁(yè)面控件進(jìn)行了封裝升級(jí)。比如傳統(tǒng)開(kāi)發(fā)頁(yè)面列表是通過(guò) table來(lái)實(shí)現(xiàn)的，需要開(kāi)發(fā)人員編寫(xiě) pagebean，每新增或者刪除一條記錄，都要判斷總記錄數(shù)及每頁(yè)顯示的條數(shù)來(lái)計(jì)算總頁(yè)數(shù)，而MiniUI則不再需要開(kāi)發(fā)人員去完成這些細(xì)節(jié)，mini-datagrid內(nèi)置了 pagebean需要實(shí)現(xiàn)的所有功能，使開(kāi)發(fā)人員能有更多的精力去實(shí)現(xiàn)更多的功能，有效縮短工期。mini-datagrid只需要設(shè)置一個(gè)URL就能自動(dòng)訪問(wèn)后臺(tái)程序，完成數(shù)據(jù)的讀取和顯示。

2.3 PsManager.js部分代碼及其分析

Web development practice based on MiniUI framew ork

Zhou Yinping，Wang Gencheng
（School of Information Engineering，Xizang Minzu University，Xianyang 712082，China）

The traditional Web technology——synchronous request/response system architecture is gradually showing insufficience，as users put forward higher requirements to the Internet server.The most striking point is that customers update information and access to data each time wasting a lot of time to read data of the entire page.Potential of Web browser can be tapped and developed using Ajax technology.With the help of MiniUI，the article made users easily provide Ajax interactions for websites，and changed the traditional Web applications and development model to provide new user Internet experience.

Web technology；Ajax interactions；MiniUI

圖1示例圖

TP319

A

1674-7720（2015）24-0079-02

周銀萍，王跟成.基于MiniUI框架的Web開(kāi)發(fā)實(shí)踐［J］.微型機(jī)與應(yīng)用，2015，34（24）：79-80，83.

西藏自治區(qū)高校人文社會(huì)科學(xué)項(xiàng)目管理系統(tǒng)（2015ZX041）