Introduction to jQuery Mobile, presented at the following meet ups: Suncoast iOS Meetup (Tampa) - Tuesday at 6:30 PM Orlando iOS Developer Group - Yesterday at 7:00 PM

1. Introduction jQuery Mobile
Manesh Lad
Object-Oriented Sharks, LLC - www.oosharks.com
Thursday, June 28, 12

2. Outline
• Introduction
• Who am I? My Contact Info
• jQuery Mobile
• What, Why & How to get started
• jQuery Mobile/iOS - Use jQuery Mobile within you iOS Project
• jQuery Mobile/Phone Gap - Use jQuery Mobile for native apps
• Conclusion
Thursday, June 28, 12

3. Introduction
Thursday, June 28, 12

4. Who am I?
• 15 years of technical and leadership experience covering the full
software development lifecycle.
• jQuery Mobile, iOS, C# .Net (Web, Windows, Services, Office,
SharePoint), Lotus Notes, Project Management - PMP
• Tampa based consulting/freelance business www.oosharks.com
• Mobile instructor for Learning Tree:
• Designing Websites for Mobile Devices: Hands-On - 2315
• iPhone® and iPad® Programming: A Comprehensive Hands-
On Introduction - 2761
• Dragon boat paddler (Blue Dragons Team) - DragonCoach -
coaching app
Thursday, June 28, 12

5. Contact Information
• Manesh Lad
• @maneshlad (twitter)
• maneshlad@gmail.com (email)
• www.oosharks.com (website)
• the gadgetlad blog
• www.gadgetlad.com (website)
• @gadgetlad (twitter)
Thursday, June 28, 12

6. Consensus
• Who has used jQuery Mobile before?
• Who has used jQuery before?
• Who has used frameworks similar to JQM?
Thursday, June 28, 12

7. jQuery Mobile
Thursday, June 28, 12

8. What?
• Client side JavaScript framework for building
mobile web apps
• Based on the popular jQuery JavaScript library
• Free and open source
• Can integrate with any server side web technology
I.e. PHP, ASP.Net, JSP
• Simple & easy to learn if you have basic web skills
Thursday, June 28, 12

9. Why?
• Mobile web browser are fast growing, with tablets and
smartphone from a multitude of vendors fueling growth.
• Allows you access to the mobile market without writing
native code.
• Build web apps that automatically scale for different
devices, desktop to mobile to tablet
• Range of pre-built UI components for touch
• Proven, used by many large companies
Thursday, June 28, 12

10. Supported Platforms
• Supports majority of modern desktop, mobile, tablet and e-readers
browsers. Older browser are supported via progressive enhancement
• Progressive enhancement where the framework will provide a more
enhanced user experience the more capabilities the browser has
• Browsers are classified into grades
• A-grade – Full enhanced experience with Ajax-based animated page
transitions.
• B-grade – Enhanced experience except without Ajax navigation
features.
• C-grade – Basic, non-enhanced HTML experience that is still functional
Thursday, June 28, 12

11. A-grade – Full enhanced experience with Ajax-
based animated page transitions.
Apple iOS 3.2-5.0
• Android 2.1-2.3
• Android 3.1 (Honeycomb) – Tested on the Samsung Galaxy Tab 10.1 and Motorola XOOM
• Android 4.0 (ICS) – Tested on a Galaxy Nexus S. Note: transition performance can be poor on upgraded
devices
• Windows Phone 7-7.5 – Tested on the HTC Surround (7.0) HTC Trophy (7.5), LG-E900 (7.5), Nokia Lumia
800
• Blackberry 6.0 – Tested on the Torch 9800 and Style 9670
• Blackberry 7 – Tested on BlackBerry® Torch 9810
• Blackberry Playbook (1.0-2.0) – Tested on PlayBook
• Palm WebOS (1.4-2.0) – Tested on the Palm Pixi (1.4), Pre (1.4), Pre 2 (2.0)
• Palm WebOS 3.0 – Tested on HP TouchPad
• Firebox Mobile (10 Beta) – Tested on Android 2.3 device
• Chrome for Android (Beta) – Tested on Android 4.0 device
• Skyfire 4.1 - Tested on Android 2.3 device
• Opera Mobile 11.5: Tested on Android 2.3
• Meego 1.2 – Tested on Nokia 950 and N9
• Samsung bada 2.0 – Tested on a Samsung Wave 3, Dolphin browser
• UC Browser – Tested on Android 2.3 device
• Kindle 3 and Fire - Tested on the built-in WebKit browser for each
• Nook Color 1.4.1 – Tested on original Nook Color, not Nook Tablet
• Chrome Desktop 11-17 - Tested on OS X 10.7 and Windows 7
• Safari Desktop 4-5 - Tested on OS X 10.7 and Windows 7
• Firefox Desktop 4-9 – Tested on OS X 10.7 and Windows 7
• Internet Explorer 7-9 – Tested on Windows XP, Vista and 7
• Opera Desktop 10-11 - Tested on OS X 10.7 and Windows 7
Thursday, June 28, 12

