jQueryMobile開發MicrosoftLearn

2024-11-23 00:00:00

860 674

設計完成之後，就可以看到jQueryMobile的網頁基本雛型了，如下圖在iOS模擬器中所示：

(以下圖示以iOS模擬器為範例)

jQueryMobile最有價值的部分之一，就是針對網頁外觀提供了各種視覺化的元素，並且可以讓我們再搭配HTML5標籤之後輕鬆的開發，以下為各視覺化元素的簡介：(部分圖片節錄至jQueryMobile官方網站)

1.文字輸入方塊

2.選取數值

3.設定開關

OffOn

4.RadioButton

Chooseapet:

核取方塊

6.清單方塊

Standard:7dayRush:3daysExpress:nextdayOvernight

7.簡易清單

8.複雜清單

如果要針對jQueryMobile做進一步的開發，事件是不可或缺的一項學習重點，最經常使用的就是Pageinit事件，該事件與JQUERY的$(document).ready()相似，提供給頁面中每一Page初始化使用，簡易的撰寫方式如下：

$('Page的ID').live('pageinit',function(event){//初始化該做的事情。});

另外特別的部份在於jQueryMobile也能針對行動式裝置提供專屬的事件，如滑動與觸摸事件，可供我們在開發時做各種設計。

基本上，jQueryMobile是針對前端(瀏覽器端)的介面與程式開發技術，而本身也不具備後端(伺服器端)的能力，所以如果要開發網頁應用程式，勢必要搭配其他技術。

ASP.NET本身就具兼具前後端的應用程式開發能力，但目前對於行動式裝置的前端部份支援，可以由jQueryMobile負責前端的畫面與程式執行能力，而ASP.NET只要處理後端即可。

使用ASP.NET開發搭配的jQueryMobile網站也有兩種選擇：

ASP.NETMVC在第四版針對jQueryMobile在開發上的支援大幅提升了，不僅是頁面樣板部分有直接提供，還針對行動裝置部份能夠在辨識後提供不同的畫面。

VisualStudio2012能夠在建立網站專案時提供ASP.NETMVC4的樣板，如下圖，專案範本可以先挑選ASP.NETMVC4Web應用程式：

選擇之後，還可進一步的選擇開發網站類型(如：網際網路應用式、本地網路應用程式或行動裝置應用程式)，如下圖：

DisplayModes可依照裝置提供不同的瀏覽畫面，設計方法很簡單：

A.至Global.asax的Application_Start事件處理常式內註冊裝置Ex:iPhone

DisplayModeProvider.Instance.Modes.Insert(0,newDefaultDisplayMode("iPhone"){ContextCondition=(context=>context.GetOverriddenUserAgent().IndexOf("iPhone",StringComparison.OrdinalIgnoreCase)>=0)});

B.依照裝置名稱建立對應action的網頁Ex:Index.iPhone.aspx，如下圖：

設計完成之後一般瀏覽器檢視就如下圖：

使用iOS模擬器檢視就變成另一張所提供的網頁，如下圖：

ViewSwitcher提供行動式裝置將瀏覽模式切換至一般瀏覽器的瀏覽模式的選擇，屆時行動裝置在檢視網頁時，除了提供專屬的畫面之外，還能提供切換回一般瀏覽器的檢視模式，如下圖，使用iOS模擬器檢視畫面時，會出現一個換回桌上型電腦瀏覽器的連結：

點選之後，就可以切換到桌上型電腦瀏覽器的檢視畫面，如下圖：

另外，也能夠切換回行動裝置的版本。

ASP.NETMVC4內建了Bundles功能，你可以ASP.NETMVC4範本所建立出來的網站資料夾"App_Start"下的BundleConfig.cs檔案中找到設定的程式碼，該功能的好處在於：

bundles.Add(newScriptBundle("~/bundles/jquerymobile").Include("~/Scripts/jquery.mobile*"));

如此就可以在檔案變更時，讓Bundles功能自動的替我們更新至每一張網頁。如下圖，當Scripts資料夾下的jQueryMobile函式庫檔案為jquery.mobile-1.1.0.js時，網頁則自動引用該版本標籤：

而當我們把Scripts資料夾下的jQueryMobile函式庫檔案改為jquery.mobile-1.1.1.js時，網頁則自動更新該版本函式庫的參考：

當jQueryMobile的出現讓行動裝置網頁開發更方便後，微軟也適逢其時的在2012年推出了VisualStudio2012；相較於前版，網頁開發強化最多的就是針對前端網頁開發的能力，包含了HTML、JavaScript與CSS的編輯與支援；因此VisualStudio2012的推出也正好讓透過jQueryMobile來開發行動裝置網頁設計師們，能有一個強大且方便的設計工具。

下文是針對VisualStudio2012開發jQueryMobile中會使用到的新功能來做介紹。

我們先針對HTML編輯部分來做介紹：

在VisualStudio2012中撰寫HTML網頁或Web表單時，預設即支援HTML5標準，除了加入的檔案上方會自動加上：

並且在設計網頁內容時，也會主動支援HTML5標籤，如下圖：

VisualStudio2012提供了HTML智慧型感知功能，並且支援HTML5的標籤，例如要加入HTML5的Canvas標籤時，鍵入”

除了智慧感知支援HTML5之外，程式碼片段功能在此版本也能夠支援部分HTML5標籤的輸入，例如在程式碼片段網頁選項中的HTML分類，就能夠挑選具有HTML5宣告的標記程式碼片段，如下圖：

在此版本的HTML編輯器中，提供了更方便的標籤縮排功能；經常我們在設計HTML標籤時，經常會不對齊、亂換行，如下圖：

而此時我們能在需要整理的最上層標籤上方找到一個tip方塊，此時會出現一個”格式項目”的選項，如下圖：

點選該項目之後，立刻就可將標籤自動縮排，完成後如下圖：

CSS部分在VisualStudio2012也提供了很多開發上的新功能：

以往在網頁上設計CSS語法時，只能將所有的CSS內容一次全部折疊，如下圖：

而在此次版本內，能夠針對內部的每一個選擇器來做摺疊，如此就能夠更方便的整理文件內容了，如下圖：

此版本的CSS語法中，如果需要加入色彩值時，如下圖：

此時可輸入”#”或是”rgb"(這兩組文字，便可開啟色彩選擇器)，如下圖：

如果需要挑選更多樣化一點的顏色，可以按下選擇器又方的向下箭頭，或是鍵盤的向下鍵，便可開啟進階選擇器，如下圖：

開啟進階選擇器之後，除了可以選擇更細緻的顏色，還可以用滴管工具來挑選系統畫面上的任何一處的顏色，另外還有透明度可供調整。

CSS在設計時，VisualStudio2012能夠提供程式碼片段能力，並且提供說明文字，而利用程式碼片段功能加入CSS語法時，語法片段還會加入不同前置詞的設定來供跨瀏覽器使用，例如當我們要使用該片段來輸入透明度時，如下圖：

選擇了該片段按下”Tab”鍵兩次，語法片段就會被加入，如下圖：

而設定中-moz開頭的設定便是給Mozilla相容的瀏覽器看的。

VisualStudio2012這個版本最令人驚艷的部分之一，就是大大加強了JavaScript的編輯能力。以往在編寫JavaScript的程式碼時，常常都讓我們在開發時都有感覺到”是不是可以再加強一點，就像是寫VisualBasic或C#”

相信微軟聽到了我們的心聲，終於在VisualStudio2012將一直以來我們在開發VisualBasic或C#語言時可以使用的各種方便的編輯功能，像是”移至定義”、程式自動縮排功能、”智慧感知”…等等，整合至JavaScript編輯工具中，讓我們能夠在開發JavaScript時，更容易找尋到程式碼，且便於管理。

以下是關於JavaScript在此版本的新功能：

VisualStudio2012在撰寫JavaScript程式中的function時，游標停留在function開頭的「{」號，或結尾的「}」時，JavaScript編輯工具就會自動將對應的括號反白顯示，如下圖所示：

若輸入程式碼，也會自動進行縮排，當在JavaScript程式區塊中撰寫完程式碼，並按下鍵盤「Enter」鍵時，工具就會自動排版程式碼，如下圖所示：

VisualStudio2010的JavaScript編輯工具，提供ECMAScript3標準的驗證機制，能夠協助我們檢查撰寫完的JavaScript程式碼是否有符合ECMAScript3規範。

而VisualStudio2012，則遵循新的ECMAScript5標準。

ECMAScript5標準中新增一個名為”StrictMode”的功能，可以讓你的程式碼執行在更嚴謹的環境中，能夠避免瀏覽器執行到不安全的程式碼，或丟出例外。

例如在函式中宣告一個物件，而該物件的兩個屬性名稱重複了，若沒有使用StrictMode功能，VisualStudio2012的JavaScript編輯工具不會顯示任何問題。如下圖所示：

而如果在函式第一行加上"usestrict"來啟用strict模式，則當宣告的物件屬性名稱重複時，VisualStudio2012的JavaScript編輯工具會自動進行語法的驗證，並回報問題，如下圖所示：

另外，在「錯誤清單（ErrorList）」視窗便會顯示警告訊息，如下圖所示：

VisualStudio2012的JavaScript能夠像C#及VisualBasic程式語言一樣，利用XML註解來加上程式的說明了，不過做法與C#及VisualBasic不太一樣，不是寫在函式上面，是寫在函式”裡面”，加入的方式可以選擇程式碼片段功能或自行鍵入。

如果要使用程式碼片段功能，可以在程式碼片段功能中的”XMLComments”分類中找到，如下圖所示：

而程式碼片段功能就能自動偵測該函式的”name”參數，並替我們加入一行”param”項目來針對輸入的參數提供註解功能，如下圖所示：

另外也可以加入”summary”項目來提供函式說明，如下圖，我們加入了一個”summary”項目，並將函式說明設定為”打招呼”：

如此，在使用該函式時，VisualStudio2012便會自動顯示XML註解中的說明，如下圖所示：

另外，也可以使用”signature”項目來提供函式多載（Overload）的註解說明。

當我們在開發C#及VisualBasic程式語言時，能夠用”移至定義”功能來尋找到程式碼中所使用到的函式或類別的定義。現在VisualStudio2012的JavaScript編輯器也提供該功能，JavaScript編輯器的”移至定義”功能能夠協助我們尋找變數與函式的定義，例如在程式碼中呼叫到SayHello函式，如果希望能夠檢視該函式的定義，可以按下滑鼠的右鍵，選擇”移至定義”，如下圖：

如此工具就會游標切換至該函式定義所在的位置（就算在外部的js檔亦可），如下圖所示：

除了上述的三種編輯器能夠提供我們在開發jQueryMobile的幫助之外，VisualStudio2012還有提供其他開發與除錯上的新功能，例如Multibrowser支援、PageInspector、WAI-ARIA支援等等，以下是其他開發與除錯上新功能的介紹：

VisualStudio2012能夠讓我們挑選用安裝於系統中的任一個瀏覽器來測試網頁結果。此功能讓我們在開發網站應用程式時，可使用各家瀏覽器的來測試網頁輸出的結果是否如預期。該功能會在開始偵錯按鈕旁邊，如下圖所示：

你也可以選擇最下方的”瀏覽方式”選項，開啟瀏覽器選擇視窗，並搭配Ctrl鍵來同時選擇多個瀏覽器，並設為預設值，如下圖所示：

如此除錯列就會顯示為"多重瀏覽器"，如下圖：

而當要對某張網頁要按下右鍵選擇瀏覽時，選單中也會顯示"多重瀏覽器"。如下圖：

點選後就如下圖，一次就開啟了GoogleChrome、InternetExplorer與PageInspector：

但是當要開始偵錯時，就只能挑一個瀏覽器。按下開始偵錯的按鈕，VisualStudio2012會跳出選擇視窗來讓你挑選一瀏覽器當作偵錯的依據，如下圖：

VisualStudio2012在這個版本提供了強而有力的網頁測試與偵錯工具”PageInspector”，該工具能夠讓我們檢視網頁（包含HTML,WebForms,ASP.NETMVC,orWebPages）在執行時期的狀態，像是網頁所使用到的相關檔案列表、CSS的套用或關閉與伺服器控制項的對應等等。接下來介紹PageInspector的相關功能。

WAI-ARIA(AccessibleRichInternetApplicationsSuite)是W3C所制定中的一個標準，此標準設置的目的是希望能夠讓身障人士更容易存取使用Ajax、HTML、JavaScript等技術所設計的網站或網際網路的內容。而VisualStudio2012現在已經支援這個標準。

市場在改變，行動裝置應用程式開發目前已經變成一門顯學，如果希望以現有的網站開發技術觀念來快速並簡易地開發跨行動裝置的輕量型應用程式，那麼jQueryMobile搭配ASP.NET是您的最佳選擇。本文也介紹了針對jQueryMobile開發，VisualStudio2012開發工具所提供的新功能。如果您也在開發jQueryMobile，那您一定不能錯過VisualStudio2012。