JSEnhancements – Agregando soporte para regiones y outlining en Visual Studio 2010

En un post de la lista de alt.net Hispano Walter Poch comento sobre esta herramienta para obtener outlining en Visual Studio 2010 para javascript (tambien funciona en CSS)

Se puede descargar desde Visual Studio por medio del extension manager

Seleccionamos la opcion online gallery y realizamos una busqueda de texto para jscript, luego seleccionamos el JSEnhancementes y procedemos a su instalación.

Luego de reiniciar Visual Studio, obtendremos el soporte para outlining de regiones, {}s y []s

jqGrid, Razor, cargando datos desde un controller ASP.NET MVC 3

A partir del código de un post anterior ahora vamos a ver como obtener datos desde un controller MVC para cargar un jqGrid

Los datos se obtienen por medio de una llamada ajax con jquery y son cargados en el grid con un bucle, de la misma manera que en el ejemplo anterior

El codigo de DatosController.cshtml

En la línea 3 definimos la función obtenerPosicionesYCargarGrid que por medio de un POST con ajax obtiene los datos desde el controller. La línea 7 indica la URL a la que llamará y la 8 que usaremos JSON.
A partir de la línea 10 tratamos los datos devueltos por el controller.
La función solo se define al principio y es llamada en la línea 37 luego de que tenemos listo el grid.
Al tenerlo como una función separada podemos llamarla en otro momento, por ejemplo desde un botón refrescar.

<script type="text/javascript">

    function obtenerPosicionesYCargarGrid() {
        $.ajax({
            type: 'POST',
            async: false,
            url: '@Url.Action("ObtenerPosiciones", "Home")',
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            success: function (data) {

                if (!data)
                    return;

                $.each(data, function (index, value) {
                    $("#posicionesTable").jqGrid('addRowData', value.posicion, value);
                });
            }
        });
    }

    $(document).ready(function () {

        $("#posicionesTable").jqGrid({
            datatype: "local",
            colNames: ['Pos.', 'Equipo', 'Puntos'],
            colModel: [
                { name: 'posicion', align: "right" },
                { name: 'equipo' },
   		        { name: 'puntos', align: "right" }
   	        ],

            caption: "Posiciones Apertura 2011 Argentina Primera A"

        });

        obtenerPosicionesYCargarGrid();
    });
</script>
@{
    ViewBag.Title = "Obtener Datos desde el controller";
}

<h2>@ViewBag.Message</h2>

<table id="posicionesTable"></table>

