Introducción a Silverlight – Parte 1: Herramientas y Hello World

Traducción aproximada del artículo Getting started with Silverlight: Part 1 – The tools and Hello World publicado el 6 de Octubre del 2009 en inglés por Tim Heuer.


Esta es la primera parte en un a serie de artículos introductorios para desarrolladores de Silverlight.

A través de la serie desarrollaremos un programa que automáticamente monitorea palabras a intervalos específicos usando la funcionalidad de búsqueda en Twitter. Pero antes de ir muy lejos, empecemos por verificar que se tienen todas las herramientas necesarias y que se tiene un buen de fundamento sobre lo que implica el desarrollo en Silverlight.


Las Herramientas

Yendo al extremo, lo único que realmente se necesita para programar es un editor de texto y el compilador. Pero habría que esta loco como para ignorar el tipo de herramientas avanzadas de primera calidad disponibles.Por eso voy a sugerir un juego de herramientas completo que simplificará y agilizará la experiencia de programar en Silverlight. No todas las herramientas son esenciales (como ya mencioné, un programador suficientemente apasionado sólo necesita un editor de texto y el compilador :-)), tampoco son todas gratis, pero las recomiendo no sólo por trabajar en Microsoft, sino porque en verdad creo que son el mejor equipo para la tarea.


Visual Studio 2008

Primero que nada hay que tener Visual Studio 2008. Asegúrense de haber instalado el Service Pack 1, puesto que es requisito para desarrollar con Silverlight. Cualquiera de las versiones de Visual Studio2008 SP1 sirve. Los que todavía no lo tienen, pueden usar una de las versiones exprés gratis como por ejemplo Visual Web Developer Express 2008. Si el plan incluye desarrollar con bases de datos, entonces pueden obtener gratis SQL Server Express 2008.


Herramientas de Silverlight para Visual Studio

Conocidas en inglés como Silverlight Tools for Visual Studio, este es otro archivo que hay que bajar para instalar el kit de desarrollo de software (SDK), el motor de tiempo de ejecución (para depuración) y utilería para Visual Studio (plantillas para proyectos, configuraciones para generación, y otros). Este paquete se instala encima de Visual Studio para convertirlo en un entorno de desarrollo para Silverlight.

Ambos archivos, Visual Studio y las Herramientas de Silverlight se pueden bajar por separado. Si ya se tiene Visual Studio, entonces sólo es necesario bajar e instalar las herramientas para estar listo. Si todavía no tienen Visual Studio, entonces puede ser mejor idea usar el Instalador de Plataforma Web debido que se automáticamente encarga de instalar todo lo necesario, Visual Studio, SQl Server, y las Herramientas de Silverlight. De esa manera no hay que andar buscando y descargando múltiples paquetes pasa instalar. Se puede obtener el Instalador aquí:


Instalador de Plataforma Web


El instalador sirve incluso si ya se tiene Visual Studio. Alternativamente pueden conseguir los otros archivos aquí.


Expression Blend

Expression Blend es una herramienta interactiva de desarrollo. Funciona como el diseñador visual para XAML, la tecnología fundamental de presentación para aplicaciones en Silverlight y Windows Presentation Foundation (WPF). Blend es un excelente espacio de trabajo que permite manipulación de diseños, animaciones, estilos y plantillas. Para mí ésta es una herramienta esencial para desarrollo en XAML. Sin embargo, no está disponible sin costo. Se incluye en algunos niveles de subscripción a MSDN, o se puede comprar como parte del paquete Expression Studio. También, para empezar, es posible descargar una copia de evaluación de Expression Blend 3.


Juego de Herramientas de Silverlight

Este juego de herramientas (que no ha de confundirse con las de arriba que son para Visual Studio) contiene controles adicionales fuera de los incluidos con el núcleo de Silverlight. Lo mejor de todo es que vienen con el código de fuente (incluyendo el de todos los controles integrales de Silverlight) con el fin de poder extenderlos o aprender de ellos.

En esta serie vamos a usar varios controles de el juego de herramientas, disponible para descarga en CodePlex.

Hay todavía otros juegos de controles y herramientas, como por ejemplo los Servicios RIA de .NET que discutiremos en la tercera parte, pero por el momento creo que los componentes citados arriba son suficientes y el mínimo recomendado para poder desarrollar en Silverlight. Deben ser instalados antes de proceder al segundo paso de esta guía.


Familiarizándonos con el entorno de desarrollo

Después de instalar las herramientas de Silverlight en Visual Studio aparecerá un nuevo grupo en el cuadro Nuevo Proyecto:


El cuadro de Nuevo Proyecto contiene un nuevo grupo de plantillas para Silverlight.


