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

Comenzando con GIT y Visual Studio 2012

Hola que tal, en este tema veremos como comenzar a utilizar GIT con Visual Studio 2012, primero que nada tenemos que instalar los siguientes componentes en orden:

  1. Visual Studio 2012 Update 2 CTP 3
  2. Visual Studio Tools for Git

Recuerda que el VS2012 Update 2 CTP 3 no es un producto final, por lo que queda a tu responsabilidad el utilizarlo.

Bueno, una vez instalado vas a poder seleccionar dentro de la opción se Elegir control de código fuente a Git:

image

Previamente yo ya tenía instalado Git para Windows y un par de repositorios, también tenía mi cuenta en GitHub para el repositorio remoto, el plugin se configuró automáticamente, si no puedes hacerlo de manera manual, incluso tiene la opción para obtener tu imagen desde gravatar:

image

También puedes ver la lista de repositorios locales y conectarte a uno, clonarlo , agregar , etc. Un punto importante es que como puedes ver, se conecta a TFS

image

Ahora vas a tener la opción Commit al seleccionar el menú contextual en el Solution Explorer:

image

Veremos a continuación en la ventana de Team Explorer la información actual del proyecto, con los branch asociados (que se pueden crear previamente en esta misma ventana), puedes agregar el mensaje del Commit, (para que te ubiques dentro de todos los commits). En mi caso tengo dos Branch (ramas) , la master y la BugFix, puedes cambiar rápidamente entre cualquiera de estas dos, crear nuevas, hacer el merge, hacer el pull, push, incluir o excluir archivos en el commit, como vez, prácticamente todas las acciones recurrentes cuando utilizamos el bash de Git.

image

Puedes configurar el repositorio remoto, en mi caso GitHub, publiqué los branch locales y funciona sin problemas, de inmediato te pide tus credenciales y listo, ya estaban reflejados los cambios en mi repositorio :image

Puedes ver la historia de los archivos en el repositorio:

image

También podemos ver las diferencias de un archivo entre los distintos commits:

image

Una de las ventajas principales con Git con otras controles de código , es que podemos crear branch y cambiarnos rápidamente entre ellos sin tener conexión con el repositorio remoto, por ejemplo podemos crear nuevas branch, recorrerlos , hacer merge y estar en un avión sin conexión Sonrisa.

Si quieres saber a fondo sobre GIT, te recomiendo que leas este tutorial (personalmente me lo leí y es muy bueno)

http://git-scm.com/book/es <- Léelo si o si!

Saludos!
@chalalo

[Tutorial] Comenzando con SignalR y Razor View

Hola!!, estuve un poco ausente de blog por temas de vacaciones , jejee, todos necesitamos un descanso, pero ya estamos de vuelta , esta vez quiero mostrar un ejemplo de SignalR  utilizando las características de Razor engine.

Primero que nada, te recomiendo ver los siguientes artículos sobre SignalR, me fueron de gran ayuda para comprender los fundamentos de SignalR

Paso siguiente de haber leído los artículos veamos como realizar una implementación , con lo denominado “Conexiones Persistentes” (si no conoces el término, revisa el primer artículo).

La idea del proyecto a realizar es un backend (server) que va a enviar mensajes a distintos clientes, el server debe poder ver cuando se conecta y desconectan los clientes:

image

Vamos a comenzar entonces con la creación de un proyecto de ASP.NET Web API, luego vamos a obtener los archivos necesarios desde el NuGET, recuerda seleccionar la opción “Incluir versión previa” ya que este paquete, a la hora de escribir este artículo se encuentra en RC. Luego buscas signalR y elijes “Microsoft ASP.NET SignalR”

image

Como voy a usar serialización JSON y quiero compatibilidad con versiones de IE más antiguas, voy a agregar la librería JSON2

image

Una vez con esto instalado, voy a crear una carpeta Mensaje en donde voy a tener el objeto mensaje, que será pasado entre el cliente y el servidor, además la clase MensajeConn que implementa la comunicación.

