SlideShare a Scribd company logo
1 of 33
Download to read offline
for fun and profit


jQuery Mobile © 2010 The jQuery Project                       http://jquerymobile.com/
Daniel Cousineau
Interactive Software Engineer @ RAPP
http://dcousineau.com/
@dcousineau
dcousineau@gmail.com
What Is jQuery Mobile?
Multi
     Platform
Images from jquerymobile.com
Touch-optimized & Themable
Images from jquerymobile.com
Mobile Web Framework

Unified User Interface
My Term: Half Stack
Widget Library
Touch Events
Project Status


 As of October 19th, 2011: RC2
 This talk centers around RC1
More Details
Built on jQuery
Lightweight (12k compressed)
Progressive Enhancement
HTML5
Accessibility baked-in (WAI-ARIA)
Modular & Theme-able
jQuery Mobile Primer
Provided
Interface elements
Simple device orientation detection
Tap & mobile events


DOES NOT PROVIDE Geo Location, Canvas, Local
Storage, etc.
  Remember: A ‘HALF’ STACK
<!DOCTYPE html>                                                                    <!DOCTYPE html>
<html>
                                                                                   <html>
    <head>
        <title>Page Title</title>                                                      <head>
        <link rel="stylesheet" href="/path/to/jquery.mobile.css" />                          <title>Hello World</title>
        <script type="text/javascript" src="/path/to/jquery.js"></script>
                                                                                             <script src="path/to/sencha-touch.js" type="text/javascript"></script>
        <script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
    </head>                                                                                  <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" />
    <body>                                                                                   <script type="text/javascript">
              <div data-role="page">
                                                                                                     new Ext.Application({
                  <div data-role="content">	                                                             launch: function() {
                      <p>Hello World.</p>	 	
                                                                                                             new Ext.Panel({
                  </div>                                                                                         fullscreen: true,
              </div>
                                                                                                                 html: 'Hello World!'
    </body>
</html>                                                                                                      });
                                                                                                         }
                                                                                                     });
                                                                                             </script>
                                                                                       </head>

                                                                                       <body></body>
                                                                                   </html>




                                                                                                         Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World
<!DOCTYPE html>                                                                    <!DOCTYPE html>
<html>
                                                                                   <html>
    <head>
        <title>Page Title</title>                                                      <head>
        <link rel="stylesheet" href="/path/to/jquery.mobile.css" />                          <title>Hello World</title>
        <script type="text/javascript" src="/path/to/jquery.js"></script>
                                                                                             <script src="path/to/sencha-touch.js" type="text/javascript"></script>
        <script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
    </head>                                                                                  <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" />
    <body>                                                                                   <script type="text/javascript">
              <div data-role="page">
                                                                                                     new Ext.Application({
                  <div data-role="content">	                                                             launch: function() {
                      <p>Hello World.</p>	 	
                                                                                                             new Ext.Panel({
                  </div>                                                                                         fullscreen: true,
              </div>
                                                                                                                 html: 'Hello World!'
    </body>
</html>                                                                                                      });
                                                                                                         }
                                                                                                     });
                                                                                             </script>
                 Semantic &                                                            </head>

                                                                                       <body></body>
                 Progressive Refinement                                            </html>




                                                                                                         Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World
In The Beginning

<!DOCTYPE html>
<html>
<head>
	   <meta name="viewport" content="width=device-width, initial-scale=1">
	   <title>Page Title</title>
	   <link rel="stylesheet" href="/path/to/jquery.mobile.css" />
	   <script type="text/javascript" src="/path/to/jquery.js"></script>
	   <script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head>
<body>

</body>
</html>
Configuration


Configuration ONLY in mobileinit listener

All mobileinit listeners defined BEFORE loading
jQuery Mobile
In The Beginning
<!DOCTYPE html>
<html>
<head>
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <title>Page Title</title>
	    <link rel="stylesheet" href="/path/to/jquery.mobile.css" />
	    <script type="text/javascript" src="/path/to/jquery.js"></script>
	    <script>
	    $( document ).bind("mobileinit", function() {
	        $.extend( $.mobile, {
	            configurationKey: configurationValue
	        });
	    });
	    </script>
	    <script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head>