Código en HomeController.cs
En la línea 1 tenemos la acción que devuelve la vista inicial.
A partir de la línea 6 la acción que devuelve los datos en un JSON. Para el ejemplo definimos datos estáticos en un tipo anónimo, pero podemos utilizar objetos de nuestro modelo obtenidos desde la base de datos o DTOs armados especialmente

        public ActionResult DatosController()
        {
            return View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult ObtenerPosiciones()
        {
            var posiciones = new[]{
                new { posicion= 1, equipo= "Atl. Rafaela", puntos= "9" },
                new { posicion= 2, equipo= "Boca", puntos= "8" },
                new { posicion= 3, equipo= "Racing", puntos= "8" },
                new { posicion= 4, equipo= "Lanús", puntos= "8" },
                new { posicion= 5, equipo= "San Lorenzo", puntos= "7" }
            };

            return Json(posiciones);
        }

Mi primer grid con jqGrid y datos locales, MVC3

Luego de prepararnos para utilizar jqGrid como se explica en este post anterior, voy a crear un ejemplo de una tabla jqGrid que carga datos desde la misma página

Editamos el archivo Index.cshtml de la carpeta /Views/Home y agregamos la definición del grid como se  muestra a continuación


<script type="text/javascript">
$(document).ready(function () {

$("#posicionesTable").jqGrid({
datatype: "local",
colNames: ['Pos.', 'Equipo', 'Puntos'],
colModel: [
{ name: 'posicion', align: "right" },
{ name: 'equipo' },
{ name: 'puntos', align: "right" }
],

caption: "Posiciones Apertura 2011 Argentina Primera A"

});

var posiciones = [
{ posicion: "1", equipo: "Racing", puntos: "8" },
{ posicion: "2", equipo: "Boca", puntos: "7" },
{ posicion: "3", equipo: "Vélez Sarsfield", puntos: "7" },
{ posicion: "4", equipo: "Colón", puntos: "7" },
{ posicion: "5", equipo: "Lanús", puntos: "7" },
];

for (var i = 0; i <= posiciones.length; i++)
$("#posicionesTable").jqGrid('addRowData', i + 1, posiciones[i]);

});
</script>
@{
ViewBag.Title = "Mi primer grid con jqGrid";
}

<h2>@ViewBag.Message</h2>

<table id="posicionesTable"></table>

En la línea 36 estamos definiendo la tabla html sobre la que se ubicará nuestro grid. Como podemos ver, en la tabla no se definen las columnas.

Una vez que el documento termina de cargar (linea 2) comenzamos con la definicion del grid

Los encabezados estan definidos en la línea 6 y el modelo de las columnas en la línea 7. En esta definición de las columnas podemos establecer distintas propiedades como si la columna es ordenable, su ancho, alineación, visibilidad, etc.

Para este primer ejemplo los datos los cargamos desde un array definido en la misma página (linea 17), utilizando un bucle (línea 25) en el cual llamamos al método del grid addRowData (línea 26). El formato del array se corresponde con los nombres definidos en el modelo de columnas

Resultado de nuestro grid en pantalla

En un post posterior voy a mostrar como se pueden cargar el grid obteniendo los valores desde el servidor

Referencias
Sitio oficial de jqGrid: http://www.trirand.com/blog/

Preparando proyecto MVC3 para jqGrid

Creamos un nuevo proyecto ASP.NET MVC 3

 

Seleccionamos como View engine: Razor

Project Template: Internet Application

Actualizamos las librerias de jQuery e instalamos jQuery UI y jqGrid

Abrimos la consola del package manager e instalamos los paquetes necesarios (verificar que tenemos seleccionado el proyecto MVC en Default project)

Los tres paquetes necesarios se instalan con

install-package jquery [Enter]

install-package jquery.ui.combined [Enter]

install-Package jQuery.jqGrid [Enter]

Actualizamos las referencias a jQuery y agregamos referencias a jqGrid en el proyecto MVC

Editamos el archivo /Views/Shared/_Layout.cshtml, la seccion <head> nos deberia quedar como sigue

<head>

<title>@ViewBag.Title</title>

<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

<link href="@Url.Content("~/Content/themes/base/minified/jquery-ui.min.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery-ui-1.8.15.min.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Content/jquery.jqGrid/ui.jqgrid.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/i18n/grid.locale-es.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>

</head>

En mi caso, con localización del grid en español

Con estos pasos, ya tenemos todo preparado para comenzar a utilizar el plugin jqGrid en nuestro proyecto

Referencias

Paquetes usados (Version de NuGet utilizada 1.4.20701.9038)

Utlizando mi iPad como un monitor secundario con DisplayLink

Luego de instalar la aplicacion para iPad de DisplayLink (1 de mayo de 2011, gratuita en el App Store) y el software para pc (desde aquí) pude configurar mi iPad como un monitor adicional.
La pc y la tablet deben encontrarse en la misma red, arrancar la aplicacion en la iPad y seleccionar la pc, luego configuramos en la pc el display como cualquier pantalla.
En mi pc estoy corriendo windows 7, aunque tiene soporte para varios sistema operativos.
Estuve realizando pruebas con un reproductor de video, y la calidad es aceptable.
El unico inconveniente que encontre, es que la aplicacion no funciona en segundo plano, y al tratar de usar la iPad, es como si desconectaramos el display (la iPad), por lo que se producen algunos parpadeos

Mostrar mis tweets en mi blog

Para mostrar los ultimos tweets en mi blog agregue el plugin Really Simple Twitter Feed Widget, solo necesite especificar el nombre de la cuenta de twitter.

¿WordPress, sin soporte de Drag & Drop en el browser Safari del iPad?

Me acomode confortablemente en el sillon con el iPad (¿para eso son los iPads, no?) para hacer algunas modificaciones en mi blog, y me encontre con que no podia hacer un drag & drop de un plugin al sidebar, probe dos dedos, tres dedos, un dedo y arrastrar, insultos, y nada …
Busqueda en la web, y al parecer no lo soporta, lo que no me quedo claro si es un problema de Safari o del sitio web (no solo wordpress tiene ese problema).
La aplicacion de iPad para WordPress tampoco tiene soporte para modificar los plugin, asi que, volver a la PC para instalar el plugin.

Instalar FxCop 10 con Visual Studio 2008 y Windows XP

Luego de consultar en el grupo de Alt.Net Hispano sobre maneras de verificar la calidad de codigo, decidi realizar algunas pruebas con FxCop.
El proyecto que quiero verificar esta siendo desarrollado en Visual Studio 2008, por lo que no tengo la integracion que tienen las versiones superiores de Visual Studio 2010.
Luego de buscar en la pagina de descargas de Microsoft, encontré que FxCop se distribuye como parte del SDK de Windows 7. La instalación del SDK la hice sobre una máquina con Windows XP, previa instalación del Net. Framework 4.
Luego de instalado el SDK, debemos buscar el archivo FxCopSetup.exe (en mi caso ubicado en C:\Archivos de programa\Microsoft SDKs\Windows\v7.1\Bin) con el cual podremos instalar FxCop 10.

Recursos para twitter

En la siguiente pagina de twitter encontraremos el codigo para agregar botones y widgets de twitter a nuestras paginas web, blogs, etc.

RSS para el timeline de twitter

Luego de portarme muy bien durante el 2010 y obtener una iPad como regalo de reyes, me puse a ver para que corno la puedo usar (este post esta escrito en la misma ;) )

Encontre gran cantidad de aplicaciones para la parte “social”, todas las que estoy utilizando en este momento, gratis. Uno de los temas que no podia solucionar, era la obtencion de un feed RSS de mi timeline de twitter para incorporarlo a mi google reader, que a su vez, leo desde feeddler.

Puesto a buscar una solucion, termine creando una pequeña pagina web, la cual luego de autorizarla en twitter, nos entrega un enlace con el RSS de nuestro timeline.

La pagina en cuestion se encuentra en SocialFeed, estan invitados a utilizarla.

Desde el punto de vista de desarrollador me resulto muy interesante, ya que tuve que integrar una serie de herramientas sobre las que no tenia conocimientos previos. Paso a detallarlas a continuacion, en breve ire posteando sobre mi experiencia con las que me parezcan mas interesantes.

API de Twitter, utilizando TweetSharp, y creacion de app para twitter
Autorizaciones con OAuth
Git (soy un chico tortuga)
Publicacion en la “nube” con appharbor

Un tema que me ha quedado pendiente, es ver como funciona la “adquisicion” del feed por parte de google reader, ya que la api de twitter, solo devuelve los ultimos 20 tweets del timeline.
Si google reader no hace una actualizacion automatica o la cantidad de tweets nuevos es mayor a 20 en el periodo entre actualizaciones, voy a estar perdiendo entradas.