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

El emulador en Windows Phone 8 SDK e Hyper-V

Posteado el : 30-10-2012 | Por : tecnologia | En : Windows Phone 8

7

Como todos ya seguro que sabréis, y si no lo sabéis ya os lo digo yo que para eso estoy aquí, el recién estrenado SDK para Windows Phone 8 solo es posible instalarlo en maquinas con sistemas operativos de 64bits.

¿Cual es el motivo?, bueno pues seguramente que serán muchos, pero uno de ellos es que el nuevo emulador para testear nuestras aplicaciones, no es un emulador al uso tal y como lo teníamos en Windows Phone 7.5, sino que es una imagen del S.O. virtualizada a través de la tecnología Hyper-V de Microsoft y esta tecnología solo es compatible con sistemas de 64 bits como podéis ver en sus requerimientos.

Esto para mi significa una gran ventaja con respecto al emulador de anteriores versiones. Por un lado le dota de mayor estabilidad y un mayor rendimiento, por otro lado el lanzar varios emuladores al mismo tiempo se hace una tarea bastante mas sencilla que antes, la gestión de las imágenes de nuestros Windows Phone emulados ahora son gestionables y no como antes que eran un simple fichero y a veces teníamos que pegarnos con los ficheros de sesión que se quedaban colgados y demás…

Emulator_WP8_0

Bueno, pues manos a la obra y vamos a disponernos a lanzar nuestro flamante emulador y ver in situ todo su potencial.

Emulator_WP8_1

Vaya la primera en la frente, Visual Studio me advierte gentilmente que quizás no tenga habilitado en la BIOS el soporte para la virtualización por hardware, necesario para lanzar Hyper-V y por consiguiente el emulador.

Pero lo primero seria comprobar si nuestro sistema es capaz de ejecutar Hyper-V y si tenemos el Hardware necesario para ello. Os recuerdo que necesitamos que nuestra maquina ejecute la virtualización asistida de Hardware, SLAT (Second Level Address Translation) y DEP (Hardware-based Data Execution Prevention).

Si esto te suena a chino y no tienes ni remota idea de que estoy hablando lo mejor es descargarnos esta pequeña utilidad de Microsoft, llamada Coreinfo para comprobar todos estos requerimientos.

Simplemente tras descargarnos Coreinfo, lo ejecutamos en la línea de comandos con permisos de administrador, con el parámetro –v

C:\> Coreinfo.exe -v

Esto nos mostrara una serie de datos de capacidades de nuestro procesador.

Emulator_WP8_6

Debemos de asegurarnos de tener un asterisco, en las 2 ultimas características, capacidad de virtualización por hardware y SLAT presente.y que nos indique que el Hypervisor está presente.

Por ultimo debemos de hacer otra comprobación, en este caso ejecutando Coreinfo sin ningún tipo de parámetro de entrada.

C:\> Coreinfo.exe

Entre todas las características que nos presenta debemos de buscar la opción NX, la cual nos dirá si disponemos de la capacidad de DEP (Hardware-base Data Executivo Prevención) o no, con un asterisco.

Emulator_WP8_7

Una vez comprobado todo, debemos de saber que tenemos que tener un asterisco en las 3 características comentadas y ver que Hypervisor esta presente, si esto no es así ya podemos ir pensando en comprar otro ordenador o simplemente olvidarnos de probar nuestras aplicaciones en el emulador de Windows Phone 8.

Si tenemos la suerte de contar con todos estos requisitos, simplemente deberemos de ir a la BIOS de nuestro sistema y activar la virtualización por hardware que normalmente viene deshabilitada. En mi caso simplemente tengo que ir a la sección de características de la CPU dentro de mi BIOS y activarlo:

WP_000453

Solo una cosita mas, una vez comprobado nuestro sistema y activado en la BIOS la opción de virtualización, deberemos de añadir nuestro usuario de Windows al grupo de administradores de Hyper-V, para evitarnos posibles problemas de permisos y demás a la hora de asignar hardware al emulador.  Para ello simplemente iremos al administrador de equipos y en la sección de usuarios asignaremos el nuestro al grupo administradores de Hyper-V.

Emulator_WP8_4

Emulator_WP8_3

Bueno, pues listos, una vez realizados estos pasos, la próxima vez que ejecutemos la depuración en el emulador, nos mostrara el aviso de ejecución con permisos elevados, si es que no ejecutamos ya Visual Studio con permisos de administrador.

Emulator_WP8_9

Aquí nuestro flamante emulador listo para comenzar a probar nuestras aplicaciones para Windows Phone 8.

Emulator_WP8_10

Share