Ejercicios 3

En esta sesión vamos a continuar con los ejercicios anteriores del editor de notas. Añadiremos los elementos necesarios para poder crear, editar, guardar y borrar notas, así como visualizarlas en un listado.

Ejercicio 1 - Modelo y Almacén de datos (0.8 puntos)

En este ejercicio vamos a crear el modelo de datos a utilizar y el almacén donde se van a guardar.

Nuestro modelo de datos llamado 'Nota' tendrá cuatro campos:

• 'id' de tipo 'int'

• 'date' de tipo 'date' y formato 'c'

• 'title' de tipo 'string'

• 'text' de tipo 'string'

Además deberemos definir las siguientes validaciones: los campos 'id', 'title' y 'text' serán requeridos, y para los campos 'title' y 'text' modificaremos el mensaje de error por defecto por "Introduzca un título/texto".

Los modelos de datos se tienen que guardar por separado en la carpeta designada para ello (app/model), además en la aplicación se tendrá que indicar al inicio los modelos que tiene que cargar (revisar el apartado "Uso de modelos de datos en una aplicación").

A continuación crearemos un almacén de datos (Data Store), lo guardaremos en la variable 'storeNotas' y le indicaremos que tiene que usar el modelo 'Nota' (recuerda que para los modelos hay que indicar todo el espacio de nombres). Como proxy vamos a usar el almacenamiento en local, indicando como identificador 'misNotas-app-localstore'. Además lo configuraremos para que se ordenen los datos de forma descendente (DESC) por fecha (campo 'date') y que se carguen los datos del repositorio al inicio (autoLoad: true).

De forma temporal y para poder ver los resultados vamos a insertar datos en el store, añadiendo las siguientes líneas al mismo:

data: [
    { id: 1, date: new Date(), title: 'Test 1', text: 'texto de prueba' },
    { id: 2, date: new Date(), title: 'Test 2', text: 'texto de prueba' },
    { id: 3, date: new Date(), title: 'Test 3', text: 'texto de prueba' },
    { id: 4, date: new Date(), title: 'Test 4', text: 'texto de prueba' }
]

Ejercicio 2 - Listado (0.6 puntos)

En este ejercicio vamos a añadir el listado donde se visualizarán los datos. En primer luegar creamos el listado en la variable "panelLista" y le indicamos que utilice el store 'storeNotas' que hemos definido previamente.

En su sección itemTpl indicamos que muestre el campo {title} dentro de una capa tipo DIV con el estilo CSS "list-item-title", y que el campo {text} lo muestre a continuación en otra capa tipo DIV con el estilo CSS "list-item-text".

Este listado ('panelLista') lo tendremos que añadir a nuestro panel 'panelContenedorLista' en su sección items para poder visualizarlo.

Ahora tenemos que añadir esos estilos al fichero app.css. Para ambas clases ('list-item-title' y 'list-item-text') definiremos los mismos estilos (ver código siguiente), salvo para el "list-item-text" que además tendrá el texto en color gris.

.list-item-title {  /* Igual para: list-item-text */
    float:left;
    width:100%;
    font-size:80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Para list-item-text añadimos 'color: gray;' */
}

Ejercicio 3 - Crear y Editar notas (0.8 puntos)

Vamos a modificar la función handler del botón "Nueva nota" para que al pulsarlo, antes de realizar la transición, cree una nueva nota y la asigne al formulario. Para esto vamos a añadir una llamada a la función crearNuevaNota() (la cual crearemos de forma separada).

En la función crearNuevaNota() en primer lugar nos guardaremos la fecha actual var now = new Date();, y a continuación obtendremos el identificador único del registro a crear var noteID = now.getTime(); (con esta función transformamos la fecha en milisegundos, con lo que obtenemos un número que no se repite que podemos usar como ID). A continuación creamos un registro del modelo 'MisNotas.model.Nota' y lo cargamos en nuestro formulario (panelFormulario.setRecord( note );).

Por último vamos a añadir la funcionalidad de editar las notas creadas. Para esto vamos hasta el 'panelLista', y definimos su función onItemDisclosure. Esta función recoge un parámetro (record) que tenemos que cargar en el 'panelFormulario' (panelFormulario.setRecord( record );). A continuación realizaremos una transición de tipo 'slide' hacia la izquierda y con una duración de 1 segundo, para mostrar el 'panelFormulario'.

Ejercicio 4 - Guardar y Borrar notas (0.8 puntos)

En este último ejercicio vamos a añadir las acciones de guardar y borrar nota. En las funciones handler de los botones "Guardar" y "Borrar" añadiremos llamadas a las funciones guardarNota() y borrarNota() respectivamente. Las llamadas a estas funciones las deberemos de incluir antes de realizar la transición. A continuación definiremos las acciones a realizar en estas funciones (que estarán definidas de forma separada).

En la función guardarNota() realizaremos los siguientes pasos:

• En primer lugar tendremos que cargar los datos introducidos en el formulario (usaremos la función getRecord() sobre la variable que contiene el formulario), y a continuación actualizaremos la instancia del formulario (ver sección "Guardar los datos de un formulario").

• En segundo lugar comprobaremos si hay algún error de validación y mostraremos los errores (ver apartado "Comprobar validaciones" de la sección "Formularios").

• Una vez validado el registro obtenido procederemos a guardar los datos. Obtenemos el store usado por el listado (panelLista.getStore()) y añadimos el registro solo si este no está repetido (función findRecord()).

• Por último actualizamos el store (sync()), lo reordenamos por fecha y refrescamos el listado (refresh()).

La función borrarNota() es más sencilla:

• Obtenemos el registro actual del formulario (getRecord()) y el store usado por el listado (getStore()).

• A continuación comprobaremos si existe el registro actual en el store (usando su "id") y si es así lo eliminaremos (ver apartado "Eliminar registros" de la sección "Data Store").

• Por último actualizaremos los datos del Store (sync()) y refrescamos el listado (refresh()).