12. B-grade – Enhanced experience except without
Ajax navigation features.
• Blackberry 5.0: Tested on the Storm 2 9550,
Bold 9770
• Opera Mini (5.0-6.5) - Tested on iOS 3.2/4.3
and Android 2.3
• Nokia Symbian^3 - Tested on Nokia N8
(Symbian^3), C7 (Symbian^3), also works on
N97 (Symbian^1)
Thursday, June 28, 12

13. C-grade – Basic, non-enhanced HTML experience
that is still functional
• Blackberry 4.x - Tested on the Curve 8330
• Windows Mobile - Tested on the HTC Leo
(WinMo 5.2)
• All older smartphone platforms and
featurephones – Any device that doesn’t
support media queries will receive the basic,
C grade experience
Thursday, June 28, 12

14. JQM Gallery
Thursday, June 28, 12

15. Pre-built Components
Unified Mobile Styling
Thursday, June 28, 12

16. Thursday, June 28, 12

17. • Tabs & lists controls
• Think of a list like a
uitableview
• Accordions -
expandable sections
Thursday, June 28, 12

18. • Data entry widgets
• Picker
• Pop-up menu
• Provides controls like UIKit does
in cocoa touch
Thursday, June 28, 12

19. Themeroller
• http://jquerymobile.com/themeroller/
• Allows you to create up to 26 color themes/
swatches for the UI components
• Lets you visually create CSS
Thursday, June 28, 12

20. Getting Started
Thursday, June 28, 12

21. How?
• Basic web skills: HTML, JavaScript, CCS
• IDE, your choice of web development tool
• Download the SDK from jquerymobile.com
• Online tutorials, books or classes
Thursday, June 28, 12

22. jQuery Mobile Demos
Test Pages in both iPhone & iPad Simulator
Thursday, June 28, 12

23. Basic HTML Page
Add References
• jQuery & jQuery Mobile JS & CSS
• <link rel="stylesheet" href="http://
code.jquery.com/mobile/1.1.0/
jquery.mobile-1.1.0.min.css" />
• <script src="http://code.jquery.com/
jquery-1.6.4.min.js"></script>
• <script src="http://code.jquery.com/mobile/1.1.0/
jquery.mobile-1.1.0.min.js"></script>
Thursday, June 28, 12

24. Basic HTML Page
demo1 - iPhone/iPad
<!DOCTYPE html>
<html>
! <head>
! <title>My Page</title>
! <meta name="viewport" content="width=device-width, initial-
scale=1">
! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/
jquery.mobile-1.1.0.min.css" />
! <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
! <script src="http://code.jquery.com/mobile/1.1.0/
jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
! <div data-role="header"><h1>My Page Header</h1></div>
! <div data-role="content"><p>Hello world</p></div>
! <div data-role="footer"><h1>&copy; 2012 Some Company, LLC</h1></
div>
</div>
</body>
</html>
Thursday, June 28, 12

25. Adding a nav bar
demo 2 - iPhone/iPad
<!DOCTYPE html>
<html>
! <head>
! <title>My Page</title>
! <meta name="viewport" content="width=device-width, initial-scale=1">
! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/
jquery.mobile-1.1.0.min.css" />
! <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
! <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></
script>
</head>
<body>
<div data-role="page">
! <div data-role="header"><h1>My Page Header</h1></div>
! <div data-role="content"><p>Hello world</p></div>
! <div data-role="footer" data-position="fixed">
! <div data-role="navbar">
! ! <ul>
! ! ! <li><a data-icon="home" href="#" data-transition="flow">Home</a></li>
! ! ! <li><a data-icon="grid" href="#" data-transition="flow">Products</a></li>
! ! ! <li><a data-icon="star" href="#" data-transition="flow" class="ui-btn-active
ui-state-persist">Services</a></li>
! ! ! <li><a data-icon="alert" href="#" data-transition="flow">About</a></li>
! ! </ul>
! </div>
! </div>
</div>
</body>
</html>
Thursday, June 28, 12