<body>

</body>
</html>
Think In Pages

<div data-role=”page” />
Only 1 visible at any time
Multiple allowed per document
  You can write a single-file application
Contains header, footer, and content area
<!DOCTYPE html>
<html>
<head>
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <title>Page Title</title>
	    <link rel="stylesheet" href="/path/to/jquery.mobile.css" />
	    <script type="text/javascript" src="/path/to/jquery.js"></script>
	    <script>
	    $( document ).bind("mobileinit", function() {
	        $.extend( $.mobile, {} );
	    });
	    </script>
	    <script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
	   <div data-role="header">
	   	    <h1>Page Title</h1>
	   </div>

	    <div data-role="content">	
	    	   <p>Page content goes here.</p>	              	
	    </div>

	   <div data-role="footer">
	   	   <h4>Page Footer</h4>
	   </div>
</div>
</body>
</html>
Progressive Enhancement

Uses the HTML5 data-* attributes to auto-enhance
and configure widgets
data-role is now the center of your world.

E.g. To create a button, add a <a href=”#” data-
role=”button”>LABEL</a> and jQuery Mobile will
automagically set it up during page creation.
<!DOCTYPE html>
<html>
<head>
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <title>Page Title</title>
	    <link rel="stylesheet" href="/path/to/jquery.mobile.css" />
	    <script type="text/javascript" src="/path/to/jquery.js"></script>
	    <script>
	    $( document ).bind("mobileinit", function() {
	        $.extend( $.mobile, {} );
	    });
	    </script>
	    <script type="text/javascript" src="/path/to/jquery.mobile.js"></script>
</head>
<body>
<div data-role="page">
	    <div data-role="header">
	    	     <h1>Page Title</h1>
	    </div>


	    <div data-role="content">	
	    	   <a href="#">Normal Link</a>
	    	   <a href="#" data-role="button">Button</a>	 	
	    </div>

	    <div data-role="footer">
	    	    <h4>Page Footer</h4>
	    </div>
</div>
</body>
</html>
jQuery Mobile.com Docs


  http://jquerymobile.com/demos/1.0rc1
Load jQueryMobile JS      mobileinit

       domready

                       pagebeforechange

     pagebeforecreate        Enhance Page    pagecreate




          pagehide                          pagebeforeshow




      pagebeforehide         Navigate         pageshow



                          pagechange
Touch Events
 tap

 taphold

 swipe

 swipeleft

 swiperight

 orientationchange

 scrollstart

 scrollstop
Normalized “Virtual” Events
 vmouseover

 vmousedown

 vmousemove

 vmouseup

 vclick

 vmousecancel
Auto-‘AJAX’
By default, all local links get a click listener
Can be disabled
Overrides default action:
  Fires XMLHTTP request for target
  Pulls <div data-role=”page”></div> from
  results, inserts into DOM
  Transitions to displaying the new target page
Auto-‘AJAX’


By default, all local forms get a submission handler
Same process as links, only overriding for form submit
Auto-‘AJAX’

CAUTION: There is no baked-in way to pass
parameters to AJAX’ed pages
Sever side via GET requests to back-end
Use #page?key=value, manually parse window.location
Disable / override hash listener
Learn By Doing
Code Time...


https://github.com/dcousineau/jQuery-Mobile-For-Fun-And-Profit

            http://jquerymobile.com/demos/1.0rc1
Wrap Up
http://jqmgallery.com/
Resources


@jquerymobile
http://jquerymobile.com/blog/
http://jquerymobile.com/demos/1.0rc1
Advanced Learning


Panel / iPad Ready Layouts
 http://asyraf9.github.com/jquery-mobile/
http://joind.in/3762

More Related Content

What's hot

Client-side Transformations
Client-side TransformationsClient-side Transformations
Client-side TransformationsJohn Boxall
 
