Tutorial de Silverlight Parte1: Crear el “Hola Mundo” con Silverlight 2 y VS 2008

Esta es la primera parte de una serie de ocho tutoriales en el que crearemos un cliente de Digg usando la Beta 1 de Silverlight2. La idea es que estos tutoriales se lean en orden, con el objetivo de explicar los fundamentos de la programación con Silverlight.

Crear una aplicacion Silverlight con VS 2008

Comenzaremos en el menú File-> New Project de VS 2008 y crearemos una "Silverlight Application" (nota: tenemos que descargar e instalar las Silverlight Tools para VS 2008 para que nos salga ese tipo de proyecto):

Llamaremos al proyecto "DiggSample". Cuando le demos a "OK" Visual Studio nos mostrará otro dialogo en el que se nos pregunta si queremos crear un proyecto Silverlight, y si queremos añadir un proyecto ASP .NET en la solución para hostear la aplicación Silverlight. Para este ejemplo le dejamos que añada la aplicación web ASP.NET y lo llamaremos "DiggSample_WebServer". Al darle a "OK", Visual Stuio creará una solución con los dos proyectos:

 

Cuando compilemos, Visual Studio copiará la aplicación Silverlight al proyecto web automáticamente. El proyecto web de que ha creado VS contiene una página ASP.NET y una página HTML en las que podemos ejecutar y probar nuestra a plicación Silverlight.

Nota: Las aplicaciones Silverlight se pueden usar en cualquier servidor web (incluso Apache en Linux) y hostearla en archivos HTML o en cualquier página web de servidor (PHP, Java, Python, Ruby, etc). Para nuestro ejemplo no escribiremos código de servidor - usaremos la característica de cross-domain de Silverlightpara acceder a la API de servicios de Digg directamente. Elegimos crear un proyecto ASP.NET sólo para usar el servidor web de Visual Studio para pruebas.

Entendiendo qué es una aplicación Silverlight

