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:
Además cuando presionen borrar, vamos a mostrar este tipo de confirmación, como ves, todo hecho con jquerymobile.
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
![image[64]](/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/gperez/image64_5F00_4816463D.png "image[64]")
, espero que te sirva! 
, lo pasamos bastaste bien.
, Sortearemos una Xbox 360 entre los asistentes!!!