Como lo prometido es deuda aquí les dejo la presentación que vimos ayer:

Además si desean ver la grabación del WebCast pueden hacerlo acá: https://www.youtube.com/watch?v=hb1hi6B499A

Aquí les dejo la presentación para que puedan revizarla!

En esta ocasión crearemos una aplicación la cual podrá notificar a sus clientes de alguna actualización ocurrida en el lado del servidor. Si queremos imaginarnos un escenario que nos ayude a ilustrar esta situación, tomemos una aplicación para saber los precios de las acciones para una empresa determinada: Por un lado tenemos el back end el cual accede a la información y se encarga de notificar a los clientes de que se ha producido un cambio en los valores, mientras que por otro lado podríamos tener una aplicación Web la cual se encarga de desplegar la información.

Partamos primero con el HTML, para este caso vamos a hacer algo super sencillo. Básicamente es un DIV con un listado (LI) en el cual presentaremos los valores:

Ahora crearemos el back end, encargado de consultar la información para posteriormente notificar a los clientes de la actualización.

Aquí podemos ver que creamos una clase llamada "Notificador”, la cual hereda de Hub (namespace Microsoft.AspNet.SignalR.Hubs) como les comentaba en el artículo anterior, está clase nos provee un framework RPC de alto nivel sobre una conexión persistente. Por otra parte “Clients” es un objeto que nos permite tener una relación entre el lado del cliente y el lado del servidor, por lo cual el método getNotification en realidad es un método que existirá en el lado de JavaScript.

Volviendo a nuestro archivo HTML, vamos a incluir los siguientes elementos de JavaScript entre los elementos <head>:

En esta sección, es importante destacar lo siguiente:

• Necesitamos agregar referencias a jQuery y jQuery.SignalR
• Además hacemos referencias a los Hubs de signalR mediante la siguiente declaración:
• Aquí vemos que se define el método getNotification el cual hacíamos referencia desde C#. Este método lo que hace es utilizar los datos enviados desde el lado del servidor para finalmente desplegarlo dentro del listado (LI).
• Finalmente iniciamos el hub mediante el método start, el cual se encargará de llamar por primera vez al método “sendNotification” existente en el lado de servidor.

Finalmente para que nuestra aplicación funcione, en el archivo global.asax específicamente en el evento Application_Start agregaremos la ruta a los Hubs de signalR.

Una vez ejecutada la aplicación veremos como esta comienza a recibir datos periódicamente, lo interesante de SignalR es que si otro cliente visualiza la aplicación al mismo tiempo también recibirá dichas notificaciones.

A continuación  les dejo unos links que podrían interesarles:

• Visual Studio 2012 Application Lifecycle Management Virtual Machine and Hands-on-Labs / Demo Scripts
• https://blogs.msdn.com/b/briankel/archive/2011/09/16/visual-studio-11-application-lifecycle-management-virtual-machine-and-hands-on-labs-demo-scripts.aspx
• IntelliTrace Collection Plan Configurator
• https://intellitracecpconfig.codeplex.com/
• SQL Database Migration Wizard
• https://sqlazuremw.codeplex.com/
• TFS Preview
• https://tfspreview.com

Adicionalmente les dejo la presentación para que puedan revisarla.

Finalmente, en el siguiente vínculo podrán descargar los ejemplos que les mostré.

Cualquier duda y/o comentario, estoy a su disposición!

SignalR provee una capa de abstracción sobre algunos de los transportes requeridos para hacer aplicaciones de tiempo real. Estas aplicaciones empiezan directamente sobre HTTP pero en caso de que se tenga soporte para Web Sockets, dicha conexión será promovida a que use Web Sockets.

Todas las conexiones son administradas por SignalR y permite transmitir los cambios a todos los clientes conectados como si fuese una sala de chat o en caso de que sea necesario podemos notificar a un cliente específico.

