[ASP.NET] Dale un toque Metro a tus aplicaciones ASP.NET con jQuery (II)

Introducción

Siguiendo con la serie de post sobre como darle un toque Metro a nuestras aplicaciones ASP.NET (Aquí el primero de la saga si te lo perdiste), en este post vamos a ver otro plugin de jQuery – jqMetro para simular un Pivot como el de Windows Phone 7.

Aunque en este caso, no tendremos el problema del ancho de pantalla.

Lo primero como viene siendo habitual, es descargar los archivos necesarios para hacer funcionar todo esto en nuestra aplicación ASP.NET MVC:

Una vez descargados, tenemos que añadirlos a sus correspondientes carpetas dentro de nuestra aplicación.

El fichero jquery.metro.css lo ponemos dentro en la carpeta Content

image

Y el fichero jquery.metro.js dentro de la carpeta Scripts

image

Lo siguiente, será referenciar estos archivos en la página maestra que está ubicada en la carpeta Views/Shared/_Layout.cshtml

image

Añadimos las líneas resaltadas en amarillo:

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link type="text/css" rel="Stylesheet" href="@Url.Content("~/Content/jquery.metro.css")" />
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.metro.js")"></script>
</head>

Nota: Todo esto se puede hacer de manera más elegante y reutilizable con un Helper de MVC. Puedes mirar este otro artículo que escribí en su día Creando HTML Helpers personalizados en ASP.NET MVC 3 donde hice algo parecido con una librería de script.

A continuación vamos a la página Views/Home/Index.cshtml (Nuestra Home) para añadir nuestro pivot. Para añadir un pivot a nuestra página necesitamos el siguiente fragmento de código HTML

<div class='metro-pivot'>
    
</div>

Que no es ni más ni menos que un tag div con la clase metro-pivot.

Una vez que tenemos el pivot, vamos a añadir un pivot item. Para añadir un pivot item necesitamos este  fragmento código HTML:

<div class='metro-pivot'>
    <div class='pivot-item'>
        <h3>new</h3>
    </div>
</div>

Al igual que el pivot, el pivot item es un tag div pero con la clase pivot-item.

En el ejemplo que os quiero mostrar a continuación, he querido simular una página con incidencias que serán filtradas por estado. Cada estado está representado con un pivot item:

<div class='metro-pivot'>
    <div class='pivot-item'>
        <h3>new</h3>
    </div>
    <div class='pivot-item'>
        <h3>open</h3> 
    </div>
    <div class='pivot-item'>
        <h3>closed</h3> 
    </div>
    <div class='pivot-item' id='all'>
        <h3>all</h3>
    </div>
</div>

Por último, nos falta la magia, la llamada a la función jQuery para convertir este código HTML en el elemento pivot de Windows Phone 7. Para ello añadimos el siguiente fragmento de javascript antes del elemento body de la página:

<script type="text/javascript">
    $("div.metro-pivot").metroPivot();
</script>

Ejecutamos nuestra aplicación y voilá, ya tenemos nuestro pivot funcionando!!!

image

Si vamos pinchando en los pivot items, veremos como simula el funcionamiento del pivot de WP7:

image

Hasta aquí cubriríamos la parte básica de este control. En el próximo post veremos algunos aspectos avanzados que nos ayudarán a darle más riqueza a nuestra aplicación y como cargar contenido dinámico dependiendo del pivot item que seleccionemos.

Hasta la próxima!

Código fuente

Pruebas de carga de aplicaciones web con loadstorm.com

El otro día conocí este servicio gracias a Luis Panzano. Se trata de un servicio que usa la plataforma de Windows Azure y Amazon para hacer pruebas de carga a tu aplicación web, así puedes olvidarte de licencias, hardware, lenguajes de scripting… te lo dan mascadito, pagas por uso y punto.

Disponen de un servicio de prueba gratuito para que puedas probar la plataforma sin tener que introducir datos de crédito y demás, tan solo te registras, pruebas y si te convence pues te miras con cuantos usuarios concurrentes quieres realizar las pruebas de carga para ver hasta donde puede llegar tu aplicación, ver cuellos de botella y analizar lso resultados para mejorar su escalabilidad y performance. Además puedes ver el resultado de las pruebas de carga en tiempo real.

Para más información podéis visitar su página web y leer más información, testimonios…

http://loadstorm.com/

Un saludo.

[Evento] Resumen del evento de GuseNET sobre “Inyección de dependencias”

El viernes 23 de Marzo tuve el placer de dar un evento sobre inyección de dependencias para el grupo de usuarios NET del Sureste, en el que vimos de principio a fin que es esto de la inyección de dependencias y como nos ayuda a crear software desacoplado, más mantenible y testeable. Luego con un sencilla demo sobre ASP.NET MVC lo llevamos a la práctica y al final del evento repartimos unos vouchers de un mes para Pluralsight y sorteamos un libro de patrones en ASP.NET que ganó Jonathan

WP_000402

Quiero dar las gracias a la gente de GuseNET y en especial a mis amigos Pedro Hurtado, que me recibió a pie de la estación y con el que pasé un rato muy agradable comiendo una ricas tapas y charlando sobre tecnología en general antes, durante y después del evento. A Jonathan por enseñarme junto a Javier Ros y Javier Campos Cartagena en un descapotable y tomarnos unas ricas tapas y cervezas. Y por último dar las gracias a todos los asistentes.

WP_000405WP_000406

Gracias a todos!!!

Un saludo y nos vemos en el próximo evento!!!