Nuevo libro de desarrollo para Windows 8 y Windows Phone 8

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, escribir un libro.

Antes de nada, que se que nadie lee los post hasta el final. Aquí esta el enlace para que lo podáis comprar YA.

Hace tiempo, nos propusimos el amigo Yeray y yo, que teníamos que escribir algo juntos. Sinceramente jamás creí que me iba a costar tanto poder plasmar en papel todos los conocimientos que tengo en mi cabeza, por que amigos una cosa es escribir un blog y otra muy distinta escribir un libro.

Pero bueno, después de muchas horas de trabajo y muchas horas de sueño perdido, junto con la ayuda de dos cracks, Ibón Landa, nuestro colaborador incansable y José Manuel Alarcón, nuestro editor convencido, este libro puede estar en la calle.

Portada MiniLibro

 

Os presento “Introducción al desarrollo en Windows 8 y Windows Phone 8”, este “mini” libro consta de 190 paginas en las que abordamos una introducción a las herramientas de desarrollo para ambos sistemas, descripción de conceptos de programación basados en el patrón Model View ViewModel (MVVM), el lenguaje visual XAML, los principales elementos de una interfaz visual tanto para Windows 8 como para Windows Phone 8 y por ultimo una explicación detallada de que pasos debemos seguir para publicar nuestras aplicaciones tanto en la Windows Store como en la Windows Phone Store.

Pero aquí no acaba la cosa, esto es solo un pequeño aperitivo, es la avanzadilla de algo mucho mas grande, es simplemente una introducción del libro “Desarrollo en Windows 8 y Windows Phone 8”. Un libraco de casi 500 paginas con el que pretendemos guiar a cualquier desarrollador en las nuevas características de programación para ambos sistemas.

Portada Libro

Pero para esto aun tenemos que esperar un poco mas. Eso si gracias a Krasis Press, todo aquel que adquiera el libro de introducción, el cual solo esta disponible en versión PDF, dispondrá de un cupón de descuento del importe total si decides comprar el libro grande.

Así que os lo vuelvo a recordar. COMPRAD MI LIBRO, que aunque esto no lo hayamos hecho para salir de pobres (bueno nunca se sabe), al menos nos queremos tomar alguna que otra caña a vuestra salud.

Por ultimo, desde aquí quiero agradecer el inmenso trabajo de mi compañero de fatigas, Josué Yeray, sin mi aportación es muy probable que el libro en algún momento estuviera de todos modos en la calle, pero sin la suya este proyecto jamás hubiera llegado a su fin.

En mis años de juventud en el colegio recuerdo haber plantado mas de 1 árbol. Tengo una mujer estupenda y una hija que es un autentico regalo y un sol de niña. Acabo de escribir y publicar un libro. Si, ya me puedo morir en paz.

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

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…… ;-( 

El modelo de plantilla de proyecto HTML5 en Windows Phone 8

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.