La conexión entre el cliente y el servidor es persistida, a diferencia de HTTP en donde se envía un request y al momento de recibir el response esta se destruye para posteriormente de cero. La capa de abstracción de SignalR simula esa persistencia a diferencia de las conexiones hechas con Web Sockets las cuales son verdaderamente persistentes.

La conexión entre el cliente y el servidor es persistida, a diferencia de HTTP en donde se hace una llamada se destruye y se empieza nuevamente. La capa de abstracción de SignalR da la sensación de que es persistente y las conexiones de Web Sockets son verdaderamente persistentes.

La capa de persistencia de SignalR negocia automáticamente los transportes e irá haciendo un “fallback” hasta encontrar una capa de transporte que él pueda usar. Por ejemplo:

SignalR primero comprobará si es soportado Web Sockets, en caso de que no utilizará “Server Sent Events” y así sucesivamente hasta llegar a “Long Polling” como una última alternativa.

SignalR nos da también la habilidad de hacer push desde el servidor hacia el cliente, por lo tanto cualquier código escrito en C# o VB en el servidor puede hacer un “callback” hacia el cliente y enviar información hacia los navegadores modernos. Además podemos escalar horizontalmente a miles de conexiones utilizando Service Bus, SQL Server y Redis.

Lo que nos ayuda a resolver SignalR es que en lugar de tener una aplicación que desde el lado del cliente periódicamente este preguntando al servidor si hay algo nuevo, lo cual es conocido como Polling.

Para llegar a un escenario en donde el cliente pregunte al servidor si soportamos Web Sockets y en caso de que si, la conexión se hará mediante Web Sockets.

Manos a la obra!!!

Después de una pequeña introducción acerca de esta grandiosa biblioteca, llegó por fin la hora de ver esto en acción. Para mostrar SignalR en funcionamiento voy a crear un pequeño sitio el cual poseerá una página llamada “Demo.html” y su estructura es la siguiente:

  1: <!DOCTYPE html>
  2: <html xmlns="https://www.w3.org/1999/xhtml">
  3: <head>
  4:     <title></title>
  5: </head>
  6: <body>
  7:     <p>
  8:         <label for="txtMensaje">Mensaje:</label>&nbsp;&nbsp;&nbsp;
  9:         <input type="text" id="txtMensaje" />
 10:     </p>
 11:     <p><input type="button" id="Enviar" value="Enviar Mensaje" /></p>
 12: 
 13:     <div>
 14:         <ul id="mensajes">
 15:         
 16:         </ul>
 17:     </div>    
 18: </body>
 19: </html>

Una vez realizado esto, necesitamos instalar SignalR lo cual podemos hacerlo facilmente gracias a NuGet:

1. Seleccionamos View –>Other Windows –>Package Manager Console
2. Una vez ahí, ingresamos “Install-Package SignalR”

Luego de haber ejecutado lo anterior, veremos que se instalarán una serie de complementos necesarios para SignalR entre los cuales podemos ver que esta JQuery.

Vamos a crear una clase la cual llamaremos “MensajesHub.cs” la cual posee lo siguiente:

  1: using SignalR.Hubs;
  2: 
  3: namespace SignalR_Sample
  4: {
  5:     public class MensajesHub : Hub
  6:     {
  7:         public void EnviarMensaje(string mensaje)
  8:         {
  9:             Clients.enviar(mensaje);
 10:         }
 11:     }
 12: }

Donde podemos ver dos cosas interesantes, por una parte heredamos de la clase Hub la cual viene incluída en el namespace SignalR.Hubs. La clase Hubs provee un framework RPC de alto nivel sobre una conexión persistente (clase PersistentConnection). Por otra parte “Clients” es un objeto del tipo dynamic, el cual utilizamos para hacer la relación entre el lado del cliente y el lado del servidor. El ejemplo anterior básicamente lo que estamos hacienda es disponibilizar el método “EnviarMensaje” al cliente.

