Comenzando Azure Mobile Services–Ejemplo Práctico con HTML5 + JS [Parte 2]

Hola, que tal, vamos a continuar con este tutorial de iniciación de Azure Mobile Services con HTML y JS,  en el post anterior, vimos como insertar datos y listar la cantidad de registros desde la tabla de AMS. Esta vez vamos a ver como listar, borrar y modificar datos. La vista a crear tiene la siguiente gráfica:

image

Además cuando presionen borrar, vamos a mostrar este tipo de confirmación, como ves, todo hecho con jquerymobile.

image

Hay algunos temas de gráfica que no son relevantes para el tutorial, pero de todos modos voy a incluir los fuentes por si los necesitas.

Veamos el data-role con JQM, es muy sencillo, solo tenemos un listview en donde vamos a agregar los datos que  vamos a recuperar desde AMS, luego tenemos un div data-role dialog, para crear el cuadro de diálogo de confirmación de borrado. Finalmente vamos a incluir los script de MobileServices y el listado.js, que es donde vamos a tener la lógica de procesamiento de la UI.

<div data-role="page">
   <div data-role="header">
    <h1>Listado Peliculas</h1>
    <a href="insertar.html"  data-rel="external" data-ajax="false"
      
data-
theme="b" data-role="button">Agregar</a>
      </div><!– /header –>
      <div data-role="content">

      <div id="cargado"></div>

      <ul data-role="listview" data-count-theme="c" data-inset="true"

           id="lista_peliculas"></ul>

      <p id="cantidad"></p>

      </div><!– /content –>

      <div data-role="footer">

             <h4>Chalalo.cl</h4>

      </div><!– /footer –>

        </div><!– /page –>

          <!– /Dialogo –>

          <div data-role="dialog" id="sure" data-title="Esta Seguro?">

            <div data-role="content">

                <h3 class="sure-1">???</h3>

                <p class="sure-2">???</p>

                <a href="#" class="sure-do" data-role="button"
                  
data-theme="r" data-rel="back">Si</a
>

                <a href="#" data-role="button" data-theme="c"
                  
data-rel="back">No</a
>

            </div>

        </div>

        <script src="https://peliculassinet.azure-mobile.net/client/MobileServices.Web-1.0.0.min.js"></script>

        <script src="listado.js"></script>

Veamos ahora el archivo listado.js

$(function () {
    var client = new WindowsAzure
                 .MobileServiceClient('https://peliculassinet.azure-mobile.net/'
,'OUkhVzulGkkdtMGpkVoQbEpFVJKt97'
),
    TablaPeliculas = client.getTable('Peliculas');
 
 
    function ObtenerPeliculas() {
        cargando(true);
        TablaPeliculas.read().then(function (peliculaItems) {
            var votos = 0;
            var listItems = $.map(peliculaItems, function (item) {
                votos = votos + item.Votos;
                return $('<li>').attr('data-votos', item.Votos)
                    .attr('data-id', item.id)
                    .append($('<span>').attr('class', 'ui-li-count')
                                       .text(item.Votos))
                    .append($('<h2>').append(item.Nombre)
                                     .append($('<p>').text("-" + item.Tipo))
                                     .append("<br>")
                                       .append($('<button>')
                                             .attr('class', 'item-borrar')
                                             .attr('data-inline', 'true')
                                             .attr('data-theme', 'r')
                                             .attr('data-icon', 'delete')
                                             .text('Borrar'))
                                     .append($('<button>')
                                             .attr('class', 'item-votar')
                                             .attr('data-inline', 'true')
                                             .attr('data-theme', 'b')
                                             .attr('data-icon', 'star')
                                             .text('Votar')));
            });
 
            $('#lista_peliculas').empty().append(listItems)
                                 .toggle(listItems.length > 0);
            $('#cantidad').html('<strong>' + peliculaItems.length +
                               '</strong> Peliculas(s) - <strong>'
                                 + votos + '</strong> Votos');
            $('#lista_peliculas').listview("refresh");
            $('#lista_peliculas').trigger("create");
            $('.item-votar').button('refresh');
            cargando(false);
        }, handleError);
    }
 
    function handleError(error) {
        var text = error + (error.request ? ' - ' + error.request.status : '');
        alert(text);
    }
 
    function getPeliculaId(formElement) {
        return Number($(formElement).closest('li').attr('data-id'));
    }
 
    function getVotos(formElement) {
        return Number($(formElement).closest('li').attr('data-votos'));
    }
 
    $(document.body).on('click', '.item-votar', function () {
        cargando(true);
        TablaPeliculas.update({ id: getPeliculaId(this),
Votos: getVotos(this) + 1 }).then(ObtenerPeliculas()
,
handleError
);
    });
 
 
    $(document.body).on('click', '.item-borrar', function () {
        cargando(true);
        var idPelicula = getPeliculaId(this);
            confirmacion("Esta Seguro"
                         , "Desea Borrar la Pelicula"
,
"Si"
                         , function () {
            TablaPeliculas.del({ id: idPelicula })
                         .then(ObtenerPeliculas, handleError);
        });
        cargando(false);
    });
 
    function cargando(mode) {
        mode ? $("#cargado")
        .html("<img src='ajax-loader.gif' />") : $("#cargado").html('');
    }
 
    function confirmacion(texto1, texto2, button, callback) {
        $("#sure .sure-1").text(texto1);
        $("#sure .sure-2").text(texto2);
        $("#sure .sure-do").text(button).on("click.sure", function () {
            callback();
            $(this).off("click.sure");
        });
        $.mobile.changePage("#sure");
    }
 
    ObtenerPeliculas();
});

 

