El control WebBrowser nos permite incluir contenido HTML dentro de nuestras aplicaciones de Silverlight Fuera del Navegador: una de las grandes características ausentes en la versión de Silverlight 3. En este artículo veremos a detalle su funcionalidad y su modelo de programación presentes en Silverlight 4.
El proyecto
Iniciemos creando un nuevo proyecto de Silverlight 4 con Visual Studio 2010 Beta 2. A este proyecto le pondremos el nombre de Demo.SL4.WebBrowser y aceptaremos las opciones por default de agregar un proyecto de Web para prueba. A LayoutRoot en MainPage.xaml le agregaremos una instancia de WebBrowser, quedando el código de la siguiente manera:
<Grid x:Name="LayoutRoot" Background="White">
<WebBrowser />
</Grid>
Si ejecutamos la aplicación en este momento el resultado será el siguiente:
El control mostrará el mensaje “HTML is disabled” (HTML está deshabilitado). Esto es debido a que el control WebBrowser está pensado para únicamente trabajar en aplicaciones Fuera del Navegador (por lo menos es así como trabaja en esta versión Beta de Silverlight 4).
El control WebBrowser únicamente funciona en Aplicaciones Fuera del Navegador.
Por lo anterior, configuraremos nuestra aplicación Silverlight para que pueda ejecutar Fuera del Navegador. Esto lo logramos seleccionando la opción adecuada en las propiedades del proyecto:
Además que agregaremos más Xaml que represente el resto de controles que usaremos en este ejemplo.
Por otro lado debemos aclarar que el control WebBrowser únicamente puede mostrar contenido que está en el mismo dominio que la aplicación XAP (mismo subdominio, dominio, puerto y protocolo). No obstante, podemos usar un elemento IFRAME para mostrar contenido que sea de otro dominio.
Desplegando contenido
Existen varios mecanismos para desplegar contenido en el control WebBrowser.
Método NavigateToString()
La manera más sencilla de mostrar contenido dentro del control WebBrowser es ejecutar su método NavigateToString() el cual recibe como parámetro una cadena que represente el HTML que deseamos mostrar (tal vez construido de manera manual, o sacado del XAP, o descargado de manera asíncrona con WebClient, etc.). En nuestro ejemplo tendremos un método llamado CargarHtml() que genere una cadena de HTML y posteriormente que sirve como fuente para el WebBrowser. El código será el siguiente:
void CargarHtml()
{
string html =
"<html><h1>Demostración</h1><h2>Silverlight 4 Beta</h2><p>Esta es una demostración de cómo podemos mostrar contenido HTML usando el método NavigateToString()</p></html>";
wb.NavigateToString(html);
}
Y el resultado:
Método Navigate()
Otra manera de desplegar contenido HTML es establecer la propiedad Source del WebBrowser en XAML o usar el método Navigate(). En nuestro ejemplo agregaremos un nuevo archivo llamado Contenido.htm en el sitio de orígen de nuestra aplicación Silverlight (carpeta ClientBin por default). El archivo Contenido.htm tendrá el HTML que deseamos mostrar dentro del control WebBrowser. Como comentamos anteriormente, si deseamos mostrar contenido que viene de otros dominios debemos mostrarlo dentro de un IFRAME. Contenido.htm mostrará la página de búsqueda de Twitter dentro del control WebBrowser en nuestra aplicación Silverlight:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<iframe id="contenido" src="http://search.twitter.com" width="100%" height="600px" />
</body>
</html>
Comunicación entre WebBrowser y el contenido HTML
Podemos tener comunicación bi-direccional entre el control WebBrowser en Silverlight y la página o contenido que está mostrando.
Método InvokeScript()
El método InvokeScript() permite la invocación de una función declarada en la página que haya cargado el control WebBrowser. A nuestra página Contenido.htm le agregaremos una función de búsqueda sobre el sitio de Twitter. Para esto agregaremos algunos controles en nuestra aplicación: un TextBox para que el usuario pueda escribir la cadena deseada y un Button para ejecutar efectivamente el método InvokeScript().
<script type="text/javascript">
function buscar(cadena) {
var url = "http://search.twitter.com/search?q=" + cadena;
document.getElementById("contenido").src = url;
}
</script>
y el resultado:
window.external.Notify()
La función Notify() estará disponible en el objeto window.external cuando usemos WebBrowser. Su objetivo es mandar mensajes al control, y cuando eso sucede, se disparará el evento ScriptNotify. En los argumentos de este evento encontraremos la propiedad Value que representa el valor establecido como parámetro en window.external.Notify(). En este ejemplo invocaremos window.external.Notify en el evento body.onload() para enviar como cadena “Silverlight” al WebBrowser. El evento ScriptNotify se disparará y es en donde obtendremos la cadena que posteriormente pondremos en el TextBox.
wb.ScriptNotify += (s, a) =>
{
txtCadena.Text = a.Value;
};
Evento LoadCompleted
El control WebBrowser expone el evento LoadCompleted el cual se disparará cuando el contenido efectivamente haya finalizado en cargarse por primera vez, es decir, cuando el método Navigate() haya ejecutado o cuando se establece la propiedad Source. En nuestro ejemplo lo utilizaremos para crear una notificación (característica nueva en Silverlight 4) para avisarle al usuario que la carga de la página ha finalizado.
Resumen
El control WebBrowser nos permite cargar contenido HTML dentro de las Aplicaciones Fuera del Navegador. El contenido a cargar deberá estar en el mismo dominio que la aplicación, no obstante si deseamos hospedar contenido HTML de otros dominios deberemos usar un elemento IFRAME. Asimismo, el control permite interacción con las funciones de script presentes en el contenido y viceversa; siendo de esta manera una excelente opción para la construcción de poderosas aplicaciones que requieran interactuar con HTML.
Puedes descargar el código aquí
Puedes ver el demo en vivo aquí (requiere Silverlight 4)