Symfony2 from the Trenches
Symfony2 from the TrenchesSymfony2 from the Trenches
Symfony2 from the TrenchesJonathan Wage
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginningAnis Ahmad
 
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Ayes Chinmay
 
Doctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document MapperDoctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document MapperJonathan Wage
 
Overview of The Scala Based Lift Web Framework
Overview of The Scala Based Lift Web FrameworkOverview of The Scala Based Lift Web Framework
Overview of The Scala Based Lift Web FrameworkIndicThreads
 
ZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODMZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODMJonathan Wage
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do MoreRemy Sharp
 
Symfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODMSymfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODMJonathan Wage
 

What's hot (17)

Client-side Transformations
Client-side TransformationsClient-side Transformations
Client-side Transformations
 
前端概述
前端概述前端概述
前端概述
 
Symfony2 from the Trenches
Symfony2 from the TrenchesSymfony2 from the Trenches
Symfony2 from the Trenches
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
 
J query training
J query trainingJ query training
J query training
 
jQuery
jQueryjQuery
jQuery
 
Doctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document MapperDoctrine MongoDB Object Document Mapper
Doctrine MongoDB Object Document Mapper
 
Overview Of Lift Framework
Overview Of Lift FrameworkOverview Of Lift Framework
Overview Of Lift Framework
 
Overview of The Scala Based Lift Web Framework
Overview of The Scala Based Lift Web FrameworkOverview of The Scala Based Lift Web Framework
Overview of The Scala Based Lift Web Framework
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 
ZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODMZendCon2010 Doctrine MongoDB ODM
ZendCon2010 Doctrine MongoDB ODM
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 
Alfredo-PUMEX
Alfredo-PUMEXAlfredo-PUMEX
Alfredo-PUMEX
 
Write Less Do More
Write Less Do MoreWrite Less Do More
Write Less Do More
 
Symfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODMSymfony Day 2010 Doctrine MongoDB ODM
Symfony Day 2010 Doctrine MongoDB ODM
 
RicoLiveGrid
RicoLiveGridRicoLiveGrid
RicoLiveGrid
 

Similar to jQuery Mobile: For Fun and Profit

20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React201920190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019Makoto Mori
 
C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱NAVER D2
 
Build Your First Java Jersey JAX-RS REST Web Service in less than 15 Minutes
Build Your First Java Jersey JAX-RS REST Web Service in less than 15 MinutesBuild Your First Java Jersey JAX-RS REST Web Service in less than 15 Minutes
Build Your First Java Jersey JAX-RS REST Web Service in less than 15 MinutesRobert Li
 
Java script page redirection
Java script   page redirectionJava script   page redirection
Java script page redirectionAbhishekMondal42
 
Desenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery MobileDesenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery MobilePablo Garrido
 
Javascript MVVM with Vue.JS
Javascript MVVM with Vue.JSJavascript MVVM with Vue.JS
Javascript MVVM with Vue.JSEueung Mulyana
 
Getting Started with React v16
Getting Started with React v16Getting Started with React v16
Getting Started with React v16Benny Neugebauer
 
Zen codingcheatsheet
Zen codingcheatsheetZen codingcheatsheet
Zen codingcheatsheetgoldenveizer
 
JavaServer Pages
JavaServer Pages JavaServer Pages
JavaServer Pages profbnk
 

Similar to jQuery Mobile: For Fun and Profit (20)

HelloWorld
HelloWorldHelloWorld
HelloWorld
 
Hello world
Hello worldHello world
Hello world
 
React
React React
React
 
20190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React201920190118_NetadashiMeetup#8_React2019
20190118_NetadashiMeetup#8_React2019
 
C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱C3 웹기술로만드는모바일앱
C3 웹기술로만드는모바일앱
 
Build Your First Java Jersey JAX-RS REST Web Service in less than 15 Minutes
Build Your First Java Jersey JAX-RS REST Web Service in less than 15 MinutesBuild Your First Java Jersey JAX-RS REST Web Service in less than 15 Minutes
Build Your First Java Jersey JAX-RS REST Web Service in less than 15 Minutes
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
Java script page redirection
Java script   page redirectionJava script   page redirection
Java script page redirection
 
