Más vale tarde que nunca… Espero que la espera haya valido la pena. Tras la primera parte, quedó pendiente cómo trabajar con Silverlight y ver un poco de código. Para la desesperación de unos pocos, en esta segunda parte he continuado la introducción a la plataforma con más gráficos y diagramas. Pero finalmente, hemos hecho una pequeña demo para ver su potencial.

Autor:

Director comercial en Difoosion y programador especializado en tecnologías Microsoft y diseño de interfaces de usuario. Amante de las nuevas tecnologías: móviles, redes sociales, etc. Además practico a veces la fotografía como podéis ver en mi Flickr. Podéis seguirme en mi Twitter o para cualquier otra cosa podéis ver más en mi blog y en mi página personal.
Descarga Demostración

Este tutorial forma parte de una serie

Multiplataforma

En la primera parte nos centramos en qué y para qué es Silverlight. Una vez que ya lo sabemos, lo más importante es saber cómo lo hace. Veremos cómo está construido y solo así podremos entender, entre otras cosas, sus limitaciones. Como dijimos en la primera parte, Silverlight es un plugin que se instala en nuestro navegador. La cantidad de navegadores y plataformas soportadas era muy amplía y esto supone una gran dificultad.

Esto estriba en que cada navegador y cada plataforma tiene sus propias limitaciones. Esto va a provocar que el plugin del navegador tenga esas mismas limitaciones. Por si eso no fuera poco, las aplicaciones Silverlight fuera del navegador tendrán limitaciones y pequeños matices distintos por su propia naturaleza. Por lo tanto, en resumen, Silverlight tendrá tantas limitaciones como el total de sus plataformas soportadas tengan.

Si eso no se hiciese de esa forma, tendríamos un problema, ya que una aplicación que funciona en un sistema, podría no funcionar en otro. Por poner algún ejemplo, desde una aplicación Silverlight no se puede tener acceso a los directorios del sistema o desde una aplicación fuera del navegador, el programador no puede abrir un enlace en el navegador, si no es el usuario al que se pide confirmación explícitamente.

La Platform Adaptation Layer (PAL), es la encargada de abstraer a Silverlight de la plataforma de donde se ejecuta. Lo que permite que poco a poco se vayan pudiendo ir incorporando características del sistema a la plataforma de Silverlight, por ejemplo las más deseadas son: acceso a la WebCam y servicios de impresión de documentos.

Partiendo de esta base, podremos analizar que tiene consigo Silverlight.

Recursos

Silverlight trae consigo una serie de clases, divididas en distintas tecnologías o agrupaciones:

  • Base Class Library (BCL): Contiene todo lo básico para trabajar con cualquier lenguaje .NET: colecciones, genéricos, criptografía, tipos básicos, hilos, etc. Aquí estará todo aquello que sea de carácter general.
  • Windows Communication Foundation (WCF): Contiene todos los metodos necesarios para las comunicaciones, como servicios web, serialización XML y JSON, RSS y todo tipo de mecanismos para las comunicaciones.
  • Acceso a datos (ADO.NET): Tiene todos los métodos necesarios para el manejo de datos, tanto jerárquicos como el XML, secuenciales como los Streams, consultas declarativas integradas en el lenguaje (LinQ), enlace a datos en la interfaz y demás.
  • Dynamic Language Runtime (DLR): Nos permite hacer uso de los lenguajes de programación dinámicos como JavaScript Managed, IronPython, IronRuby o lenguajes funcionales como F#.
  • Windows Presentation Foundation (WPF): Este quizás es el más importante de Silverlight, ya que es donde engloba el Presentation Core y el XAML.
    • Presentation Core: Contiene todos los controles, el acceso a derechos de contenido multimedia (DRM), el DeepZoom, los métodos de entrada (teclado, ratón, pantalla), todo el sistema de animaciones, la forma de integrar los enlaces a datos en la propia interfaz, etc.
    • XAML: Es la gran estrella en todo esta tecnología, ya que con muy pocas líneas de código de marcado, nos permite instanciar objetos que de forma imperativa estábamos perdiendo mucho tiempo. Llegando al punto de la integración de equipos de diseño gráfico donde no se tendrían que mezclar con herramientas de programadores.

Si bien ahora, todo esto te queda un poco grande, a medida que avancemos en este tutorial verás viendo como cada una de las partes que aquí simplemente describimos, van cobrando sentido en nuestras aplicaciones Silverlight.

¿Cómo funciona?

Cuando compilamos con Silverlight / .NET, lo que estamos haciendo es, desde un punto de vista de la plataforma (sin ningún lenguaje de programación especifico), coger código someterlo a un compilador que lo transforma en lo que Microsoft llama ensamblado. Dicho ensamblado escrito en un lenguaje similar a ensamblador, en tiempo de ejecución se compila a código nativo (normalmente en el primer uso nada más) y este es el que se ejecuta. Queda bien ilustrado con la siguiente figura:

