Howto:Hello World Moonlight/Silverlight

A continuación describo un primer ejemplo usando Moonlight/Silverlight 1.0 en Linux.

Para probar Moonlight es necesario que instales el plugin para Firefox 3 desde la siguiente liga:

http://www.go-mono.com/moonlight/

Este pequeño tutorial también esta disponible en la pagina del proyecto Mono, el cual subí hace poco tiempo, que lo disfruten, la liga aquí:

http://www.mono-project.com/Howto_helloWorld_Moonlight_ff3

Paso 1) Necesitas el archivo de javascript Silverlight.js, el cual lo puedes descargar del sitio oficial de microsoft, también lo puedes obtener desde svn en el modulo moon del sitio del proyecto Mono o quizá puedas descargar ejemplos de Silverlight y seguramente que de ahí lo puedes obtener.

La interfaz de usuario de Moonlight/Silverlight es definida usando XAML, a continuación vamos a definir un contenedor del tipo Canvas el cual a su vez contendrá un componente TextBlock.

Paso 2) Crear un archivo MyCanvas.xaml:

<Canvas
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        width="640" Height="480"
        Background="White"
        x:Name="PageTextBlock">
        <TextBlock Width="195" Height="42" Canvas.Left="28" Canvas.Top="35"
                   Text="Click Here!!!!" x:Name="entryHello" /> 

</Canvas>

El componente Canvas define la superficie de dibujo y TextBlock renderiza el texto definido en el atributo Text.

Paso 3) Crear el archivo createMoonlight.js:

var slControl;
var entryHello;
function createSilverlight()
{
        Silverlight.createObjectEx({
                source: "MyCanvas.xaml",
                parentElement: document.getElementById("slControl"),
                id: "slControlObj",
                properties: {
                                width: "100%",
                                height: "100%",
                                version: "1.0"
                            },
                            events: {
                                onLoad: load
                            }
                        });

}
function load(control,userContext,rootElement)
{
 slControl = control;
 entryHello = slControl.content.findName("entryHello");
 entryHello.addEventListener("MouseLeftButtonDown","entryOnClick");
}
function entryOnClick(sender,args)
{
 entryHello.Text = "Hello World Moonlight!!!!";
}

La función createSilverlight crea el objeto y define propiedades como source,parentElement..etc. también el evento onLoad define un manejador del evento “load”, en el cual se localiza el componente TextBlock y se añade una entrada para cuando se hace un clic con el boton izquierdo del apuntador.

Paso 4) Crea un archivo html helloWorld.htm , para probar nuestro código que hemos desarrollado:

<html>
  <head>
        <script src="Silverlight.js"></script>
        <script src="createMoonlight.js"></script>
        <style>
          .slControl {
                height: 480px;
                width: 640px;
                border: 1px dotted black;
          }
        </style>
        <title>Moonlight/Silverlight Hello World!!!!</title>
  </head>
  <body>
    Moonlight/Silverlight Sample:<br>
    <div id="slControl" class="slControl">
        <script>
          createSilverlight();
        </script>
    </div>
  </body>
</html>

Por ultimo solo guarda tu archivo html y abrelo con Firefox y Wow!!!

About Jacob

I'm a Bioinformatics Developer, Software Engineer, Open Source Developer, Mobile Developer, Unix/Linux SysAdmin, HPC Sysadmin

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s