-
Notifications
You must be signed in to change notification settings - Fork 1
iRec inicializacion 2
Como dijimos, la inicializacion va a permanecer en el archivo js/index.js
.
En una suerte de orden cronologico vamos a ver las inicializaciones de las paginas segun el orden en que podemos acceder a ellas. El arbol de navegacion es algo asi:
- #home
- #guia-list
- #interview
- #revision
- #nueva-guia
- #interview
- #entrevista-list
- #revision
- #guia-list
En #guia-list necesitamos configurar el boton que nos llevara a la pagina #nueva-guia. Es decir, ya existe y funciona, pero necesitamos intervenir el boton para poder acceder a #nueva-guia con un nombre para la guia.
Usamos una llamada a prompt()
. prompt()
funciona igual que alert()
en el sentido de que detiene la ejecucion hasta que se haya resuelto. Entonces al hacer click en #nueva-guia preguntamos el nombre para la guia que vamos a crear. Si el resultado es nulo/false/vacio volvemos a #home. Sino, asignamos el nombre provisto al elemento #titulo-guia y accedemos a la pagina:
$('#guia-list').on('pagecreate', function(){
//inicializar el boton para crear nuevas guias
$('a[href="#nueva-guia"]').on('click', function(evt){
evt.preventDefault();
var p = prompt("Nombre de la nueva guia","");
if(!p || !p.trim()) {
$(':mobile-pagecontainer').pagecontainer('change','#home');
return false;
}
$('#titulo-guia').text(p);
$(':mobile-pagecontainer').pagecontainer('change','#nueva-guia');
});
});
Esta funcion ya la teniamos, pero tiene leves cambios para dar mas funcionalidad:
$('#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)
.on('taphold', function(evt){
var p = confirm('Eliminar la guia "'+e.nombre+'"?');
})
.click(function(evt){
evt.preventDefault();
var p = prompt("Nombre la entrevista","");
if(!p || !p.trim()) {
return;
}
$('#titulo-entrevista').text(p);
$('#interview').data('guia',e);
$(':mobile-pagecontainer').pagecontainer('change','#interview');
});
});
container.listview('refresh');
});
Esta funcion de inicializacion tambien tiene minimos cambios. Principalmente usamos la propiedad entrevista.nombre
para el listado, que era algo que debiamos corregir:
$('#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.nombre)
.appendTo(li)
.on('taphold', function(evt){
var p = confirm('Eliminar la entrevista "'+e.nombre+'"?');
})
.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');
});
No necesitamos (por ahora) hacer ninguna llamada a traves de pagecreate
en esta pagina.
Otra funcion que creo que no ha cambiado.
$('#interview').on('pagecreate', function(){
console.log('pagecreate on interview');
$('#record').click(function(e){
e.preventDefault();
if(recordApi.isRecording) {
recordApi.stop();
}else{
recordApi.record();
}
});
});
Utilizamos el evento pageshow
para inicializar recordApi
llamando a nuevaGrabacion()
. Como vamos a llamar una funcion asincronica (nuevaGrabacion(guia.id, callback)
) mostramos el spinner con $.mobile.loading('show')
y lo ocultamos cuando se completo la llamada a nuevaGrabacion
con $.mobile.loading('hide')
:
$('#interview').on('pageshow', function(e, pages){
// console.log(e);
$.mobile.loading('show');
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.texto);
container.append(div);
});
$.mobile.loading('hide');
});
});
A esta inicializacion le falta la inicializacion del boton para retroceder 10 segundos...
Tampoco estamos utilizando el boton stop
, decidamos si lo inicializamos o lo sacamos de la interfaz.
$('#revision').on('pagecreate', function(){
console.log('pagecreate on revision');
//inicializacion de botones
$('#play').click(function(e) {
e.preventDefault();
revisionApi.play();
});
$('#pausa').click(function(e){
e.preventDefault();
revisionApi.pausa();
});
//inicializacion de indicadores de tiempo
revisionApi.currentTime = $('#currentTime').text("00:00");
});
Tienen que recordar en este punto que, cuando navegamos a estas paginas (#revision y #interview), ya les asignamos la guia o entrevista (segun el caso) y cuando recibimos el evento pageshow
simplemente reconfiguramos toda la pagina basandonos en la guia o entrevista asignada.
Notar que llamamos a $.mobile.loading('hide')
porque esperamos que, en otra parte del proceso, se haya mostrado el spinner y aca queremos sacarlo.
$('#revision').on('pageshow', function(e, pages){
console.log('pageshow en #revision');
// var entrevista = crearEntrevista();
var entrevista = entrevistas.lista[pages.toPage.data('entrevistaIdx')];
var guia = guias.lista.filter(function(g){
return g.id == entrevista.interview;
})[0];
$('#titulo-entrevista').text(entrevista.nombre);
var container = $('div#respuestas', pages.toPage);
container.empty();
revisionApi.load(pages.toPage.data('entrevistaIdx'));
$.each(guia.preguntas, function(i,e){
var div = $('<div class="respuesta" />');
div.append(revisionApi.createTagButton(i));
div.append(e.texto);
var tags = entrevista.tags.filter(function(tag){
return tag.ref == i;
});
$.each(tags, function(ii,ee){
div.append( revisionApi.createSeekButton(ee.time) );
});
container.append(div);
});
$.mobile.loading('hide');
});
$('#nueva-guia').on('pagecreate', function(){
console.log('pagecreate on nueva-guia');
$('#guardar-guia').on('click', function(evt){
evt.preventDefault();
if(!$('#titulo-guia').text() || $('li.pregunta').length < 1) {
alert('Hay un error en la guia');
return;
}
$.mobile.loading('show');
var guia = {
nombre: $('#titulo-guia').text(),
id: guid(),
preguntas: {}
};
$('#preguntas li').each(function(i,e){
console.log( $(e).children().first().text() );
guia.preguntas[i+1] = {
texto: $(e).children().first().text()
};
});
guias.agregarGuia(guia, function(){
$.mobile.loading('hide');
$(':mobile-pagecontainer').pagecontainer('change','#guia-list');
});
});
$('#agregarPregunta').on('click', function(evt){
evt.preventDefault();
if($('#preguntaInput').val()) {
var li = $('<li />')
.attr('data-icon','delete')
.addClass('pregunta');
var a = $('<a href="#" />')
.text($('#preguntaInput').val())
.click(function(evt2){
evt2.preventDefault();
$(this).parent().remove();
$('body').focus(); //<- para que no caiga el focus directo en el input
})
.appendTo(li);
$('#preguntas').append(li);
$('#preguntas').listview('refresh');
$('#preguntaInput').val('').focus();
}
});
});
En el evento pageshow
solo nos aseguramos de inicializar la pagina en limpio:
$('#nueva-guia').on('pageshow', function(e, pages){
$('#preguntaInput').val("");
$('#preguntas').empty();
$('#preguntas').listview('refresh');
});
Es tiempo de probar! Porque en la proxima tenemos que resolver el problema de reordenar el listado de preguntas
- 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