02 building cross-platform mobile applications with jquery mobile / desarrollo de aplicaciones...
Post on 11-May-2015
4.027 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
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
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
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
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
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.
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
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>
Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 09 of 12
jQuery Mobile's navigation model
HTTP Request
index
page2
page3
page4
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
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
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
top related