-
Notifications
You must be signed in to change notification settings - Fork 1
irec inicializar 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.
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.
Sirve principalmente cuando necesitamos cambiar el contenido de la pagina (listados, datos asociados, etc)
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');
});
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');
});
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 :)
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?
- Repaso y conceptos basicos
- Ejercicios para repasar
- Problematica de desarrollo mobile
- Phonegap
- Requerimientos e instalacion
- Phonegap CLI
- [Primeros ejercicios con Phonegap](Ejercicio Phonegap)
- Plugins
- Hello world
- Estructura de un proyecto Phonegap
- Plugin Device
- Debugging
- Incorporando un framework CSS
- Plugin Vibration
- Sumando partes
- Plugin Battery Status
- Un poco de jQuery
- jQuery Mobile
- Navegacion
- Plugin Dashboard
- Revision de Plugin Dashboard
- Paginas extra
- ToDo
- Persistencia
- ToDo Persistente
- Plugin Camera
- Opciones de camara
- App Mi Galeria
- Revision de Galeria
- Plugin File
- Escribir y leer texto
- Escribir archivos binarios
- Guardando fotos
- Debugger: weinre
- Inspeccionar con weinre
- Phonegap Developer App
- Refactor de apps
- Plugin Media
- Pruebas con audio
- Control y monitoreo de audio
- Encapsular play/pausa
- Hacks
- Formato de tiempos
- Grabar y reproducir
- Proyecto Integrador
- Revision de interfaz
- Interfaz basica
- Entrevista: modelo
- Funcionalidad: revision
- Seleccion de framework
- iRec: navegacion
- iRec: fileApi
- iRec: guias
- iRec: entrevistas
- iRec: recordApi
- iRec: helpers
- iRec: mediaApi
- iRec: inicializar paginas
- iRec: refactor
- iRec: mediaApi refactor
- iRec: recordApi refactor
- iRec: helpers
- iRec: guias.js
- iRec: entrevistas.js
- iRec: crear guias
- iRec: re-inicializando
- iRec: re-ordenando
- iRec: pendientes
- iRec: reporte ux
- iRec:revision: volver
- iRec:entrevista: volver
- iRec:revision: cambios
- iRec:revision: stop
- iRec:revision: Rew 10"
- iRec:revision: tag Go
- iRec: limpieza
- Firma de apps
- Android
- Generacion de key
- Firma de apk
- Alineacion de zip
- Firmar con Phonegap
- iOS
- Detalles finales
- Config.xml
- Iconos
- Splash