jquery Mobile for dummies

(1)

jQuery Mobile for dummies

(featuring AC/DC's Let there be rock)

Daniel de la Mata

[email protected] @danimataonrails danimataonrails.blogspot.com camerawc.guatdefak.com yumit.com/danimata

(2)

In the beginning, back in nineteen fifty five

www.facturagem.com

Rails 3

jQuery 1.5.1 / jQuery-ui 1.8.12

Restful API

(3)

Man didn't know 'bout a rock 'n' roll show

'N all that jive

mobile.facturagem.com

Tecnología a elegir

Interfaz móvil

API demo

***

1 persona / 2 semanas

***

(4)

The white man had the schmaltz, The black man

had the blues

alternativas

Spine.js / Backbone.js

Sencha Touch

jQuery Mobile

JQTouch

***

Titanium

PhoneGap

(5)

No one knew what they were gonna do but

Tschaikovsky had the news

entorno

Windows IDE = [consola, notepad++, gimp]

conocimiento previo, puesta en marcha rápida

jQuery / jQuery UI

soporte, documentación, apoyo

jquerymobile.com

y...

(6)

He said...

jQuery and jQuery UI

Compatible (A, B, C)

HTML5

Ligero / Modular

Progressive Enhancement

Ajax Navigation / One page apps

(7)

(silence)

Ejemplos

http://danimata.com/codemotion/examples.html

Todo y más en

http://jquerymobile.com/

(8)

Let there be sound...

<!DOCTYPE html>

<title>Este es mi título (que luego igual no se ve)</title>

<meta name="viewport" content="width=device-width,

initial-scale=1">

(9)

and there was sound

(10)

Let there be light...

<div

data-role

="

page

">

<div

data-role

="

header

">

<h1>

Cabecera de la página

</h1>

</div>

<div

data-role

="

content

">

<p>

Contenido de la página

</p>

</div>

<div

data-role

="

footer

">

<h4>

Pie de página

</h4>

</div>

(11)

...and there was light

(12)

Let there be drums...

<div data-role="page" id="one"

data-title="Uno">

</div><!-- /header →

<p><a href="#two">dos</a></p> <p><a

href="#three">tres</a></p> </div><!-- /content →

</div><!-- /footer →

</div>

<div data-role="page" id="two"> ...

<p><a href="#one">volver</a></p> ...

<div data-role="page" id="three"> ...

<p><a href="#jander" data-rel="back"> volver</a></p> ...

(13)

...and there was drums

(14)

Let there be guitar...

</div><!-- /header →

<p><a href="#two">dos</a></p> <p><a href="#three"

onclick="$.mobile.changePage('#three');

return false;">tres</a></p>

</div><!-- /content →

</div><!-- /footer →

</div>

...

volver</a></p>

...

...

<p><a href="#one"

data-direction="reverse">volver</a></p>

...

...

<p><a href="#one">volver</a></p>

<p><a href="#jander" data-rel="back">volver

</a></p>

volver</a></p>

cerrar</a></p>

...

(15)

...and there was guitar

(16)

Let there be Rock!

(17)

(guitar solo)

Transiciones y modales

<a

href

="popup.html"

data-transition

="pop"

>Pop it</a>

<a

href

="alert.html"

data-rel

="dialog"

>Alert!</a>

$mobile.defaultPageTransition = 'pop'; $mobile.defaultPageTransition = 'slide';

['fade', 'pop', 'flip', 'turn', 'flow', 'slide', 'slideUp', slideDown']

$.mobile.changePage('#id');

http://jquerymobile.com/demos/1.1.0-rc.1/docs/pages/page-transitions.html

Precarga

<a

href

="prefetchThisPage.html"

data-prefetch

>Enlace</a>

(18)

And it came to pass that rock 'n' roll was born

Botones I

Tags button, input[type=button] e input[type=submit] reciben estilo automáticamente

$('[type='submit']').button();

//just in case

Los enlaces pueden coger el mismo estilo

<a

href

="index.html"

data-role

="button"

>

Ir

</a>

Algunas opciones

data-corners

="true|false"

data-inline

="true|false"

data-shadow

="true|false"

(19)

All across the land every rockin' band

Botones II

Iconos predefinidos y customizables

<a

href

="index.html"

data-icon

="delete"

>

Ir

</a>

Predefinidos

arrow-r, arrow-l, arrow-u, arrow-d, delete, plus, minus,

check, gear, refresh, forward, back, grid, star, alert,

home, search

Algunas opciones

data-iconpos

="left|right|bottom|top|notext"

(20)

Was blowin' up a storm

Botones III

Grupos

<div

data-role

="controlgroup"

>

<a

href

="#index"

data-role

="button">

Yes

</a>

<a

href

="#index"

data-role

="button">

No

</a>

<a

href

="#index"

data-role

="button">

Maybe

</a>

</div>

Horizontal

(21)

The guitar man got famous,the business man got rich

(22)

And in every bar there was a superstar

Header Toolbar

<div

data-role

="header"

data-position

="fixed">

<a

href

="#none"

data-icon

="back">

Volver

</a>

<h1

>Hader bar</

h1>

<a

href

="#none"

data-icon

="forward">Seguir</a>

</div>

Algunas opciones

(23)

With a seven year itch

Footer Toolbar

<div

data-role

="footer"

data-position

="fixed"

class="ui-bar"

>

<a

href

="index.html"

data-role

="button"

data-icon="arrow-u">

Subir

</a>

<a

href

="index.html"

data-role

="button"

data-icon

="arrow-d">

Bajar

</a>

<a

href

="index.html"

data-role

="button"

data-icon

="arrow-l">

Izquierda

</a>

<a

href

="index.html"

data-role

="button"

data-icon

="arrow-r">

Derecha

</a>

</div>

Algunas opciones

(24)

There was fifteen million fingers

Navbar

<div

data-role

="navbar"

>

<ul>

<li><a

href

="#none"

data-role

="button"

data-icon

="plus"

class

="ui-btn-active"

>

añadir

</a></li>

<li><a

href

="#none"

data-role

="button"

data-icon

="minus">

eliminar

</a></li>

<li><a

href

="#none"

data-role

="button"

data-icon

="check">

aceptar

</a></li>

</ul>

</div>

(25)

Learnin' how to play

(26)

And you could hear the fingers pickin'

Listas

<ul

data-role

="listview"

>

<li><a

href

="#one">

Uno

</a></li>

<li><a

href

="#two">

Dos

</a></li>

<li><a

href

="#three">

Tres

</a></li>

</ul>

Numeradas

<ol

data-role

="listview"

>...</ol>

Separadores

<li

data-role

="list-divider"

>...</li>

Filtro

(27)

And this is what they had to say

(28)

Let there be light

Formularios I

<div data-role="fieldcontain" class="ui-hide-label"> <label for="login">login</label>

<input type="text" name="login" id="login" value=""

placeholder="login"/> </div>

<div data-role="fieldcontain" class="ui-hide-label"> <label for="password">password</label>

<input type="password" name="password" id="password" value=""

placeholder="password"/> </div>

<div data-role="fieldcontain" class="button"> <button type="submit">acceder</button>

</div> </form>

(29)

sound

Formularios II

<option value="s">pequeño</option> <option value="m">mediano</option> <option value="l">grande</option> </select>

(30)

drums

Formularios III

<input type="radio" name="r1" id="c1" value="1" checked="checked" /> <label for="c1">Piedra</label>

<input type="radio" name="r1" id="c2" value="2" /> <label for="c2">Papel</label>

<input type="radio" name="r1" id="c3" value="3" /> <label for="c3">Tijera</label>

(31)

and guitar

(32)

Let there be Rock!

(33)

(guitar solo)

Markup

<label for="login">login</label>

</div>

<div data-role="fieldcontain" class="ui-hide-label"> <label for="password">password</label>

</div>

<div data-role="fieldcontain" class="button"> <button type="submit">acceder</button>

</div> </form>

(34)

(Angus' on the floor)

Js

$("#login-form").submit(function(event){

event.preventDefault();

$.ajax('https://facturagem.com/api/session',

{

type: '

POST

',

dataType: '

json

',

cache: false,

data:

$(this).serialize()

,

success: function(data) {

},

error: function(){

}

);

(35)

(Angus' flying)

(36)

One night in a club called the Shakin' Hand

CORS

cross origin resource sharing

http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

●

El navegador envía una petición OPTIONS (pide permiso)

●

El servidor la recibe, toma una decisión y la envía

(permisos, recursos, verbos, expiry...)

●

Si el servidor concede permiso, el navegador vuelve a

enviar a petición

Respuesta

headers['Access-Control-Allow-Origin'] = '*'

headers['Access-Control-Allow-Methods'] = 'POST, GET, OPTIONS,

DELETE, PUT'

headers['Access-Control-Allow-Headers'] = '*'

headers['Access-Control-Max-Age'] = '1728000'

(37)

There was a 42 decibel rockin' band

json

"user": {

"name": "Daniel de la Mata Lara", "email": "[email protected]", "locale": "es",

"api_key" : "995d79acc48864cf8076594c5a9d0d5e97102dc8", "links": [

{"rel": "session" , "uri": "https://facturagem.com/api/session", "methods": "GET, POST, DESTROY"},

{"rel": "account", "uri": "https://facturagem.com/api/accounts/7-daniel-de-la-mata-lara", "methods": "GET, PUT"},

{"rel": "clients", "uri": "https://facturagem.com/api/accounts/7-daniel-de-la-mata-lara/clients", "methods": "GET, POST"},

{"rel": "invoices", "uri": "https://facturagem.com/api/accounts/7-daniel-de-la-mata-lara/invoices", "methods": "GET, POST"},

... ],

... }

(38)

And the music was good, and the music was loud

memoria

success: function(data) {

localStorage.setItem('user_data_api_key', data.user.api_key); localStorage.setItem('user_data_name', data.user.name);

var uri = getUriByRel(data.user.links, 'session'); if(uri){

localStorage.setItem('user_data_session_url', uri); }

uri = getUriByRel(data.user.links, 'account'); if(uri){ localStorage.setItem('user_data_account_url', uri); } ... }

acceso

localStorage.user_data_api_key if(localStorage.user_data_name != null){...} localStorage.clear();