客戶對産品品質非常滿意,是以在項目完成後又給我們另外一個訂單,即部署客戶程式到Windows智能手機裝置上。但是我們項目團隊成員以前都沒有這種開發經驗。我們的計劃是通過最小限度的修改現有程式代碼,使其可以運作在Windo智能手機上。
移動裝置Web應用工具箱(WebApplicationToolkitforMobileDevices)
我們選擇了微軟移動裝置Web應用開發工具箱作為解決方案。使用這個免費的工具,可以輕松将基于MVC架構的Web應用擴充到移動裝置上。
下載下傳位址:
該移動應用開發工具箱所需的環境要求是:
1、安裝微軟.NETFramework3.5SP1。
2、VisualStudio2008專業版或更高版本。你也可以下載下傳免費的微軟VisualWebDeveloper2008Express版。
3、如果你的作業系統是WindowsXP,則需要安裝同步軟體MicrosoftActiveSync,以實作開發環境和裝置模拟器之間的同步。
4、ASP.NETMVC架構,該架構也是免費的,你可以從MSDN或CodePlex上下載下傳。
5、WindowsMobileSDK6.0或更高版本。預設情況下,該SDK沒有模拟器映像檔案,你可從以下位址下載下傳:
在安裝了Web應用開發工具箱後,它将在你指定的位置建立一個名為WebAppToolkitMobile的檔案夾。打開WebAppToolkitMobile\VisualStudioTemplates檔案夾,輕按兩下MobileWebApplication.vsi檔案,将在VS2008中建立一個新MobileApplication模闆項目。打開你的VS2008,并從“我的模闆”分類中選擇MobileWebApplication項目模闆,并将你的項目命名為“TestMobileWebApplication”。另外根據向導要求增加一個單元測試項目。
看下解決方案浏覽器,它将有三個不同的項目。第一個項目名為“MobileCapableViewEngie”,它是一個類庫型項目,其輸出為一個主項目引用的程式集(.dll檔案)。在運作時中,這個程式集将根據浏覽器和裝置類型來決定展現哪一個視圖。
舉例來說,如果你想在你的asp.net應用中顯示一個員工清單,而且你也希望為手機應用浏覽器建立一個相同的清單,那麼你需要建立兩個不同的視圖。其中一個視圖供IE浏覽器使用,而另一個則是為手機網絡浏覽器所準備。你還可以為手機浏覽器建立定制化的視圖,因為手機和PDA顯示屏可能非常小。在多數情況下,開發者将為手機應用建立定制化的視圖。MobileCapableViewEngine類的ViewEngineResult函數确定運作時展現哪一個視圖。
那麼接下來,是要在Global.asax檔案的Application_Start事件中登記所有裝置和浏覽器類型。MobileCapableViewEngine程式集配置了兩個預設裝置檔案夾映射:其中的一個是針對iPhone,被映射到View\Home\Mobile\iPhone檔案夾,另一個是針對Windows手機,被映射到View\Home\Mobile\WindowsMobile檔案夾。在RegisterViewEngines函數中添加執行個體到引擎集合之前,開發者可以通過修改MobileCapableWebFormViewEngine類的DeviceFolders屬性,來實作删除或增加新檔案夾映射。請看以下代碼片段。
移植現有ASP.NET應用到手機
一旦裝置和視圖的登記完成,拷貝粘貼現有ASP.NETMVC架構應用(你希望移植到手機的項目)到TestMobileWebApplication項目中。反之,你也可以增加MobileCapableViewEngine程式集到你現有MVC項目中,以進行必要的修改。
下面我将用到之前使用MVC架構2.0建立的員工管理應用。這個應用有四個視圖:建立員工、編輯現有員工資料、顯示所有員工資料和顯示特定員工資料。在這之前我已經把員工管理應用中所有相關檔案拷貝到TestMobileWebApplication項目中,并對RegisterViewEngine函數進行了必要的修改。另外我還針對手機裝置建立了新的定制化視圖,并增加了一些針對手機應用的新管理頁面。我還在Content檔案夾下建立了分别針對普通浏覽器和手機浏覽器的不同CSS檔案。而且我對應用程式增加了錯誤處理功能。在增加了所有必需的元件後,如下圖所示。
在控制類中還需要進行另一處改動,此前對于任何Http請求,你的應用程式代碼需要将其重定向到特定視圖,現在你需要調用MobileCapableViewEngine類的FindView函數,這個函數能夠識别浏覽器類型,并将你的請求重定向到相應的定制化視圖。
使用模拟器測試你的應用
MicrosoftMobileSDK6.0已經安裝了相關模拟器。為了測試你的應用,首先你需要設定裝置管理器和模拟器。輕按兩下裝置模拟器管理程式(dvcemumanager.exe),它的存放路徑為:C:\ProgramFiles\MicrosoftDeviceEmulator\1.0。
如果你的本地系統是WindowsXP,你還需要配置MicrosoftActivesync。右鍵點選Windows工作列上的ActiveSync圖示,并選擇“OpenMicrosoftActiveSync”,從檔案菜單中選擇連接配接設定。參考圖4設定你的ActiveSync連接配接。然後在裝置模拟器管理工具中選擇“MobileClassicEmulator”并右鍵點選,選擇連接配接選項。這樣将會打開WindowsMobileClassicEmulator,首次打開可能需要40-45秒時間。右鍵點選運作的模拟器管理工具映像,并選擇Cradle選項激活ActiveSync,你将會看到一個同步向導界面。
不要選擇向導中的任何選項,點選完成。現在我們已經可以在WindowsMobileEmulator中測試應用。該模拟器如下圖所示。
現在回到VisualStudio編輯器中,按F5執行該Web應用。下圖顯示了普通IE浏覽器中的已有員工清單。
要想在微軟系統手機浏覽器中顯示相同的員工清單,我使用了一個定制化視圖,隻顯示員工資訊的部分内容。如下圖所示:
通過ASP.NETMVCFramework,我們可以靈活的向項目中增加新定制化視圖模闆。借助于文本模闆轉換工具箱(TextTemplateTransformationToolkit),你可以最大限度的定制你的ASP.NETMVC現有視圖模闆。