Loading ...

jQuery Mobile Introduction & Tips To Get Started | CodeAsp.Net

jQuery Mobile Introduction & Tips To Get Started

 /5
0 (0votes)

I've been closely following the development on the jQuery mobile since it's announcement -- and now that jQuery Mobile 1.0 Alpha 2 has been released, I though it would be a good time to see how things are going to work with ASP.NET.  After taking a look through the documentation, I decided to dig in and start creating a mobile site for CodeAsp.Net.  After a few hours of tinkering, I've found that this is pretty easy stuff -- and VERY cool.  jQuery mobile does a nice job in making things super easy -- and working with jQuery mobile and ASP.NET is a breeze. 

Before diving in head first, I highly suggest that you take a look through ALL of the documentation.  Read through everything once or twice -- because while you're developing and beginning to learn jQuery mobile, you're going to be referring back to this documentation quite frequently ... and knowing where to look will save you a ton of time.

About the jQuery Mobile Documentation

At the time of writing this blog post, the documentation is a little sparse, here and there, and there are only few articles/blog posts that I could find on the Internet that helped.  Also, another thing about the documentation ... its all provided in a mobile website.  Which makes total sense ... but! ... there were many times that I wanted to do a "view source" of the webpage I was on to see exactly how the HTML is structured.  With the nifty jQuery navigation, where 'pages' are injected into the DOM of the default(or index) page, right clicking and doing a view source didnt work, it showed me the source of the default(or index) page ... not the actual page I wanted to view -- and using Firebug didnt help me much either, due to the markup that jQuery mobile adds in the background. 

So, to view the source of linked pages in the documentation, here what you can do:

  1. Lets say that you're on this page: (note the # hash)
    http://jquerymobile.com/demos/1.0a2/#docs/lists/lists-readonly.html
  2. To view the 'lists-readonly.html", simply remove the "#" from the URL and hit enter to load the page
    http://jquerymobile.com/demos/1.0a2/docs/lists/lists-readonly.html
  3. Now you can right-click and view the source

Tips & Suggestions for ASP.NET developers:

Hopefully, these tips will help you get up and running quickly.  Developing for a mobile device is a little different than creating webpages, especially the navigation and page flow -- which, in my opinion, mobile nagivation and page flow is more straight forward and much easier to use than a web page.

  1. If you dont already have one, get a mobile device (duh) ... or at least get an emulator ... and become familiar with mobile websites.  Having an iPhone for the past few years has provided me the familiarity to how some really great apps work, how the UI is layed out, how linking works, and what to expect when I click (or tap) on something.  And with the apps that everyone is accustomed to, like Facebook, Twitter, Flickr, etc., the users are going to expect certian things ... so keep this in mind.
  2. As I mentioned above, read ALL of the documentation ... then read it again.  And maybe one more time.  It's helpful to get as familiar as possible with it - it's only going to help you.
  3. Pay special attention to the "jQuery Mobile's navigation model" ... things work a little differently here in jQuery mobile than what most wed developers are used to.  This is going to help you when creating highly data dependant mobile sites.
  4. A mobile device is NOT like your desktop computer or laptop -- a mobile device is highly contextual, it's focused on "ease of use," less is more, the UI takes up the entire screen, and it's easy for users to get lost.
  5. A mobile device allows you to invent new ways to interact and work with data - so get out your thinking cap
  6. Planning - without planning, you're going to have issues.  Document as much as you can with flow charts or mobile UI mockups before you start coding.  It's going to help you find issues before they happen.
  7. Focus on fulfilling users needs, rather than focusing on creating solutions -- you want to move your users to information quickly

There you go, some tips, suggestions, etc to help you get started with jQuery Mobile.

And stay tuned for some more indepth posts on jQuery Moble.

 

Comments (3)

   
vivek_iit
awesome introduction Tim, I have been looking for some beginners post on jQuery mobile framework.jQuery rocks!
11/17/2010
 · 
by
   
hajan
Great!I've mentioned jQuery Mobile Framework in my MK Code Camp presentation as a {Surprise} to the attendees! Great to see other experts writing about this so soon.Thanks!
11/17/2010
 · 
by
   
JD
JD
Hi there, May i know how are you able to develop the .NET application using JQuery Mobile and view it in your iphone?I guess the only way is to publish it in a server and browse it using the safari in iphone right?Furthermore, is there any emulator that I could use with Visual Studio to preview the application without publishing to the server?Thanks!
12/27/2010
 · 
by
   
teisenhauer
You could become an apple developer ... they have an iphone emulator with their xcode, though you mush have a MAC.  There are also a bunch of iphone emulators out there:

https://www.google.com/search?sourceid=chrome&ie=UTF-8&q=iphone+emulator
4/23/2012
 · 
by
  • :*
  • :*
  • :
 *

Top Posts