martes, 18 de junio de 2013

Windows Phone 8 - Acceso a datos, REST

Esta semana veremos como realizar un enlace a datos desde una aplicación

Windows 8

o

Windows Phone 8

programada en HTML5-javascript llamando a un servicio

REST

.

En primer lugar como base para los servicios

REST

que se llaman desde la app del ejemplo usaremos el site creado hace un tiempo en

areaTIC

que expone una WebAPI con MVC, aquí os dejo el artículo que explica como programarla y configurarla en el IIS local.

Por el resto el ejemplo es muy sencillo, crearemos un nuevo proyecto desde Visual Studio seleccionando la plantilla Javascript - Tienda Windows - Aplicación de diseño fijo. La idea es mostrar una lista de elementos que nos devolverá el servidor al invocar al servicio "Articulo" con el verbo GET.




Si pulsamos F5 sin tocar nada veremos este tipo de plantilla incluye una página fija vacía con el texto "Aquí se debe incluir el contenido".

Vamos a ello, editamos el archivo Html para definir como mostraremos el resultado de la consulta al servidor. En este ejemplo no tocaremos CSS es decir, no aplicaremos estilos ni cuidaremos que nuestro ListView sea "responsive" sino que nos centraremos en el .js para ver como realizar la llamada al servicio

REST

.

HTML:
  • Definimos 2 plantillas (para que la lista de elementos se muestre con estilo metro).
  • Definimos un objeto WinJS.UI.ListView en el punto donde original mente teníamos el párrafo con el texto "Aquí se debe incluir el contenido".
<body>
<!-- Esta plantilla se aplica a los elementos del ListView -->
<div class="itemtemplate" data-win-control="WinJS.Binding.Template">
  <div class="item">
    <img class="item-image" src="#" data-win-bind="src: backgroundImage; alt: title" />
    <div class="item-overlay">
      <h4 class="item-title" data-win-bind="textContent: title"></h4>
      <h6 class="item-subtitle win-type-ellipsis" data-win-bind="textContent: subtitle"></h6>
    </div>
  </div>
</div>
         
<div data-win-control="WinJS.UI.ViewBox">
  <div class="fixedlayout">
    <!-- ListView -->
    <div class="groupeditemslist win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ selectionMode: 'none' }"></div>
  </div>
</div>
</body>
Si ignoramos un poco el CSS que contiene el código HTML y ejecutamos veremos que hasta aquí la aplicación compila, el resultado de momento es una página sin contenido. Para ver como esto avanza lo mejor sería atacar el archivo .js.

Javascript:
  • Definimos una variable para la lista (var lista)
  • Definimos una variable para la página Default.html (var page)
  • En el evento Ready de la página llamaremos al servicio usando WinJS.xhr
  • Vinculamos el resultado de la llamada a la lista y al ListView que hemos creado en la página HTML. Si nos fijamos bien en este punto estamos asociando las plantillas del paso anterior al objeto ListView mediante la propiedad itemTemplate
  • He añadido una imagen areaTIC en la carpeta images del proyecto a la cual hacemos referencia como background en los ítems que se cargarán por pantalla
/ Para obtener una introducción a la plantilla Diseño fijo, consulte la siguiente documentación:
// http://go.microsoft.com/fwlink/?LinkId=232508
(function () {
  "use strict";

  WinJS.Binding.optimizeBindingReferences = true;

  var app = WinJS.Application;
  var activation = Windows.ApplicationModel.Activation;
  var lista = new WinJS.Binding.List();
    

  app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {
      if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
       //Esta aplicación se ha iniciado recientemente. Inicializar la aplicación aquí.
       //Definimos variable página Default.html 
       var page = WinJS.UI.Pages.define("default.html", {
                    
         ready: function (element, options) {
         var options = { url: "http://localhost/WebAPI/Api/Articulo" };
         var listView = element.querySelector(".groupeditemslist").winControl;

         listView.itemTemplate = element.querySelector(".itemtemplate");
         
         WinJS.xhr(options).done(
         function completed(request) {
         // Respuesta Servidor
            if (request.status === 200) {
              var articulos = JSON.parse(request.responseText);
              articulos.forEach(function (articulo) {
                var item = { title: articulo.Titulo, 
                             description: articulo.Descripcion, 
                             subtitle: articulo.Autor, 
                             backgroundImage: '../images/areaTic.png' 
                            };
                lista.push(item)
               });
            }

            listView.itemDataSource = lista.dataSource;
            listView.groupDataSource = null;
   
         },

         function error(request) {
         // Si se produce un error en la comunicación con server-
         },

         function progress(request) {
         // permite controlar el progreso
         });

       }
      });
     } else {
       // TODO: Esta aplicación se ha reactivado tras estar suspendida.
       // Restaurar el estado de la aplicación aquí.
     }
     args.setPromise(WinJS.UI.processAll());
    }
    };

    app.oncheckpoint = function (args) {
        // TODO: Esta aplicación está a punto de suspenderse. Guardar cualquier estado
        // que deba mantenerse a través de las suspensiones aquí. Puede usar el
        // objeto WinJS.Application.sessionState, que se guarda y se restaura
        // automáticamente en las suspensiones. Si debe completar una
        // operación asincrónica antes de suspenderse la aplicación, llame a
        // args.setPromise().
    };

    app.start();
})();
Llegado este punto si todo está ok, se debería un intento de grid metro con tantos elementos como ítems devuelva el servicio

REST

al que hemos llamado (en mi caso 2).



Como comentaba al inicio no tocaremos CSS en este artículo, faltaría hacer que la vista sea "responsive" y se adapte a las diferentes modalidades de vista que permite una app

Windows 8

. Os paso un enlace a un articulo de

areaTIC

donde se recomiendan algunos tutoriales entre ellos uno interesante para controlar las vistas en este tipo de aplicaciones.

Espero os haya resultado interesante y como siempre animaros a enviar vuestro feedback y participar vía comentarios y/o redes sociales.

No hay comentarios:

Publicar un comentario