2012年12月24日 星期一

jQuery Mobile與ASP.NET實戰開發

jQuery Mobile與ASP.NET實戰開發


新書進入Review與排版階段, 預計明年2月問市。
作者:周季賢、許薰尹




第0章   導讀

jQuery Mobile是一個輕量級的JavaScript函式庫,能夠統一市面上常見行動裝置的使用者介面,讓各種不同行動裝置的使用者在瀏覽網站時,能夠以適合該裝置的畫面排版來檢視,並能夠使用接近一般原生應用程式的經驗來操作(Ex: 觸碰或滑動)。甚至能夠搭配PhoneGap來升級成各行動裝置(ex:Windows PhoneiPhoneAndroid)的原生應用程式(Native App)
jQuery Mobile的技術是用來強化網站用戶端(Client)能力,所以開發時勢必要搭配伺服器端(Server)的能力才能夠提供強大的資源(Ex:資料庫或複雜演算法計算)jQuery MobilejQueryjQuery UI為基礎,具有簡單容易使用的特性,內建佈景主題,可以與網站伺服端的程式緊密地整合,例如ASP.NET

內容概覽

本書分為兩篇:第一篇jQuery Mobile練功篇旨在介紹如何使用jQuery Mobile搭配部分HTML5標準來開發跨行動式裝置用網站的介面練功篇,並使用jQueryjQuery Mobile來開發用戶端功能(AJAX、特效、動態生成畫面)與事件(如滑動、碰觸)
第二篇《伺服端整合》則強調jQuery Mobile與伺服端應用程式的整合,搭配ASP.NET 4.5 Web FormsMVC 4設計網站應用程式,以及透過jQuery叫用服務導向類型的程式碼,像是Web ServiceWCF (Windows Communication Foundation)服務,以及.NET Framework 4.5版的ASP.NET Web API架構來設計RESTful網站應用程式。

 

第一篇:jQuery Mobile練功篇

 

第一章:認識jQuery Mobile

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

第二章:網頁設計與導向

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

第三章:jQuery Mobile工具列

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

第四章:使用jQuery Mobile API開發

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

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

了解HTML Form表單項目,以及用來設計使用者介面的ButtonTextPasswordTextAreaRadio ButtonCheckboxSelect等欄位。此外利用HTML5新增的emailurltelsearchnumbercolorrange欄位設計更適用於行動裝置瀏覽器顯示的網頁。

第六章:使用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 FormJQuery Moibile設計驗證網頁
11.  使用ASP.NET MVC 4開發JQuery Moibile行動式裝置網頁



28 則留言:

匿名 提到...

挖~好期待趕快上市喔, 我一定會買一本的

米米貓學開發 提到...

謝謝支持!!

匿名 提到...

恭喜新書上市,也祝您新年快樂!!
BR, ZGChen

米米貓學開發 提到...

陳老師!!謝謝您!!

承翰楊 提到...

米米貓你好!
想請問一下,如果phoneGap包裝成APP後,還可以透過Javascrip讀取URL參數嗎?

米米貓學開發 提到...

讀查詢字串嗎?可!

承翰楊 提到...

米米貓~請問你有樣書嗎@@~小弟可以先跟你買來參考嗎(偷跑可以嗎XD?)最近公司改用jquery mobile開發APP,想多一點參考資料,

我的E-mail是b96030152@gmail.com

米米貓學開發 提到...

Dear 承翰...
非常感謝你的支持,但這周在總校對,校完稿要月底才會送印刷場印呢!!

承翰楊 提到...

只能好好期待!
另外請教asp.net Mvc4開發的jquery mobile可以透過phonegap轉換成app嗎!
查文獻還滿難找到的QQ只有說要把邏輯層拆開重新設計==暈倒.....
http://stackoverflow.com/questions/13147404/converting-a-regular-mvc-site-for-use-in-phonegap
請問米米貓可以把在asp.net mvc4包裝成app嗎= =

米米貓學開發 提到...

不好意思呢,沒試過MVC轉PhoneGap這塊,我們書上沒有特別針對PhoneGap這塊去測試呢,可能要讓你失望了。

承翰楊 提到...

謝謝你回答XD~我文獻找了一個月了QQ~因為案子需求包裝成APP看來只能用html5 + CSS3開發了QQ,請問米米貓假如未來手機都支援html5,而利用asp.net Mvc 4開發手機網站程式,請問未來APP會不會消失?希望只是我單存做夢XDD

羅嘉文 提到...

我也想購一本XDD

米米貓學開發 提到...

To 承翰:
html5標準還沒完全制定哩,聽到最快也是2014年才會定案,這也是很令人頭大的問題。參考http://www.ithome.com.tw/itadm/article.php?c=78178

To嘉文:也感謝你的支持!!

匿名 提到...

今天天瓏開始預購了, 馬上訂了一本~期待中 :D

米米貓學開發 提到...

收到,卡到一個過年,又拖了好幾天...

chen ian 提到...

看了老師您的書:

除了phonegap 可以模擬 I phone 之外

那andriod 系統怎麼辨? 有對應的模擬器嗎?

我該找什麼軟體來模擬?

米米貓學開發 提到...

andriod 參考這邊
http://docs.phonegap.com/en/2.0.0/guide_getting-started_android_index.md.html

chen ian 提到...

許老師您好~ 看了您的書之後~
想再請教一個問題:

使用Jquery mobile +Asp
如果我自已用ASP 寫一個購物車~ 外加jquery
之後發佈之後,不管是anroid 系統 或iso
有沒有辨法相容在行動裝置上的app ?

簡單來說: 就是作ASP購物車+Jquery 網頁
轉成app 上架Google Play 而可以運行?

目前我只有用您書上的教學,使用HTML+Jquery 可以再搭配其他軟體作成App網頁~

米米貓學開發 提到...

參考一下phonegap

Chia-Chi 提到...

請問我買的是google play book版本的電子書的話
要去哪裡下載範例呢

米米貓學開發 提到...

您是不是找錯書了,我們這本書沒有上google play賣啊,您找的應該是顏色很像的另一本吧?

匿名 提到...

許老師, 你這本書已絕版了, 何處何買?

米米貓學開發 提到...

如果你可以到台北自取的話,我可以送你。

Oscar Lip 提到...

很感謝許老師的心意, 本人是在澳門的, 來台北可能不太容易了,
如許老師能郵寄給我, 我可以用 paypal 付妳郵費,
如不方便,不要緊,我也很感謝老師有這番心意.

匿名 提到...

您好...
這本書已經絕版了...
非常可惜...
請問能再向您購買嗎?
煩請email聯絡我...拜託拜託...
bruno@tlhome.com.tw

米米貓學開發 提到...

如果你可以到台北自取的話,我可以送你。

匿名 提到...

太感謝您了...(我家住台北)...
免費贈送是不必啦...我依照書的訂價與您購買就好了...
請問該怎麼與您聯絡呢?...
//公司私人資訊好像不太適合...
//可以麻煩您以email告訴聯絡方式嗎?...
//bruno@tlhome.com.tw
//造成不便...請您見諒...
真的非常非常感謝...

匿名 提到...

您好,請問一下
Ch9-02範例,關於Delete功能彈出視窗..

問題:若選擇刪除資料後,原本以下事件會無法invoke(新增、修改後仍正常)

$(".listitem").on('swiperight', function (event) {
$(".editPanel", this).slideDown(500);
});

總瀏覽量