Luego agregamos lo siguiente al elemento <head> de nuestra página Demo.html:

  1: <script src="Scripts/jquery-1.6.4.min.js"></script>
  2: <script src="Scripts/jquery.signalR-0.5.2.min.js"></script>
  3: <script src="/signalr/hubs" type="text/javascript"></script>
  4: <script type="text/javascript">
  5:     $(function () {
  6:         var connection = $.connection.mensajesHub;
  7: 
  8:         connection.enviar = function (mensaje) {
  9:             $('#mensajes').append('<li>' + mensaje + '</li>');
 10:         };
 11: 
 12:         $("#Enviar").click(function () {
 13:             connection.enviarMensaje($('#txtMensaje').val());
 14:             $('#txtMensaje').val("");
 15:         });
 16: 
 17:         $.connection.hub.start();
 18:     });
 19: </script>

Una vez concluído nuestro ejemplo podemos abrir una o varias instancias de su navegador o navegadores de elección y podremos ver como los mensajes pueden ser intercambiados entre ellos.

Espero que esto haya sido de su utilidad, si desean descargar el fuente de este ejemplo pueden hacerlo aquí.

Aquí les dejo la presentación que utilizamos en dicha sesión y en el transcurso de estos días iré publicando una serie de artículos relacionados con este tema.

Existe una buena cantidad de temas disponibles, los cuales pueden ser vistos en “Acciones del Sitio” –> “Aspecto” –> “Tema del Sitio”. Hay que tener en cuenta que en SharePoint Server, podemos personalizar el tema en el navegador. En SharePoint Foundation, esta funcionalidad no está disponible. Aquí hay un pequeño screenshot de como se ve está página en SharePoint Server:

Para poder crear un tema podemos hacerlo de las siguientes maneras:

• Theme Builder
• PowerPoint

En el caso de este artículo veremos la opción de Theme Builder, la cual puede ser descargada desde aquí. En el cual tu puedes definir los diferentes colores que compondrán a tu tema o simplemente tomar uno existente y modificarlo a tu gusto:

Una vez guardado nuestro tema (en mi caso lo llamaré “Prueba”) tenemos varias formas de hacerle deploy hacia nuestro servidor SharePoint como por ejemplo:

• Subirla directamente hacia la librería de temas
• ó, generar un WSP e instalar el tema como característica

Si ustedes desean subirla directamente hacia la librería de temas, simplemente navegamos a la siguiente URL: https://tu-servidor/_catalogs/theme/Forms/AllItems.aspx

Para hacer deploy mediante una característica, abrimos nuestro Visual Studio 2010 y creamos un proyecto tomando como base la imagen colocada aquí abajo:

En la siguiente ventana, cuando se nos solicite especificar que tipo de deploy haremos seleccionamos la opción “Farm Solution”:

Cuando creemos nuestro proyecto veremos en la Solution Explorer, un item llamado “Module1” el cual lo renombraremos como “ModuloTema”  y al expandirlo veremos un archivo llamado “Sample.txt” el cual simplemente eliminaremos.

Ahora para incorporar nuestro archivo .thmx haremos clic con el botón derecho del mouse sobre el elemento “ModuloTema” y seleccionamos Add –-> Existing Item y escogemos nuestro archivo .thmx con lo cual nuestro “ModuloTema” quedará de la siguiente manera:

Ahora procederemos a editar nuestro archivo Elements.xml y deberá quedar de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
      <Module Name="Mi Tema" Url="_catalogs/theme">
           <File Path="ModuloTema\Prueba.thmx" Url="Prueba.thmx" />
      </Module>
</Elements>

Una vez que hacemos deploy de nuestra solución y acceder nuevamente a los temas del sitio (recuerden para acceder a esta página es mediante “Acciones del Sitio” –> “Aspecto” –> “Tema del Sitio”)

Si presionamos el botón “Aplicar” podremos ver nuestro tema, el cual en mi caso no es muy bonito que digamos

Si desean descargar el código fuente del ejemplo pueden hacerlo desde aquí.

Espero que este artículo haya sido de su utilidad, hasta la próxima