26. Add list of content
demo 3 - iPhone/iPad
<!DOCTYPE html>
<html>
! <head>
! <title>My Page</title>
! <meta name="viewport" content="width=device-width, initial-scale=1">
! <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
! <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
! <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div data-role="page">
! <div data-role="header"><h1>Services</h1></div>
! <div data-role="content">
! ! <ul data-role="listview" data-inset="false" data-theme="d" data-divider-theme="d">
! ! <li data-role="list-divider">Watches</li>
! ! <li><a href="http://www.citizenwatch.com/">Citizen Watches</a></li>
! ! <li><a href="http://www.midowatch.com/">Mido Watches</a></li>
! ! <li data-role="list-divider">Jewelry</li>
! ! <li><a href="http://tritonjewelry.com/">Triton Jewelry</a></li> !
! ! <li><a href="http://www.calvinkleininc.com/watchesandjewelry/">Calvin Klein Watches & Jewelery</a></li>
! ! <li><a href="http://www.chamilia.com/">Chamilia</a></li>
! ! </ul>
! </div>
! <div data-role="footer" data-position="fixed">
! <div data-role="navbar">
! ! ! <ul>
! ! ! ! <li><a data-icon="home" href="#" data-transition="flow">Home</a></li>
! ! ! ! <li><a data-icon="grid" href="#" data-transition="flow">Products</a></li>
! ! ! ! <li><a data-icon="star" href="#" data-transition="flow" class="ui-btn-active ui-state-
persist">Services</a></li>
! ! ! ! <li><a data-icon="alert" href="#" data-transition="flow">About</a></li>
! ! ! </ul>
! ! </div>
! </div>
</div>
</body>
</html>
Thursday, June 28, 12

27. My Sites/Apps Demo
Use Simulator iPhone,iPad
• www.oosharks.com
• www.gadgetlad.com on iPhone
• http://www.oosharks.com/demos/
speechtimerz/index.html
Thursday, June 28, 12

28. jQuery Mobile / iOS
Thursday, June 28, 12

29. What’s in it for iOS
Developers?
• Maybe you want to integrate web content into you own app via
a UIWebView.
• Suggested uses of jQuery Mobile within your app:
• Help pages, organize pages into a single html file
• Access company info in your app
• Leader boards or other server side info
• Access a web page that links to your other apps for sale
• The html files can be included in your app or run off a server
Thursday, June 28, 12

30. Demos
• DragonCoach Help Page
• Demo UIWebView Controller for displaying
• Demo DragonCoach My Apps
Thursday, June 28, 12

31. jQuery Mobile / PhoneGap
Wrap mobile jQuery Mobile app as native apps
Thursday, June 28, 12

32. What is PhoneGap?
• http://phonegap.com/ - Open source wrapper
for compiling mobile web apps as native apps
• Access to hardware features on 7 major
mobile platforms
• https://build.phonegap.com - compile web
project for other platforms in the cloud!
Thursday, June 28, 12

33. Hardware Features
accessible via web code
• JavaScript lib that is part of
the phonegap/cordova project
Thursday, June 28, 12

34. Demos
• Phonegap SpeechTimerz
• PhoneGap My Website
Thursday, June 28, 12

35. Conclusion
• jQuery Mobile is a powerful and easy to use technology
• Plays nice with other technologies - server side/native
• Look at Phonegap if you want to package up web apps
as native apps for device app stores
• There is a place for mobile web development in your
native iOS app development.
Thursday, June 28, 12

36. Contact Information
• Manesh Lad
• @maneshlad (twitter)
• maneshlad@gmail.com (email)
• www.oosharks.com (website)
• the gadgetlad blog
• www.gadgetlad.com (website)
• @gadgetlad (twitter)
Thursday, June 28, 12