jquery Mobile for dummies (featuring AC/DC's Let there be rock) Daniel de la Mata danimata@aspgems.com @danimataonrails danimataonrails.blogspot.com camerawc.guatdefak.com yumit.com/danimata
In the beginning, back in nineteen fifty five www.facturagem.com Rails 3 jquery 1.5.1 / jquery-ui 1.8.12 Restful API Base de clientes
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 *** Web vs App nativa
The white man had the schmaltz, The black man had the blues alternativas Spine.js / Backbone.js Sencha Touch jquery Mobile JQTouch *** Titanium PhoneGap
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... no tengo que molar
He said... jquery and jquery UI Compatible (A, B, C) HTML5 Ligero / Modular Progressive Enhancement Ajax Navigation / One page apps ThemeRoller
(silence) Ejemplos http://danimata.com/codemotion/examples.html Todo y más en http://jquerymobile.com/
Let there be sound... <!DOCTYPE html> <html> <head> <title>este es mi título (que luego igual no se ve)</title> <meta name="viewport" content="width=device-width, initialscale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0- rc.1/jquery.mobile-1.1.0-rc.1.min.css" /> <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.1.0- rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script> </head> <body>... Y este es mi contenido... </body> </html>
and there was sound
<div data-role="page"> Let there be light... <div data-role="header"> <h1>cabecera de la página</h1> </div><!-- /header --> <div data-role="content"> <p>contenido de la página</p> </div><!-- /content --> <div data-role="footer"> <h4>pie de página</h4> </div><!-- /footer --> </div><!-- /page -->
...and there was light
Let there be drums... <div data-role="page" id="one" data-title="uno"> <div data-role="header" dataposition="fixed"> <h1>uno</h1> </div><!-- /header <div data-role="content"> <p><a href="#two">dos</a></p> <p><a href="#three">tres</a></p> </div><!-- /content <div data-role="footer" dataposition="fixed"> <h4>pie</h4> </div><!-- /footer <div data-role="page" id="two">... <p><a href="#one">volver</a></p>... <div data-role="page" id="three">... <p><a href="#jander" datarel="back"> volver</a></p>... </div><!-- /page -->
...and there was drums
Let there be guitar... <div data-role="page" id="one" datatitle="uno"> <div data-role="header" dataposition="fixed"> <h1>uno</h1> </div><!-- /header <div data-role="content"> <p><a href="#two">dos</a></p> <p><a href="#three" onclick="$.mobile.changepage('#three'); return false;">tres</a></p> <p><a href="#pop" data-rel="dialog">pop up</a></p> </div><!-- /content <div data-role="footer" dataposition="fixed"> <h4>pie</h4> </div><!-- /footer </div><!-- /page --> <div data-role="page" id="two"...>... <p><a href="#jander" data-rel="back"> volver</a></p>... <div data-role="page" id="three"...>... <p><a href="#one" datadirection="reverse">volver</a></p>... <div data-role="page" id="pop"...>... <div data-role="content"> <p><a href="#one">volver</a></p> <p><a href="#jander" data-rel="back">volver </a></p> <p><a href="#one" data-direction="reverse"> volver</a></p> <p><a href="#klander" onclick="$('.uidialog').dialog('close'); return false;"> cerrar</a></p>... <!-- no footer -->
...and there was guitar
Let there be Rock!
(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> $.mobile.loadpage( pageurl, { showloadmsg: false } );
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> data-corners="true false" data-inline="true false" data-shadow="true false" data-mini="true false" Algunas opciones
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" data-iconshadow="true false"
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> data-type="horizontal" Horizontal
The guitar man got famous,the business man got rich
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><!-- /header --> class="ui-btn-right" Algunas opciones
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="arrowu">subir</a> <a href="index.html" data-role="button" data-icon="arrowd">bajar</a> <a href="index.html" data-role="button" data-icon="arrowl">izquierda</a> <a href="index.html" data-role="button" data-icon="arrowr">derecha</a> </div><!-- /footer --> Algunas opciones <div data-role="controlgroup" data-type="horizontal">
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><!-- /navbar --> Se pueden incluir en header y footer, y añadir otras opciones a los botones
Learnin' how to play
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 <ul data-role="listview" data-filter="true">...</ul>
And this is what they had to say
Let there be light Formularios I <form action="#" method="post"> <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>
sound Formularios II <input type="text" name="a" id="a" value="" placeholder="text input"/> <textarea name="b" id="b" value="" placeholder="text area"></textarea> <input type="search" name="c" id="c" value="" /> <input type="email" name="e" id="e" value="" placeholder="email"/> <input type="tel" name="t" id="t" value="" placeholder="teléfono"/> <select name="z" id="z"> <option value="s">pequeño</option> <option value="m">mediano</option> <option value="l">grande</option> </select>
drums Formularios III <select name="b" id="b" data-role="slider"> <option value="off">nole</option> <option value="on">síle</option> </select> <input type="range" name="a" id="a" value="15" min="0" max="100" step="5" data-highlight="true"/> <input type="checkbox" name="d" id="d"/> <div data-role="controlgroup"> <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> </div>
and guitar
Let there be Rock!
(guitar solo) Markup <form action="#" method="post"> <input type="hidden" name="format" id="format" value="json"/> <input type="hidden" name="api_version" id="api_version" value="1"/> <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>
(Angus' on the floor) $("#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(){ } } ); Js
(Angus' flying)
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'
There was a 42 decibel rockin' band json "user": { "name": "Daniel de la Mata Lara", "email": "danimata@aspgems.com", "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"},... ],... }
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();
And the singer turned and he said to the crowd... otras cosillas Theming http://jquerymobile.com/themeroller/ Analytics Controlar eventos click PhoneGap Generación de aplicaciones nativas http://wiki.phonegap.com/w/page/36868306/ui%20development%20using %20jQueryMobile
Let there be Rock!!!!
Bonus track Desconferencia 12-mayo-2012 API REST Concurso BBQ & Beer
Salud y rocanrol Chas Gracias