Desarrollando UI con el API de alto nivel

Desarrollando UI con el API de alto nivel

OBJETIVOS

En la clase anterior hemos visto como utilizar dos de los elementos centrales en el desarrollo de interfaces de usuario en MIDP, las clases Display/Displayable y la gestión de eventos. La clase Displayable tiene dos subclases: la clase Screen (implementa el API de alto nivel) y la clase Canvas (implementa el API a bajo nivel). En la clase vamos a aprender la funcionalidad del API a alto nivel, es decir, la clase Screen y sus subclases: List, TextBox y Alert que definen estructuras predefinidas y la clase Form cuya estructura es genérica y depende de la aplicación.

List y Choice

Cuando arranca una aplicación normalmente presenta una lista de opciones, para que el usuario seleccione alguna de ellas. Veremos en este apartado como la clase List y el interfaz Choice nos permiten realizar este tipo de listas.

Clase List

La clase List es una subclase de la clase Screen que implementa el interfaz Choice. Tiene dos constructores:

List(String title, int listType)
List(String title, int listType, String[] stringElements, Image[] imageElements)

El primer constructor crea una lista vacía, cuyo elementos de selección pueden incluirse posteriormente. El segundo constructor crea un objeto List con los elementos de selección, en stringElements se indican los elementos de la lista y en imageElements se indican las imágenes asociadas a cada elemento (si no existen imágenes asociadas su valor en null, si existen, imageElements debe de tener la misma longitud que stringElements, aunque existan elementos sin imágenes).

Interface Choice

Como podeis ver en el API, el interface Choice define un conjunto de métodos que sirven para gestionar una lista de selección, permitiéndonos añadir/borrar nuevos elementos, modificar elementos, saber qué elemento está seleccionado,etc.

Elementos de selección

Un objeto que implementa el interfaz Choice presenta al usuario una serie de elementos que puede seleccionar. Cada uno de los elementos tiene asociado un texto y opcionalmente una imagen.

El método size() nos permite obtener el número de elementos de selección que existen y que están ordenados consecutivamente desde 0 a size() - 1.

Tanto el texto como la imagen asociados a un elemento de selección pueden ser obtenidos y modificados a través de los métodos void set(int elementNum, String stringPart, Image imagePart) y Image getImage(int elementNum) y String getString(int elementNum).

El estado "seleccionado" de un elemento es un propiedad del elemento. El usuario puede seleccionar o deseleccionar un elemento utilizando alguna tecla del dispositivo (típicamente la central, que permite movernos hacia arriba y hacia abajo). Las aplicaciones pueden seleccionar el estado de los elementos, a través de dos métodos: setSelectedFlags(boolean[] selectedArray) o setSelectedIndex(int elementNum, boolean selected).

Una aplicación puede añadir o eliminar elementos de la lista de selección a través de los métodos: append(String stringPart, Image imagePart) y insert(int elementNum, String stringPart, Image imagePart).

Tipos de objetos Choice

Existen tres tipos de objetos Choice:

Choice exclusivo: sólo existe un único elemento seleccionado al mismo tiempo, y siempre hay alguno seleccionado.
Choice implícito: es un choice exclusivo especial en el que se selecciona un elemento cuando se inicializa un Command. El usuario no puede modificar mediante botones, el elemento seleccionado. Este tipo de Choice sólo es válido en la clase List.
Choice múltiple: cualquier conjunto de elementos puede estar seleccionado.

Estos tres tipos de Choice se diferencian visualmente.

Ejercicio 1:En los enlaces siguientes podeis descargaros tres MIDlets que utilizan cada los tres tipo de Choice: choice exclusivo, ListTest2.java, choice implícito, ListTest1.java y choice múltiple, ListTest3.java. Probadlos en J2ME Wireless Toolkit, empaquetando los tres MIDlets en un mismo MIDlet Suite.

