專刊內文

當前位置:首頁>專刊分享>內文

瀏覽次數 : 5879



 

EEP Mobile實例開發

訊光科技 / 顧琦

前言

JQuery Mobile,這個你不能不知的技術框架,它能夠幫助你快速開發出支援多種移動設備的Mobile應用及配合移動設備的使用者介面,它也是目前最流行的移動開發框架之一。隨著在JQuery在網頁開發上成為主流後,JQuery Mobile不僅給移動平台帶來JQuery核心程式庫,而且還提供了一個完整針對Mobile的JQuery 使用者介面框架。在VS2012版本中,同樣的微軟也將JQuery Mobile的框架放入VS2012中,並支援智慧感知功能(IntelliSense),對於VS的開發者是一大福音。 

EEP Mobile即是以JQuery Mobile為基礎的前端平台,類似EEP JQuery的方式來存取EEP A/P Server,透過Server端所包裝好的Model數據服務,將資料以JQuery Mobile方式呈現,以滿足各種不同大小的移動設備來顯示資料或進行資料編輯等。EEP Mobile也包裝好了常用的UI元件以及快速產生畫面的Wizard工具,這樣,對於不會HardCoding的程式師們來說提供了更為方便的開發方式。本篇文章中,我們將針對Mobile的這些元件,為大家做一個實例的開發。



開發 Sever端服務

首先在VS2012中,使用EEPWizard來產生一個sProducts的Server端服務,用來提供給Mobile Client端的Server資料存取服務。並在EEPNetServer的PackageManager上加入sProducts,如下圖,透過Wizard選擇Product的資料表後即可輕鬆產生一個Server端的DLL。

接著,請在前面產生的sProducts模組中,加入兩個infoCommand,並將它們的名字修改成Categories和Suppliers。且將它的SQL語法分別指向這兩個表。完成這個操作後,請重新建置sProducts。

接著,在EEPNetServer中將這個sProducts.dll模組,註冊到A/P Server中,如下:

 

發Mobile端頁面

接著我們就開始使用EEPWizard來產生所需要的Mobile頁面。將工具-〉EEPWizard打開,並選擇JQMobile Form。

選擇Mobile的模板(Template),我們選擇JQMobileSingle1,代表產生一個單檔的Mobile頁面,Mobile表單命名為bMobileProduct。

接下來,我們選擇所需要的Server端資料源(資料存取服務),選擇前面步驟所開發的sProducts。

最後,選擇在畫面中所需要顯示的欄位,按下Done,一個JQMobile的頁面就自動產生了。

以下為Wizard所產生的Mobile頁面,全部以元組件的方式包裝好,開發者只要設定屬性即可完成所有設計。

回到VS的方案總管中,打開MobileLogOn.aspx,將它在瀏覽器中瀏覽,登入帳號後,點開產品維護就可以得到這個最新的開發成果了。

 

改變Mobile頁面欄位

接下來我們就針對剛剛所產生的頁面中的一些欄位,來使用一些特定的元件來呈現不同的顯示風格與修改方式。我們選對編輯資料的DataForm來設定編輯的元件,如下:先對CategoryID(類別編號)設定它的Editor為selects(代表下拉選單),再點開EditorOptions來設定它的資料來源。

再來設定Discount(是否折扣),該欄位為bit類型,因此使用flipswitch元件來顯示true和false的功能。

最後,將Picture(照片)欄位Editor設定為file(代表可上傳檔案),同時在EditorOptions中設定上傳資料的路徑。設計完成保存網頁,我們的設計就完成了。

重新打開產品維護,在進入編輯狀態時,可以看到類別編號、是否折扣以及照片的欄位都相應的顯示出所需要的元件。

最後,我們發現照片欄位既然已經上傳了,那如何才能在Grid上顯示圖片呢?這時需要將JQDataGrid上的照片欄位對它的顯示格式進行一下修改。在Format屬性中設定:Image,Folder:Files/Photos,Height:200即可。

重新打開畫面,我們可以看到照片在瀏覽狀態下就會以圖片的形式顯示出來了。

 

結 論

透過上面的例子,我們會發現由於EEPWizard以及JQuery Mobile元件的整合,使得Mobile的設計變得簡單容易起來,對於許多剛剛接觸Mobile開發的設計者來説,基礎畫面只需要設定就可以快速的產生,相信會有更多的EEP使用者在這一個EEP Mobile產品裏感受到帶來的開發效率與便利。