En la app de Grid de Windows 8, de la que hemos hablado en esta serie de cómo programar app Windows 8 con anterioridad, se utiliza un fichero Data.js para generar datos de prueba con los que rellenar la aplicación. Es una especie de lorem ipsum adaptado al tipo de aplicación que representa esta plantilla de Visual Studio 2012.
Vamos a modificarla para que nuestra aplicación muestre información real, al tiempo que aprenderemos cómo invocar recursos en Internet, mediante el método WinJS.xhr.
WinJS.xhr
XHR se corresponde con las siglas de XmlHttpRequest, precisamente el mecanismo que se esconde detrás de esta clase de la librería WinJS. Gracias a WinJS.xhr vamos a poder abstraernos de la fontanería subyacente y centrarnos en gestionar los resultados de la llamada gracias al objeto Promise que devuelve. El único parámetro que recibe este método consiste en un objeto que puede tener las siguientes propiedades:
url (requerida): url absoluta o relativa a la que se hace la llamada.
type (opcional): verbo HTTP a usar. Por defecto se usará GET.
user (opcional): usuario en caso de ser necesario un proceso de autenticación. Si no se envía y la url lo requiere, se mostrará una ventana para introducir credenciales.
password (opcional): contraseña para el proceso de autenticación. Se ignorará si no se asigna un usuario en la propiedad anterior.
headers (opcional): objeto cuyos nombres de propiedades se usan como nombres de cabeceras, y cuyos valores para dichas propiedades se usarán como valores de esas cabeceras.
data (opcional): datos que se pasan internamente al método XMLHttpRequest.send().
El resultado de la llamada es un objeto Promise con el que podremos obtener los resultados de la llamada, una vez recibidos. En la función encargada de gestionar el resultado exitoso recibiremos un objeto con una propiedad de tipo DomParser denominada responseXML.
En el siguiente punto veremos un ejemplo de cómo utilizar WinJS.xhr para realizar llamadas a recursos en Internet.
Modificar data.js.
Vamos a modificar data.js para que, en lugar de cargar información de prueba, nos muestre noticias del sitio web. Para ello, lo primero será comentar los siguientes elementos:
groupDescription, itemDescription y itemContent.
sampleGroups y sampleItems.
Una vez eliminados estos elementos que forman parte de la información de prueba, tendríamos que añadir el siguiente código:
En la variable blog definimos los datos del feed RSS que queremos consultar, mientras que en el método getBlogPosts vamos a consultar los artículos publicados en dicho blog, obteniendo el XML que representa el feed RSS mediante el método WinJS.xhr.
Al Promise que devuelve este método vamos a asociarle un método para gestionar el resultado satisfactorio. Dicho método completará la información del blog y se encargará de extraer todos los artículos y cargarlos en la lista denominada blogPosts. Esta lista es de tipo WinJS.Binding.List, lo que significa que está preparada para participar en binding de datos, puesto que se encargará de notificar a la vista cuando entren o salgan elementos de la misma.
En cuanto al método getItemsFromXml podemos ver su código a continuación.
Este método es también sencillo:
Recorre todos los artículos del canal RSS
Obtiene ciertas propiedades de información del mismo para cada artículo.
Inserta un nuevo elemento en la lista WinJS.Binding.List con información del artículo recuperado.
En la propiedad content almacenamos la transformación a HTML estático del valor recibido en description. Esto es necesario puesto que las Aplicaciones Metro establecen ciertas restricciones de seguridad con el código script dinámico, por lo que es mejor eliminarlo para evitar errores inesperados en tiempo de ejecución.
El siguiente paso sería sustituir el código actual donde se está creando la variable groupedItems por éste:
Finalmente, no necesitaremos recorrer la variable sampleItems para cargar la lista con elementos, puesto que esta variable ha sido comentada. Podemos, por tanto, comentar también ese código.
Si ejecutamos la aplicación ahora, el resultado será algo parecido a lo que podemos ver a continuación.
Y si pinchamos en cualquiera de las cajas que representan cada artículo podremos navegar a su contenido.
Con un poco de Blend y algo de procesamiento sobre el contenido de los artículos podríamos obtener una imagen para cada artículo, en lugar de usar fondos gris claro y oscuro. Pero eso ya entra más en el misterioso terreno del diseño…
En Genbeta Dev | Programar aplicaciones Metro en Windows 8
Es especialista en metodologías ágiles y en estándares web relacionado con HTML5. Es miembro activo de la comunidad .NET a través de MADNUG y colabora con medios como DotNetMania, PC Actual o Desarrolloweb.com.
Puedes seguirle en Twitter: @javierholguera o en su blog: javierholguera.com