-
Notifications
You must be signed in to change notification settings - Fork 1
ToDo app
Una aplicacion simple de tareas
Crear un proyecto nuevo, basandose en templates\jqm
:
phonegap create prueba8 --id com.coderhouse.prueba8 --name "00 Prueba 8" -src templates\jqm
La idea del flujo de navegacion es simple:
+
Paginas/vistas | Rutinas/codigo
|
Input para nueva +-------------+ |
tarea. | | |
Listado de | index <-----------+
tareas pendientes | | | |
+-------------+ | |
| | |
| | |
Click en una tarea +------v------+ | |
muestra pagina | | | Borrar tarea
confirmacion: | confirmacion| | seleccionada
Completada / | | | |
No completada +-------------+ | |
| | | |
+-v--------v--+ | |
Mostrar un mensaje | | | | |
alusivo: |done|not done+-----------+
Excelente/Ok... | | | |
+-------------+ |
+
Siguiendo ese flujo, nuestras paginas seran:
Inicialmente solo mostramos un input
y un boton Agregar
<div id="index" data-url="index" data-role="page">
<div data-role="header">
<h1>Tareas</h1>
</div>
<div data-role="content">
<form id="task-form" method="GET">
<div data-role="fieldcontain">
<input type="text" name="task" id="task" />
</div>
<input id="add" type="button" data-icon="plus" value="Agregar" />
</form>
<br />
<ul id="task_list" data-role="listview">
<li data-role="list-divider">Pendientes</li>
</ul>
</div>
</div>
Las opciones al ver una tarea seran marcarla como completada o no, de cualquier manera borraremos la tarea.
<div id="confirm" data-url="confirm" data-role="page">
<div data-role="header">
<h1>Finalizar tarea</h1>
</div>
<div data-role="content">
Marcar esta tarea como
<br>
<a class="remove_task" href="#done" data-role="button" data-icon="delete" data-theme="f">Completada</a>
<a class="remove_task" href="#notdone" data-role="button" data-icon="check" data-theme="g">No completada</a>
<br>
<br>
<a href="#index" data-role="button" data-icon="minus">Cancelar</a>
</div>
</div>
Segun como cerremos una tarea mostraremos una de dos paginas:
<div id="done" data-url="done" data-role="page">
<div data-role="header">
<h1>Tareas</h1>
</div>
<div data-role="content">
Excelente!
<br>
<br>
<a href="#index" data-role="button">Volver</a>
</div>
</div>
<div id="notdone" data-url="notdone" data-role="page">
<div data-role="header">
<h1>Tareas</h1>
</div>
<div data-role="content">
Ok...
<br>
<br>
<a href="#index" data-role="button">Volver</a>
</div>
</div>
Crear un archivo vacio: www/js/todo.js
. Debemos incluirlo en index.html
al final del <body>
, debajo de la inclusion de index.js
:
...
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/todo.js"></script>
...
Para que sea mas ordenado, pondremos la funcionalidad dentro de un objeto.
var todo = {};
Al objeto le agregaremos un array para contener las tareas, metodos y propiedades. En javascript todos los objetos son dinamicos.
//inicializamos la lista con un array vacio
todo.list = [];
El archivo completo queda asi:
// Creamos un objeto
var todo = {};
// Creamos una propiedad "list" con un array vacio
todo.list = [];
/** Metodo para ingresar una nueva tarea */
todo.add = function(event) {
// leer el valor del input
var task = $('input').val();
if (task) {
// Agregar la tarea al final del array
todo.list[todo.list.length] = task;
todo.refresh_list();
// Limpiar el input
$('input').val('');
}
event.preventDefault();
};
/** Metodo para remover la tarea seleccionada */
todo.remove = function() {
// Remover el array y actualizar lista
todo.list.splice(todo.selected,1);
todo.refresh_list();
};
/** Re-crear la lista desde las tareas en el array */
todo.refresh_list = function() {
var $tasks = $('#task_list'), i;
// Clear the existing task list
$tasks.empty();
if (todo.list.length) {
// Agregar encabezado
$tasks.append('<li data-role="list-divider">Pendientes</li>');
for (var i=0;i<todo.list.length;i++){
// Agregar cada tarea
var li = '<li><a data-task-id="' + i
+ '" href="#confirm">' + todo.list[i] + '</a></li>'
$tasks.append(li);
}
}
// actualizar el listado
$tasks.listview('refresh');
};
// Inicializar la pagina principal
$('#index').on('pageinit', function() {
console.log('index.pageinit');
// Vaciamos el array al iniciar la pagina
// esto sucede solo una vez
todo.list = [];
// Asignamos el metodo todo.add al click de #add
$('#add').on('click', todo.add);
// Delegamos el evento click que suceda a cualquier
// <a> dentro de un <li> dentro de #task_list
$('#task_list').on('click', 'li a', function() {
todo.selected = $(this).data('task-id');
});
// Asignar el metodo todo.refresh_list al evento
// "pagebeforeshow" para que sea llamado
// siempre antes de mostrar #index
$('#index').on('pagebeforeshow', todo.refresh_list);
});
// Capturamos el evento click de los botones .remove_task
// Estos son los que marcan completado/no completado
$(document).on('pageinit', '#confirm', function(){
$('.remove_task').on('click', todo.remove);
});
Agregar tarea
/** Ingresar una nueva tarea */
todo.add = function(event) {
// leer el valor del input
var task = $('input').val();
if (task) {
// Agregar la tarea al final del array
todo.list[todo.list.length] = task;
todo.refresh_list();
// Limpiar el input
$('input').val('');
}
event.preventDefault();
};
Remover item
/** Remover la tarea marcada como selected */
todo.remove = function() {
// Remover el array y actualizar lista
todo.list.splice(todo.selected,1);
todo.refresh_list();
};
Actualizar lista
Para actualizar la lista, primero removemos todos los elementos y los volvemos a ingresar con los valores del array (todo.list):
/** Re-crear la lista desde los valores del array */
todo.refresh_list = function() {
var $tasks = $('#task_list'), i;
// Clear the existing task list
$tasks.empty();
if (todo.list.length) {
// Agregar encabezado
$tasks.append('<li data-role="list-divider">Pendientes</li>');
for (var i=0;i<todo.list.length;i++){
// Agregar cada tarea
var li = '<li><a data-task-id="' + i
+ '" href="#confirm">' + todo.list[i] + '</a></li>'
$tasks.append(li);
}
}
// actualizar el listado
$tasks.listview('refresh');
};
- 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