Cuando creamos una aplicación Silverlight, el proyecto incluye por defecto dos archivos: Page.xaml y App.xaml, así como los archivos de código trasero (que podemos escribir en VB, C#, Ruby o Python):

Los archivos XAML son archivos XML que usamos para especificar el aspecto de la interfaz de usuario de una aplicación Silverlight o WPF. También podemos usar XAML para representar objetos .NET.

El archivo App.xaml se suele usar para declarar recursos, como objetos brocha y estilo que se usarán en toda la aplicación. La clase del código trasero de App.xaml se puede usar para administrar eventos del nivel de alicación - como Application_Startup, Application_Exit y Application_UnhandledException.

El archivo Page.xaml es el control inicial que se carga cuando se activa la aplicación. En él podemos usar los controles que definirán nuestra interfaz de usuario, y administrará los eventos de éstos en las clases del código trasero. (lo veremos más adelante).

Cuando compilamos el proyecto DiggSample, Visual Studio compilará el código y el .xaml en un assembli estándar de .NET, y empaquetará todos los recursos estáticos (como imágenes, archivos estáticos) en el archivo "DiggSample.xap":

Los archivos ".xap" (se pronuncia "zap") usan el algoritmo estándar .zip para minimizar el tamaño de descarga a cliente. Una aplicación "Holla mundo" en Silverlight (con VB o C#) ocupa unos 4KB.

Nota: Algunos controles de la Beta 1 están implementados en assemblies que si se usan se incorporan al archivo .xap de la aplicación (incrementando el tamazo de la aplicación). Todos los controles que vamos a usar están en la Beta 2 y en la release final - con lo que el tamaño total de la aplicación probablemente sea de 6-8Kb (muy poco y muy rápido).

Para hostear y ejecutar una aplicación Silverlight 2, podemos añadir el tag <object> en cualquier página html estándar (no hace falta JavaScript) que apunte al archivo .xap. Silverlight descargará el archivo xap, lo instanciará, y lo hosteará en la página del navegador. Esto funciona sin importar el navegador (Safari, Firefox, IE, etc) y sin importar el sistema operativo (Windows, Mac y Linux).

Para probar las paginas html y ASP.NET con el tag <object> que se añade sólo tenemos que darle a F5.

Añadir controles y eventos

Ahora mismo nuestra aplicación no hace nada, y cuando lo ejecutamos sólo tenemos una página vacía.

Podemos arreglar esto abriendo el archivo Page.xaml y añadir algún contenido:

Empezaremos cambiendo el color de fondo del grid y decarlando un boton. Le damos un nombre en "x:Name" a "MyButton" - lo que nos permitirá referenciarlo programáticamente en el código trasero. Y también le damos valores a las propiedades Content, Width y Height:

Cuando ejecutamos la aplicación se nos muestra el botón en el centro d ela pantalla:

Para darle algún comportamiento al botón cuando le hagamos clic, en la vista de código escribimos el siguiente evento:

Entonces nos preguntará por el nombre del manejardor de eventos que queremos usar:

Podemos escribir un nuevo nombre, o darle a intro y usará el nombre por defecto:

VS creará una implementación por defecto en el código trasero. Podemos usarlo para actualizar el contenido del botón con un nuevo mensaje:

Ahora ejecutamos la aplicación y pulsamos el boton, veremos cómo cambia el contenido:

Próximos pasos.

Aún nos queda un poco de trabajo antes de terminar la aplicación .... ;-)

El próximo paso será configurar toda la estructura de la interfaz de usuario, y poner más controles.

 Traducido por:  Juan María Laó Ramos.

Artículo Original.

23 pensamientos en “Tutorial de Silverlight Parte1: Crear el “Hola Mundo” con Silverlight 2 y VS 2008

  1. Pingback: Primer vistazo a Silverlight 2 « Thinking in .NET

  2. Pingback: Primer vistazo usando Expression Blend con Silverlight 2 « Thinking in .NET

  3. Karla Lizano

    Estoy haciendo mi primera aplicación con Silverlight, la cual consiste en un mapa geografico con cada una de sus regiones clickable, pero en XAML no soporta la clase image map. Cómo puedo establecer las coordenadas para cada región de la imagen (mapa)

    Muchas gracias.

    Responder
  4. Pingback: Tutorial de Silverlight en Español « Thinking in .NET

  5. Edu

    Hola, quiero hacer una aplicación silverligth para publicar en la web, ya he instalado todo, pero no encuentro la opción cada vez q abro el Expression Blend. Que debo instalar, muchas gracias. saludos Edu.

    Responder
  6. Pingback: Tutorial de Silverlight en Español - ASP.NET

  7. Pingback: Tutorial de Silverlight en Español - Silverlight - GUN

  8. Jorge

    Hola tengo un problema al ejecutar mi proyecto cuando realizo mi animacion en silverlight le doy f5 y se ejecuta el IE7 hasta ahi bien de ahi carga y me dice q no se encontro pagina a q se debe gracias

    Responder
  9. Giovanni

    Hola, me parece muy interesante el tutorial solamente que no puedo ver las imagenes asi que pedirian que si pueden soluconen el problema de las imagenes gracias

    Responder
    1. Ignacio G.

      Alex, para VB lo único que tenés que cambiar es la siguiente linea:

      MyButton.Content = “Pushed!”;

      Le sacás el punto y coma y está listo para VB….

      Responder
  10. primix

    hola disculpa la molestia pertenezco a las celulas academicas y estoy investigando sobre silverlight, me podrian poporcianar algun tutorial en español les agradeceria mucho atte:Primix

    Responder
  11. angel

    hola, tengo una interrogante, tengo entendido que puedo programar aplicaciones de silverlight utilizando ruby o python, ahora…descargue la demo del expression blend y no puedo escribir directamente codigo que no sea .net…existe alguna forma o tendria que estar pasando codigo desde el visual studio, disculpa es que no entiendo como seria la dinamica de trabajo, suponiendo que quiero hacer algo sencillo, un circulo que se desplaze por la pantalla y que al pincharlo diga hola mundo..o cualquier tonteria asi…gracias!!

    Responder
  12. Alex

    Que tal solo para agradecer el material esta muy bien y para mi que estoy empezando mucho mejor aun. Bueno eso era todo solo agradecer el favor.

    Responder
  13. serguey

    Necesito el tutorial en español pero del sirverlinght 4
    Por favor si alguien lo tiene agamelo llegar o donde lo puedo buscar
    Gracias de antemano

    Responder

Deja un comentario