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>

</head>

<body>

</body>

</html>

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

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

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>

</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:

width=»300″

height=»300″

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

</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>

</head>

<body>

width=»300″

height=»300″

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

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

Eugenio Estrada

2 thoughts on “Primeros pasos con WPF/E”

Deja un comentario Cancelar respuesta