Ejercicio 2:Reutilizando el código de los MIDlet anteriores, crear un MIDlet que muestre en sucesivas pantallas los tres tipos de Choice que hemos visto anteriormente, utilizando la clase List. Como elementos de la listas poned, por ejemplo los que son necesario implementar en la práctica final.

TextBox

La clase TextBox es una subclase de Screen que permite al usuario introducir y editar un texto. Un objeto TextBox puede crearse a través del constructor: TextBox(String title, String text, int maxSize, int constraints).

Tamaño máximo

El contenido de un TextBox se almacena en un char array, y por lo tanto, su tamaño está limitado a un determinado número de caracteres. El máximo tamaño de un objeto TextBox puede limitarse cuando se construye (parámetro maxSize del constructor), o bien utilizando el método setMaxSize().

Debido a las limitaciones de los teléfonos móviles, se limita a un valor por defecto el tamaño de los TextBox. A través del método getMaxSize() se puede obtener el tamaño máximo que tiene asignado un determinado objeto TextBox. Si se excede el tamaño máximo se produce una excepción IllegalArgumentException.

Restricciones de entrada

Se pueden indicar las siguientes restricciones (compartidas con la clase TextField):

Nombre	Restricción
`ANY`	El usuario puede introducir cualquier texto.
`EMAILADDR`	El usuario puede introducir una dirección de e-mail.
`NUMERIC`	El usuario puede introducir un valor entero (puede ser negativo).
`PHONENUMBER`	El usuario puede introducir un número de teléfono con algunos caracteres no-numéricos. El conjunto de caracteres que se aceptan dependen de la implementación.
URL	El usuario puede introducir una URL.

Las restricciones asociadas a un objeto TextBox pueden establecerse cuando se contruye, o bien utilizando el método setConstraints(). Si el string insertado en el TextBox no cumple la restricción impuesta, se resetea su valor.

Una aplicación puede obtener las restricciones asociadas a un TextBox con una llamada al método getConstraints().

Editar y obtener texto de un TextBox

Los siguientes métodos de la clase TextBox pueden utilizarse para editar el texto en el TextBox:

void delete(int offset, int length)
void insert(char[] data, int offset, int length, int position)
void insert(String src, int position)
void setChars(char[] data, int offset, int length)
void setString(String text)

Las aplicaciones pueden obtener el contenido de un TextBox en un array de bytes mediante el método getChars(char[] data) o en un String mediante el método getString(). El número de caracteres en un TextBox se obtiene con una llamada al método size().

Cuando se visualiza un TextBox el usuario puede introducir, en cualquier momento, nuevos contenidos mediante el teclado del teléfono. El significado de cada tecla dependerá de la implementación, y en general, se mantiene la misma que se utiliza para editar SMS.

Ejercicio 1:El primer MIDlet que implementamos, el HelloWorld utilizaba un TextBox para visualizarnos su saludo. Modificad el código de este MIDlet, para que solicite previamente el nombre del usuario y lo incluya en el posterior saludo.

Alert

La clase Alert es una subclase de Screen, que permite visualizar datos (texto o imágenes) al usuario y espera un cierto periodo de tiempo (timeout) antes de visualizar otra pantalla. Tiene dos constructores: `Alert(String title)` `Alert(String title, String alertText, Image alertImage, AlertType alertType)` Timeout El timeout está medido en milisegundos, este tiempo se indica bien el constructor o mediante un llamada al método `setTimeout()`. Se puede indicar un valor de timeout infinito mediante la constante `Alert.FOREVER`. Si un objeto de la clase Alert tiene un timeout infinito, la aplicación debe permitir el cambio de pantalla a través de algún comando. Para indicar cuál es el siguiente objeto de la clase `Displayable` que se visualiza, cuando un objeto de la clase Alert finaliza su timeout, se realiza la llamada al método: `Display.setCurrent(Alert alert, Displayable nextDisplayable)`. AlertTypes Los objetos Alert, se utilizan para informar a los usuarios de errores o de otras condiciones excepcionales. Por ello, un objeto Alert puede tener un AlertType, que indica el tipo de problema ocurrido. Se predefinen cinco tipos de Alert: `ALARM`,`CONFIRMATION`,`ERROR`,`INFO`, y `WARNING`. Mediante una llamada al método `setType()` se puede establecer el tipo de un objeto Alert, y mediante una llamada al método `getType()` se puede obtener el tipo asociado a un objeto Alert. Ejercicio 1:Pensad qué posibles Alert debereis incluir en la práctica final, por ejemplo, cuando un jugador gane una partida, cuando un jugador consiga el mejor record, cuando el usuario introduce coordenadas erróneas, etc.

