web matrix y j querymobile

WebMatrix y JQueryMobileGonzalo “Chalalo” Pérez CorreaMicrosoft MVP ASP/ASP.NETwww.chalalo.cl@chalalo

http://www.chalalo.cl/

Microsoft Confidential

2

Agenda− ¿Por que con WebMatrix?− Introduccion a jQueryMobile− Anatomía de una página− Elementos visuales− Elementos de gráficos de navegación− Elementos de formulario− Listas 2.0− Tips Utiles− PhoneGap


3

¿Por qué utilizar WebMatrix?− Gratis y centrado en el código− Template compatible HTML5− Generación limpia de código− Fácil inclusión de framewors Javascript− Sintaxis Razor simplificada− Creación de Helpers− Manejo simplificado de base de datos(Sql

CE 4.0)− Descargalo en

http://www.asp.net/webmatrix− ASP.NET MVC 4.0 RoadMap indica que

tendrá un template de JQueryMobile, a aprender!

http://www.asp.net/webmatrix


4

Multiplataforma


5

Optimizado para Touch y Temas


6

Mobile Web Framework

El objetivo es proporcionar herramientas para crear interfaces dinámicas que nos permitan utilizar dispositivos touch.

JM ofrece dos tipos de layouts(listas, paneles y overlays) y un conjunto de controles de formulario & UI Widgets(tlggles,slides,tabs) .


7

jQueryMobile

• Team JQuery• Versión Beta 1• HTML5 & CSS3• Liviano (12k)• Events• API and Methods• Ajax Form Handling• URL handling and

transitions• Global Configuration


8

JQueryMobileEstado del proyecto:− Recientemente Liberado el Beta 1− Soporte para Blackberry 5.0 y

OperaMini− Características completas, solo

revisión de performance y Bugs Fixes

Anatomía


10

Pensar en Vistas<div data-role=”page” />o Solo 1 vista visible a la vezo Se permiten múltiples vistas por

documentoo Se puede escribir una app en un solo

archivoo Contiene un header, footer y un área

de contenido

11

<!DOCTYPE html> <html> <head> <title>Test JQueryMobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script><script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script></head> <body> <div data-role="page">

<div data-role="header"> <h1>Header de Vistsa</h1> </div>

<div data-role="content"> <p>Contenido de la página</p> <p>indicado por data-role</p> </div>

<div data-role="footer"> <h4>www.chalalo.cl</h4> </div></div>

</body></html>


12

DEMO− Anatomía de una Página− Múltiples Vistas


13

Características de las PáginasTransiciones: data-transition="pop“Animaciones disponibles para las transiciones de una pagina o vista:

− Slide,SlideUp,SlideDown,pop,face,flip(*)− Flip no funciona bien en dispositivos Android

ya que carece de capacidades 3D CSS Transform

Dialogs− Cualquier página se puede presentar como una

ventana modal, agregando data-rel="dialog“ el cual puede ir en combinación con data-transition, se recomienda las transiciones pop,slidedown y flip


14

Características de las PáginasAjax:− Los vínculos a paginas en el mismo dominio se

transforman automáticamente en peticiones Ajax y se muestran con una transición.

− Enlaces que apuntan a otros dominios o que tienen los atributos target, rel="external" , data-ajax="false“ se hará una actualización completa de la página


15

DEMO− Transiciones− Diálogos− Temas


16

Elementos Gráficos -BarrasElemento “themeables” generalmente utilizados como comandos de navegación en apps móbiles:− Barra de titulo:

− Barra de pie de página

− Widget de barra de navegación


17

DEMO− Header bars− Footer bars− Navbars− Estableciendo temas

Elementos Gráficos - BotonesEl framework de JM, mediante data-role=“button” agrega automaticamente los estilos necesarios para conseguir que los links tenga la gráfica de un botón

<a href="index.html" data-role="button">Link button</a>

Los botones de formulario, como type submit, reset, button o imagen se convierten a un estilo como del de enlace, y el original se oculta, sin embargo, cuando se activa con un click, se ejecuta el evento del boton original


19

Elementos gráficos - Botones− data-inline="true" para establer botones en

linea, por defecto, in-block− Posibilidad de establer un icono predefinido

o personalizado, y su posición dentro del botón:

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="right" >Borrar</a>

<a href="index.html" data-role="button" data-icon="delete" data-iconpos="notext">Borrar</a>


20

DEMO− Botones

− Iconos− Temas− Posiciones


21

Formularios


22

Elementos de formulario− Por defecto JM automáticamente redenriza los

controles de formulario a controles optimizados para dispositivos touch.

− Una vez inicializados, se pueden abordar mediante programación mediante la jQuery UI widget API.

