Primeros pasos con WPF/E

Este artículo servirá para iniciarse a Windows Presentation Foundation Everywhere. Actualmente la última versión publicada es la CTP de febrero. La podéis descargar, junto al SDK en www.microsoft.com/wpfe. Para ello la única herramienta que usaremos será el bloc de notas.

Una vez instalado WPF/E ya podemos empezar a desarrollar para él.

Lo primero que haremos será crear una carpeta e incluir el archivo aghost.js en ella. Este script se encarga de comprobar si tenemos instalado wpf/e o si la versión instalada es la necesaria para ejecutar la aplicación wpf/e.

Ahora creamos un archivo llamado intro.htm, y añadimos el siguiente código:

<html>

<head>

    <title>Introducción a wpf/e</title>

    <script src="aghost.js" type="text/javascript"></script>

</head>

<body>

   

</body>

</html>

Añadimos dentro de la etiqueta body una capa con el id wpfeControl1Container.

<div id=" wpfeControl1Container"></div>

 

Y debajo de la capa ponemos el siguiente script (al final veréis cual es el código HTML que genera este script):

<script type="text/javascript">

      new agHost("wpfeControl1Container",

            "agControl1","300px",

            "300px","#D6D6D6",

            null,"wpfexaml.xaml",

            "false","30",null);

var agControl = document.getElementById("wpfeControl1");
</script>

Ahora solo nos falta crear el archivo .xaml, que (como podemos ver en el código anterior) debemos llamar wpfexaml.xaml, lo creamos y añadimos el siguiente código, es un ejemplo muy sencillo:

<Canvas

   xmlns="http://schemas.microsoft.com/client/2007"

   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">

      <Rectangle Width="300" Height="300" Stroke="Black" StrokeThickness="5" Fill="Red">

              

         </Rectangle>

</Canvas>

 

El elemento raíz en estos XAML es el elemento Canvas, al que importamos los esquemas y añadimos un control Rectangle, con el borde de 5px y negro, de tamaño 300x300px y relleno de rojo.

Ahora ya podemos abrir el archivo intro.htm, habilitar los scripts y ahí tenéis el cuadrado [:)].

El código que genera el script que añadimos debajo de la capa es el siguiente:

    <object id="WpfeControl1"

        width="300"

        height="300"

        classid="CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA"

 

        <param name="BackgroundColor" value="#D6D6D6" />

        <param name="SourceElement" value=null />

        <param name="Source" value="wpfexaml.xaml" />

        <param name="MaxFrameRate" value="30" />

    </object>

Esto significa que no tenemos porque generarlo con JavaScript sino que también podemos escribir nosotros el HTML de WPF/E.

Si lo escribiésemos a mano el código sería el siguiente:

<html>

<head>

    <title>Introducción a wpf/e</title>

    <script src="aghost.js" type="text/javascript"></script>

</head>

<body>

    <div id="wpfeControl1Container"></div>

    <object id="WpfeControl1"

        width="300"

        height="300"

        classid="CLSID:32C73088-76AE-40F7-AC40-81F62CB2C1DA">

       

        <param name="BackgroundColor" value="#D6D6D6" />

        <param name="SourceElement" value=null />

        <param name="Source" value="wpfexaml.xaml" />

        <param name="MaxFrameRate" value="30" />

 

    </object>

</body>

</html>

 

Esto ha sido una pequeña introducción a wpfe. Como resumen, los 3 elementos para usar WPF/E son:

  • La página HTML: Contiene el control de WPF/E.
  • El script (aghost.js): Comprueba si WPF/E está instalado y cual es la versión necesaria.
  • El archivo XAML: WPF/E lo interpretará y lo mostrará.

Descarga el código fuente aquí.

No Comments