Una de las nuevas características que incorpora Windows Phone 8, es el flamante nuevo navegador Internet Explorer 10 en su versión móvil. Según nos cuenta el equipo de producto, este es una versión no muy alejada, (otros dicen que es exactamente la misma), que su hermano mayor la versión de escritorio incorporada en Windows 8. Aquí tenéis un pequeño repaso de dicho navegador desde wpcentral.com
Bueno la cuestión es, que el nuevo SDK de Windows Phone 8, incorpora una nueva plantilla de proyecto la cual se denomina “Windows Phone HTML5 App”.
Esta plantilla no es mas que una pagina de Windows Phone, con un componente WebBrowser incorporado, una serie de eventos de la misma ya creados y una carpeta denominada HTML en donde nos encontramos con una estructura de web básica.
Disponemos de la posibilidad de interactuar desde la web que se visualiza en el WebBrowser, con nuestro sistema a través del evento ScriptNotify, y desde nuestra aplicación con la pagina web usando el método InvokeScript.
Vamos a poner un ejemplo muy sencillo. Realizaremos algunos cambios en el código creado por la plantilla para mostrar el control WebBrowser, un textbox y un simple boton. La idea es mostrar en la web incrustada en el WebBrowser lo que le indiquemos en el textbox y mostrar un MessageBox de Windows Phone cuando interactuemos con la web.
Y nuestro código HTML que mostraremos en el WebBrowser tendrá una pinta como esta:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="/html/css/phone.css" /> <title>Windows Phone</title> <script type="text/javascript"> function IncorporarTexto(data) { container.innerText = data; } </script> </head> <body> <div id="container"> El texto Aquí. </div> </body> </html>
Ahora simplemente deberemos de llamar al método InvokeScript desde el evento Click de nuestro botón, pasando como parámetro al script de la pagina web el texto contenido en el TextBox, de la siguiente forma.
private void Boton1_Click(object sender, System.Windows.RoutedEventArgs e) { if (loadCompleted == true) { Browser.InvokeScript("IncorporarTexto",TextBox1.Text); } }
Vemos en el anterior trozo de código que disponemos de una variable para controlar si la pagina esta totalmente cargada o no, ya que el método InvokeScript solo funcionará de forma correcta cuando el HTML a cargar en el WebBrowser haya terminado totalmente de cargarse. Para ello podremos controlar esto subscribiéndonos al evento LoadCompleted de nuestro WebBrowser.
private void Browser_LoadCompleted(object sender, System.Windows.Navigation.NavigationEventArgs e) { loadCompleted = true; }
Ok, perfecto ya sabemos como podemos interactuar desde nuestra aplicación y desde nuestro código C# en los scripts de nuestra pagina web que acabamos de cargar.
Solamente una cosa mas, nuestro componente WebBrowser por defecto tiene deshabilitada la capacidad de ejecutar scripts en el código HTML que se carga. Para poder habilitar dicha capacidad debemos de indicar a true la propiedad IsScriptEnabled de dicho componente WebBrowser.
La siguiente opción que hemos comentado es la capacidad del código HTML cargado por el componente WebBrowser para interactuar con nuestro sistema, mediante el control del evento ScriptNotify del propio WebBrowser.
Vamos a modificar nuestro código HTML, para crear una nueva función en JavaScript e incorporar un botón que dispare dicha función.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="/html/css/phone.css" /> <title>Windows Phone</title> <script type="text/javascript"> function IncorporarTexto(data) { container.innerText = data; } function SaludarAlTelefono() { var texto = "Hola WP8 desde JS"; window.external.notify(texto); } </script> </head> <body> <div id="container"> El texto Aquí. </div> <hr/> <button onClick="SaludarAlTelefono()">Saludar</button> </body> </html>
Como podemos ver para realizar esta acción usamos el objeto de JavaScript, window.external, concretamente el método notify, el cual es el encargado de disparar el evento ScriptNotify del WebBrowser.
private void Browser_ScriptNotify(object sender, Microsoft.Phone.Controls.NotifyEventArgs e) { MessageBox.Show(e.Value); }
Dentro de los argumentos que nos entrega el evento, disponemos de la propiedad Value, que nos trae el valor del parámetro que hayamos indicado en la instrucción de JavaScript.
Los ejemplos que he puesto son muy simples, pero las posibilidades son enormes. Ahora viene lo bueno. Todo el mundo debería de saber que esto ya lo podíamos hacer con Windows Phone 7.5, hasta aquí no existe absolutamente nada nuevo que incorpore Windows Phone 8. Si es verdad que quizás esta característica del control WebBrowser no era muy conocida, pero como os comento no hay nada nuevo.
¿Cual es entonces la función real de esta plantilla? Pues sinceramente lo desconozco. Tal vez el equipo de producto quiso hacer creer que igual que en Windows 8 disponemos de un tipo de programación en JavaScript, en Windows Phone 8, también lo tendríamos. Pero no, nada de WinJS a la vista.
Bueno realmente tengo que decir que lo novedoso de todo esto es la incorporación de IE10 al sistema. Es de suponer que con esta versión del navegador vamos a poder explotar en un grado muy alto todas las capacidades que HTML5 incorpora. Podéis desde el propio emulador acceder a http://ie.microsoft.com/testdrive y ver todos los test que IE10 en su versión móvil pasa con muy buena nota.
Así mismo en la documentación del SDK de Windows Phone 8, en la sección en la que se habla de este tipo de plantilla, se nos indica que consultemos la guía para desarrolladores de Internet Explorer 10, para poder sacar todo el potencial que los desarrolladores HTML disponen en Windows Phone 8.