En el caso de Silverlight, contamos con un proceso intermedio:

Esto se debe a que la generación a código nativo la hace el propio plugin de Silverlight en el navegador. Además una aplicación Silverlight puede contener X ensamblados y X recursos (imágenes, videos, etc.), eso no se debería descargar elemento a elemento, sino que es mejor empaquetarlo en un único fichero comprimido (con el algoritmo gzip). Y para eso se crear el fichero .xap, ya que es el que se mandará el navegador.

El empaquetado de recursos tienes sus matices, es bueno incluirlo en el XAP siempre y cuando sean recursos de poco peso para la aplicación. En caso de que sea un tamaño considerable, este se debería descargar asíncronamente bajo petición de la aplicación (y cacheado posteriormente a poder ser).

El diseñador tiene su sitio

En la primera parte apenas citamos el XAML (Xml Application Markup Language), un nuevo lenguaje creado para Silverlight, a lo largo de esta segunda parte hemos hablado de lo que nos proporciona la plataforma para manejarlo. Pero solo hablamos muy por encima de lo que era.

XAML ha nacido con varios objetivos muy claros, el más claro es la división entre diseñador y programador, de tal forma que el diseñador solamente tenga que trabajar con el XAML usando los recursos que el programador con XAML y el lenguaje que escoja le provea, pero de esto hablaremos más adelante.

Pero además intenta llevar a su máxima expresión el patrón Módelo-Vista-Controlador (MVC). Pero para su adaptación a Silverlight, Microsoft ha creado un derivado de este patrón llamado Modelo-Vista-VistaModelo, con las modificaciones que se hizo sobre el MVC original, se omite el Controlador y en cambio se crea un una adaptación del Modelo para cada Vista y a mayores la Vista puede acceder directamente al Modelo.

Manos a la obra

Hemos hablado de que el programador y el diseñador pueden convivir en un proyecto en paralelo, para ello hay que definir bien las funciones de cada uno y ver cómo pueden colaborar entre ellos. Sobre el ciclo de vida completo hablaremos en próximas entregas, ahora haremos un vista rápida de cómo pueden colaborar.

Aun que, de momento, no hemos visto nada de código. Podemos ir hablando de cómo pueden colaborar los dos roles principales en el desarrollo de una aplicación Silverlight.

Normalmente a la hora de diseñar una interfaz contamos con 3 partes fundamentales: esbozar, prototipar y diseñar/desarrollar. Normalmente el esbozo lo hace el analista en colaboración con el cliente, el prototipo lo hace solo el diseñador y diseño y desarrollo final lo hacen entre programador y diseñador, cada uno su rol.

En este caso el proceso sería el siguiente:

  • El analista hace el esbozo (en blanco y negro) ya usando los controles de Silverlight (con un estilo especial para remarcar que es un esbozo)
  • El diseñador partiendo de ese esbozo hace un prototipo funcional (con datos de ejemplo y sin procesos de negocio)
  • El programador otorga al prototipo los procesos de negocio para ser completamente funcional

Exceptuando el primer paso los dos siguientes pueden convivir juntos, el programador puede darle funcionalidad sin molestar al diseñador.

Pero el papel del programador no se limita a eso. Este le puede preparar recursos al diseñador para que use:

  • Controles de usuario: A pesar de que Silverlight tiene una buena cantidad de controles, que además son ampliados por la comunidad en el Silverlight Toolkit, el programador puede desarrollar sus propios controles para que el diseñador pueda usar directamente en la interfaz.
  • Comportamientos: Los comportamientos (conocidos como Behaviors) se usan para añadir funcionalidad a controles ya sea de forma genérica a cualquiera existente o alguno específico. Algún ejemplo de ellos podría ser una máquina de físicas para otorgar a los controles propiedades físicas como gravedad.
  • Efectos: Los efectos se pueden desarrollar usando el lenguaje HLSL y las librerías de DirectX. Con ello creamos los llamados Pixel Shaders. Por defecto son dos los que tienen el Blur (Difuminado) y DropShadow (Sombra).

En la primera demo de este tutorial vamos a ver como empezar a hacer algo con Silverlight. Recuerdo que en la primera entrega cité el software necesario para programar con Silverlight. A día de hoy tenemos otra alternativa, de la cual hablaremos en la siguiente entrega, que es MonoDevelop con soporte a Moonlight (Compatible con Silverlight 2.0 y 3.0 de forma experimental).

Esta primera demo la haremos con Visual Studio 2010 y Silverlight 4 SDK. Para eso veremos el proceso para crear un nuevo proyecto:

