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