Vamos a ver como podemos crear una sencilla página utilizando Microsoft Silverlight.
Para ello, crearemos el típico "Hola Mundo", utilizando para ello la versión 1.0 de Silverlight. Más adelante publicaremos un ejemplo utilizando la versión 2.0
Para crear proyectos en Silverlight, normalmente usaremos Expression Blend, el cual va por su versión 2. Tambien podemos utilizar Visual Studio 2008, en conjunto con Blend, y Eclipse, junto con los plugins adecuados, aunque en realidad nos sirve cualquier editor de texto, ya que todo se basa en tags y propiedades similares al XML.
Sin embargo, necesitaremos cierto codigo de inicializacion que Blend nos genera automáticamente, de ahi que sea la herramienta mas recomendable para iniciarse en esta tecnología.
Para empezar, crearemos un archivo llamado, por ejemplo, 'HolaMundo.xaml'. Este será archivo donde añadiremos los elementos graficos de la aplicación.
Para empezar, crearemos un elemento del tipo 'Canvas', que es el contenedor principal de Silverlight 1.0, con el siguiente código:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Page" Background="White"
Width="640" Height="480">
</Canvas>
En el especificamos el tamaño con los atributos 'Width' y 'Height', el color de fondo 'Background' y el nombre del elemento 'x:Name'.
Si hemos utilizado Blend, nos creará automaticamente el código anterior, por lo que será mas sencillo la realización del ejemplo.
Posteriormente, añadiremos nuestro mensaje 'Hola Mundo'. Para ello, utilizaremos un elemento de tipo 'TextBlock', que es el que nos permite poner texto. Este elemento y todos los que queramos incluir en la aplicación, deberán ir dentro del canvas principal.
<TextBlock Name="miTexto" Canvas.Left="250" Canvas.Top="200" Foreground="#FFFF0000" Text="Hola Mundo"/>
Utilizamos los atributos 'Canvas.Top' y 'Canvas.Left' para especificar la posición del elemento dentro del canvas contenedor, asi como el color del texto, donde las primeras dos cifras hexadecimales indican la opacidad del elemento (00 = transparente, FF = opaco) y el resto de pares de cifras indican el color RGB. Por último, el elemento atributo 'Text' indica el texto que queremos mostrar.
Una vez hecho esto, este seria el aspecto que tendria nuestro fichero '.xaml'.
Para ello, crearemos el típico "Hola Mundo", utilizando para ello la versión 1.0 de Silverlight. Más adelante publicaremos un ejemplo utilizando la versión 2.0
Para crear proyectos en Silverlight, normalmente usaremos Expression Blend, el cual va por su versión 2. Tambien podemos utilizar Visual Studio 2008, en conjunto con Blend, y Eclipse, junto con los plugins adecuados, aunque en realidad nos sirve cualquier editor de texto, ya que todo se basa en tags y propiedades similares al XML.
Sin embargo, necesitaremos cierto codigo de inicializacion que Blend nos genera automáticamente, de ahi que sea la herramienta mas recomendable para iniciarse en esta tecnología.
Para empezar, crearemos un archivo llamado, por ejemplo, 'HolaMundo.xaml'. Este será archivo donde añadiremos los elementos graficos de la aplicación.
Para empezar, crearemos un elemento del tipo 'Canvas', que es el contenedor principal de Silverlight 1.0, con el siguiente código:
<Canvas xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
x:Name="Page" Background="White"
Width="640" Height="480">
</Canvas>
En el especificamos el tamaño con los atributos 'Width' y 'Height', el color de fondo 'Background' y el nombre del elemento 'x:Name'.
Si hemos utilizado Blend, nos creará automaticamente el código anterior, por lo que será mas sencillo la realización del ejemplo.
Posteriormente, añadiremos nuestro mensaje 'Hola Mundo'. Para ello, utilizaremos un elemento de tipo 'TextBlock', que es el que nos permite poner texto. Este elemento y todos los que queramos incluir en la aplicación, deberán ir dentro del canvas principal.
<TextBlock Name="miTexto" Canvas.Left="250" Canvas.Top="200" Foreground="#FFFF0000" Text="Hola Mundo"/>
Utilizamos los atributos 'Canvas.Top' y 'Canvas.Left' para especificar la posición del elemento dentro del canvas contenedor, asi como el color del texto, donde las primeras dos cifras hexadecimales indican la opacidad del elemento (00 = transparente, FF = opaco) y el resto de pares de cifras indican el color RGB. Por último, el elemento atributo 'Text' indica el texto que queremos mostrar.
Una vez hecho esto, este seria el aspecto que tendria nuestro fichero '.xaml'.
Con esto tendremos finalizado nuestro fichero principal, lo que veremos en pantalla.
Sin embargo, para que todo funcione correctamente, necesitaremos los siguientes ficheros:
- Default.html, es la página contenedora, donde ira incrustado el elemento Silverlight y que incluye las librerias Javascript que vienen a continuación.
- HolaMundo.xaml.js, donde se incluye el código Javascript para controlar nuestra aplicación
- Silverlight.js, que incluye código de inicialización del plugin y del elemento Silverlight.
Como indicaba anteriormente, estos últimos ficheros son generados automáticamente por Blend, de ahi que sea recomendable su uso cuando uno se esta iniciando en esta tecnologia.
Para probar nuestra aplicación, podremos hacerlo desde el propio Blend, pulsando F5 o a través del menú 'Project/Test site'. O tambien abriendo directamente en el navegador nuestra página 'Default.html'
0 comentarios:
Publicar un comentario en la entrada