Posts destacados

Nuevo libro de desarrollo para Windows 8 y Windows Phone 8Nuevo libro de desarrollo para Windows 8 y Windows... Desde hace tiempo, estoy un poco alejado del mundanal ruido de blogs, twitter y demás. La razón no ha sido otra que hacer posible un deseo que tenia desde hace mucho tiempo,...

Read more

Preparándonos para el #MegathonW8 y II – Instalando las herramientas de desarrollo.Preparándonos para el #MegathonW8 y II –... Una vez que ya tenemos nuestro flamante Windows 8 instalado en nuestro disco duro virtual, según los pasos del primer capitulo de esta guía. Lo que debemos de hacer es instalarnos...

Read more

Preparándonos para el #MegathonW8 y I Instalación de Windows 8 en un VHDPreparándonos para el #MegathonW8 y I Instalación... Este es el primer post de una serie de ellos cuya intención es facilitar a los asistentes al megathon que se celebrara en breve, las instrucciones necesarias para conocer...

Read more

Beca para el Megathon Windows 8Beca para el Megathon Windows 8 Como seguramente todos ya sabréis, los próximos días 7, 8 y 9 de Septiembre se celebrara en varias ciudades españolas al mismo tiempo un hackathon sobre desarrollo para...

Read more

[OFFTOPIC] Oferta de trabajo.[OFFTOPIC] Oferta de trabajo. Madre mía, hasta ahora realmente no me había dado cuenta de lo abandonado que tengo mi blog, como pasa el tiempo de rápido por dios… Demasiadas cosas a hacer tanto dentro...

Read more

Windows Phone y .NET Rss

El modelo de plantilla de proyecto HTML5 en Windows Phone 8 y II

Posteado el : 03-11-2012 | Por : admin | En : HTML5, Windows Phone 8

0

Esto mas que una entrada como dios manda, es simplemente una advertencia en toda regla, sobre un gravísimo error en esta plantilla.

Si alguno de vosotros a intentado usarla, podrá ver que tanto el método InvokeScript como el evento ScriptNotify no funcionan. Es mas si en el código HTML que cargamos en nuestro WebBrowser tenemos cualquier tipo de código de script, este tampoco funcionará.

En mi anterior post os había comentado que nuestro WebBrowser tenia por defecto deshabilitada la opción de cargar y ejecutar cualquier tipo de script, pero que simplemente indicando a true la propiedad IsScriptEnabled de dicho control, todo funcionaria.

Bueno, pues como todos habréis visto en la plantilla que Visual Studio nos crea, una de las primeras líneas de código, concretamente en el evento Loaded del WebBrowser, viene pre escrito concretamente esto

private void Browser_Loaded(object sender, RoutedEventArgs e)
{
    // Add your URL here
    Browser.Navigate(new Uri(MainUri, UriKind.Relative));
    Browser.IsScriptEnabled = true;
}

Con lo que ya nos podemos imaginar que la comentada propiedad IsScriptEnabled, esta perfectamente indicada.

Pues bien, este código no funciona ya que dicha propiedad debemos de indicarla o cambiar su valor antes de realizar la navegación para que surta efecto. Para solventar este problema simplemente deberemos de establecer la propiedad a true directamente en las propiedades del control dentro del código XAML.

<phone:WebBrowser x:Name="Browser"
            HorizontalAlignment="Stretch"
            VerticalAlignment="Stretch"
            Loaded="Browser_Loaded"
            IsScriptEnabled="True"
            NavigationFailed="Browser_NavigationFailed" />

Es una opción, existen otras, pero quizás sea la mas sencilla.

Comencé diciendo que era un error gravísimo y así me lo parece, ya que cualquier neófito puede pasarse mucho tiempo hasta que descubra que todo su código no funciona simplemente por un error de bulto de quien a diseñado esta plantilla.

Bueno esperemos que dentro de no mucho la corrijan. Pero de momento basta con saberlo y poder solucionar el problema..

Bueno seguiré hablando en sucesivas entradas de la programación HTML dentro de Windows Phone, aunque pueda perder amigos por el camino…… ;-( 

Share

El modelo de plantilla de proyecto HTML5 en Windows Phone 8

Posteado el : 01-11-2012 | Por : admin | En : HTML5, Windows Phone 8

3

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”.

Sin título-1

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.

Sin título-2

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.

Sin título-4

 

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.

Sin título-7

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.

Sin título-8

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.

Sin título-3

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.

Share