jQuery Mobile與ASP.NET實戰開發

jQuery Mobile與ASP.NET實戰開發

新書進入Review與排版階段， 預計明年2月問市。

作者：周季賢、許薰尹

第0章   導讀

jQuery Mobile是一個輕量級的JavaScript函式庫，能夠統一市面上常見行動裝置的使用者介面，讓各種不同行動裝置的使用者在瀏覽網站時，能夠以適合該裝置的畫面排版來檢視，並能夠使用接近一般原生應用程式的經驗來操作(Ex: 觸碰或滑動)。甚至能夠搭配PhoneGap來升級成各行動裝置(ex:Windows Phone、iPhone與Android)的原生應用程式(Native App)。

而jQuery Mobile的技術是用來強化網站用戶端(Client)能力，所以開發時勢必要搭配伺服器端(Server)的能力才能夠提供強大的資源(Ex:資料庫或複雜演算法計算)。jQuery Mobile以jQuery與jQuery UI為基礎，具有簡單容易使用的特性，內建佈景主題，可以與網站伺服端的程式緊密地整合，例如ASP.NET。

內容概覽

本書分為兩篇：第一篇《jQuery Mobile練功篇》旨在介紹如何使用jQuery Mobile搭配部分HTML5標準來開發跨行動式裝置用網站的介面練功篇，並使用jQuery與jQuery Mobile來開發用戶端功能(AJAX、特效、動態生成畫面)與事件(如滑動、碰觸)。

第二篇《伺服端整合》則強調jQuery Mobile與伺服端應用程式的整合，搭配ASP.NET 4.5 Web Forms、MVC 4設計網站應用程式，以及透過jQuery叫用服務導向類型的程式碼，像是Web Service、WCF (Windows Communication Foundation)服務，以及.NET Framework 4.5版的ASP.NET Web API架構來設計RESTful網站應用程式。

 

第一篇：jQuery Mobile練功篇

 

第一章：認識jQuery Mobile

了解如何下載、安裝jQuery Mobile，並了解如何使用WebMatrix 2與Visual Studio 2012開發工具來設計一個jQuery Mobile網頁，以及使用各式手機模擬器測試網頁。

第二章：網頁設計與導向

如何在一個HTML網頁中設計jQuery Mobile Page，並介紹如何以AJAX技術載入網頁導向其它網頁。透過網頁預先載入功能減少使用者等待網頁載入時間、使用對話盒顯示提示，讓使用者有更好的使用體驗。

第三章：jQuery Mobile工具列

設計適用於行動裝置上的網頁表頭、表尾工具列，以及瀏覽工具列讓使用者更容易瀏覽到其它網頁，或進行一些動作。透過jQuery Mobile內建的佈景主題系統來設定按鈕的樣式。

第四章：使用jQuery Mobile API開發

利用事件機制來攔截jQuery Mobile網頁的執行，或進行Page初始化動作。我們也可以攔截使用者操作行動裝置而觸發的事件，像是螢幕方向變更、長按按鈕、觸碰、滑動等等事件。

第五章：表單項目與Page資料傳遞

了解HTML Form表單項目，以及用來設計使用者介面的Button、Text、Password、TextArea、Radio Button、Checkbox、Select等欄位。此外利用HTML5新增的email、url、tel、search、number、color、range欄位設計更適用於行動裝置瀏覽器顯示的網頁。

第六章：使用ListView呈現大量資料

ListView可以呈現有序列表(ordered list)與無序列表(unordered list)，適合一次顯示多筆資料。本章將介紹ListView基本功能，如何進行客製化，使用Split Button List、巢狀式ListView、摺疊式列表，以及簡單的搜尋功能。

第七章：ListView進階開發

客製化ListView搜尋的篩選功能，自訂資料篩選的邏輯。利用jQuery動態建立ListView、以及ListView中的列表項目。

第二篇：伺服端整合實戰篇

 

第八章：整合ASP.NET Web Forms開發jQuery Mobile網站