Abrimos Visual Studio 2010 y creamos un nuevo proyecto: Seleccionamos Visual C#>Silverlight>Silverlight Application

A continuación nos preguntará si queremos crear también un proyecto Web que aloje la aplicación, para esta primera demo le diremos que no.

Como podéis ver el proyecto generado tiene 2 ficheros, acabamos con extensión XAML:

  • App.xaml: Todas las aplicaciones Silverlight lo tienen, es el encargado de gestionar al carga del contenido, el que gestiona los errores como último nivel, cuando la aplicación se inicia, etc. En general se encarga de todo el ciclo de vida de la aplicación Silverlight.
  • MainPage.xaml: Será el contenido principal que se pintará al ejecutar nuestra aplicación.

Para nuestra primera demo tan solo vamos a dibujar los últimos artículos publicados en Ontuts, para ello debemos editar el fichero MainPage.xaml y añadir un control ListBox.

<UserControl x:Class="SilverlightApplication1.MainPage"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
      <Grid x:Name="LayoutRoot" Background="White">
            <ListBox x:Name="TitularesListBox" FontSize="18" />
      </Grid>
</UserControl>

Para continuar, debemos añadir la referencia System.Xml.Linq.

Una vez lo tengamos añadido debemos editar el código C# de la página principal.

Y en el cargar los últimos titulares de Ontuts, usando su RSS, como se muestra a continuación:

using System;
using System.Linq;
using System.Windows;
using System.Windows.Controls;
using System.Net;
using System.Xml.Linq;

namespace SilverlightApplication1
{
    public partial class MainPage : UserControl
    {
        Uri feed = new Uri("http://feeds.feedburner.com/web-ontuts", UriKind.Absolute);

        public MainPage()
        {
            InitializeComponent();
            Loaded += MainPage_Loaded;
        }

        void MainPage_Loaded(object sender, RoutedEventArgs e)
        {

            // El objeto WebClient nos permite descargar
            // conteindo de otras páginas
            var webClient = new WebClient();
            // Establecemos el método que gestionará la descarga
            webClient.DownloadStringCompleted += webClient_DownloadStringCompleted;
            // Solitamos la descarga del feed
            webClient.DownloadStringAsync(feed);
        }

        void webClient_DownloadStringCompleted(object sender, object args)
        {
            var e = (DownloadStringCompletedEventArgs)args;
            // Comprobamos que no hay error
            if (e.Error != null) return;
            // Parseamos mediante LinqToXml el resultado
            var doc = XDocument.Parse(e.Result);
            // Obtemos con una consulta Linq los titulos de las entradas
            var query = from n in XDocument.Parse(e.Result).Descendants("item")
                                           select n.Element("title").Value;
            // Establecemos los titulos al ListBox
            TitularesListBox.ItemsSource = query;
        }
    }
}

Una vez esté hecho, con refrescar la página (F5 en Windows) ya se nos cargará en el navegador nuestra aplicación y podremos depurarla.

Y eso es todo, espero que haya quedado lo suficientemente claro :) .

Referencias

Os dejo con algunas referencias y fuentes que me han ayudado e inspirado a completar esta segunda parte del tutorial.

Enlaces

Libros

Reflexión final: ¿Vamos a por un tercero?

Otra vez me debo disculpar, por haber tardado tanto en escribir la segunda parte. Pero ahora, que he cogido carrerilla, no me quiero quedar aquí.

Comentad qué os parece el enfoque, qué os gustaría leer sobre el tema, etc. Estamos abiertos a propuestas para continuar siendo de interés para vosotros.

¡Nos vemos en la próxima publicación!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (6 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Bienvenido de nuevo a la zona de colaboradores Eugenio… y enhorabuena por esta pedazo introducción, muy visual y claro todo.

Espero con ganas la chicha de la tercera parte :)

Un tutorial bueno y fácil de seguir. Me ha entrado morriña de programar en .NET jeje

Pedro González

como idea para el tutorial 3, que tal si das un ejemplo un poco mas dificil, algo asi como crear una aplicacion con visual estudio 2008 y silverlight 3, yo he estado tratando de modificar una aplicacion para presentar fotos, como una galeria, me vendria de ayuda si pudieras crear una aplicacion que muestre fotos en una pagina web, desde ya muchisimas gracias y este tutorial esta muy bien realizado

ATP

Trabajo con Winforms en aplicaciones de gestión y me gustaría saber qué posibilidades me da Silverlight para ello. Seguramente será mejor desarrollar directamente en WPF, pero no veo la diferencia a hacerlo con Silverlight.

Saludos y muchas gracias por todo.

Me gustaria saber comompuedo hacer para crear un control play y otro stop en un aplicacion hecha en silverlight.