摘要:人機交互是GIS應用開發(fā)中需要考慮的一個重要領(lǐng)域,也是決定用戶體驗的關(guān)鍵性能指標。該文作者結(jié)合基于ArcGIS Server9.2的GIS應用程序開發(fā)實踐,在深入理解Arcgis Server9.2系統(tǒng)控件機制的基礎(chǔ)上,探討基于浮動面板式的界面設(shè)計中定制浮動面板控件的方法與技術(shù),給出具體的代碼實現(xiàn)流程,以期對同類應用開發(fā)提供一定的指導與借鑒作用。
關(guān)鍵字:人機交互;Arcgis Server9.2平臺;浮動面板;定制技術(shù)
中圖分類號:TP18文獻標識碼:A文章編號:1009-3044(2009)27-7668-02
ArcGIS Server9.2 Floating Panels in the Application Development Technology and Application of Customized
LI Jian1, HUANG Ying2
(1.Computer Technology Artistic Design Department, Jiangsu vocational and Technical College of Finance Economics, Huaian 223003, China; 2.East China Enstitute of Technology, Fuzhou 330013, China)
Abstract: HCI is the development of GIS applications need to be considered an important area,Determining the user experience of the Key Performance Indicators. This author of the article unifies application procedure development practice based on the ArcGIS Server9.2 GIS, On the basis of thoroughly understanding Arcgis Server9.2 systematic controlling part mechanism, Probe into method and technology of customizing the floating panel module in the interface design based on floating panels modes, Provide the concrete code and realizing procedure, expect to offer certain guidance and reference function for similar application and development.
Key words: HCI; Arcgis Server9.2 system; floating panel; technology of customizing
目前,GIS是一個使用非常廣泛的時空應用系統(tǒng)。涉及到國民經(jīng)濟生產(chǎn)和生活的各個領(lǐng)域,更涉及到相當多的企業(yè)與不同行業(yè)不同知識背景的人員。因此,軟件的人機交互設(shè)計,即軟件系統(tǒng)的人機交互界面的簡潔、友好與美觀就成為GIS開發(fā)中需要考慮的一種重要領(lǐng)域,包括軟件風格、框架及人機交互的操作控件等一系列的方法與技術(shù)應用,都是值得GIS軟件開發(fā)人員深入探討的問題。本文根據(jù)作者從事GIS軟件項目開發(fā)的實踐,就系統(tǒng)界面中的浮動面板交互模式進行了較系統(tǒng)的思考,并提出了浮動面板定制的優(yōu)化方法與技術(shù)實現(xiàn)流程。
1 浮動面板控件使用基礎(chǔ)
FloatingPanel控件:是一種用戶可以移動的浮動面板,使包含的內(nèi)容在頁面上能動態(tài)地顯示。此控件可以同標準ASP.NET控件等其他控件一起使用,用戶不能隨意改變面板中的內(nèi)容但能調(diào)整(包括打開、關(guān)閉、展開、折疊、移動、放大、縮小等)浮動面板。
在ArcGIS 9.2 Server Enterprise標題下選擇安裝ArcGIS Server for .NET的安裝程序,根據(jù)開發(fā)需要按提示完成安裝。程序安裝成功以后,Visual Studio 2005的工具箱中多了一個名為“ArcGIS Web Controls”的標簽,展開“ArcGIS Web Controls”我們可以發(fā)現(xiàn)有一個FloatingPanel控件。
使用FloatingPanel控件最直接的方法是打開工具箱,展開“ArcGIS Web Controls”標簽,拖放一個FloatingPanel控件到需要的地方,再調(diào)整控件的位置和大小既可。當然也可以在界面設(shè)計的源代碼中通過代碼生成。如:
以上代碼將生成一個標題為“數(shù)據(jù)關(guān)聯(lián)”、寬為598個像素,高為369個像素等屬性的浮動面板。
2 浮動面板控件的系統(tǒng)嵌入流程
要把浮動面板控件嵌入到應用系統(tǒng)中,除了把控件拖動界面上之外,還要進行相應的事件或函數(shù)的編程,在具體實現(xiàn)思路上,主要有兩種方法:
1)拖放一個FloatingPanel控件后,在FloatingPanel控件中再直接拖放其他子控件,程序代碼直接寫在當前頁面中。此方法操作、數(shù)據(jù)傳遞之間的關(guān)系相對簡單,但如果一個頁面中浮動面板很多時,代碼相對顯得繁多、混亂。
2)把FloatingPanel控件中的子控件事先做成一個自定義的用戶控件,程序代碼也寫在此用戶控件中,最后直接把此用戶控件從資源管理器中拖放到FloatingPanel控件中既可。此方法操作、數(shù)據(jù)傳遞之間的關(guān)系相對復雜,但各功能模塊之間獨立、系統(tǒng)結(jié)構(gòu)簡潔明了、便于維護并且用戶控件能重復使用。
在作者從事的GIS應用開發(fā)中使用的就是第二種方法,先在資源管理器中自定義了一個名為“DataRelation.ascx”的用戶控件,此控件包含了fp_DataRelation(數(shù)據(jù)關(guān)聯(lián))浮動面板中的所有子控件,功能代碼也寫在DataRelation.ascx控件中。DataRelation.ascx控件定義并保存好以后,再把其拖放到fp_DataRelation(數(shù)據(jù)關(guān)聯(lián))浮動面板中。
3 浮動面板控件的數(shù)據(jù)處理流程
1)浮動面板控件獲取系統(tǒng)界面數(shù)據(jù)的交互方式
在系統(tǒng)界面中,通過回調(diào)方式來控制FloatingPanel控件的顯示和關(guān)閉。顯示浮動面板使用以下語句段來表示:
CallbackResult cr = new CallbackResult(1, 1, \"javascript\", new object[] { \"showFloatingPanel('FloatingPanel1');\" });
this.Map1.CallbackResults.Add(cr);
而需要關(guān)閉浮動面板時,則使用以下回調(diào)語句段來關(guān)閉
CallbackResult cr = new CallbackResult(1, 1, \"javascript\", new object[] { \"hideFloatingPanel('FloatingPanel1');\" });
this.Map1.CallbackResults.Add(cr);
當然,對于浮動面板的控制,也可以用前臺前本來控制:
var mag = document.getElementById(\"FloatingPanel1\");
if (mag!=1)
{
showFloatingPanel('FloatingPanel1');
}
2)系統(tǒng)界面獲得浮動面板控件數(shù)據(jù)的方式
系統(tǒng)界面可使用腳本獲得FloatingPanel中子控件的值。如本例中ddl_LayerSelect(一個用來進行圖層選擇的DropDownList控件)放到fp_DataRelation(數(shù)據(jù)關(guān)聯(lián)浮動面板)中,用document.getElementById(ddl_LayerSelect).value;是取不到ddl_LayerSelect的值的。參數(shù)需要這樣寫'fp_DataRelation_ddl_LayerSelect',就可以取到值。在Page_Load事件中添加以下代碼,給ddl_LayerSelect增加一下出發(fā)腳本的事件。ddl_LayerSelect.Attributes[\"onchange\"] = \"javascript.:GetLayer()\";
腳本如下:
function GetLayer()
{
var argument=document.getElementById(' fp_DataRelation _ ddl_LayerSelect ').value;
}
通過上面的幾段簡單操作,就可以把浮動面板完全嵌入到應用系統(tǒng)中了。警務GIS應用系統(tǒng)中,浮動面板打開或展開前所圖1所示。
各浮動面板打開或展開后效果如圖2所示。
4 結(jié)束語
通過浮動面板方式的設(shè)置,使GIS應用系統(tǒng)具有專業(yè)化的簡潔、美觀而友好的交互界面,一方面,在相同的界面上極大的擴展了系統(tǒng)原本擁有的信息量,為用戶操作提供了更豐富的展示空間。同時,也為系統(tǒng)交互模式功能擴展提供了一個良好的接口。
總之,GIS應用系統(tǒng)開發(fā),應該是一個系統(tǒng)工程,涉及到方方面面的知識與技能。除了應保證系統(tǒng)的功能特性的完整性、正確性之后,更應關(guān)注GIS人交互方式的探討,才能構(gòu)建出一個以用戶為中心的應用軟件,實現(xiàn)從“應用軟件開發(fā)”到“提供服務”的策略的轉(zhuǎn)換。
參考文獻:
[1] 凌云,陳毓芬.基于用戶認知特征的地圖可視化系統(tǒng)自適應用戶界面研究[J].測繪學報,2005(3).
[2] 彭清山.GIS系統(tǒng)界面設(shè)計方法探討[J].城市勘測,2008(1).
[3] 趙斌.GIS中柔性圖形用戶界面的設(shè)計[J].測繪科學,2007(1).
[4] 施奈德曼.用戶界面設(shè)計--有效的人機交互策略[M].張國印,譯.4版.北京:電子工業(yè)出版社,2006.
[5] 軟件界面的美觀性及軟件的易用性[EB/OL].http://www.csai.cn.
[6] 淺談軟件的界面設(shè)計[EB/OL].http://www.eyuyan.com.cn/vbs/dispbbs.asp.