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

Introduction to jQuery Mobile

Tags:

Embed Size (px)

DESCRIPTION

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

Citation preview

Introduction jQuery MobileManesh Lad

Object-Oriented Sharks, LLC - www.oosharks.com

Thursday, June 28, 12

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

Introduction

Thursday, June 28, 12

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

Contact Information• Manesh Lad

• @maneshlad (twitter)

[email protected] (email)

• www.oosharks.com (website)

• the gadgetlad blog

• www.gadgetlad.com (website)

• @gadgetlad (twitter)

Thursday, June 28, 12

Consensus

• Who has used jQuery Mobile before?

• Who has used jQuery before?

• Who has used frameworks similar to JQM?

Thursday, June 28, 12

jQuery Mobile

Thursday, June 28, 12

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

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

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

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

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

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

JQM Gallery

Thursday, June 28, 12

Pre-built ComponentsUnified Mobile Styling

Thursday, June 28, 12

Thursday, June 28, 12

• Tabs & lists controls

• Think of a list like a uitableview

• Accordions - expandable sections

Thursday, June 28, 12

• Data entry widgets

• Picker

• Pop-up menu

• Provides controls like UIKit does in cocoa touch

Thursday, June 28, 12

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

Getting Started

Thursday, June 28, 12

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

jQuery Mobile DemosTest Pages in both iPhone & iPad Simulator

Thursday, June 28, 12

Basic HTML Pagedemo1 - 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

Adding a nav bardemo 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

Add list of contentdemo 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

jQuery Mobile / iOS

Thursday, June 28, 12

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

Demos

• DragonCoach Help Page

• Demo UIWebView Controller for displaying

• Demo DragonCoach My Apps

Thursday, June 28, 12

jQuery Mobile / PhoneGapWrap mobile jQuery Mobile app as native apps

Thursday, June 28, 12

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

Hardware Features accessible via web code

• JavaScript lib that is part of the phonegap/cordova project

Thursday, June 28, 12

Demos

• Phonegap SpeechTimerz

• PhoneGap My Website

Thursday, June 28, 12

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

Contact Information• Manesh Lad

• @maneshlad (twitter)

[email protected] (email)

• www.oosharks.com (website)

• the gadgetlad blog

• www.gadgetlad.com (website)

• @gadgetlad (twitter)

Thursday, June 28, 12