El nuevo grupo contiene por lo menos tres tipos de proyectos, Aplicación de Silverlight, Biblioteca de clases de Silverlight y Aplicación de navegación de Silverlight. Dependiendo de si se ha instalado otros paquetes, puede que hayan más tipos de proyectos disponibles.

Para este paso, la plantilla a escoger es Aplicación de navegación de Silverlight. También hay que asignarle un nombre (la versión para este artículo se llama MonitorTwitter).

En el siguiente cuadro, se nos pregunta si queremos crear también un proyecto de web:


El asistente ofrece crear un proyecto de web adjunto.


Para proyectos nuevos, lo más recomendable es seleccionar la opción de crear el proyecto de web. De esa manera tendremos un marco desde el cual ejecutar la aplicación que será especialmente útil para evitar problemas que podrían surgir al usar servicios de web desde el sistema de archivos locales. El proyecto de web puede ser de tipo Aplicación de Web ASP.NET, Sitio de Web ASP.NET o también ASP.NET MVC si está instalado. En caso de no estar seguro, lo mejor es usar el tipo de proyecto predeterminado.


Estructura del Proyecto

Luego de creada la aplicación, se verá algo como esto:


Apariencia inicial de la solución recién creada.


La ilustración muestra la aplicación de Web (que alojará al cliente Silverlight) con páginas de prueba para el cliente prefabricadas y la aplicación Silverlight en sí. Concentremos nuestra atención primero en el proyecto de la aplicación Silverlight.

Hay algunos archivos principales que es importante conocer y que exploraremos en esta serie:

  • App.xaml: es un archivo para recursos disponibles a la entera aplicación. Todos los recursos (que serán explorados al discutir estilización) globales serán puestos aquí. El archivo es el punto de entrada cuando la aplicación comienza a ejecutar, por lo que contiene instrucciones para indicar a Silverlight qué es lo siguiente por hacer. Por eso es que también contiene eventos generales que se disparan durante el arranque.
  • MainPage.xaml: ésta página cambia según la plantilla que se use. El nombre MainPage es opcional, pero es el que se usa al crear el proyecto. La página contiene la interfase al usuario inicial de la aplicación. Pero se dejen confundir por tales detalles todavía.
  • Carpetas Assets y Views: contienen componentes de la aplicación (como archivos, imágenes, estilos y así por el estilo) y las vistas de la interfase al usuario.

La interfase al usuario está definida en lenguaje XAML contenido en archivos de XML. Más adelante empezaremos a hacer cambios en su contenido.

Usando el menú o el teclado, generen la solución. Como resultado de la operación, la carpeta ClientBin del proyecto de Web contendrá un nuevo archivo con extensión XAP. Ésa es la aplicación compilada. En realidad es un archivo comprimido Zip con diferente extensión. De hecho se puede usar un descompresor para abrir el archivo y ver su contenido con tan solo cambiar la extensión a Zip.

El archivo XAP es lo que se mantiene en servidor y se envía al navegador en la computadora del usuario. La página HTML que presenta la aplicación Silverlight usa la etiqueta <object> para alojar el archivo XAP.


NOTA: Silverlight es una tecnología cliente que puede ser alojada en cualquier servidor de web. Cualquier servidor capaz de dar archivos XAP con la configuración MIME apropiada (application/x-silverlight-app) puede ser usado. El tipo de servidor es irrelevante siempre y cuando pueda entregar el archivo XAP.


El proyecto web es creado con dos páginas pre-configuradas para probar la aplicación, una en HTML y la otra en ASP.NET. Ambas son esencialmente idénticas por lo que suelo eliminar una de ellas para simplificar.


Añadiendo elementos a la interfase del usuario en las páginas XAML

La plantilla que usamos era para una aplicación de navegación, por lo que ya viene con cierta funcionalidad para eso. Ésta es una nueva característica de Silverlight que permite usar un tipo de página maestra en la aplicación. Si se examina la carpeta Views se encontrarán los archivos About.xaml, ErrorWindow.xaml y Home.xaml. Enfoquemos la atención en Home.xaml pues es la primera vista en cargar. Abramos el archivo en Visual Studio mediante hace doble clic en él.


Código en Home.XAML.


La página contiene código XAML que define una cuadrícula (Grid) junto con otros controles como StackPanel y TextBlock (veremos el StackPanel en la segunda parte). Todos son parte del grupo principal de controles de Silverlight. El TextBlock sirve para enseñar texto al usuario. Si se ejecuta la aplicación (usando F5 para ejecutar en modo de depuración y luego accediendo a modificar web.config para poder activar la depuración) deberíamos ver algo como esto:


Aplicación Silverlight ejecutada por primera vez/