ASP.NET 4.5 Web Forms可以應用在網站的設計，提供伺服器控制項來設計使用者介面，但並非所有控制項都適合搭配jQuery Mobile使用。本章探討如何在ASP.NET 4.5 Web Forms網站挑選適當的控制項來開發jQuery Mobile網頁，並整合主版頁面技術、佈景主題、探討多國語言網頁的設計，使用Session傳遞資料，以及ASP.NET 4.5新功能—JavaScript打包與壓縮功能。

第九章：整合ASP.NET Web Forms開發資料庫程式

探討如何在jQuery Mobile網頁透過ASP.NET以及.NET Framework函式庫取得伺服端資料庫的資料，此章分別使用ASP.NET資料來源模型、ADO.NET函式庫，以及ADO.NET實體資料模型(5.0)版來設計資料異動程式碼。較前版不同的是：ADO.NET實體資料模型(5.0)版使用T4樣版來產生Entity類別。

第十章：使用MVC 4開發jQuery Mobile網站應用程式

MVC開發架構讓程式設計師可遵循模型-檢視-控制器設計模式(Model-View-Controller Design Pattern)來建立網站應用程式，避免開發階段許多已知的問題。本章將介紹MVC 4基本觀念，了解Visual Studio 2012 MVC4專案中的目錄結構，並探討如何設計一個網頁，同時兼具行動版與桌面版，同時適用於行動裝置與一般電腦的瀏覽器來顯示，讓使用者可以自行切換想要使用的版本。本章最後以MVC架構來設計網站購物車範例做結尾。

第十一章：開發ASP.NET MVC4資料庫程式

撰寫符合MVC模式的資料庫存取程式，本章分別利用ADO.NET函式庫與ADO.NET實體資料模型來設計資料異動程式碼，進行資料的新增、刪除、修改、查詢作業。本章將使用ADO.NET實體資料模型5.0版的Code First新功能來建立資料存取程式碼，先手動建立Entity類別，再自動根據類別的定義來產生資料庫結構描述資訊和資料。

第十二章：使用服務導向程式

微軟在2002年.NET Framework第一個版本問市時，提供ASP.NET Web服務；在2006年推出了新一代的服務導向程式—WCF服務。於.NET Framework 4.5版推出時，針對REST開發風格以及資料的存取推出ASP.NET Web API，本章將要探討這三種服務導向程式技術和jQuery Mobile之間的整合。

附錄

• 附錄一：將mdf檔案附加到LocalDb
• 附錄二：使用伺服器總管將mdf資料庫附加到LocalDb
• 附錄三：Visual Studio 2012新功能(for jQuery Mobile)

•         HTML5智慧感知功能、程式碼片段、縮排等功能。

•         內容摺疊功能、色彩選擇器、CSS語法片段功能。

•         JavaScript增強的排版能力、XML註解、移至定義功能。

•         網頁開發與除錯的新功能、Page Inspector。

• 附錄四：密技與範例集

•         密技1：基本Mobile網頁範例

•         密技2：動態套用CSS範例

•         密技3：整合HTML5播放影片

•         密技4：整合Google地圖的jQuery Mobile網頁

•         密技5：拼圖程式範例

•         密技6：偵測用戶端瀏覽器

• 附錄五：PhoneGap

隨書光碟jQuery Mobile教學影片(Visual Studio 2010)

1.      初探JQueryMobile

2.      Jquery Moibile開發須知

3.      認識JQuery Moibile網頁

4.      JQuery Moibile網頁導向

5.      設計JQuery Moibile視覺化元件

6.      設計JQuery Moibile List View

7.      設計JQuery Moibile表單成員

8.      設計JQuery Moibile事件

9.      實作演練-使用JQuery Moibile呼叫Web Service並動態產生List View

10.  實作演練-使用ASP.NET Web Form與JQuery Moibile設計驗證網頁

11.  使用ASP.NET MVC 4開發JQuery Moibile行動式裝置網頁