Windows Phone 8.1: WebView


El control WebView hospeda contenido Web en la aplicación el cual está en el ensamblado Windows.UI.Xaml.Controls.WebView definido en las librerías compartidas entre Windows y Windows Phone; mediante este control es posible renderizar código HTML y poderlo visualizar, por lo tanto podemos embeber una página Web en nuestra aplicación la cual nos puede traer grandes beneficios a la hora de desarrollar aplicaciones multiplataforma, sin embargo si se usa sin control o de manera desmedida puede convertirse en un dolor de cabeza ya que se puede volver un vector de ataque a nuestra aplicación.

He ahí el motivo de dedicarle una serie de artículos a este aparente sencillo control del cual podremos aprovechar para sacarle su máximo potencial.

Comenzando, dedicaré este artículo a explicar los ámbitos sencillos.

Primeros pasos

Para implementar un control tipo WebView nuestro proyecto de Windows Phone 8.1 debe tener referenciado el ensamblado Windows.UI.Xaml.Controls.WebView el cual si lo construimos con la ayuda de Visual Studio 2015 o 2013 ya lo tendremos referenciado por defecto.

Es decisión nuestra declararlo en la interfaz gráfica o en el code behind, sin embargo la documentación de las API de Microsoft oficial (MSDN) nos recomienda declarar todos los controles a través de XAML porque ya este fue optimizado para administrar la memoria y demás, sin embargo en casos particulares se puede declarar que en este caso será C#.

Code behind:
Windows.UI.Xaml.Controls.WebView webView = new Windows.UI.Xaml.Controls.WebView();
webView.Name = "myWebView";
XAML:
<WebView x:Name="myWebView" />

Cabe aclarar que dependiendo del sistema operativo (WP8, WP8.1, W8, W8.1) este ejecutará a Internet Explorer en modo documento 10 u 11, por lo cual debemos tener en cuenta estándares de desarrollo Web dando soporte a todas las API de IE, NO ES LO MISMO DESARROLLAR UN CÓDIGO PARA CHROME QUE PARA IE (todavía), sin embargo hay técnicas que permiten que se comporten de manera similar, pasa lo mismo con JavaScript, CSS, HTML y demás que son estándares Web.

Para ver los últimos avances de Internet Explorer y el soporte de API’s declaradas por la W3C pueden remitirse a este enlace https://status.modern.ie/

Cargando archivos locales

El escenario mas común que se presenta es querer cargar un archivo .html que se tiene en el directorio de la aplicación.

XAML
<WebView x:Name="myWebView" Source="ms-appx-web:///Experiments/WebView/www/index.html" />
Code Behind
string url = "ms-appx-web:///Experiments/WebView/www/index.html";
myWebView.Navigate(new Uri(url));

Es importante enfatizar que dicho archivo html o listado de elementos a mostrar deben tener en las propiedades que siempre se copie:

En primera instancia nos quedaría de la siguiente manera

 

Y si ahora aplico estilos

Inyectando HTML

Aparte de consultar un archivo HTML también se puede inyectar código directamente en el WebView, esto puede ser útil para crear un sistema de publicidad o algo muy pequeño ya que se torna una manera muy tediosa de trabajar con el control; esto por lo tanto se debe hacer desde el Code Behind.

Desde esta inyección de código se puede consultar CSS, imágenes, fuentes y scripts externos, sin embargo no se tiene el medio para generarlos desde Code Behind.

Lo más importante es que se hace un llamado asincrónico, por lo tanto es posible implementar eventos como NavigationCompleted y así informar al usuario de que fue cargada la página con éxito.

string html = "<html><body><h1>Hello, world!.</h1></body></html>";
myWebView.NavigateToString(html);

Hasta aquí se muestran los usos básicos del control WebView en Windows Phone 8.1, estos códigos presentados también funcionan para Windows 8.1

El código fuente de los ejemplos está en el repositiorio https://github.com/thEpisode/WindowsExperiments