Web應用程序界面設計框架技術研究

摘 要：作為開發(fā)Web界面的JavaScript框架，Ext技術能夠?qū)崿F(xiàn)多種Web應用程序的設計，完成界面系統(tǒng)的各種布局與功能，同時，還可以有效提高所設計界面的易用性，提高用戶在界面操作中的體驗感。

關鍵詞：Ext技術；Web應用程序；界面設計

中圖分類號：TP393.09

在網(wǎng)絡技術的不斷推動下，人們的生活發(fā)生了根本性的變化，而網(wǎng)絡技術的更新?lián)Q代，也極大推動了各種軟件開發(fā)模式和技術的發(fā)展。對于傳統(tǒng)軟件工程開發(fā)領域常用的C/S結構，已經(jīng)逐漸難以適應時代的發(fā)展。所以，軟件開發(fā)人員在實踐中逐漸采用基于B/S結構的Web應用程序開發(fā)技術。

特別是近幾年來，隨著Web技術的高速發(fā)展，其應用領域逐漸從簡單的網(wǎng)頁設計，向更加復雜的Web應用程序和網(wǎng)站發(fā)展，而正是由于其低廉的成本和便于安裝部署的優(yōu)勢，使其能夠在短時間內(nèi)得到廣泛應用。所以，在軟件開發(fā)領域，Web應用程序的發(fā)展已經(jīng)逐漸占據(jù)軟件開發(fā)領域的主導。

1 Ext技術背景

Ext技術的主要作用，就是在客戶端生成更加豐富和多彩的Web應用程序界面，現(xiàn)在普遍作為跨瀏覽器的JavaScript庫來使用。在Ext中包含了可擴展的組成部件，使得其更便于使用，所開發(fā)的程序接口也更加直觀。作為一種基于JavaScript而發(fā)展的語言，Ext能夠廣泛應用與Net、Java和PHP等多種語言開發(fā)環(huán)境。

在基于Ext技術的Web應用程序開發(fā)框架中，可以將其架構分為表現(xiàn)層、業(yè)務邏輯層和數(shù)據(jù)層，其中，表現(xiàn)層的設計方式不會對其他兩層產(chǎn)生根本性影響。所以，現(xiàn)有的Ext框架則主要采用請求或者響應的方式來完成設計。而在具體的設計過程中，服務器依然是設計工作的重點，能夠?qū)TTP請求進行響應，并返回多種格式的數(shù)據(jù)片段。

2 基于Ext技術的程序設計原理

而作為一種應用性能良好的Ajax應用框架，Ext在使用的過程中，還需要服務器的支持。而Ext與服務器之間的交互主要通過三種方式來完成，如下圖1中所示，包括了控件交互、表單加載以及用戶發(fā)出Ajax請求等。

圖1 Ext與服務器的交互方式

在圖1中，控件交互主要指服務器傳送的數(shù)據(jù)，在控件交互的基礎上，完成各種表單的提交，進而生成各種類型的數(shù)據(jù)，然后向客戶端輸送。在該過程中，控件可以完成對數(shù)據(jù)的識別，可以作為Ext端的數(shù)據(jù)轉(zhuǎn)化解析器來使用。正是由于控件的支持，服務器端才可以對多種格式數(shù)據(jù)進行處理。

對于表單的加載方式，可以在完成表單的提交過程后，服務器端應用程序向其返回一個數(shù)據(jù)對象，用于表示處理結果的成功與否。

如果用戶采用發(fā)出Ajax請求的方式，則在訪問服務器的過程中，如果要完成基于Ext技術的Web應用程序界面設計，就需要通過HTTP向服務器發(fā)送請求，并通過回調(diào)函數(shù)來完成處理過程。在此過程中，通過回調(diào)函數(shù)可以定義本次Ajax請求過程中所需要的參數(shù)。

3 在Wbe界面中的應用

3.1 界面中的元素

在Ext技術中，能夠為開發(fā)人員提供的界面元素種類多樣，比如常用的表單、對話框、標簽、網(wǎng)格以及頁面的布局設計等。這樣，在應用程序的設計中，用戶可以根據(jù)需求選擇不同的頁面，從而為軟件開發(fā)提供便利。不僅如此，軟件開發(fā)人員還可根據(jù)自身的喜好來完成頁面元素的選擇。

3.2 靜態(tài)方法說明

在Ext技術體系中，實現(xiàn)元素獲取的方法主要為Ext.get和Ext.fly，其中，Ext.get方法在具體的執(zhí)行過程中，能夠為所有的DOM元素創(chuàng)建全新的Ext外部元件對象。相比較下，Ext.fly則更加小巧，所占用的資源更少，在執(zhí)行過程中不需要緩存的支持。

4 在Web系統(tǒng)中的應用

4.1 服務器端設計

在基于Web的軟件界面設計中，可以將Web和數(shù)據(jù)庫服務配置在相同主機，而將Web服務器作為客戶端與數(shù)據(jù)庫之間的通道，因為瀏覽器能夠通過Web服務器來實現(xiàn)數(shù)據(jù)庫服務器的訪問，在獲取各種數(shù)據(jù)的基礎上完成界面的更新。

在下面的圖2中，給出了基于Ext技術的Web服務器動態(tài)管理的基本模式。其中，Web服務器可以為數(shù)據(jù)訪問提供支持，在接收到各種訪問請求的基礎上，完成對數(shù)據(jù)序列的處理，以回調(diào)函數(shù)的處理結果為基礎，向瀏覽器發(fā)送處理結構，進而實現(xiàn)頁面的刷新。

圖2 Web服務器所采用的動態(tài)管理方式

4.2 界面實現(xiàn)

在Web程序的開發(fā)過程中，只要在基于Ext框架的應用環(huán)境中添加Ext框架所需要的軟件開發(fā)包即可開始設計過程，從而得到用戶希望的各種界面。

5 結束語

雖然Web應用現(xiàn)在已經(jīng)非常普遍，代表了軟件發(fā)展的主要趨勢。但是，在Web應用程序的開發(fā)中，還需要人們的繼續(xù)研究，才能在生產(chǎn)實踐中更加普遍地應用，進而開發(fā)出更加實用的軟件。文中在對基于Ext技術的Web應用程序的設計與開發(fā)簡單介紹的基礎上，給出了Ext技術在界面設計和界面效應增強中的一些體會。

參考文獻：

[1]嚴磊磊.論ExtJs在Web開發(fā)中的應用[J].信息系統(tǒng)工程，2012（12）.

[2]王曉燕，宋紹云.Ext的組件體系結構研究[J].電腦知識與技術，2011（09）.

[3]翟超杰，李兆瑞，車青.淺析Ajax框架技術的應用與實踐[J].信息與電腦（理論版），2010（12）.

[4]王璠.面向Web系統(tǒng)應用的目標性能測試方法研究[J].電腦知識與技術，2011（07）：1570-1571.

[5]沈銀華，汪濤，王峰.基于ExtJs?Spring和iBATIS的Web系統(tǒng)應用研究[J].軟件導刊，2011（12）：13-15.

作者簡介：潘齊欣（1983-），女，苗族，貴州雷山人，講師，本科，主要研究方向：軟件工程、計算機應用。

作者單位：凱里學院 信息工程學院，貴州凱里 556011

基金項目：凱里學院2014年度規(guī)劃課題（項目編號：z1421）；凱里學院教改課題（項目編號：JG201319）。