This document discusses building cross-platform mobile applications using jQuery Mobile. It covers setting up jQuery Mobile, basic page structure using data roles, internal versus external pages, page transitions, creating dialogs, jQuery Mobile's navigation model of loading pages via Ajax calls rather than full page loads, and using RESTful web services with an example of Twitter's API.

1. Desarrollo de Aplicaciones Cross-
Platform para Dispositivos Moviles
Building Cross-Platform Mobile Applications
M.S.C. Raquel Vásquez Ramírez
M.S.C. Cristian A. Rodríguez Enríquez

2. Contenido
• Setup
jQuery
• Estructura
Básica
• Pagina
Interna
vs
Pagina
Externa
• Page
Transi<ons
• Crea<ng
dialogs
• jQuery
Mobile's
naviga<on
model
• Web
Service
Basics
(RESTFul)
• Ac<vidades
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 02 of 12

3. Setup jQuery
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 03 of 12
<link rel=”stylesheet” href=”js/jQueryMobile/
jQuery.mobile.theme-1.1.0.min.css” />
<script src=”js/jQuery-1.7.2.min.js”></script>
<script src=”js/jQueryMobile/jQuery.mobile-1.1.0.min.js”></script>
• Include jQuery Mobile CSS File
• Include jQuery
• Include jQuery Mobile JS File

4. Estructura Básica
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 04 of 12
<div
id=“pagina”
data-­‐role=“page”/>
<header
data-­‐role=“header”
data-­‐posi<on=“fixed”></header>
<div
data-­‐role=“content“></div>
<footer
data-­‐role=“footer”
data-­‐posi<on=“fixed”></footer>
</div>
Include data-role:
• page
• header
• content
• footer

5. Pagina Interna vs Pagina Externa
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 05 of 12
Note: #bar
=
page
id.
<p>View internal page called <a href="#bar">bar</a></p>
<a href="multipage.html" rel="external">Multi-page link</a>
Internal Page
External Page

6. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 06 of 12
Page transitions
The jQuery Mobile framework includes a set of six CSS-based transition
effects:
• slide
• slideup
• slidedown
• pop
• fade
• flip
Highlight: By
default,
the
framework
applies
the
right
to
leW
slide
transi<on.

7. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 07 of 12
Page transitions
To set a custom transition effect, add the data-transition attribute to the
link. Possible values include:
In addition, you can also force a "backwards" transition by specifying data-
direction="reverse" on your link.
<a href="index.html" data-transition="pop">I'll pop</a>
Note: specifying data-direction="reverse"
was
formerly
data-­‐back="true",
which
will
remain
supported
un<l
1.0

8. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 08 of 12
Creating Dialogs
Any page can be presented as a modal dialog by adding the data-
rel="dialog" attribute to the page anchor link.
When the "dialog" attribute is applied, the framework adds styles to add
rounded corners, margins around the page and a dark background to
make the "dialog" appear to be suspended above the page.
<a href="foo.html" data-rel="dialog">Open dialog</a>

9. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 09 of 12
jQuery Mobile's navigation model
HTTP Request
index
page2
page3
page4

10. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 10 of 12
jQuery Mobile's navigation model
HTTP Request
page1 page2
page4
Highlight: The
basic
workflow
with
page
loading
is
as
follows:
first,
a
page
is
requested
with
a
normal
HTTP
request,
and
subsequent
"pages"
are
then
requested
and
injected
into
that
page's
DOM.
page3
index

11. Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 11 of 12
Web Service Basics (RESTFul)
• HTTP Request
• Unique Endpoint (1 Operation)
• Plain Data (XML, JSON… format)
Case Study: Twitter API with OAuth

12. Ac<vidades
• Registrarse en Twitter
• Crear una App en Twitter
• Obtener Keys de Twitter
• Analizar servicios REST de Twitter
Building Cross-Plaftform Mobile Applications – jQuery Mobile
Slide 12 of 12