Utilizando JqueryMobile & ThemeRoller & Nuget

Hola, en este Post vamos a ver como utilizar Nuget para crear paquetes de con la personalización de un tema para jQueryMobile mediante ThemeRoller.

Lo primero que vamos a hacer es crear un repositorio local en donde vamos a almacenar nuestros paquetes, para esto vamos a ir a HERRAMIENTAS->Administrador de paquetes de biblioteca->Configuración del Administrador de paquetes

image

Luego podemos agregar nuestro propio repositorio en mi caso hice una carpeta en C:MyNugetPackages

image

Tengo creado un proyecto de MVC 4 – Aplicación Móvil,

image

Esta plantilla tiene jqueryMobile para el render estilo móvil, si pruebo la app mediante el emulador para IPhone que se integra con VS2012, si no lo tienes instalado, puedes hacerlo seleccionando la opción “Más Emuladores” o pueden ir directamente a la siguiente dirección:
http://visualstudiogallery.msdn.microsoft.com/6bed5adb-1d6a-483d-9e22-ae0f88ec4477

image

Al ejecutar nuestro proyecto MVC veremos lo siguiente:

image

Ahora a crear nuestro Tema con Themeroller, Ojo, ir a la siguiente URL, no a la que está en la página de jQueryMobile, ya que esta última no tiene la opción de descargar el tema para Nuget:

http://labs.appendto.com/demo/jqm-themeroller/

En el voy a crear mi tema que le llamaré de manera muy original “Verde”:

image

Ahora vamos a la opción:
image

Ahora podemos ver la opción Download NuGet:

image

Entonces guardo el archivo como verde.nupkg en la carpeta C:MyNugetPackages. Paso siguiente voy a la consola de Nuget, elijo mi repositorio e instalo el paquete, o también lo podemos hacer de manera gráfica mediante el administrador de paquetes:

image

A continuación veremos que nuestro tema ya está instalado:

image

Ahora voy a agregar el CSS, al archivo _Layout, para este ejemplo , solo voy a arrastra el archivo para hacer la referencia, pero luego puedes utilizar la característica de utilizar bundle en los css y js.

image

Y al ejecutar el proyecto nuevamente vemos el tema ya aplicado Sonrisa

image

Espero que te sirva
@chalalo

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *