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í.