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

周銀萍，王跟成（西藏民族大學 信息工程學院，陜西 咸陽 712082）

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

周銀萍，王跟成
（西藏民族大學 信息工程學院，陜西 咸陽 712082）

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

Web技術；Ajax交互；MiniUI

0 引言

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

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

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

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

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

1 Mi n i UI使用介紹

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

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

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

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

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

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

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

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

2.1 設計思路

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

2.2 HTML頁面主要代碼及其分析

＜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"＞

首先通過 mini-button在 mini-toolbar工具欄中定義一個“刪除”按鈕，然后通過 mini-datagrid實現(xiàn)頁面列表的展現(xiàn)。在上面的HTML代碼中，MiniUI對傳統(tǒng)HTML頁面控件進行了封裝升級。比如傳統(tǒng)開發(fā)頁面列表是通過 table來實現(xiàn)的，需要開發(fā)人員編寫 pagebean，每新增或者刪除一條記錄，都要判斷總記錄數(shù)及每頁顯示的條數(shù)來計算總頁數(shù)，而MiniUI則不再需要開發(fā)人員去完成這些細節(jié)，mini-datagrid內(nèi)置了 pagebean需要實現(xiàn)的所有功能，使開發(fā)人員能有更多的精力去實現(xiàn)更多的功能，有效縮短工期。mini-datagrid只需要設置一個URL就能自動訪問后臺程序，完成數(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開發(fā)實踐［J］.微型機與應用，2015，34（24）：79-80，83.

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