El mensaje es bastante sencillo, solo consta de un titulo y un texto, justo lo necesario para el ejemplo Sonrisa

Estructura de la solución

Clase Mensaje

image

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace SignalDemo1.Mensaje

{

    public class Mensaje

    {

 

     public string Titulo {get;set;}

     public string Texto{get;set;}

 

    public Mensaje(string titulo,string texto){

          this.Titulo = titulo;

          this.Texto = texto;

        }

 

        public Mensaje()

        {

 

        }

    }

}

Ahora veamos la clase MensajeConn:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using Microsoft.AspNet.SignalR;

using System.Threading.Tasks;

using Newtonsoft.Json;

 

namespace SignalDemo1.Mensaje

{

    public class MensajeConn : PersistentConnection

    {

      

        protected override Task OnConnected(IRequest request,
                                          
string
connectionId)

        {

          Mensaje mensaje = new Mensaje("Servidor", "Nueva Conección " +
                                                         connectionId);

          return Connection.Broadcast(mensaje);

        }

 

        protected override Task OnReceived(IRequest request,
                                      
string connectionId, string
data)

        {

            Mensaje mensaje = JsonConvert.DeserializeObject<Mensaje>(data);

            return Connection.Broadcast(mensaje);

        }

 

        protected override Task OnDisconnected(IRequest request,
                                                     
string
connectionId)

        {

            Mensaje mensaje = new Mensaje("Servidor", "Desconectado " +
                                                            connectionId);

            return Connection.Broadcast(mensaje);

        }

    }

}

Importante es notar esta clase hereda de la clase abstracta PersistentConnection que nos brindará la posibilidad de sobrescribir los métodos para la interacción de mensajes.

Es necesario revisar la documentación oficial de SignalR para que veas las posibilidades de sobre escritura de métodos y el uso que podemos darle, revisa el siguiente link:

https://github.com/SignalR/SignalR/wiki/PersistentConnection

En mi caso, solo quiero ejecutar acciones cuando un cliente se conecta, cuando se desconecta y cuando se envía un mensaje hacia los clientes).

Para la conexión y desconexión simplemente envió un mensaje simple junto al connectionId, el cual identifica únicamente la conexión (luego con esto podemos enviar mensajes a clientes en particular)

El método OnReceived permitirá recibir un objeto serializado con JSON y enviar con el método Broadcast a todos los host conectados.

Paso siguiente, y no olvidar, ya que si no, no va a funcionar la conexión (error 404 al momento de tratar de conectarse el cliente js hacia el servidor) es definir en el global.asax la definición del endpoint:

RouteTable.Routes.MapConnection<Mensaje.MensajeConn>("mensaje", "/mensaje");

 

Un poco de Razor View, Blundes y esas hiervas.

Ya definimos el funcionamiento deseado para la comunicación, ahora veamos algunas cosillas que nos simplificarán la vida en las vistas.

Para la implentación en el cliente debemos agregar dos archivos JS que fueron agregados al proyecto por nuget, ahora con la posibilidad en asp.net 4.5 de hacer bundle (unir,combinar) script para disminuir las llamadas al server, vamos a definir en nuestro archivo blundleConfig:

bundles.Add(new ScriptBundle("~/bundles/jquerysignalr").Include(

                              "~/Scripts/json2.js",

                    "~/Scripts/jquery.signalR-{version}-rc2.js"));

Con esto unimos en un solo archivo que se llamará jquerysignalr, los archivos json2 y jquery.signalR-1.0.0-rc2.

Si quieres saber más sobre el tema de combinación y minificación de scripts y css revisa:

http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

Interfaz de Usuario

Una de las varias ventaja que tiene Razor es su simpleza, si bien acá no tenemos masterPages propiamente tal, podemos definir la estructura de todas las páginas en nuestro archivo _Layout.cshtml

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width" />

    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</head>