Vamos por parte en el código, al igual que el ejemplo del post anterior, debemos agregar la URL y la clave de la aplicación, luego obtenemos la referencia a la table peliculas con:

  TablaPeliculas = client.getTable('Peliculas');

Ahora si revisamos la funcion ObtienePeliculas nos damos cuenta que realizamos una iteración con .map en donde vamos agregando a un listado (listItem), este listItem se compone por elementos li cuyos atributos fui creando mediante jquery. Para que el render de los elementos <li> y el de los botones que en el están contenidos en este elemento, debemos escribir las siguientes líneas de código, que nos permiten generar el render en tiempo de ejecución:

  $('#lista_peliculas').listview("refresh");
  $('#lista_peliculas').trigger("create");
  $('.item-votar').button('refresh');
Utilizo las siguientes funciones para obtener el Id y los Votos desde el lista, puedes notar que
 están
definidos como atributos HTML5 compatibles, y son fáciles de acceder:
 function getPeliculaId(formElement) {
        return Number($(formElement).closest('li').attr('data-id'));
    }
 
 function getVotos(formElement) {
        return Number($(formElement).closest('li').attr('data-votos'));
 }
Ahora veamos las funciones que ocurren cuando se presiona votar y cuando se presiona
 eliminar. La primera función, que permite votar, llama a el método Update, con el parámetro Id,
obtenido de la función getPeliculaId y los votos, a los cuales le sumo + 1, cuando esté todo ok
 llamo a la función ObtenerPeliculas para obtener nuevamente el listado y se vean reflejados
 los cambios, o si hay un error, será manejado por la función handleError.
$(document.body).on('click', '.item-votar', function () {
    cargando(true);
    TablaPeliculas.update({ id: getPeliculaId(this),
Votos: getVotos(this) + 1 }).then(ObtenerPeliculas(), handleError
);
 });
 
Esta función al permite borrar un registro llamando al metodo <del> de la
tabla películas, y obtiene el Id del la función getPeliculaId, la función confirmación solo levanta el
cuadro de dialogo con las opciones , y permite capturar la respuesta del usuario, es por ello que 
si el usuario presionó en la opción SI, entonces ejecutamos el método borrar de la tabla. Hacemos lo
mismo que en el método anterior, si esta todo ok, volvemos a obtener las películas para que se 
reflejen los cambios en la UI.
 
$(document.body).on('click', '.item-borrar', function () {
    cargando(true);
    var idPelicula = getPeliculaId(this);
    confirmacion("Esta Seguro", "Desea Borrar la Pelicula", "Si", function () {
    TablaPeliculas.del({ id: idPelicula }).then(ObtenerPeliculas, handleError);
  });
    cargando(false);
});
 
Para que lo pruebes en mas detalle te, dejo el código:

DESCARGAR EJEMPLO

Recursos:

Post Anterior:

http://geeks.ms/blogs/gperez/archive/2013/07/31/azure-mobile-services-ejemplo-pr-225-ctico-con-html5-js.aspx

Eso, espero que te sirva!, nos vemos en el siguiente tutorial de AMS (me quedan dos pendientes), luego lo haré para Windows Phone, Android e iOS.

Saludos!

@chalalo

Un comentario en “Comenzando Azure Mobile Services–Ejemplo Práctico con HTML5 + JS [Parte 2]”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *