Introduction to jQuery Mobile

Intro to jQuery MobileSouth Bay Mobile User Group - 26 February 2013

Monday, February 25, 13

Introduction


Who Am I?

• Troy Miles

• Senior Software Engineer w/ 30+ years of experience

• Mobile/Mobile Web

• iOS, Android, & Windows Phone 7


Intermediate PhoneGap

• Learn by doing

• JS best practices, iScroll, Maps, Ajax + more

• Saturday, May 18th - 9 AM to 6 PM

• $99 - lunch & materials included

• http://bit.ly/XlxzYp

• CraveLab - Los Angeles


You May Get Mad At Me

• Sorry, in advance if I insult your favorite: company, device, or personality

• I have nothing against any of these companies

• I will gladly do a project for any of them, for the right price


Our Agenda

• The Mobile Space Today

• Getting Started with jQuery Mobile

• Understanding Page Architecture

• Creating jQuery Mobile Forms

• Working with Lists

• jQuery Mobile Events


Our Agenda

• Version 1.3.0

• Packaging for Distribution


The Mobile Space Today


85% of all US adults now own a mobile

phone


56% of all mobile phone owners in the

US access the internet.


Did you know 80% of customers abandon a mobile site if they have a bad user experience?


Web Apps Native Apps

Can migrate web skills Longer learning curve

One source base Many source bases

Deploy when you want Deployment needs approval

You choose when to update User chooses when to update

No device memory used Uses device memory

Difficult to monetize Monetization is built-in

Restricted device access Full access to device hardware

Slower Faster


What is a Web App?

• A web app is more than just a website

• It incorporates app-like behavior

• Think GMail or Google Maps


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 theme-able design.

Requires jQuery.


From Web to Mobile

• Your HTML/CSS skills are still valuable

• Good design is more important than ever


JQM & HTML5

• JQM doesn’t require you know HTML5

• JQM uses HTML5 when available

• Prefers semantic markup: header, footer, section


Getting Started with jQuery Mobile


Downloading JQM

• jquerymobile.com/download

• Use the uncompressed version while developing

• Use the minimized version for deployment

• Get the correct version of jQuery


Loading JQM<!DOCTYPE html><html><head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/ jquery.mobile-1.3.0.min.css"/> <script src="http://code.jquery.com/jquery-1.9.1.min.js"> </script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"> </script></head>


http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css

http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css

http://code.jquery.com/jquery-1.9.1.min.js

http://code.jquery.com/jquery-1.9.1.min.js

http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js

http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js

Self-hosting vs. CDN

• CDN = Content Delivery Network

• Can speed up app load two ways:

• CDN’s use edge servers

• May be cached by other apps


CDN Fallback Code<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.0.min.js"><\/script>');</script>


Understanding Page Architecture


Best Practices

• Downloading is slow so,

• Download as few files as possible

• Download as little data as possible

• Use a JS minifier


JQM Pages

• A single HTML page can contain many JQM Pages

• This allows page transitions without server contact


JQM Pages

• Pages are denoted with data-role=”page”

• Multiple JQM pages can be on an HTML page

• Only one page is active at a time

• $.mobile.activePage is the currently active page


Page Transitions

• Animate from one page to next

• Only work on platforms that support CSS 3D transforms

• Others will see only “fade”

• Android below version 4


Page Transitions

• fade

• pop

• flip

• turn

• flow

• and more


Toolbars

• Supports HTML5 header/footer tags

• Or via div tag with data-role

• data-role=”header”

• data-role=”footer”


Positioning Toolbars

• Toolbars will normally flow with the page

• data-position=”fixed”

• data-fullscreen=”true”


Navbars

• Denoted by data-role=”navbar”

• When a link is clicked, it gets the active state (ui-btn-active)

• JQM automatically sizes button

• 5 or less buttons, single line

• More than 5, two across


Navbars

• Can appear in headers

• Or footers

• Can be persisted

• Can have icons


Creating jQuery Mobile Forms


Form Basics

• Buttons

• Sliders

• Range Slider

• Flip Switch

• Checkboxes


Selects

• Select

• Mini select

• Custom select

• Multi-slect with optgroups+


Text

• Text input

• Textarea

• Number, date, tel, search

• File

• Password


Getting Data to the Server


Working with Lists


Listviews

• Unordered (ul)

• Ordered (ol)

• Linked

• Inset

• Filter

• List dividers


Listviews

• Autodividers

• Count bubbles

• Icons

• Thumbnails

• Formatted content


Nested listviews have been deprecated in version 1.3 - they will be removed in version 1.4.


jQuery Mobile Events


Events

• Touch events

• Orientation events

• Scroll events

• Page events


Touch Events

• swipe

• swipeleft

• swiperight

• tap

• taphold


Orientation Change

• orientationchange

• Not supported natively universally


Scroll Events

• scrollstart

• scrollstop


Page Events

• pageinit - use this instead of DOM ready()

• pagehide

• pageshow


Version 1.3.0


New Features

• Panels

• Responsive tables

• Range sliders

• Responsive grids

• Deprecated: nested lists


Packaging for Distribution


Hybrid Apps

• HTML5 web app

• Wrapped in a native app

• Usually adds a way to access native features

• Distributable in most app stores


Hybrid Apps

Can migrate web skills

One source base

Deployment needs approval

User chooses when to update

Uses device memory

Monetization is possible

Access to some device hardware

Faster than web, slower than device


Ways to Hybridize

• PhoneGap

• Icenium

• Others


PhoneGap

• Created by Nitobi, acquired by Adobe

• Open sourced as Apache Cordova

• PhoneGap is a trademark of Adobe


Icenium

• Also based on Apache Cordova

• Built by Telerik

• PhoneGap code runs unmodified

• Deploy directly to device

• Includes Kendo UI Mobile

• Free until May 1st


Others

• Appcelerator Titanium

• Trigger.io

• CodeName One

• (and still more)


Links

• jquerymobile.com

• jquerymobile.com/themeroller/

• phonegap.com

• www.icenium.com


http://jquerymobile.com/

http://jquerymobile.com/

http://jquerymobile.com/themeroller/

http://jquerymobile.com/themeroller/

http://phonegap.com/

http://phonegap.com/

http://www.icenium.com/

http://www.icenium.com/

My Links

• @therockncoder

• [email protected]

• http://therockncoder.blogspot.com/

• http://www.youtube.com/user/rockncoder

• https://github.com/Rockncoder


mailto:[email protected]

mailto:[email protected]

http://therockncoder.blogspot.com/

http://therockncoder.blogspot.com/

http://www.youtube.com/user/rockncoder

http://www.youtube.com/user/rockncoder

https://github.com/Rockncoder

https://github.com/Rockncoder

Questions?


Introduction to jQuery Mobile

Technology

Transcript of Introduction to jQuery Mobile