− Desactivar Ajax (data-ajax="false“ en form)− Existe la posibilidad de evitar el render, con data-

role="none“ o programáticamente:

$(document).bind('mobileinit',function(){ $.mobile.page.prototype.options.keepNative = "select, input.foo”;});


23

Elementos de Formulario 1/5Text Inputs

Search Inputs

<div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /></div>

<div data-role="fieldcontain"> <label for="search">Search Input:</label> <input type="search" name="password" id="search" value="" /></d


24

Elementos de formulario 2/5Slider (Range)

<div data-role="fieldcontain"><label for="slider">Input slider:</label>

<input type="range" name="slider" id="slider" value="0" min="0" max="100" /></div>

Flip toggle switches

<div data-role="fieldcontain"><label for="slider">Select slider:</label><select name="slider" id="slider" data-

role="slider"><option value="off">Off</option><option value="on">On</option>

</select> </div>


25

Elementos de formulario 3/5 Radio Buttons (Vertical)<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Choose a pet:</legend> <input type="radio" name="r1" id="r1“ value="choice-1" checked="checked" /> <label for="r1">Cat</label>

<input type="radio" name="r1" id="r2" value="choice-2" /> <label for="r2">Dog</label>

<input type="radio" name="r1" id="r3" value="choice-3" /> <label for="r3">Hamster</label>

<input type="radio" name="r1" id="r4" value="choice-4" /> <label for="r4">Lizard</label> </fieldset></div>

Radio Buttons (Horizontal)

<fieldset data-role="controlgroup" data-type="horizontal" >


26

Elementos de Formulario 4/5Checkboxes (Vertical)

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Agree to the terms:</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> <label for="checkbox-1">I agree</label> </fieldset></div>

Checkboxes (Horizontal)

<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">


27

Elementos de Formulario 5/5Selects• Posibilidad de utilizar además, personalizaciones• Estas pueden trabajar bien en Navegadores de escritorio• Permiten el uso de listas y selecciones múltiples

• La personalización tiene costo de rendimiento!

<div data-role="fieldcontain"> <label for="sc1" class="select">Choose shipping method:</label> <select name=“sc1" id="select-choice-1"> <option value="standard">Standard: 7 day</option> <option value="rush">Rush: 3 days</option> <option value="express">Express: next day</option> <option value="overnight">Overnight</option> </select></div>


28

Elementos de Formulario 6/6Selects− Para Select personalizados utilizar

data-native-menu=“false” o:

− Si la lista de valores de demasiado grande ,JM automáticamente genera una nueva “pagina”.

− Selección múltiple solo para personalizados con atributo multiple

− Inclusión de Placeholders

$(document).bind('mobileinit',function(){ $.mobile.selectmenu.prototype.options.nativeMenu = false;});


29

DEMO− Elementos de Formulario− Theming


30

Listview – UL 2.0Utilización de Listas <ul> vinculadas a un atributo data-role=“lisview”

JQ Aplicará los estilos necesarios para transformar la lista en una lista móvil amigable, con el indicador de flecha a la derecha, ocupando todo el ancho de la ventana del navegador

Al hacer click sobre un elemento se hará una petición ajax para la url , se crea la nueva pagina en el DOM y se realiza la transación.


31

− Posibilidad de incluir separadores, imágenes, contadores, search filters y más!

Listview – UL 2.0


32

Tips Utiles jQueryMobileEvento mobileinit$(document).bind( "mobileinit", function () { $.mobile.ajaxLinksEnabled = false; $.mobile.loadingMessage = 'Cargando...'; $.mobile.page.prototype.options.backBtnText = "Atras"; });

− Botón Atrás− Texto Cargando− Desactivar Ajax− Debe ser ubicado entre la inclusión de

la librería jquery y jquerymobile.


33

Tips Utiles jQueryMobile

$.mobile.changePage( “busqueda.cshtml", {type: "post", data: $("form#search").serialize()

});

$.mobile.changePage (method)

$.mobile.changePage( "about/us.html", { transition: "slideup"} );

@{var db= Database.Open("MiBD");var IdRegion =UrlData[0] ;var sql ="Select IdCiudad, NombreCiudad from Ciudades where IdRegion=@0 order by IdCiudad asc";var data = db.Query(sql,IdRegion);Json.Write(data,Response.Output);}

mailto:IdRegion%3D@0

mailto:IdRegion%3D@0


34

PhoneGap¿Qué es Phonegap?− Es una plataforma abierta, basada en HTML5 y JavaScript, − Permite desarrollar aplicaciones para móviles − que compilará las aplicaciones creadas con su entorno

para sistemas operativos Móviles : Apple iOS, Google Android, BlackberryOS, WebOS, Windows Phone 7(*) y Symbian.

− La idea es solo un desarrollo, múltiples plataformas− Se prepara este 21 de julio para la version 1.0


35

PhoneGap Build

− Evitar instalar múltiples SDK en la maquina local.

− No es necesario agregar el manifiesto− Escribir la app una sola vez− Compilar en la nube− Correr en todos lados!!!!


36

DEMO PhoneGap:Build


37

¿ Preguntas?


38

Links ( si o si)

− http://www.asp.net/webmatrix− http://www.jquerymobile.com/− http://www.phonegap.com/

− Si te queda tiempo:− www.chalalo.cl



http://www.jquerymobile.com/

http://www.jquerymobile.com/

http://www.phonegap.com/

http://www.phonegap.com/

http://www.chalalo.cl/

© 2009 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond

to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation.

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

web matrix y j querymobile

Documents