Ejercicios 2

En esta sesión vamos a continuar con el ejercicio del editor de notas de la sesión anterior, al cual añadiremos el contenido de la ayuda, el panel con el formulario y definiremos las transiciones entre paneles.

Ejercicio 1 - Transiciones (1 punto)

Partiendo del código del último ejercicio vamos a añadir las acciones de transición que nos permitirán movernos entre paneles. Todas las transiciones que apliquemos serán del tipo 'slide' y con una duración de 1 segundo (1000ms).

• Al presionar el botón del panel panelAyuda realizaremos una transición hacia arriba para cambiar al panel panelContenedorLista.

• En el panel panelContenedorLista tenemos dos botones en su barra de herramientas. Para el primer botón alineado a la izquierda definimos una transición hacia abajo que cargue el panel panelAyuda. El segundo botón cargará el panel panelFormulario con una transición hacia la izquierda.

• Por último, para los tres botones del panel panelFormulario asignaremos la misma transición hacia la derecha para cambiar al panel panelContenedorLista.

Nota: para obtener las referencias a los paneles para crear las transiciones tenemos dos opciones:

• Tener almacenados los paneles en variables globales y usar directamente estas variables.

• Asignar un identificador a cada panel mediante su atribudo id y posteriormente obtener una referencia mediante la función: Ext.getCmp('id-del-panel')

Ejercicio 2 - Contenido de la ayuda (1 punto)

En este ejercicio vamos a completar el panel de ayuda. En primer lugar modificamos su constructor para que sea del tipo Carousel y definimos su sección items para que contenga dos paneles (además del toolbar que ya teníamos). También tenemos que quitar los campos layout: fit y el texto HTML que teníamos puesto de prueba.

El contenido HTML de cada uno de estos paneles del Carousel lo definiremos en una variable independiente (llamadas var htmlAyuda1 y var htmlAyuda2), que posteriormente asignaremos al elemento html del panel correspondiente. Recordad que para concatenar cadenas tendremos que usar el símbolo más (+).

Para el HTML del primer panel del Carousel definiremos una capa (DIV) a la que asignaremos el estilo ".ayuda". Dentro de esta capa colocaremos el título "Mis Notas" (de tipo H1), seguido por un par de párrafos con el texto "Aplicación Web para la gestión de notas realizada con Sencha Touch. Máster en Desarrollo de Aplicaciones para Dispositivos Móviles". Y por último abajo colocaremos una imagen (logo.png) con un ancho de 100 píxeles (subcarpeta "imgs" de la plantilla).

Para el segundo panel utilizaremos también una capa (DIV) con la clase ".ayuda", en la que colocaremos el titular "Autor", seguido por unos párrafos con los datos del autor.

Por último añadiremos los estilos CSS que hemos definido dentro de la sección de estilos del fichero index.html:

• .ayuda: tendrá un ancho del 100% y el texto centrado.

• .ayuda h1: la etiqueta H1 (cuando esté dentro de la clase "ayuda") la definiremos con un color azul oscuro (color: navy), un tamaño de letra de 18 puntos y el estilo "uppercase" para que aparezca siempre en mayúsculas (text-transform: uppercase).

• .ayuda p: la etiqueta P la definiremos para que tenga color gris (gray).

Ejercicio 3 - Panel con Formulario (1 punto)

En este último ejercicio vamos a crear el formulario. Para esto editamos el panel panelFormulario que ya teníamos hecho y le cambiamos el constructor de panel por uno de tipo formulario. Además tenemos que quitar también los campos layout: fit y el texto HTML que teníamos puesto de prueba. En este formulario vamos a añadir dos campos al array de items (además de las dos barras de herramientas que ya teníamos):

• Un campo de texto con el nombre title, con la etiqueta "Título:" y activaremos la opción de requerido.

• Un área de texto con nombre text, etiqueta "Texto:" y que también sea requerido.