Mobile Apps with jQuery Mobile
Kai Tödter Siemens Building Technologies
Who am I?
Senior Software System Architect at Siemens Building Technologies
Eclipse expert and OSGi enthusiast
Web Technology expert
Committer at several OSS projects
E-mail: [email protected]
Twitter: twitter.com/kaitoedter
Google+: gplus.to/toedter
Blog: toedter.com/blog
1/13/2014 2 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Show Hands!
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 3
Picture by lusi, http://www.sxc.hu/photo/1068224
Why jQuery Mobile?
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 4
Picture by beermug http://www.sxc.hu/photo/1393941
After this session I’ll get an Idea!
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 5
Picture by beermug http://www.sxc.hu/photo/1393939
Outline
jQuery Mobile Introduction
Showcases + Live Demo
Discussion and questions
1/13/2014 6 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License.
Key Features
Supports almost all devices that provide a Web Browser
“Mobile First” approach, but works also great on Desktop!
HTML Progressive Enhancement
Responsive Design
Common UI Widget Set, optimized for Touch
Great Theming Capabilities
…
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 7
Rock Solid Foundation
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 8
Picture by satty4u, http://www.sxc.hu/photo/890371
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 9
Picture by Egilshay http://www.sxc.hu/photo/1095604
Excellent Documentation
jQuery Mobile API Online Doc
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 10
jQuery Mobile API Online Demos
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 11
HTML Page Structure
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile.min.css" />
<script src="jquery.min.js"></script>
<script src="jquery.mobile.min.js"></script>
</head>
<body>
…
</body>
</html>
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 12
Play a Role!
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 13
Picture by miamiamia, http://www.sxc.hu/photo/1168590
data-role <div data-role="page" > <div data-role="header" > <h1>My Header</h1> </div> <div data-role="content" > <p>My Content</p> </div> <div data-role="footer" data-position="fixed"> <h4>My Footer</h4> </div> </div>
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 14
Hello jQuery Mobile!
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 15
Multi Page <body> <div data-role="page" id="foo"> <div data-role="content"> <p>View internal page called <a href="#bar">bar</a></p> </div> </div> <div data-role="page" id="bar"> <div data-role="content"> <p><a href="#foo">Back to foo</a></p> </div> </div> </body>
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 16
Widgets, Lots of Widgets…
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 17
List View Examples
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 18
List View
<ul data-role="listview">
<li><a href="acura.html">Acura</a></li>
<li><a href="audi.html">Audi</a></li>
<li><a href="bmw.html">BMW</a></li>
</ul>
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 19
Theming
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 20
Picture from http://www.sxc.hu/photo/1089931
http://jquerymobile.com/themeroller
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 21
http://www.jqmgallery.com
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 22
Plugins
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 23
Picture by klsa12, http://www.sxc.hu/photo/1269461
jQuery Mobile Plugins (1)
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 24
jQuery Mobile Plugins (2)
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 25
jQuery Mobile + HTML 5 Canvas
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 26
Download Builder
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 27
Roadmap
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 28
Picture by fcl1971 http://www.sxc.hu/photo/1081630
http://jquerymobile.com/roadmap/
Demo
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 29
Live Demos
https://github.com/toedter/jquery-mobile-demos
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 30
Picture by flaivoloka http://www.sxc.hu/photo/1159613
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 31
Picture from http://www.sxc.hu/photo/922004
License & Acknowledgements
This work is licensed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License
See http://creativecommons.org/licenses/by-nc-nd/3.0/de/deed.en_US
Thanks to Heiko Behrens for his great Device Screenshot Tools
Thanks to Gerrit Grunwald for his great steelseries, https://github.com/HanSolo/SteelSeries-Canvas
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 32
Picture Index
Slide “Application Model”: http://www.sxc.hu/photo/1168590
Slide “Rendering”: http://www.sxc.hu/photo/1263022
Slide “UI Styling”: http://www.sxc.hu/photo/1089931
Slide “Discussion”: http://www.sxc.hu/photo/922004
Slide “Excellent Documentation”: http://www.sxc.hu/photo/1095604
Slide “Show Hands”: http://www.sxc.hu/photo/1068224
Slide “Why”: http://www.sxc.hu/photo/1393941
Slide “After the session…”: http://www.sxc.hu/photo/1393939
1/13/2014 © Kai Tödter and others, Licensed under Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 Germany License. 33
Many thanks to the authors of the following pictures:
Recommended
