Rodrigo Díaz Concha » WebBrowser http://rdiazconcha.com Silverlight y XAML en Español para México, Latinoamérica y España Thu, 02 Feb 2012 20:54:16 +0000 en hourly 1 http://wordpress.org/?v=3.3 Silverlight 4 Beta – Brocha HTML http://rdiazconcha.com/2009/12/silverlight-4-beta-brocha-html/ http://rdiazconcha.com/2009/12/silverlight-4-beta-brocha-html/#comments Fri, 11 Dec 2009 03:49:43 +0000 Rodrigo http://rdiazconcha.com/?p=521 En un artículo anterior dimos a conocer el nuevo control WebBrowser, incluído como parte de Silverlight 4 Beta, el cual nos permite mostrar contenido HTML en nuestras aplicaciones Fuera del Navegador, siendo ese contenido un HTML creado de manera dinámica o incluso alguna página Web externa.  En este artículo detallaremos el elemento HtmlBrush que nos brinda la oportunidad de ‘pintar’ nuestros elementos con el contenido cargado en el control WebBrowser.

El proyecto

Iniciaremos creando un nuevo proyecto de Silverlight 4 en Visual Studio 2010 Beta 2 y aceptaremos la opción predeterminada de crear una aplicación Web para probar la aplicación.

Clase HtmlBrush

La clase HtmlBrush es una clase derivada de TileBrush y nos permite usar un control WebBrowser con contenido HTML como fuente para poder pintar cualquier propiedad de tipo Brush en los elementos de Xaml.  La clase tiene la propiedad SourceName la  cual indica el nombre del control WebBrowser que deseamos utilizar como fuente.  Asimismo, expone el método SetSource() para que programáticamente podamos establecer la fuente sobre este tipo de brocha.  El siguiente fragmento de código muestra la utilización más básica de esta brocha en Xaml:

…
<Ellipse.Fill>
    <HtmlBrush x:Name="htmlbrush"
               SourceName="wb" />
</Ellipse.Fill>
…

El código anterior establece la propiedad SourceName al WebBrowser deseado, en este caso identificado con la variable wb.

HtmlBrush.Redraw()

La clase expone el método públic Redraw() el cual obliga a la brocha a dibujarse asimisma ya que no lo hace de manera automática.  Por este motivo, si tenemos como contenido del WebBrowser alguna página Web que incluya alguna animación o video necesitaremos ejecutar este método de manera recurrente, tal vez a través de un DispatcherTimer.  El siguiente fragmento de código muestra dicha técnica:

//Crea un timer para redibujar la brocha cada medio segundo
DispatcherTimer timer = new DispatcherTimer() { Interval = TimeSpan.FromMilliseconds(500) };
timer.Tick += (s, a) => htmlbrush.Redraw();  //Obliga a la brocha a dibujarse asimisma
timer.Start();

Cabe mencionar que esta brocha está disponible únicamente en Aplicaciones Fuera del Navegador, ya que ese es uno de los requisitos para el control WebBrowser.

Resultado

La siguiente figura muestra la aplicación aquí descrita finalizada, en donde podemos observar que la elipse del lado derecho es ‘pintado’ por medio de la brocha de tipo HtmlBrush.  Asimismo, la aplicación incluye un control de tipo Slider enlazado a una Proyección en Perspectiva, para poder corroborar que el comportamiento de esta clase es similar al resto de brochas ya conocidas en la plataforma.

image

Puedes descargar el código aquí

Puedes ver el demo en vivo aquí (requiere Silverlight 4 y tener la aplicación Fuera del Navegador)

]]> http://rdiazconcha.com/2009/12/silverlight-4-beta-brocha-html/feed/ 1 Silverlight 4 Beta – Control WebBrowser http://rdiazconcha.com/2009/11/silverlight-4-beta-control-webbrowser/ http://rdiazconcha.com/2009/11/silverlight-4-beta-control-webbrowser/#comments Tue, 24 Nov 2009 03:46:49 +0000 Rodrigo http://rdiazconcha.com/?p=462 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:

image

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:

image 

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:

image

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>

image

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:

image

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.

image

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)

]]> http://rdiazconcha.com/2009/11/silverlight-4-beta-control-webbrowser/feed/ 3