Nótese cómo el texto en el navegador es el mismo que vimos en los elementos TextBlock en el XAML. También vale la pena fijarse en el estilo de los botones de enlace en la esquina superior derecha. Éstos son los puntos de partida para navegar a otras vistas en la aplicación. Vamos ahora a añadir un poco más de XAML y ver cómo escribir código.

Agreguemos un botón usando XAML en Home.xaml, justo después del segundo TextBlock:


<Button Content="Púlsame"
        x:Name="MiBoton"
        FontSize="18"
        Width="150"
        Height="45" />


El resultado es un nuevo botón debajo del texto “Contenido de la página principal”. ¿Notaron el atributo x:Name? Su papel es asignar un identificador único con el cual podemos referirnos al control cuando escribimos código. Es como si fuera el atributo ID del control. Hagamos ahora que reaccione cuando es pulsado. Hay dos maneras simples en las que se pueden añadir eventos al botón (y a otros elementos). En la declaración XAML podemos agregar un atributo Click e inmediatamente IntelliSense nos preguntará si queremos generar un método que maneje el evento:


IntelliSense ofrece generar el método en el código subyacente.


También se puede registrar el método directamente en el código subyacente en Home.xaml.cs sin tener que envolver el XAML:


public Home()
{
    InitializeComponent();
    MiBoton.Click += new RoutedEventHandler(MiBoton_Click);
}


Cualquiera de las dos formas produce el mismo resultado. Siéntanse libres de usar el método que les parezca mejor. Por ahora, voy a usar XAML con IntelliSense. En fin, el método MiBoton_Click es donde insertamos código que responde al evento clic, ya sea modificando la interfase al usuario o cualquier otra función necesaria. Terminemos el ejercicio cambiando el texto en HeaderText a “¡Pura Vida!” (Header Text es el x:Name del control TextBlock en el encabezado). Para hacer el cambio escribimos el siguiente código en el método:


void MiBoton_Click(object sender, RoutedEventArgs e)
{
    HeaderText.Text = "¡Pura Vida!";
}


Luego de hacer los cambios y ejecutar la aplicación de nuevo (F5), veremos el botón que, al ser pulsado, cambiará el texto del encabezado:


Aplicación ejecutando con los cambios en el ejemplo.


En el artículo original Tim usa el clásico “Hello World!”, pero es tan utilizado que ya aburre. Así que, para darle un poquito de sabor, he usado una expresión típica de saludo costarricense.


Pasos Siguientes

Hemos creado nuestra primera aplicación en Silverlight usando el clásico ejemplo Hello World. Pero queda más por hacer para crear la funcionalidad de búsqueda en Twitter. Como segundo paso, vamos a cambiar el diseño de algunas de las vistas. Para más información introductoria se pueden consultar las siguientes fuentes:



No proveo la solución final porque éste artículo era no más sobre cómo empezar a desarrollar en Silverlight. En el futuro incluiré un enlace al código luego de cada paso. Espero que les haya sido útil.

Etiquetas asignadas:
 