Hybrid app
Hybrid appHybrid app
Hybrid app
 
Desenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery MobileDesenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery Mobile
 
Javascript - Beyond-jQuery
Javascript - Beyond-jQueryJavascript - Beyond-jQuery
Javascript - Beyond-jQuery
 
Let's react - Meetup
Let's react - MeetupLet's react - Meetup
Let's react - Meetup
 
Javascript MVVM with Vue.JS
Javascript MVVM with Vue.JSJavascript MVVM with Vue.JS
Javascript MVVM with Vue.JS
 
Getting Started with React v16
Getting Started with React v16Getting Started with React v16
Getting Started with React v16
 
Zen codingcheatsheet
Zen codingcheatsheetZen codingcheatsheet
Zen codingcheatsheet
 
JavaServer Pages
JavaServer PagesJavaServer Pages
JavaServer Pages
 
JavaServer Pages
JavaServer Pages JavaServer Pages
JavaServer Pages
 
servlet programming
servlet programmingservlet programming
servlet programming
 
Intro to JavaScript
Intro to JavaScriptIntro to JavaScript
Intro to JavaScript
 
Grooscript and Grails 3
Grooscript and Grails 3Grooscript and Grails 3
Grooscript and Grails 3
 

More from Daniel Cousineau

Git, an Illustrated Primer
Git, an Illustrated PrimerGit, an Illustrated Primer
Git, an Illustrated PrimerDaniel Cousineau
 
Disregard Inputs, Acquire Zend_Form
Disregard Inputs, Acquire Zend_FormDisregard Inputs, Acquire Zend_Form
Disregard Inputs, Acquire Zend_FormDaniel Cousineau
 
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!Daniel Cousineau
 
Automated Deployment With Phing
Automated Deployment With PhingAutomated Deployment With Phing
Automated Deployment With PhingDaniel Cousineau
 

More from Daniel Cousineau (6)

Git, an Illustrated Primer
Git, an Illustrated PrimerGit, an Illustrated Primer
Git, an Illustrated Primer
 
JavaScript Primer
JavaScript PrimerJavaScript Primer
JavaScript Primer
 
JavaScript Primer
JavaScript PrimerJavaScript Primer
JavaScript Primer
 
Disregard Inputs, Acquire Zend_Form
Disregard Inputs, Acquire Zend_FormDisregard Inputs, Acquire Zend_Form
Disregard Inputs, Acquire Zend_Form
 
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
NOSQL101, Or: How I Learned To Stop Worrying And Love The Mongo!
 
Automated Deployment With Phing
Automated Deployment With PhingAutomated Deployment With Phing
Automated Deployment With Phing
 

Recently uploaded

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarPrecisely
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Adtran
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 

Recently uploaded (20)

AI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity WebinarAI You Can Trust - Ensuring Success with Data Integrity Webinar
AI You Can Trust - Ensuring Success with Data Integrity Webinar
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™Meet the new FSP 3000 M-Flex800™
Meet the new FSP 3000 M-Flex800™
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 

