Ejercicios 1

En la sección de ejercicios de Sencha Touch vamos a practicar creando una pequeña aplicación móvil que nos permita gestionar un listado de notas. La pantalla principal contendrá el listado de notas, con botones para crear nuevas notas y modificarlas. Al crear una nueva nota nos aparecerá un formulario en el que podremos introducir los datos y añadirlos al listado. Este mismo formulario también se utilizará para modificar las notas existentes. Además desde la pantalla principal podremos abrir la ayuda con información sobre la aplicación y el autor.

En todos los ejercicios se utilizará el mismo proyecto de Sencha Touch, el cual se irá completando ejercicio tras ejercicio hasta tener la aplicación completa. Para la entrega solamente será necesario enviar el resultado final.

Ejercicio 1 - Estructura de la aplicación (0.5 puntos)

En este primer ejercicio vamos a crear el proyecto de Sencha Touch que utilizaremos en todos los ejercicios y la función de inicialización del mismo.

Si ya tenemos descargado e instalado el SDK y el Cmd de Sencha Touch procedemos a crear una carpeta llamada misnotas y a generar un proyecto dentro de esta llamado MisNotas.

El contenido de los ficheros principales será el siguiente:

• El documento index.html no será necesario modificarlo ya que al generar el proyecto ya se incluye la estructura básica, la carga de los recursos necesarios (hojas de estilo y javascript) e incluso un aviso de carga que aprovecharemos para nuestro proyecto.

• En app.js es donde vamos a crear nuestra aplicación y los paneles que necesitamos. Borramos el código que se incluye de ejemplo para empezar nuestra aplicación desde cero, siguiendo estos pasos:

  • En primer lugar creamos la instancia de la aplicación a la que pondremos como nombre MisNotas. Aquí deberemos definir también la función launch, la cual destruirá el loading y asignará el panel principal al viewport:

    Ext.application({
        name: 'MisNotas',
        launch: function() {
            Ext.fly('appLoadingIndicator').destroy();
            Ext.Viewport.add( /*TODO: referencia al panel principal*/ );
        }
    });

  • De forma separada creamos el panel principal. En este panel de momento solo indicaremos que ocupe toda la pantalla y que muestre el texto HTML "Mis Notas".

    var panelPrincipal = Ext.create('Ext.Panel', {
        fullscreen: true,
        html: 'Mis Notas'
    });

No es necesario que la declaración esté dentro de la función launch pero sí que es importante que se ejecute después (ya que es necesario que el SDK esté cargado). Para esto podemos crear una función (definida antes de Ext.application({...});) que instancie el objeto y lo devuelva o que lo guarde en una variable global (esta segunda opción será mejor ya que después tendremos que hacer referencias a estos objetos). Una posible estructura a seguir es:

var panelPrincipal = null;

function crearPanelPrincipal() {
    panelPrincipal = Ext.create('Ext.Panel', { ... });
    return panelPrincipal;
}

Ext.application({
    name: 'MisNotas',
    launch: function() {
        Ext.fly('appLoadingIndicator').destroy();
        Ext.Viewport.add( crearPanelPrincipal() );
    }
});

Nota: En las plantillas de los ejercicios se incluye el fichero app.js con un esqueleto de la estructura a seguir.

Ejercicio 2 - Creación de paneles (0.5 puntos)

En este ejercicio vamos crear los paneles principales de la aplicación, para esto partiremos del código del ejercicio anterior.

Como ya hemos explicado la aplicación consta de un panel para listar las notas, otro para editar las notas y un tercero para mostrar la ayuda. Además vamos a necesitar un cuarto panel que se utilizará como contenedor. A continuación se explican los pasos que debemos seguir:

En app.js modificaremos el panel principal para asignarle un layout tipo card y una sección items con referencias a los tres paneles de la aplicación mediante su nombre de variable, a los que llamaremos panelContenedorLista, panelFormulario y panelAyuda.

Estos tres paneles los definiremos de la misma forma: un panel con layout tipo fit y un texto html de prueba que utilizaremos para comprobar que el panel se visualiza correctamente.

Por último deberemos comprobar que todo funciona correctamente. Para visualizar cada uno de los paneles de momento podemos cambiar su orden en la sección items del panel contenedor o llamar al método panelPrincipal.setActiveItem(1); del panel.

Ejercicio 3 - Barras de herramientas (1 punto)

Este ejercicio continua con el anterior, al cual vamos a añadir las barras de herramientas necesarias para cada panel.

Las barras las instanciaremos como un objeto separado y después las añadiremos a los paneles:

• En el panel panelContenedorLista añadiremos una barra en la parte superior con el título "Mis Notas".

• En el panel panelFormulario añadiremos dos barras de herramientas. Una en la parte superior con el título "Editar nota" y una segunda en la parte inferior sin ningún título.

• Por último para el panel panelAyuda añadiremos una barra en su parte superior con el título "Ayuda".

Ejercicio 4 - Botones (1 punto)

En este último ejercicio vamos a añadir los botones de cada una de las barras de herramientas que hemos definido en el ejercicio anterior. Los botones los podemos declarar directamente de forma inline en la sección items de cada barra de herramientas mediante su xtype.

• En el panel panelAyuda vamos a poner un único botón en su barra de herramientas alineado a la izquierda, en el que colocaremos el icono predefinido de tipo 'home'.

• En el panel panelContenedorLista vamos a colocar dos botones en su barra de herramientas. El primer botón estará alineado a la izquierda y contendrá una imagen externa (la imagen inf.png de la plantilla). Para añadir esta imagen tendremos que asignar un estilo al botón, llamado "btnAyuda" (ver sección "Botones"). Este estilo lo podemos añadir directamente a los estilos del documento "index.html" e indicar que cargue la imagen indicada (recordad usar !important) con un ancho de 45 píxeles y un alto de 35 píxeles. El segundo botón del panel panelContenedorLista estará alineado a la derecha, con el tipo 'action' y el texto "Nueva Nota".

• Por último en el panel panelFormulario teníamos dos barras de herramientas. En la barra superior colocaremos dos botones. El primero de ellos estará alineado a la izquierda y con el icono predefinido de tipo 'home'. El segundo botón de esta barra estará alineado a la derecha, será de tipo 'action' y con el texto "Guardar". En la barra inferior colocaremos otro botón alineado a la derecha y con el icono predefinido de tipo 'trash'.