irec inicializar interfaz - CGastrell/phonegap GitHub Wiki

Inicializacion de interfaz

Hasta ahora generamos casi toda la funcionalidad que vamos a necesitar en la aplicacion. Tenemos 5 paginas:

home/casa/inicio/splash
lista de guias
lista de entrevistas
vista de entrevista
vista de revision

Cada una de estas paginas recibe varios eventos de jQueryMobile, principalmente nos vamos a manejar con 2: pagecreate y pageshow.

Si bien suena bastante obvio cuando se recibe cada evento, la diferencia fundamental es que pagecreate se ejecuta solo 1 vez (a menos que juguemos con paginas dinamicas que se generan y destruyen a pedido) y pageshow se recibe cada vez que navegamos a esa pagina.

pagecreate

Nos sirve para inicializar codigo que no queremos se repita: asignacion de handlers a los botones, si lo hacemos mas de una vez los handlers no se pisan, sino que se apilan y luego cuando hacemos, por ejemplo, un click, se disparan todos los handlers que asignamos.

pageshow

Sirve principalmente cuando necesitamos cambiar el contenido de la pagina (listados, datos asociados, etc)

guia-list

La pagina de listado de las guias, al igual que la de entrevistas, solo necesita que actualicemos el contenido, entonces solo escucharemos el evento pageshow para actualizar el listado:

$('#guia-list').on('pageshow', function(e, pages){
  console.log('pageshow en guia-list');
  var container = $('#guias', pages.toPage);
  container.empty();
  $.each(guias.lista, function(i,e){
    var stringData = JSON.stringify(e);
    var li = $('<li />').appendTo(container);
    var a = $('<a />')
      .attr('href','#interview')
      .data('guia',e)
      .text(e.nombre)
      .appendTo(li)
      .click(function(evt){
        evt.preventDefault();
        $('#interview').data('guia',e);
        $(':mobile-pagecontainer').pagecontainer('change','#interview');
      });
  });
  container.listview('refresh');
});

entrevista-list

Casi identica a la anterior, solo cambia el objeto por el cual itera.

$('#entrevista-list').on('pageshow', function(e, pages){
  console.log('pageshow en entrevista-list');
  var container = $('#entrevistas', pages.toPage);
  container.empty();
  $.each(entrevistas.lista, function(i,e){
    var stringData = JSON.stringify(e);
    var li = $('<li />').appendTo(container);
    var a = $('<a />')
      .attr('href','#revision')
      .text(e.id)
      .appendTo(li)
      .click(function(evt){
        evt.preventDefault();
        //esta vez pasamos el indice de la entrevista
        $('#revision').data('entrevistaIdx',i);
        $(':mobile-pagecontainer').pagecontainer('change','#revision');
      });
  });
  container.listview('refresh');
});

interview

La pagina interview va a necesitar inicializar el boton de grabacion de la entrevista, para lo cual escucharemos pagecreate:

$('#interview').on('pagecreate', function(){
  console.log('pagecreate on interview');

  $('#record').click(function(e){
    e.preventDefault();
    if(recordApi.isRecording) {
      recordApi.stop();
    }else{
      recordApi.record();
    }
  });
});

Y luego escuchamos pageshow para cambiar el contenido cuando la mostramos:

$('#interview').on('pageshow', function(e, pages){
  // console.log(e);
  // console.log(pages);
  console.log('pageshow on interview');
  var guia = pages.toPage.data('guia');
  var container = $('#guia', pages.toPage);
  container.empty();
  recordApi.nuevaGrabacion(guia.id, function(){
    $.each(guia.preguntas, function(i,e){
      var div = $('<div class="respuesta" />');
      div.append(recordApi.createTagButton(i));
      div.append(e);

      container.append(div);
    });
  });
});

Por que este mix? Porque no puedo (o no me gusta) inicializar paginas desde cualquier lugar del codigo, es desprolijo y dificil de leer. En cambio de esta manera escuchamos los eventos y luego, desde cualquier otro lugar del codigo, hacemos una llamada como la que se encuentra en recordApi.onStop:

//con esta linea almaceno el id de la entrevista
//en una variable del elemento #revision
$('#revision').data('entrevista',id_de_entrevista);

//luego navego a esa pagina:
$(':mobile-pagecontainer').pagecontainer('change','#revision');

Y cuando miro el evento pageshow veo que ahi, siempre que se muestre la pagina, esta buscara el valor de $('#revision').data('entrevista') y en base a eso construira su contenido :)

revision

Algo muy similar hacemos en la pagina #revision:

$('#revision').on('pagecreate', function(){
  console.log('pagecreate on revision');

  //inicializacion de botones
  $('#play').click(function(e) {
    e.preventDefault();
    mediaApi.play();
  });

  $('#pausa').click(function(e){
    e.preventDefault();
    mediaApi.pausa();
  });

  //inicializacion de indicadores de tiempo
  mediaApi.currentTime = $('#currentTime').text("00:00");
  mediaApi.totalTime = $('#totalTime').text(0);
});
$('#revision').on('pageshow', function(e, pages){
  console.log('pageshow en #revision');

  // var entrevista = crearEntrevista(); <-- asi lo teniamos antes
  var entrevista = entrevistas.lista[pages.toPage.data('entrevistaIdx')];
  var guia = guias.lista.filter(function(g){
    return g.id == entrevista.interview;
  })[0];
  var container = $('div#respuestas', pages.toPage);
  container.empty();
  mediaApi.load(pages.toPage.data('entrevistaIdx'));
  $.each(guia.preguntas, function(i,e){
    var div = $('<div class="respuesta" />');
    div.append(mediaApi.createTagButton(i));
    div.append(e);

    var tags = entrevista.tags.filter(function(tag){
      return tag.ref == i;
    });

    $.each(tags, function(ii,ee){
      div.append( createSeekButton(ee.time) );
    });

    container.append(div);
  });
});

Quedamos en algun ToDo?