<body>

    @RenderBody()

 

    @Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/jqueryui")

    @Scripts.Render("~/bundles/jquerysignalr")

 

    @RenderSection("scripts", required: false)

</body>

</html>

Como vemos incluimos los scripts según el nombre dado en el archivo BundleConfig. Luego un Rendersection para incluir la sección de script propios del comportamiento que queremos lograr en el cliente.

Básicamente tengo dos vistas en el cliente, Envia.cshtml , que hace de backend, en el cual puede visualizar cuando se conecta y desconecta un cliente y Recibe.cshtml , que recibe los mensajes que envía el backend.

Estructura de Envia.cshtml.

@{

    ViewBag.Title = "Envia Mensajes";

}

 

<h2>BackEnd – Enviar Mensajes</h2>

<h2>Mensaje</h2>

 

@using (Html.BeginForm()) {

    @Html.EditorForModel();

 

<input id="send" value="Enviar Mensaje" type="button" />

<ul id="mensajeBackEnd" style="list-style:none;"></ul>

}  

 

@section Scripts { <script src="~/Scripts/MensajeSignalR.js"></script> }

Como ves estoy utilizando el helper que a partir del modelo devuelto en el controlador hacia la vista, que permitirá el render del formulario, ahorrándonos el esfuerzo de construirlo, luego un botón para enviar los datos del formulario y una lista en donde se imprimirán los mensajes de conexión o desconexión de los clientes. La UI queda de esta forma:

image

Estructura de Recibe.cshtml.

Esta vista es mucho más simple, solo tiene la lista para recibir los mensajes:

@{

    ViewBag.Title = "Recibe Mensajes";

}

 

<h2>Cliente – Ver Mensajes</h2>

<ul id="mensajeClient" style="list-style:none;"></ul>

@section Scripts { <script src="~/Scripts/MensajeSignalR.js"></script> }

image

Recordar que tenemos que agregar las acciones en el controlador definido por defecto HomeController:

  public ActionResult Recibe()

        {

       

            return View();

        }

 

  public ActionResult Envia()

  {

      var vm = new Mensaje.Mensaje();

      return View(vm);

   }

Acá ves como se le devuelve a la vista el modelo para que el helper html para crear el formulario pueda hacer el render. Ahora veamos el archivo MensajeSignalR.js, el cual nos da la funcionalidad en el lado del cliente.

$(function () {

    var conn = $.connection("/mensaje");

 

    conn.received(function (data) {

        if (data.Titulo == "Servidor") {

            $("#mensajeBackEnd").append("<li>" + data.Titulo + ‘:’ +
                                                     data.Texto +
"</li>"
);

        } else {

            $("#mensajeClient").append("<li>" + data.Titulo + ‘:’
                                                      data.Texto +
"</li>"
);

        }

    });

 

    conn.error(function (error) {

        console.warn(error);

    });

 

    conn.start()

        .promise()

        .done(function () {

            $("#send").click(function () {

              var pTitulo = $("#Titulo").val();

              var pTexto = $("#Texto").val();

              conn.send(JSON.stringify({ Titulo: pTitulo, Texto: pTexto }));

            })

        });

});

Como puedes ver , tenemos la función de recibir información “received” dependiendo el titulo decidimos donde imprimir el mensaje (servidor o cliente).

Cuando se inicia una conexión “start”, utilizamos la función promise() de jquery para asegurarnos que la llamada asíncrona se ejecute, si quieres saber más sobre esta función revisa este artículo: http://www.funcion13.com/2012/03/26/comprendiendo-promesas-y-deferreds-en-jquery/. Se presiona el botón (send), y utilizamos el helper JSON para serializar el mensaje.

signal

Funciona perfecto!, más adelante voy a subir otras demos con Hub y algunas un poco más avanzadas.

Puedes descargar la demo completa acá:

DESCARGA/DOWNLOAD

Saludos!
@chalalo