En uno de los artículos que publique, les mostré como pueden hacer uso de la área de notificación para comunicar ciertas cosas a nuestros usuarios, teniendo como resultado lo siguiente:

Si ustedes revisan el artículo que les mencioné, existe un parámetro booleano que nos permite hacer que nuestro mensaje del área de notificación sea permanente para hacerlo visible mientras dure nuestra operación, y luego esconderlo cuando termine la operación.

Sin embargo al utilizar el área de notificación para mostrar mensajes de operaciones de larga duración, existen ciertos inconvenientes:

1. No puedes actualizar fácilmente el mensaje desplegado en la notificación. Para comunicar el progreso de una operación de larga duración tienes que esconder la notificación anterior y reemplazarla por la nueva.
2. Los mensajes en el área de notificación no bloquean la interfaz usuaria por lo cual, el usuario podría seleccionar alguna otra opción de la pantalla generando un conflicto con la operación que ya está siendo ejecutada.

Por suerte el framework de interfaz usuaria de SharePoint 2010 tiene una clase javascript llamada SP.UI.ModalDialog.showWaitScreenWithNoClose la cual despliega mensajes modales como el siguiente:

La función showWaitScreenWithNoClose, acepta los siguientes cuatro parámetros:

Veamos el siguiente ejemplo:

var ventanaModal = SP.UI.ModalDialog.showWaitScreenWithNoClose('Mostrando contenido', 'Estoy ejecutando una operación muy larga!', 76, 330);

Con lo que obtendríamos lo siguiente:

Si nosotros quisieramos actualizar la operación, simplemente tendríamos que agregar la siguiente línea:

ventanaModal.get_html().getElementsByTagName('TD')[1].innerHTML = 'Ya está terminando la operación...';

Obteniendo lo siguiente:

Como pudieron ver la línea anterior no es un método estándar para actualizar el mensaje mediante la API. Por lo cual podría variar en actualizaciones posteriores, asi que tengan cuidado al usarlo

Finalmente para cerrar el mensaje simplemente agregamos la línea

ventanaModal.close();

Como pudieron ver a lo largo de esta serie de artículos, el nuevo framework de UI de SharePoint 2010 nos provee muchas funcionalidad muy atractivas para nuestros sitios.

A continuación les dejo un listado con todos los artículos con tips de la UI que publiqué:

• Utilizando el área de notificación de SharePoint 2010 [Tip UI # 1]

• Utilizando la barra de estado de SharePoint 2010 [Tip UI # 2]

• Utilizando los Modal Dialogs de SharePoint 2010 [Tip UI # 3]

• Utilizando los mensajes de progreso modales [Tip UI #4]

Lo genial de este modal dialog es que podemos manejar todo desde JavaScript, desde su apertura hasta el cierre de el (detectando si fue por una acción de Aceptar o Cancelar).

Ahora bien, ¿cómo abrimos un nuevo diálogo? Simple, llamamos a la función SP.UI.ModalDialog.showModalDialog la cual acepta como parámetro las opciones de como será abierta nuestro diálogo. Si desean mayor información con respecto a las opciones que podemos utilizar, les recomiendo que vean el siguiente link.

Veamos la apertura de un diálogo que se direccione a una página que poseo en mi sitio SharePoint, basta ejecutar el siguiente código:

function crearDialogo()
{
var options = {
url: '/SitePages/Ejemplo.aspx',
title: 'Diálogo de Ejemplo',
allowMaximize: true,
showClose: true,
width: 800,
height: 600,
dialogReturnValueCallback: CallbackCerrar
};

SP.UI.ModalDialog.showModalDialog(options);
} 

Con lo cual obtendremos el siguiente resultado:

Como podrán darse cuenta, en las opciones de la función JavaScript especifiqué un método llamado “CallbackCerrar” su propósito es que al momento de cerrar el diálogo podamos obtener información de que fue lo que ocurrió ya sea el usuario presionó el botón Aceptar o el botón Cancelar.

function CallbackCerrar(dialogResult, returnValue)
{
if(dialogResult == SP.UI.DialogResult.OK)
{
SP.UI.Notify.addNotification('Presionaste OK o Guardar');
document.title = returnValue;
}

if(dialogResult == SP.UI.DialogResult.cancel)
SP.UI.Notify.addNotification('Presionaste Cancelar!');
} 

Ahora viene lo entretenido, ¿Cómo hacemos que desde nuestra ventana modal podamos notificar a la ventana padre que acción sucedió en ella? Solamente tenemos que llamar a la función SP.UI.ModalDialog.commonModalDialogClose el cual acepta dos parámetros, el primero es una enumeración las posibles acciones invocadas y el segundo parámetro es un valor de retorno definido por el usuario. Si desean mayor información con respecto a la enumeración, sigan el siguiente link

A nuestro diálogo anterior le agregaremos dos botones: Aceptar y Cancelar, los cuales invocarían la función “fnAceptar” y “fnCancelar” respectivamente.

<input type="button" value="Aceptar" onclick="javascript:fnAceptar();" />
<input type="button" value="Cancelar" onclick="javascript:fnCancelar();" /> 

function fnAceptar() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, "El usuario presiono aceptar");
}

function fnCancelar() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel, "El usuario presiono cancelar")
} 

