Going Mobile #1 - ASP.NET and jQuery Mobile

Going Mobile #1Going Mobile #1

Creating Web-based apps with ASP.NET, HTML5 and jQuery MobileCreating Web-based apps with ASP.NET, HTML5 and jQuery Mobile

Slides: http://bit.ly/codecamp_jqm

Who Am I ?Who Am I ?Who Am I ?Who Am I ?

• AuctionAnything.comAuctionAnything.com• ASP.NET/MS SQLASP.NET/MS SQL• jQuery/JavaScriptjQuery/JavaScript• Mobile DeveloperMobile Developer

• @MorningZ@MorningZ

Stephen GilboyStephen GilboyStephen GilboyStephen Gilboy

Slides: http://bit.ly/codecamp_jqm

Mobile MarketMobile MarketMobile MarketMobile Market

Slides: http://bit.ly/codecamp_jqm

Let’s Go Mobile!Let’s Go Mobile!Let’s Go Mobile!Let’s Go Mobile!

Next session we’ll discuss using HTML/CSS/JS as a “Native” app using PhoneGap

Slides: http://bit.ly/codecamp_jqm

Web ApplicationWeb ApplicationWeb ApplicationWeb ApplicationSlides: http://bit.ly/codecamp_jqm

jQuery MobilejQuery MobilejQuery MobilejQuery Mobilehttp://

www.jquerymobile.com

A unified, HTML5-based user interface system for all popular mobile device

platforms, built on the rock-solid jQuery and

jQuery UI foundation. Its lightweight code is built

with progressive enhancement, and has a flexible, easily themeable

design.

Slides: http://bit.ly/codecamp_jqm

Platform SupportPlatform SupportPlatform SupportPlatform Supporthttp://jquerymobile.com/original-graded-browser-matrix/

Slides: http://bit.ly/codecamp_jqm

Anatomy of a “Page”Anatomy of a “Page”Anatomy of a “Page”Anatomy of a “Page”A page in jQuery Mobile (jQM) is <div> on a single generated HTML page, think

of it like a stack of cards.

jQM takes care of the “stack” and the page transitions automatically.

“data” properties define the jQM objects

<div id=“Home” data-role=“page”>

Slides: http://bit.ly/codecamp_jqm

Demo Basic PageDemo Basic PageDemo Basic PageDemo Basic Page

Slides: http://bit.ly/codecamp_jqm

Theme-able from Theme-able from Web.ConfigWeb.Config

Theme-able from Theme-able from Web.ConfigWeb.Config

Use a custom base class to be able to set an “app wide” theme to your

project

http://www.4guysfromrolla.com/articles/041305-1.aspx

Slides: http://bit.ly/codecamp_jqm

Demo Base Class ThemeDemo Base Class Themeand more jQuery Mobileand more jQuery MobileDemo Base Class ThemeDemo Base Class Themeand more jQuery Mobileand more jQuery Mobile

Slides: http://bit.ly/codecamp_jqm

Consuming data via JSONConsuming data via JSONConsuming data via JSONConsuming data via JSONUsing the NewtonSoft JSON.Net Library, turn .NET

objects into JavaScript-consumable objects

http://james.newtonking.com/pages/json-net.aspx

Slides: http://bit.ly/codecamp_jqm

Demo JSON.NetDemo JSON.NetDemo JSON.NetDemo JSON.Net

Slides: http://bit.ly/codecamp_jqm

Wrap UpWrap UpWrap UpWrap Up

• Using your existing web Using your existing web skills, you can create a skills, you can create a robust mobile application.robust mobile application.

• jQuery Mobile does a lot of jQuery Mobile does a lot of the heavy lifting for you, the heavy lifting for you, simply define some simply define some properties on the DOM properties on the DOM objects and jQuery takes care objects and jQuery takes care of the rest !of the rest !

Slides: http://bit.ly/codecamp_jqm

Helpful LinksHelpful LinksHelpful LinksHelpful Links

jQuery Mobile Docs and Demoshttp://jquerymobile.com/demos/1.0.1/

jQuery Mobile Docs and Demos (upcoming functionality)http://jquerymobile.com/demos/test/

James Newton-King’s JSON.Net libraryhttp://james.newtonking.com/pages/json-net.aspx

28 HTML5 Features and Techniques (more “general” web stuff)http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/

jQuery Mobile Docs and Demoshttp://jquerymobile.com/demos/1.0.1/

jQuery Mobile Docs and Demos (upcoming functionality)http://jquerymobile.com/demos/test/

James Newton-King’s JSON.Net libraryhttp://james.newtonking.com/pages/json-net.aspx

28 HTML5 Features and Techniques (more “general” web stuff)http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/

Slides: http://bit.ly/codecamp_jqmhttp://bit.ly/codecamp_jqm

Contacting MeContacting MeContacting MeContacting Me

• Email:Email:sgilboy@auctionanything.comsgilboy@auctionanything.commorningz@morningz.commorningz@morningz.com

• LinkedIn:LinkedIn:morningz@morningz.commorningz@morningz.com

• Twitter: Twitter: @MorningZ@MorningZ

• Link to this content:Link to this content:http://bit.ly/codecamp_jqmhttp://bit.ly/codecamp_jqm

Slides: http://bit.ly/codecamp_jqmhttp://bit.ly/codecamp_jqm

Q & AQ & AQ & AQ & A

Slides: http://bit.ly/codecamp_jqmhttp://bit.ly/codecamp_jqm