lunes, 15 de diciembre de 2014

TEMA #7 INTERFAZ DE ALTO NIVEL I: Alert, TextBox, List, Form.


Como vimos en el tema anterior, importamos el paquete javax.microedition.lcdui.*;, el cual es el encargado de la parte visual de nuestra aplicación/juego. Hay una serie de elementos visuales que nos ofrece este paquete para la creación de nuestras aplicaciones/juegos, como son los mencionados en el título de este tema, además de los que veremos en el tema siguiente. Empecemos.

La interfaz de alto nivel comprende una serie de elementos que van a permitir la comunicación entre el usuario y la aplicación/juego, y van a ocupar toda la pantalla de nuestro celular, a diferencia de los que veremos en el tema siguiente (tema #8). Vamos a ver la forma de definir cada uno de estos elementos y algunos detalles particulares de cada uno, pero primero debemos resaltar algo importante.

IMPORTANTE
Una aplicación/juego puede estar constituida por varios de estos elementos visuales, y es necesario proveer al usuario de alguna forma para pasar de un elemento a otro, ya que estos elementos ocupan toda la pantalla, como lo mencionamos al principio de este tema.

La clase Display nos va a dar el control de la pantalla para poder reflejar los distintos elementos visuales, por eso es necesario siempre definir una variable de tipo Display y obtener el control de la pantalla a través del método .getDisplay( ); y le colocamos this para hacer referencia a la clase principal de nuestra aplicación/juego:

private Display display = Display.getDisplay(this);

Para cambiar de un elemento visual a otro se usa el método .setCurrent( ); que pertenece a Display, y lo hacemos de esta forma:

display.setCurrent(elemento visual al que se quiere cambiar);

Como vemos, utilizamos el nombre de la variable (display [empieza en minúscula]) y es en esta variable que utilizaremos el método .setCurrent();. En el código de la aplicación del tema anterior vemos un ejemplo del uso de este método:

public void startApp(){
          display.setCurrent(el primer elemento que se mostrará);
}

Y esto es necesario hacerlo para definir lo primero que se mostrará cuando ejecutemos nuestra aplicación/juego. En los ejemplos de este tema veremos cómo usar la pantalla.


ALERT
Nos permiten mostrar al usuario un texto durante un período de tiempo definido, o hasta que se presione “ok”. Se utiliza para mostrar ciertas informaciones al usuario. Lo definimos de la siguiente forma:

Alert alert = new Alert (String título, String texto, Image imagen, AlertType tipo);

Vemos que cuando la vamos a definir utilizamos la palabra “new”. El elemento visual Alert está compuesto de un título (tipo String), un texto (tipo String), una imagen (tipo Image), y tipo de alerta (tipo AlertType). Debemos recordar que cuando definimos una variable de tipo String lo debemos hacer dentro de comillas (“ ”). Veamos un ejemplo:

Alert aviso = new Alert (“Error”, “Ha ocurrido un error”, null, AlertType.ERROR);
display.setCurrent(aviso);

En el caso de que no queramos colocar una imagen para que se muestre, colocamos la palabra “null” (para saber cómo se coloca una imagen mira el código de la aplicación de ejemplo). Tenemos también el AlertType, que puede ser: ALARM, CONFIRMATION, ERROR, INFO, WARNING; cada uno emitirá un sonido diferente en tu celular cuando se muestre. Y la segunda línea de este ejemplo muestra la Alert en la pantalla.

Detalles Particulares
Métodos y ejemplos
Notas
.setTimeout(int tiempo_en_milisegundos);

aviso.setTimeout(3000);

aviso.setTimeout(Alert.FOREVER);
Este método permite fijar por cuánto tiempo se debe mostrar el elemento Alert en pantalla. En el primer ejemplo, se mostrará por 3 segundos; en el segundo ejemplo, se mostrará hasta que el usuario pulse un botón en el celular.

Descargar la aplicación de ejemplo. Descargar App
Descargar el código de la aplicación (Idioma Español) y los recursos utilizados. Descargar
Para ver los errores que pueden con el uso de este elemento visual haz clic aquí (Idioma Español).


TEXTBOX
Es un elemento que nos permite escribir texto en la pantalla, simulando algo así como un bloc de notas. Veamos cómo lo definimos y un ejemplo:

TextBox textbox = new TextBox (String título, String texto, int max, int limitación);

TextBox tb = new TextBox (“Historia”, “Había una vez...”, 200, TextField.ANY);
display.setCurrent(tb);

En este ejemplo vemos el título y el texto inicial que contendrá el TextBox, también está el número máximo de letras (o caracteres) que contendrá el TextBox, y por último la limitación que puede ser: ANY (sin limitación), NUMERIC (sólo se pueden escribir números), PASSWORD (el contenido no será visible), EMAILADDR (sólo dirección de email), PHONENUMBER (sólo números de teléfono), URL (sólo direcciones web). En el caso de que no queramos que el TextBox tenga texto al inicio le colocamos una String vacía (“”).

Detalles Particulares
Métodos y ejemplos
Notas
.getString();

tb.get String();
Este método obtiene el texto que contiene el Textbox, ya sea el que le colocamos por default o el que el usuario haya introducido.
.size();

tb.size();
Este método se utiliza para saber el número de caracteres que contiene el TextBox.

Descargar la aplicación de ejemplo. Descargar App
Descargar el código de la aplicación (Idioma Español) y los recursos utilizados. Descargar
Para ver los errores que pueden con el uso de este elemento visual haz clic aquí (Idioma Español).


LIST
Nos permite mostrar una serie de elementos en forma de una lista, que se muestra en toda la pantalla. Veamos cómo lo definimos y un ejemplo:

List list = new List (String título, int tipo, String[] elementos, Image[] imágenes);

String[] elem = {“Amarillo”, “Verde”, “Azul”, “Morado”, “Rojo”};
List lista = new List (“Colores”, List.EXCLUSIVE, elem, null);
display.setCurrent(lista);

El tipo de lista puede ser: EXCLUSIVE (sólo se puede seleccionar un elemento de la lista), MULTIPLE (permite seleccionar varios elementos de una lista), IMPLICIT (permite realizar una acción cuando se selecciona un elemento de la lista). Luego tenemos dos arrays, uno de tipo String (String[]) y otro de tipo Image (Image[]), y vemos una forma de definir los arrays diferente a la que ya habíamos visto en el tema correspondiente. Para saber detalles sobre el array de imágenes mira el código de la aplicación de ejemplo.

Detalles Particulares
Métodos y ejemplos
Notas
.getSelectedIndex();

lista.getSelectedIndex();
Se utiliza para saber que elemento de la lista fue seleccionado por el usuario. Lo veremos con mayor detalle en el tema #9 de este curso.
.getString(int element_number);

lista.getString(0);
Se utiliza para obtener el texto de un determinado elemento de la lista, en este caso del primer elemento (0).
.setFitPolicy(int fitPolicy);

lista.setFitPolicy(List.TEXT_WRAP_ON);
Se utiliza para determinar cómo se dispondrá el texto de cada elemento de la lista. Puede ser: TEXT_WRAP_DEFAULT (sin preferencia), TEXT_WRAP_ON (el texto de cada elemento se mostrará en múltiples líneas si es necesario) o TEXT_WRAP_OFF (el texto se mostrará en una sola línea siempre).

Descargar la aplicación de ejemplo. Descargar App
Descargar el código de la aplicación (Idioma Español) y los recursos utilizados. Descargar
Para ver los errores que pueden con el uso de este elemento visual haz clic aquí (Idioma Español).


FORM
Este es el elemento visual más usado, aunque su definición es simple, pero es uno de los más importantes; en el próximo tema veremos por qué. Veamos cómo lo definimos y un ejemplo:

Form forma = new Form (String título);

Form fm = new Form (“Datos”);
display.setCurrent(fm);

Es verdaderamente sencilla la definición de una Form. Hay una definición alterna: Form forma = new Form (String título, Item[] elementos); pero es menos útil a mi parecer.

Detalles Particulares
Métodos y ejemplos
Notas
.append(elemento);

fm.append(letras);
Se utiliza para agregar elementos dentro de la Form. Pueden ser de distintos tipos, como String, o como los otros tipos que veremos en el tema siguiente (tema #8).
.addCommand(Command cmd);

fm.addCommand(salir);
Se utiliza para agregar un comando a la Form. Un comando nos va a permitir realizar una acción que nosotros determinemos (lo veremos en el tema #9). Este método también es aplicable a los demás elementos de la interfaz de alto nivel (Alert, TextBox, List) y tiene la misma función.
.size();

fm.size();
Tiene el mismo uso que mencionamos para TextBox.

Como ejemplo de Form tenemos las pantallas principales de las aplicaciones de ejemplo aquí mostradas, sólo que dentro de esa Form hay varios elementos. Veremos esto en más detalle en el tema siguiente.


Estos son los 4 elementos visuales, que se muestran a pantalla completa, que podemos utilizar para lograr una interacción entre el usuario y la aplicación/juego.

No hay comentarios.:

Publicar un comentario