Con lo cual obtendríamos lo siguiente:

Al presionar el botón aceptar, veremos como usando el área de notificación nos aparece un mensaje diciendo “Presionaste OK o Guardar”. Mientras que si presionamos el botón Cancelar veremos el mensaje “El usuario presiono cancelar”.

 

ó

respectivamente

Como puedes ver, manejar las ventanas modales de SharePoint 2010 no es nada complejo simplemente son unas funciones JavaScript y unos pocos parámetros ! Espero que este artículo haya sido de tu utilidad, hasta la próxima!

A continuación les dejo un listado con todos los artículos con tips de la UI que publiqué:

• Utilizando el área de notificación de SharePoint 2010 [Tip UI # 1]

• Utilizando la barra de estado de SharePoint 2010 [Tip UI # 2]

• Utilizando los Modal Dialogs de SharePoint 2010 [Tip UI # 3]

• Utilizando los mensajes de progreso modales [Tip UI #4]

Barra de Estado

Para poder hacer uso de esta función basta con simplemente llamar a la función: “SP.UI.Status.addStatus”, la cual acepta tres parámetros:

• El primero, es el título del estado
• El segundo, es una string que acepta HTML en el cual irá la descripción del estado
• El tercero, es un booleano indicando si el mensaje debe ser desplegado como el primero o no.

Ahora veamos un simple ejemplo:

var sid = SP.UI.Status.addStatus('Mi estado:', 'Este es un <b>ejemplo</b>', true);

Con el cual obtendríamos:

Si se dan cuenta, esta barra muestra un color un poco azulado.. ¿cómo podemos cambiar el color de la barra?. Simplemente llamamos a la función JavaScript SP.UI.Status.setStatusPriColor, el cual acepta dos parámetros, el primero es el ID de la barra de estado a la cual le cambiaremos el color, y el segundo es el color que asignaremos. Tomando la barra que vimos anteriormente, el código sería el siguiente:

var sid = SP.UI.Status.addStatus('Mi estado:', 'Este es un <b>ejemplo</b>', true);
SP.UI.Status.setStatusPriColor(sid, 'red');  

 

  Lo cual quedaría así:

Espero que este tip haya sido de su utilidad, en un próximo artículo les mostraré como hacer uso del Ribbon. Hasta la próxima !

A continuación les dejo un listado con todos los artículos con tips de la UI que publiqué:

• Utilizando el área de notificación de SharePoint 2010 [Tip UI # 1]

• Utilizando la barra de estado de SharePoint 2010 [Tip UI # 2]

• Utilizando los Modal Dialogs de SharePoint 2010 [Tip UI # 3]

• Utilizando los mensajes de progreso modales [Tip UI #4]