TUTORIAL: Desarrollo de aplicaciones para bada (V)

La interfaz gráfica de usuario

Una aplicación bada puede ser interpretada como una GUI que hace algo, y que será la imagen que el usuario tendrá de la aplicación.

Según su complejidad, una aplicación puede tener una pantalla, como por ejemplo una calculadora. O varias, como por ejemplo un libro de direcciones, que podría organizar los nombres y direcciones en su pantalla principal  mediante una lista desplazable, y que podría tener otras pantallas para ver los detalles, editar las entradas, etc.

El diseño de una buena GUI es muy importante en el desarrollo de una aplicación para bada. Mucho se ha escrito sobre qué define a una buena interfaz de usuario, pero básicamente se puede resumir en dos conceptos: atención al detalle y simplicidad.

También tendremos que tener en cuenta y aprovechar las peculiaridades de la GUI de los dispositivos bada: la TouchWiz UI, la interfaz estándar de Samsung para todos sus dispositivos móviles. Las peculiaridades de TouchWiz UI son las siguientes:

• Multi-touch – entrada multi-táctil mediante dedos con respuesta, manipulación directa

• Simplicidad – diseño simple de oantalla, fuentes relativamente grandes, elementos de la GUI grandes, iconos simples grandes, menús simples, personalización limitada

• Brillo y contraste – tecnología superAMOLED: alto contraste, colores vivos, negros saturados (por cierto, son preferibles los esquemas de colores oscuros, ya que en las pantallas AMOLED los píxeles oscuros consumen menos batería que los claros)

• Entrada de usuario extendida – TouchWiz soporta además gestos (movimientos físicos como girar (rotate), sacudir (shake), mover a un lado y volver bruscamente (snap)... Incluso soporta reconocimiento facial

• Múltiples tamaños y resoluciones de pantalla – WVGA (Wide VGA) 480x800, WQVGA (Wide Quarter VGA) 240x400

Puedes encontrar guías de diseño de GUIs en la ayuda del SDK. Selecciona "Help > Help Contents > bada Application UI Guide" en el badaIDE.

Frames, Forms y controles

Puedes pensar en la GUI como un árbol jerárquico en el que se organizan todos los elementos que se ven en pantalla. En la raíz estaría el Frame de la aplicación. El Frame es el contenedor de nivel superior que contiene todos los elementos de la GUI. Más formalmente, el Frame es la clase que encapsula la pantalla del dispositivo, e interpreta el papel de ventana principal, de la cual hay exactamente una por aplicación. Todas las aplicaciones tienen un Frame, y no necesitas hacer nada para crearlo ni inicializarlo, de ello se encarga el framework.

Un Frame contiene Forms (formularios). Un Form implementa una pantalla de la aplicación, y una aplicación puede contener tantos Forms como sea necesario.

Un Form es un contenedor al que se pueden añadir Controls (controles): botones, listas, pop-ups, imágenes, fondos, etc.

En la siguiente figura puedes ver la relación entre componentes (clic para ampliar):

Elementos estándar de un Form

Un Form ocupa toda la pantalla del móvil (todo lo visible en pantalla), por lo tanto incluyen, opcionalmente, algunos elementos estándar del sistema:

• La barra indicadora en la parte superior de la pantalla, utilizada para mostrar iconos del sistema (como los niveles de señal y batería) y notificaciones (mensajes no leídos, por ejemplo)

• La barra de títulos muestra el título de la aplicación actual

• Las Soft keys, los botones mostrados en el área de comandos, en la parte inferior de la pantalla

• La Option menu key, el botón "..." mostrado entre las soft keys, utilizado para lanzar el menú de opciones

Todos estos elementos son opcionales. Para cada Form, habrá que decidir cuales queremos mostrar y cuales no según nuestras necesidades.

  

Gestión de eventos

Los eventos de entrada incluyen las entradas multi-táctiles, las entradas de los botones del teléfono, los eventos del sistema operativo y los eventos de los sensores.

Los listeners son los elementos que proporcionan los mecanismos para capturar y gestionar los eventos. En todo momento hay exactamente un control que tiene el "focus" (el centro de atención) en la GUI, es decir, que está actualizando la pantalla y recibiendo eventos del sistema.

Todos los controles tienen listeners "pre-fabricados" para los tipos de eventos básicos que reconocen. Los tipos de evento que puede incluir un control (dependiendo del tipo de control incluirá unos u otros) son los siguientes:

• Focus events

• Key events (teclas, botones)

• Touch events (toques)

• Drag and drop events (arrastrar y soltar)

Muchos controles incluyen listeners específicos. Por ejemplo, los controles tipo barra deslizante reconocen los eventos de tipo “adjustment”, que indican cuánto se ha movido una barra deslizante.

Además, muchos controles comparten un listener de eventos "action", que responde a eventos específicos generados por el framework de la GUI. Estos eventos "action" pueden ser:

• Button and CheckButton events

• ContextMenu (menú contextual) and OptionMenu (menú de opciones) events

• Tab (pestaña) events

En resumen...

- Cada aplicación tiene un único Frame, que representa la pantalla del dispositivo

- El Frame es el objeto raíz de la GUI de la aplicación

- Un Frame contiene uno o más Forms (un caso especial son las aplicaciones a pantalla completa, que no contienen Forms, sinó que dibujan sus gráficos directamente, como los juegos)

- Un Form es el contenedor de más alto nivel después del Frame, y define una pantalla completa de la aplicación

- Los Forms pueden contener controles

- Los listeners se añaden a los controles para capturar los eventos a los que la aplicación debe responder

Vía: Introduction to bada - A developer's guide