Form y Items

Form

La clase Form es una subclase de Screen, que contiene un número arbitrario de Items, como imágenes, texto y listas de selección. La clase Form tiene dos constructores:

Form(String title), que no contiene Items.
Form(String title, Items[] items), que contiene un conjunto de Items inciales.

El número de Items que puede contener un Form, se obtiene mediante la llamada al método size(). Los Items se indexan de forma consecutiva en el rango del 0 al size() - 1.

Las aplicaciones pueden utilizar los siguientes métodos para editar Items en un Form:

int append(Image img)
int append(Item item)
int append(String str)
void delete(int itemNum)
void insert(int itemNum, Item item)
void set(int itemNum, Item item)

Los Items en un Form puede recuperarse a través del método get(int itemNum). Un Item sólo puede colocarse en un Form, si un Item ya pertenece a un Form e intenta colocarse en uno nuevo, se produce una IllegalStateException.

Items

La clase Item es la superclase para un conjunto de elementos, que podremos añadir en un Form. Cada Item tiene asociada una etiqueta Label, que es un String que suele visualizarse al lado del Item en la pantalla.

Existen seis clases que heredan directamente de Item:

ChoiceGroup: Es un Item que implementa el interfaz Choice. Un objeto ChoiceGroup es similar a un objeto List, excepto que no permite Choice implícito.
StringItem: Es un Item que permite visualizar un texto, los usuarios no pueden interaccionar con un objeto StringItem y cambiar sus contenidos, esto sólo se puede hacer desde las aplicaciones.

ImageItem: Es un Item que contiene un objeto Image. Cada ImageItem tiene un parémetro de "layout" que especifica donde se situa la imagen respecto a la pantalla.

Layout Directive	Descripción
`LAYOUT_DEFAULT`	Usa el formato por defecto que posea el contenedor de la imagen.
`LAYOUT_LEFT`	La imagen se sitúa a la izquierda (punto de vista del usuario) del área dibujada.
LAYOUT_RIGHT	La imagen se sitúa a la derecha (punto de vista del usuario) del área dibujada.
LAYOUT_CENTER	La imagen debe centrarse horizontalmente.
LAYOUT_NEWLINE_BEFORE	Se inserta una línea antes de dibujar la imagen.
LAYOUT_NEWLINE_AFTER	Se inserta una línea después de dibujar la imagen.

Los diferentes LAYOUT pueden combinarse mediante la operación OR para obtener el efecto deseado.

TextField:Es un Item que contiene un texto que los usuarios pueden editar de forma interactiva. Un TextField y un TextBox son muy similares, y tienen algunos métodos en común. La diferencia existente es que para visualizar un TextField debe incluirse en un Form, un TextBox puede visualizarse directamente.
DataField:Es un Item editable que permite visualizar fechas y tiempos.
Gauge:Es un Item que visualiza un diagrama de barras de un valor entre un rango de cero a maxValue

Consultad el API para ver todas las posibilidades que proporcionan cada uno de los Items.

Ejercicio 1:Realizad un MIDlet que os permita visualizar la fecha y la hora, en todos los modos que permite la clase DataField.

ENLACES

API de MIDP/CLDC

inicio | tablón| contacta