jQuery Mobile: For Fun and Profit

  • 1. for fun and profit jQuery Mobile © 2010 The jQuery Project http://jquerymobile.com/
  • 2. Daniel Cousineau Interactive Software Engineer @ RAPP http://dcousineau.com/ @dcousineau dcousineau@gmail.com
  • 3. What Is jQuery Mobile?
  • 4. Multi Platform Images from jquerymobile.com
  • 5. Touch-optimized & Themable Images from jquerymobile.com
  • 6. Mobile Web Framework Unified User Interface My Term: Half Stack Widget Library Touch Events
  • 7. Project Status As of October 19th, 2011: RC2 This talk centers around RC1
  • 8. More Details Built on jQuery Lightweight (12k compressed) Progressive Enhancement HTML5 Accessibility baked-in (WAI-ARIA) Modular & Theme-able
  • 10. Provided Interface elements Simple device orientation detection Tap & mobile events DOES NOT PROVIDE Geo Location, Canvas, Local Storage, etc. Remember: A ‘HALF’ STACK
  • 11. <!DOCTYPE html> <!DOCTYPE html> <html> <html> <head> <title>Page Title</title> <head> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <title>Hello World</title> <script type="text/javascript" src="/path/to/jquery.js"></script> <script src="path/to/sencha-touch.js" type="text/javascript"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" /> <body> <script type="text/javascript"> <div data-role="page"> new Ext.Application({ <div data-role="content"> launch: function() { <p>Hello World.</p> new Ext.Panel({ </div> fullscreen: true, </div> html: 'Hello World!' </body> </html> }); } }); </script> </head> <body></body> </html> Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World
  • 12. <!DOCTYPE html> <!DOCTYPE html> <html> <html> <head> <title>Page Title</title> <head> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <title>Hello World</title> <script type="text/javascript" src="/path/to/jquery.js"></script> <script src="path/to/sencha-touch.js" type="text/javascript"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <link href="path/to/sencha-touch.css" rel="stylesheet" type="text/css" /> <body> <script type="text/javascript"> <div data-role="page"> new Ext.Application({ <div data-role="content"> launch: function() { <p>Hello World.</p> new Ext.Panel({ </div> fullscreen: true, </div> html: 'Hello World!' </body> </html> }); } }); </script> Semantic & </head> <body></body> Progressive Refinement </html> Sencha Touch © 2011 Sencha, Example from Sencha Touch Hello World
  • 13. In The Beginning <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> </body> </html>
  • 14. Configuration Configuration ONLY in mobileinit listener All mobileinit listeners defined BEFORE loading jQuery Mobile
  • 15. In The Beginning <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, { configurationKey: configurationValue }); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> </body> </html>
  • 16. Think In Pages <div data-role=”page” /> Only 1 visible at any time Multiple allowed per document You can write a single-file application Contains header, footer, and content area
  • 17. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, {} ); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <p>Page content goes here.</p> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html>
  • 18. Progressive Enhancement Uses the HTML5 data-* attributes to auto-enhance and configure widgets data-role is now the center of your world. E.g. To create a button, add a <a href=”#” data- role=”button”>LABEL</a> and jQuery Mobile will automagically set it up during page creation.
  • 19. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Page Title</title> <link rel="stylesheet" href="/path/to/jquery.mobile.css" /> <script type="text/javascript" src="/path/to/jquery.js"></script> <script> $( document ).bind("mobileinit", function() { $.extend( $.mobile, {} ); }); </script> <script type="text/javascript" src="/path/to/jquery.mobile.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div data-role="content"> <a href="#">Normal Link</a> <a href="#" data-role="button">Button</a> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div> </body> </html>
  • 20. jQuery Mobile.com Docs http://jquerymobile.com/demos/1.0rc1
  • 21. Load jQueryMobile JS mobileinit domready pagebeforechange pagebeforecreate Enhance Page pagecreate pagehide pagebeforeshow pagebeforehide Navigate pageshow pagechange
  • 22. Touch Events tap taphold swipe swipeleft swiperight orientationchange scrollstart scrollstop
  • 23. Normalized “Virtual” Events vmouseover vmousedown vmousemove vmouseup vclick vmousecancel
  • 24. Auto-‘AJAX’ By default, all local links get a click listener Can be disabled Overrides default action: Fires XMLHTTP request for target Pulls <div data-role=”page”></div> from results, inserts into DOM Transitions to displaying the new target page
  • 25. Auto-‘AJAX’ By default, all local forms get a submission handler Same process as links, only overriding for form submit
  • 26. Auto-‘AJAX’ CAUTION: There is no baked-in way to pass parameters to AJAX’ed pages Sever side via GET requests to back-end Use #page?key=value, manually parse window.location Disable / override hash listener
  • 32. Advanced Learning Panel / iPad Ready Layouts http://asyraf9.github.com/jquery-mobile/