ToDo app - CGastrell/phonegap GitHub Wiki

Una aplicacion simple de tareas

Preparacion

Crear un proyecto nuevo, basandose en templates\jqm:

phonegap create prueba8 --id com.coderhouse.prueba8 --name "00 Prueba 8" -src templates\jqm

Paginas

Navegacion

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:

Index

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>

Confirmacion

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>

Completada / No completada

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>

Funcionalidad

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');
};