Invitación a Evento- MSDN – Todos a bordo para el Futuro de HTML5 Mobile y Aplicaciones web híbridas para Windows Phone 8 y tabletas de Windows

Hola!,los quería invitar al siguiente evento :

Windows 8 y Windows Phone 8 frente a este desafío mediante la inclusión de Windows Internet Explorer 10 con aceleración por hardware de HTML y los gráficos, compilación JIT JavaScript, seguridad mejorada y un gran soporte para HTML 5. En esta sesión, se muestra Internet Explorer 10 capacidades proporcionadas por el Grupo de Trabajo de Aplicaciones Web W3C incluyendo IndexedDB y almacenamiento Web de datos sin conexión, enchufes Web para la comunicación bi-direccional, Web Workers para roscar y XmlHttpRequest para llamar a los servicios web. Tome sus páginas web sin conexión con caché de la aplicación y hacer que se reconoce la ubicación a través de la API de geolocalización. Te mostramos cómo hacerlo, así como la forma de construir aplicaciones web híbridas Sonrisa

Fecha: 29/08/2013
Hora: 04:00 PM (GMT-05:00 Colombia, Panama). Chile 3:00PM
Si tiene dudas con la conversión de zonas horarias, por favor haga clic aquí

URL de Registro para Asistentes
https://msevents.microsoft.com/CUI/EventDetail.aspx?EventID=1032559571&Culture=es-AR&community=0

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

Vamos a profundizar un poco más en el tema de los Script del servidor para el manejo de las acciones, en el post anterior, vimos como validar en la acción de insertar el tamaño de las entradas del nombre y del tipo.

Ahora vamos a realizar puede que no tenga mucho sentido, pero el tema es mostrar un escenario en donde necesitemos leer de un tabla un registro para insertarlo en otra antes de borrar.  Para esto voy a crear otra tabla que se llame “Papelero” , la idea es que antes de borrar un registro en la tabla Películas, leamos el registro, luego lo insertemos en la tabla “Papelero”, súper simple Sonrisa .Puedes ver en la siguiente imagen que tengo dos tablas, son idénticas entre sí.

image

Luego vamos a Datos y a la pestalla de Script y seleccionamos Eliminar:

image

El script es el siguiente:

function del(id, user, request) {
  var Peliculas = tables.getTable(‘Peliculas’);

    Peliculas
        .where({ id: id})
        .read({ success: CopiaRespaldo });

 

    function CopiaRespaldo(data) {
        if(data.length > 0) {
           var obj = {
                Nombre: data[0].Nombre,
                Votos: data[0].Votos,
                Tipo: data[0].Tipo
            };

             var Papelero = tables.getTable(‘Papelero’);
              Papelero.insert(obj, {
                success: insertComplete,
                error: errorHandler
            });
 

    } else {
            console.log(‘Error, Registro no encontrado’);
           
request.respond(statusCodes.NOT_FOUND, ‘Error, Registro no encontrado’);

       }

    }

   function insertComplete(){
      //Ahora borramos, cuando el insert esté ok
      request.execute();
  }

   function errorHandler(){
       //En Caso de error de inserción….
       console.log(‘Error, No se pudo insertar’);
       request.respond(statusCodes.ERROR, ‘Error, No se pudo insertar’);

  }

}

Puedes ver que lo primero que hacemos en hacer referencia hacia la tabla, luego leer de la tabla los registros que coincidan con la condición del Id, una vez que se se hace la llamada la función CopiaRespaldo, que revisa si existe un dato asociado para luego crear un objeto (obj) para ser insertado en la tabla Papelero,con los datos de la lectura de la tabla Películas. Puedes notar que se pasa como argumento una colección, por lo que, en mi caso, la lista devuelve un único elemento, lo accedo mediante su índice.  Para la inserción en la tabla Papelero, primero hacemos referencia a la tabla y realizamos la inserción, una vez que esta ok, hacemos el request.execute, que ejecuta la acción de borrado.

Por ejemplo, ingreso la película Superman y la quiero borrar:

image

Presiono borrar y luego verás el registro almacenado en la tabla Papelero:

image

Bastante sencillo, puedes ver más información de los Script Para Azure Mobile Services en la documentación:
http://msdn.microsoft.com/en-us/library/windowsazure/jj554226.aspx

Luego vemos el tema de los permisos Sonrisa
Saludos,
@chalalo

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