12 Respuestas a “Introducción a Silverlight – Parte 1: Herramientas y Hello World”

  1. [...] Introducción a Silverlight – Parte 1: Herramientas y Hello World [...]

  2. CLAUDIO VARGAS dice:

    Gracias por el aporte seguire …

  3. ECANORDGZ dice:

    Excelente aporte… yo me inicio en el camino de Silverlight y pienso que este tutorial es un excelente camino para comenzar con la tecnologia.

  4. Juan Carlos dice:

    Hola! Excelente aporte.
    Una pregunta:
    ¿Habría alguna posibilidad de poner los ejemplos tambien en Visual Basic?

    Muchas Gracias
    Saludos desde Argentina

    • David Mora dice:

      Buena pregunta.

      Mi intención es crear ejemplos en Visual Basic en mis propios artículos, los cuales hasta el momento son muy pocos. En los artículos traducidos es más difícil puesto que los ejemplos son a veces extensos y yo no cuento con el tiempo requerido (tan sólo la traducción toma mucho de mi tiempo libre). Para peores, mis habilidades in Visual Basic son escasas, haciendo la tarea aún más difícil y lenta.

      Aun así, no quiero que pienses que considero el Visual Basic menos importante. En la medida de lo posible, trataré de tenerlo en cuenta.

      David

  5. R0d0lF0x dice:

    Hola, no se porque cuando creo una aplicacion silverligth, ya sea en vs 2008 o en vs 2010 no me crea las carpetas ASSETS ni VIEWS… a q se debe esto?, ya q he instalado lo q mencionas… gracias

    • David Mora dice:

      Rodolfo,

      Las carpetas Assets y Views son parte de las plantillas Siverlight Navigation Application o, si se usa WCF RIA Services, Silverlight Business Application. La plantilla básica, Silverlight Application no crea esas carpetas sino que hay que añadirlas manualmente.

      Si estás usando una de las plantillas que deberían crear tales carpetas sin éxito, puede que sea necesario re-instalar las herramientas de Silverligth para Visual Studio. Un problema que yo he experimentado al instalar las diversas versiones, beta, RC, y demás, es que a veces Visual Studio puede terminar algo confundido.

      Espero que esto te sirva de ayuda, si no, me dices.

  6. elviragc dice:

    Hola, me ha gustado mucho los tutoriales que tienes publicados, pero me ha surgido un problema que no se como solucionarlo.

    Tengo varias vistas creadas y quiero acceder de una a otra por programación, por ejemplo al pulsar un botón hacemos diferentes acciones y finalmente cambiamos de vista, buscado por varias páginas pero no encuentro nada. ¿Me puedes ayudar?

    Muchas gracias

    • David Mora dice:

      Elviragc,

      Ése es precisamente el tema de uno de los artículos que estoy escribiendo. Sin embargo, como voy al paso de la tortuga, te paso la estrategia general que yo he usado en casos como el tuyo:

      1. Puesto que mencionas vistas, supongo que estás usando MVVM. En ese caso, lo primero es crear un comando que sea ejecutado al pulsar el botón. La idea del comando es transferir tal ejecución al modelo de vista.
      2. En el modelo de vista puedes coordinar la ejecución de las acciones que mencionas. Por ejemplo, actualizar datos desde el modelo, o generar eventos que son observados por la vista.
      3. Si la acción afecta otras vistas, entonces necesitas enviar mensajes a los correspondientes modelos de vista.
      4. Si quieres cambiar una vista y presentar otra como reacción al botón, una forma de hacerlo es tener una vista que actúe como vista maestra y coordine las vistas cambiables. El modelo de vista que está ejecutando el comando del botón envía un mensaje al modelo de vista de la vista maestra indicándole que hay que cambiar la vista. En este caso, las “sub”vistas se pueden denominar regiones.

      Todo esto se puede hacer a mano, pero es mucho más fácil y efectivo usar una biblioteca que preste tales servicios. Por ejemplo MVVM-Light provee facilidades para el manejo de comandos y mensajes.

      El artículo Tácticas de diseño en aplicaciones basadas en MEF y MVVM de Shawn Wildermuth da algunos detalles sobre el envío de mensajes entre modelos de vista. También el artículo Admistración de regiones en la interfase gráfica trata sobre el tema del manejo de múltiples vistas o regiones en Silverlight . Si bien usa MEF como proveedor de las vistas, la estrategia general es aplicable aun sin usar tal herramienta.

  7. David dice:

    Gracias por el tuto seguiré con el próximo

  8. jeremias dice:

    Hola, tengo un problema cuando corro el debug (f5 y pongo a modificar el web.config, como se indica en el segundo párrafo capítulo “Añadiendo elementos a la interfase del usuario en las páginas XAML”, pues cuando hago eso, me aparece una página en blanco. Uso un equipo con visual studio 2008 sp1, descargué las herramientas de silverlight 3 y corro en windows 7 de 64 bits. También lo intenté desplegar en IE7 y en chrome, pero en ambos es lo mismo. Cuando hago click secundario sobre la página me aparece en el menú contextual el letrero Silverlight.

  9. Dan dice:

    Hola, muchas gracias por tu aportación, de verdad que es muy util, tengo una pregunta, cual es la diferencia entre los tipos de aplicaciones web que se generan (ASP.NET Web Aplication Project, ASP.NET Web Site, ASP.NET MVC Web Project)

Responder



Licencia de uso

El contenido de las traducciones está sujeto a los términos de protección de derechos de uso de los autores originales quienes han autorizado su publicación en este blog. Asegúrese de entender los terminos de la licencia de cada autor antes de usar tal contenido.

Mis propios artículos son publicados bajo los términos de la Licencia Reconocimiento-Compartir bajo la misma licencia 3.0 Estados Unidos de Creative Commons:

Creative Commons License
Blog de Maromas Digitales by Maromas Digitales, LLC is licensed under a Creative Commons Reconocimiento-Compartir bajo la misma licencia 3.0 Estados Unidos License.

License

The contents of all translated articles is subject to the copyright and licensing terms of the original authors and has been published here with their express permission. Verify the original author's licensing terms before using the contents of these articles.

My own articles are licensed under the Creative Commons Attribution-Share Alike 3.0 United States License:

Creative Commons License
Blog de Maromas Digitales by Maromas Digitales, LLC is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.