Inter Faz

APLICACIONES PARA TELEFONÍA MÓVIL DESARROLLO DE APLICACIONES
Universidad de Jaén
E.U.P. Linares
Dpto. Telecomunicaciones
Área de Ingeniería Telemática
Sebastián García Galán

sgalan@ujaen.es
INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

INTERFACES GRÁFICAS DE USUARIO
Ø Introducción
Clase Display y Displayable
Clase Command y CommandListener
Ø La interfaz de usuario de alto nivel

Clase Alert, List, TextBox, Form
Manejo de eventos
Item: StringItems, ImageItems, TextField,
DateField, ChoiceGroup, Gauge,
CustomItem, Spacer.
Ø La interfaz de usuario de bajo nivel

Eventos de bajo nivel
Pantalla Canvas, Clase Graphics

Interfaces gráficas de usuario

Introducción
Display
Command Displayable
Ticker Screen Canvas Graphics
TextBox List Alert Form
Item
CustomItem Spacer
ChoiceGroup DateField TextField Gauge ImageItem StringItem


Introducción Clase Display Manejador de pantalla
void callSerially(Runnable r) Retrasa la ejecución del método run()

del objeto r para no interferir con los
eventos del usuario.
boolean flashBacklight(int duración)

Provoca un efecto de flash en pantalla.
int getBestImageHeight(int imagen) Devuelve el mejor alto de

imagen para un tipo dado.
int getBestImageWidth(int imagen) Devuelve el mejor ancho de

imagen para un tipo dado.


int getBorderStyle(boolean luminosidad)

Devuelve el estilo del borde actual.
int getColor(int color) Devuelve un color basado en parámeto

pasado.
Displayable getCurrent() Devuelve la pantalla actual.
static Display getDisplay(MIDElet m) Devuelve una referencia a la

pantalla del MIDlet m.
boolean isColor() Devuelve true o false si la pantalla

es de color o b/n.


int numAlphaLevels() Devuelve el número de niveles alpha soportados.
int numColors() Devuelve el número de colores aceptados por el MID.
void setCurrent(Alert a, Displayable d)

Establece la pantalla d después de la alerta a.
void setCurrent(Displayable d) Establece la pantalla d.
void setCurrent(Item item) Establece la pantalla en la zona

donde se encuentre el item.
boolean vibrate(int duración) Realiza la operación de
vibración del dispositivo.


Introducción Clase Displayable
Representa a las pantallas de la aplicación
void addCommand (Command cmd) Añade el Comando cmd.
int getHeight() Devuelve el alto de la pantalla.
ticker getTicker() Devuelve el Ticker asignado a la pantalla.
string getTitle() Devuelve el título de la pantalla.
int getWidth() Devuelve el ancho de la pantalla.
boolean isShown() Devuelve true si la pantalla está activa.


Introducción Clase Displayable
Representa a las pantallas de la aplicación
Void removeCommand (Command cmd) Elimina el Comando cmd.
Void setCommandListener(CommandListener l)
Establece un listener parra la captura de eventos.
Void setTicker(Ticker ticker) Establece un Ticker a la pantalla.
Void setTitle(String s) Establece un título a la pantalla.
protected void sizeChanged(int w, int h)

El AMS llama a este método cuando el el área
disponible para el objeto Displayable es modificada.


Introducción Clase Command e interfaz CommandListener
Un objeto de la clase Command mantiene información sobre un evento.
Se implementan cuando se quiere detectar y ejecutar una acción simple.
Command cmd;
cmd =new Command(Etiqueta, Tipo, Prioridad)
Etiqueta: Cadena de texto que aparecerá en pantalla.

Tipo: Command.BACK Command.ITEM
Command.CANCEL Command.OK
Command.EXIT Command.SCREEN
Command.HELP Command.STOP
Prioridad: A mayor número, menor prioridad.


Introducción Clase Command e interfaz CommandListener
Métodos de la clase Command
public int getCommandType() Devuelve el tipo del comando.
public String getLabel() Devuelve la etiqueta del comando.
public String getLongLabel() Devuelve la etiqueta larga.
public int getPriority() Devuelve la prioridad del comando.
public class aplicación extends MIDlet implements CommandListener{


Introducción EJERCICIO
INICIO SEGUNDO
Salir Sigue Salir Atrás


Introducción EJERCICIO. Solución.
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
public class Tiza extends MIDlet implements CommandListener{
private Display pantalla;
private Form formulario1,formulario2;
private Command salir, sigue, atras;
public Tiza(){
... ...
}
public void commandAction(Command c, Displayable d){
... ...
}
public void startApp() {
pantalla.setCurrent(formulario1);
}
public void pauseApp() {
}
public void destroyApp(boolean unconditional) {
notifyDestroyed();
}
}

public Tiza(){
pantalla=Display.getDisplay(this);
salir=new Command("Salir",Command.EXIT,1);
// FORMULARIO 1
formulario1=new Form(“INICIO");
formulario1.setCommandListener(this);
sigue=new Command("Sigue",Command.SCREEN,1);
formulario1.addCommand(sigue);
formulario1.addCommand(salir);
// FORMULARIO 2
formulario2=new Form(“SEGUNDO");
atras=new Command("Atrás",Command.BACK,1);
formulario2.addCommand(atras);
formulario2.addCommand(salir);
}



if (c==sigue){
}
if (c==atras){
}
if (c==salir){
destroyApp(true);
}
}


Interfaz de usuario de alto nivel La clase Screen
La clase Screen (extensión de Displayable) y todas sus subclases

constituyen la interfaz de usuario de alto nivel.
public abstract class Screen extends Displayable
Subclases: Alert, List, TextBox y Form
public class Alert extends Screen

public class List extends Screen implements Choice
public class TextBox extends Screen
public class Form extends Screen


Interfaz de usuario de alto nivel La clase Alert
Representa una pantalla de aviso. Existen dos constructores para crear

una pantalla de alerta:
Alert(String titulo);
Alert(String titulo, String textoalerta, Image imagen, AlertType tipo);
En relación al tiempo que la alerta permanece en pantalla

existen dos tipos:
Modal: permanece un tiempo indeterminado hasta que
se cancela por el usuario.
Alert.setTimeOut(Alert.FOREVER);
No modal: permanece un tiempo definido. Una vez que
desaparezca se visualizará el Displayable definido.
Alert.setTimeout(tiempo);


Interfaz de usuario de alto nivel La clase Alert
Tipos de alertas:
ALARM Aviso de una petición previa.
CONFIRMATION Indica la aceptación de una acción.
ERROR Indica que ha ocurrido un error.
INFO Indica algún tipo de información.
WARNING Indica que puede ocurrir algún problema.
Cada tipo tiene asociado su propio sonido, aunque es

posible ejecutar el sonido sin necesidad de crear una
alerta. Para ello se invoca al método playSound(Display)
de la clase AlertType:
AlertType.CONFIRMATION.playSound(display)


Interfaz de usuario de alto nivel EJERCICIO


Interfaz de usuario de alto nivel EJERCICIO. Solución
private Form formulario;
private Alert alerta1, alerta2;
private Command salir, modal, nomodal;
public Tiza(){
... ...
}
... ...
}
pantalla.setCurrent(formulario);
}
}
notifyDestroyed();
}
}

public Tiza(){
formulario=new Form(“INICIO");
formulario.setCommandListener(this);
modal=new Command(“Modal",Command.SCREEN,1);
nomodal=new Command(“No Modal",Command.SCREEN,1);
formulario.addCommand(salir);
formulario.addCommand(modal);
formulario.addCommand(nomodal);
// ALERTA1
alerta1=new Alert("Modal", "Esta es una ALERTA MODAL", null, AlertType.INFO);
alerta1.setTimeout(Alert.FOREVER);
// ALERTA2
alerta2=new Alert("NO-Modal", "Esta es una ALERTA NO MODAL", null, AlertType.INFO);
alerta2.setTimeout(5000);
}



if (c==salir){
destroyApp(true);
}
if (c==modal){
pantalla.setCurrent(alerta1,formulario);
}
if (c==nomodal){
pantalla.setCurrent(alerta2,formulario);
}
}


Interfaz de usuario de alto nivel La clase List y la interfaz Choice
Permiten generar pantallas que contienen una lista de

opciones. Esta clase implementa la interfaz Choice, lo cual
posibilita crear 3 tipos distintos de listas
EXCLUSIVE Sólo un elemento puede ser seleccionado,

IMPLICIT La selección de un elemento provoca un evento.
MULTIPLE Se puede seleccionar cualquier número de elementos.
List(String titulo, int listType);

List(String titulo, int listType, String[] elementos, Image[] imágenes);


int append(String txt, Image im) Añade un elemento al final de la lista
void delete(int posicion) Elimina el elemento de la posición especificada.
void deleteAll() Elimina todos los elementos.
void insert(int pos, String txt, Image im)

Inserta un elemento en la posición especificada.
int getFitPolicy() Devuelve modo en el que se muestran las

entradas en la lista por pantalla.
Font getFont(int pos) Devuelve la fuente del elemento pos.
Image getImage(int pos) Devuelve la imagen de una posición.


int getSelectedFlags(boolean[] array) Almacena el estado de selección.
int getSelectedIndex() Obtiene el índice del elemento seleccionado.
String getString(int pos) Obtiene el texto del elemento indicado.
boolean isSelected(int pos) Determina si está seleccionado un elemento.
void removeCommand(Command c) Elimina el comando cmd.
void set(int pos, String txt, Image im) Reemplaza el elemento pos.
void setFitPolicy(int modo) Establece el modo de posicionar las

entradas de la lista por pantalla.


void setFont(int pos, Font fuente) Estable la fuente de la entrada

indicada por pos.
void setSelectCommand(Command c) Selecciona el comando a usar.
int setSelectedFlags(boolean[] array) Reemplaza el estado de la

selección por la del array.
int setSelectedIndex(int pos, boolean sel) Reemplaza el estado

de la selección.
int size() Obtiene el número de elementos.


private Form formulario1,formulario2,formulario3;
private List menu;
private Command salir,atras;
LISTA IMPLÍCITA public Tiza(){
... ...
}
... ...
}
pantalla.setCurrent(menu);
}
}
notifyDestroyed();
}
INGENIERÍA DE TELECOMUNICACIÓN } DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

public Tiza(){
atras=new Command(“Atrás",Command.BACK,1);
// LISTA
menu=new List("MENU",List.IMPLICIT);
menu.insert(0, "Opcion3",null);
menu.setCommandListener(this);
menu.addCommand(salir);
// FORMULARIO1
formulario1=new Form("FORMULARIO 1");
formulario1.addCommand(atras);
// FORMULARIO2 // FORMULARIO3
formulario2=new Form("FORMULARIO 2"); formulario3=new Form("FORMULARIO 3");
formulario2.addCommand(atras); formulario3.addCommand(atras);
formulario2.setCommandListener(this); formulario3.setCommandListener(this);
}


if (c==menu.SELECT_COMMAND){
switch(menu.getSelectedIndex()){
case 0:{pantalla.setCurrent(formulario1);break;}
case 1:{pantalla.setCurrent(formulario2);break;} LISTA IMPLÍCITA
case 2:{pantalla.setCurrent(formulario3);break;}
}
}
if (c==atras){
}
if (c==salir){
destroyApp(true);
}
}


private List menu;
private Command salir,salvar;
public Tiza(){
LISTA EXCLUSIVA ... ...
}
... ...
}
}
}
notifyDestroyed();
}
}

public Tiza(){
// LISTA
String opciones[]={“Opción1”,”Opción2”,”Opción3”};
menu=new List(“LISTA EXCLUSIVA",List.EXCLUSIVE,opciones,null);
salir=new Command(“Atrás",Command.EXIT,1); LISTA EXCLUSIVA
salvar=new Command(“Salvar",Command.ITEM,1);
menu.addCommand(salvar);
}
if (c==salvar){
int opcionelegida=menu.getSelectedIndex();
// Salvar opciones en memoria persistente
}
if (c==salir){
destroyApp(true);
}
}

private List menu;
public Tiza(){
LISTA MULTIPLE ... ...
}
... ...
}
}
}
notifyDestroyed();
}
}

public Tiza(){
// LISTA
salir=new Command(“Salir",Command.EXIT,1);
salvar=new Command(“Salvar",Command.ITEM,1);
menu=new List(“LISTA MULTIPLE",List.MULTIPLE);
menu.insert(menu.size(),”Opción1”,null);
menu.addCommand(salvar);
}



if (c==salvar){
boolean seleccionados[]=new boolean [menu.size()];
menu.getSelectedFlags(seleccionados); LISTA MULTIPLE
}
if (c==salir){
destroyApp(true);
}
}


Interfaz de usuario de alto nivel La clase TextBox
Una TextBox es una pantalla que permite editar texto. Hay que especificar su
capacidad, aunque sea mayor que la que el dispositivo puede mostrar de una vez.
En este caso, la implementación proporciona un mecanismo de scroll que permite
visualizar el texto.
Puede haber restricciones en el texto:
ANY Permite la inserción de cualquier carácter.

CONSTRAINT_MASK Se utiliza para determinar el valor actual
de las restricciones.
EMAILADDR Permite caracteres validos para
direcciones de correo electrónico.
NUMERIC Permite sólo números.
PASSWORD Oculta los caracteres introducidos.
PHONENUMBER Permite caracteres validos para números
de teléfono.
URL Permite caracteres válidos para direcciones URL

TextBox caja=new TextBox(String título,String texto,int Tamaño_max,int limitación)
EJEMPLO:
TextBox caja=new TextBox(“Contraseña”,””,30,TextField.NUMERIC|TextField.PASSWORD)


void delete(int desplazamiento, int longitud)

Borra caracteres del TextBox.
int getcaretPosition() Devuelve la posición del cursosr.
int getChars(char[] datos) Copia el contenido del TexBox en datos.
int getConstraints() Devuelve las restricciones.
int getMaxSize() Devuelve el tamaño máximo.

String getString() Devuelve el contenido del TextBox.
void insert(char[] datos, int des, int long, int pos)

Inserta un subrango de caracteres de datos.
void insert(char[] datos, int pos)
Inserta la cadena de datos en una posición
determinada.


void setChars(char[] datos, int des, int long)

Reemplaza el contenido del TextBox por un
subconjunto de caracteres de datos.
void setConstraints(int restricciones)
Establece las restricciones de entrada.
void setInitialInputMode(String caracteres)
Establece un tipo de entrada inicial.
int setMaxSize(int capacidad) Establece el tamaño máximo del TextBox.
void setString(String texto) Establece el contenido del TextBox.
int size() Devuelve el número de caracteres.


Interfaz de usuario de alto nivel La clase Form
Un formulario es un componente que actúa como contenedor de

un número indeterminado de objetos. Todos estos objetos derivan
de la clase Item.
Recomendable evitar scroll.
Para referirse a los Items de un formulario se utiliza un índice,

siendo 0 el índice del primer Item y Form.size() -1 el del último.
Un mismo Item no puede estar en más de un formulario a la vez.

Si, por ejemplo, se desea utilizar una imagen en más de un
formulario, se debe borrar esa imagen antes de insertarla en el
que se va a mostrar por pantalla. En caso contrario se lanzaría la
excepción IllegalStateException.


int append(Image imagen) Añade una imagen al formulario.
int append(Item item) Añade un Item al formulario.
int append(String texto) Añade un String al formulario.
void delete(int num) Elimina el Item que ocupa la posición num.
void deleteAll() Elimina todos los Items del formulario.
Item get(int num) Devuelve el Item de la posición num.
int getHeight() Devuelve la altura en pixels del área disponible

(sin realizar scroll) para los Items.
int getWidth() Devuelve el ancho en pixels del área disponible
(sin realizar scroll) para los Items.


void insert(int num, Item item) Inserta un Item justo antes del que
ocupa la posición num.
void set(int num, Item item) Reemplaza el Item de la posición num.
void setItemStateListener(ItemStateListener listener)

Establece un listener que captura los eventos que
produzcan cualquier Item del formulario.
int size() Devuelve el número de Items del formulario.


Interfaz de usuario de alto nivel Manejo de eventos
Es necesario implementar la interfaz ItemStateListener que

contiene un solo método abstracto itemStateChanged(Item item).
Cuando se realiza una acción en un Item, se ejecuta el código

asociado a ese Item definido en el método
itemStateChanged(Item item).
Item
CustomItem Spacer
ChoiceGroup DateField TextField Gauge ImageItem StringItem


Interfaz de usuario de alto nivel Item
Es una “superclase” para componentes que pueden ser

añadidos a un formulario. Todos los objetos Item tienen un
campo Label. La etiqueta debe posicionarse en pantalla en la
misma fila que el Item o encima de él.
void addCommand(Command cmd)

String getLabel()
int getLayout()
int getMinimumHeight()
int getMinimumWidth()
int getPreferredHeight()
int getPreferredWidth()


Interfaz de usuario de alto nivel Item
void notifyStateChanged()
void removeCommand(Command cmd)
void setDefaultCommand(Command cmd)
void setItemCommandListener(ItemCommandListener i)
void setLabel(String label)
void setLayout(int layout)
void PreferredSize(int width, int height)


Interfaz de usuario de alto nivel Item: StringItem
Es la clase más simple que deriva de Item. Es una cadena no

modificable de texto.
Hay dos constructores:
StringItem(String etiqueta, String texto);

StringItem(String etiqueta, String texto, int apariencia);
etiqueta: es la etiqueta del Item.

texto: es el texto que contiene el Item.
apariencia: es la apariencia del texto:
Item.PLAIN (opción por defecto)

Item.HYPERLINK
Item.BUTTON

Interfaz de usuario de alto nivel Item: StringItem
int getAppearanceMode() Devuelve la apariencia del texto.
Font getFont() Devuelve la fuente del texto.
String getText() Devuelve el texto del StringItem.
void setFont(Font fuente) Establece la fuente del texto.
void setText(String texto) Establece el texto del StringItem.


Interfaz de usuario de alto nivel Item: StringItem. Ejemplo

private Command salir, salvar;
private StringItem txt;
public Tiza(){
// STRINGITEM
formulario=new Form(“FORMULARIO”);
txt=new StringItem("StringItem: ", "texto", Item.HYPERLINK);
formulario.append(txt);
}


Interfaz de usuario de alto nivel Item: ImageItem
Nos da la posibilidad de incluir imágenes en un formulario. Al igual que
con la clase StringItem, el usuario no podrá interactuar.
Constructores:
ImageItem(String etiqueta, Image im, int layout, String textoalt)
ImageItem(String etiqueta, Image im, in layout, String textoalt, int apariencia)
etiqueta: etiqueta de la imagen.

im: imagen.
textoalt: texto alternativo.
layout:
LAYOUT_LEFT
LAYOUT_RIGHT
LAYOUT_CENTER
LAYOUT_DEFAULT
LAYOUT_NEWLINE_AFTER
LAYOUT_MEWLINE_BEFORE

Interfaz de usuario de alto nivel Item: ImageItem
String getAltText() Devuelve el texto alternativo.
int getAppeatanceMode() Devuelve la apariencia.
Image getImage() Devuelve la imagen.
int getLayout() Devuelve el posicionado de la imagen.
void setAltText(String textoalt) Establece el texto alternativo.
void setImage(Image imagen) Establece la imagen.
void setLayout(int layout) Establece el posicionado en pantalla.


Interfaz de usuario de alto nivel Item: ImageItem. Ejemplo
Display pantalla;
Form formulario;
Command salir;
Image imagen;
ImageItem im;
public Tiza() {
formulario=new Form ("Formulario Imagen");
formulario.setCommandListener this);
try {
imagen=Image.createImage("/dibujo.gif");
}
catch (Exception e)
{
imagen=null;
}
im=new ImageItem("",imagen,Item.LAYOUT_CENTER,“Dibujo");
formulario.append(im);
}

Interfaz de usuario de alto nivel Item: TextField
Permite editar texto en un formulario. Las diferencias con

TextBox son las siguientes:
TextField tiene que insertarse en un formulario, mientras

que TextBox puede implementarse por si mismo.
TextField deriva de la clase Item, mientras que TextBox

deriva de la clase Screen, y sus eventos se controlan a
través del método commandAction. Los eventos de
TextField se controlan a través del método
itemStateChanged.
TextField(String etiqueta, String texto, int capacidad, int restricciones)


void delete(int desplz, int longitud) Borra caracteres del TextField.
int getCaretPosition() Devuelve la posición del cursor en pantalla.
int getChars(char[] datos) Copia el contenido del TextField en datos.
int getConstraints() Devuelve las restricciones.
int getMaxSize() Devuelve el tamaño máximo del TextField.

String getString() Devuelve el contenido del TextField.
void insert(char[] datos, int des, int long, int pos)

Inserta un subrango de caracteres de datos.
void insert(char[] datos, int pos)
Inserta la cadena de datos en una posición
determinada.


void setChars(char[] datos, int des, int long)

Reemplaza el contenido del TextField por un
subconjunto de caracteres de datos.
void setConstraints(int restricciones)
Establece las restricciones de entrada.
void setInitialInputMode(String caracteres)
Establece un tipo de entrada inicial.
int setMaxSize(int capacidad) Establece el tamaño máximo del TextField.
void setString(String texto) Establece el contenido del TextField.
int size() Devuelve el número de caracteres.


Interfaz de usuario de alto nivel Item: TextField. Ejemplo
public class Tiza extends MIDlet implements CommandListener,ItemStateListener{
... ...
public Tiza(){
... ...
}
destroyApp(false);
}
public void itemStateChanged(Item i){
... ...
}
}
}
notifyDestroyed();
}
}


Interfaz de usuario de alto nivel Item: TextField. Ejemplo
private Display pantalla; public void itemStateChanged(Item i){
private Command salir; String atx=txt1.getString();
private Form formulario; String btx=txt2.getString();
Private TextField txt1,txt2; int a=Integer.parseInt(atx);
private StringItem resul; int b=Integer.parseInt(btx);
public Tiza(){ resul.setText(""+a*b);
pantalla=Display.getDisplay(this); }
formulario=new Form(“MULTIPLICADOR”);
formulario.setItemStateListener(this);
txt1=new TextField("OP-1", "1", 5, TextField.NUMERIC);
txt2=new TextField("OP-2", "1", 5, TextField.NUMERIC);
formulario.append(txt1);
formulario.append(txt2);
resul=new StringItem("RESULTADO:","1");
formulario.append(resul);}
}


Interfaz de usuario de alto nivel Item: DateField
Permite manejar fechas y horas en un formulario, para ello
hace uso de la clase java.util.Date. El aspecto en pantalla
depende del dispositivo MID.
DateField(String etiqueta, int modo)

DateField(String etiqueta, int modo, TimeZone zonahoraria)
Modo: DATE
TIME
DATE_TIME
Date getDate() Devuelve la fecha.

int getInputMode() Devuelve el modo.
void setDate(Date fecha) Establece la fecha.
void setInputMode() Establece el modo.


Interfaz de usuario de alto nivel Item: DateField. Ejemplo

private Command salir;
Date Hoy;
DateField fechaactual;
public Tiza(){
formulario=new Form(“CALENDARIO”);
hoy=new Date();
fecha=new DateField("Fecha-Hora",DateField.DATE_TIME);
fecha.setDate(hoy);
formulario.append(resul);}
}


Interfaz de usuario de alto nivel Item: ChoiceGroup
Un componente ChoiceGroup es un grupo de elementos que se

pueden seleccionar. Similar al componente List, pero dentro de
un formulario.
ChoiceGroup(String etiqueta, int tipo)

ChoiceGroup(String etiqueta, int tipo, String[] elementos, Image[] im)
Tipo: EXCLUSIVE
IMPLICIT
MULTIPLE
Los eventos pueden manejarse de dos formas distintas:

Ø a través del método itemStateChanged.
Ø a través del método CommandAction.


int append(String txt, Image im) Añade un elemento al final de la lista
void delete(int posicion) Elimina el elemento de la posición especificada.
void deleteAll() Elimina todos los elementos.
void insert(int pos, String txt, Image im)

Inserta un elemento en la posición especificada.
int getFitPolicy() Devuelve modo en el que se muestran las

entradas en la lista por pantalla.
Font getFont(int pos) Devuelve la fuente del elemento pos.
Image getImage(int pos) Devuelve la imagen de una posición.


int getSelectedFlags(boolean[] array) Almacena el estado de selección.
int getSelectedIndex() Obtiene el índice del elemento seleccionado.
String getString(int pos) Obtiene el texto del elemento indicado.
boolean isSelected(int pos) Determina si está seleccionado un elemento.
void set(int pos, String txt, Image im) Reemplaza el elemento pos.




void setFont(int pos, Font fuente) Estable la fuente de la entrada

indicada por pos.
int setSelectedFlags(boolean[] array) Reemplaza el estado de la

selección por la del array.
int setSelectedIndex(int pos, boolean sel) Reemplaza el estado

de la selección.
int size() Obtiene el número de elementos.


Interfaz de usuario de alto nivel Item: ChoiceGroup. Ejemplo
private ChoiceGroup sexo, aficiones;
private TextField nombre;
private Command salir, salvar;
public Tiza(){
... ...
}
... ...
}
}
}
notifyDestroyed();
}
}

public Tiza() {
formulario=new Form ("CHOICEGROUP");
salvar=new Command("Salvar",Command.OK,1);
formulario.addCommand(salvar);
nombre=new TextField("Nombre: ","", 10, TextField.ANY);
sexo=new ChoiceGroup("Sexo: ",ChoiceGroup.EXCLUSIVE);
sexo.append("Hombre",null);
sexo.append("Mujer",null);
aficiones=new ChoiceGroup("Aficiones: ",ChoiceGroup.MULTIPLE);
aficiones.append("Lectura",null);
aficiones.append("Cine",null);
aficiones.append("Deportes",null);
aficiones.append("Amigos",null);
aficiones.append("Televisión",null);
aficiones.append("Otras",null);
formulario.append(nombre);
formulario.append(sexo);
formulario.append(aficiones);
}


if (c==salvar){
boolean seleccionados[]=new boolean [aficiones.size()];
aficiones.getSelectedFlags(seleccionados);
int opcionelegida=sexo.getSelectedIndex();
}
if (c==salir){
destroyApp(true);
}
}


Interfaz de usuario de alto nivel Item: Gauge
Implementa un indicador de progreso a través de un gráfico de

barras. Dicho indicador representa un valor entero que va desde
cero hasta un valor máximo que se define en la creación.
Gauge(String etiqueta, boolean interactivo, int valormax, int valorinicial)
Interactivo: el usuario puede modificar el valor del Gauge, pero

siempre dentro del rango establecido.
No interactivo: El usuario no puede modificar el valor del Gauge.


Interfaz de usuario de alto nivel Item: Gauge
int getMaxValue() Devuelve el máximo valor que puede tomar.
int getValue() Devuelve el valor actual del Gauge.
boolean isInteractive() Indica si el Gauge es interactivo o no.
void setMaxValue(int maxValor) Establece el máximo del Gauge.
void setValue(int valor) Establece el valor del Gauge.


Interfaz de usuario de alto nivel Item: Gauge. Ejemplo
public class Tiza extends MIDlet implements CommandListener,ItemStateListener{
public Tiza(){
... ...
}
... ...
}
public void itemStateChanged(Item i){ public void startApp() {
... ... pantalla.setCurrent(formulario);
} }
}
notifyDestroyed();
}
}

Interfaz de usuario de alto nivel Item: Gauge. Ejemplo
public Tiza() {
formulario=new Form ("Formulario Gauge");
formulario.setItemStateListener(this);
volumen=new Gauge(Vol: 5º"",true,10,5);
formulario.append(volumen);
}
void commandAction(Command c, Displayable d){
destroyApp(true)
}
public void itemStateChanged(Item i){
if (i==volumen{
volumen.setLabel("Vol: "+ volumen.getValue() +"º");
}
}


Interfaz de usuario de alto nivel Item: Spacer
Se utiliza para insertar en un formulario zonas en blanco de un

determinado ancho y alto.
Spacer(int minWidth, int minHeight)
void addCommand(Command c) Lanza IllegalStateException
void setDefaultCommand(Command c) Lanza IllegalStateException
void setLabel(String etiqueta) Lanza IllegalStateException
int setMinimumSize(int minancho, int minalto)


Interfaz de usuario de alto nivel Item: CustomItem
Permite incluir en los formularios elementos visuales e interactivos.
Un CustomItem dispone de un área rectangular donde las
subclases dibujan y reciben eventos de entrada.
CustomItem(String etiqueta)
MÉTODOS
getGameAction paint
CustomItem
getInteractionModes pointerDragged (0,0)
getMinContentHeight pointerPressed
getMinContentWidth pointerReleased
getPrefContentHeight repaint
getPrefContentWidth showNotify
hideNotify sizeChanged
Invalidate traverse
keyPressed traverseOut
keyReleased
keyRepeated

Interfaz de usuario de alto nivel EJERCICIOS
Ø Presentar un objeto Ticker en pantalla.
Ø Implementar un MIDlet que permita verificar un nombre de

usuario y una contraseña antes de acceder a un determinado
formulario. El MIDlet deberá informar mediante alertas acerca de
la autenticación del usuario.
Ø Implementar una calculadora que incorpore las cuatro

operaciones básicas.


Interfaz de usuario de bajo nivel INTRODUCCIÓN
A diferencia de la API de alto nivel, aquí existen menos clases

con las que trabajar, pero es necesario cuidar los detalles
hasta el nivel de pixel.
Es posible que las aplicaciones puedan no ser portables en

función de los colores utilizados y de la resolución de la
pantalla.
No se puede mostrar dos pantallas a la vez, pero se puede

pasar del API de bajo nivel a alto nivel y viceversa. Ejemplo:
Juego cuyo menú inicial está realizado con un Form.


Todas las pantallas que utilizan la API de bajo nivel heredan de la

clase Canvas.
Display
Command Displayable
Screen Canvas Graphics


La clase Canvas permite manejar eventos de bajo nivel y dibujar

en pantalla, por esta razón se utiliza como base para la realización
de juegos.
La clase Canvas posee un método abstracto paint() que debe

implementarse obligatoriamente y es el encargado de dibujar en la
pantalla del dispositivo MID.


Interfaz de usuario de bajo nivel INTRODUCCIÓN. EJEMPLO
private MICANVAS micanvas;
private Command salir; HOLA MUNDO
public Tiza(){
... ...
}
destroyApp(false);
}
pantalla.setCurrent(micanvas);
}
}
notifyDestroyed();
}
}


Interfaz de usuario de bajo nivel INTRODUCCIÓN. EJEMPLO
public Tiza(){
micanvas=new MICANVAS();
micanvas.addCommand(salir);
micanvas.setCommandListener(this);
}
package tiza;
public class MICANVAS extends Canvas{
public MICANVAS() {
}
public void paint(Graphics g) {
g.setColor(255,255,255);
g.fillRect(0,0,getWidth(), getHeight());
g.setColor(0,0,255);
g.drawString("HOLA MUNDO",getWidth()/2, getHeight()/2,
Graphics.BASELINE|Graphics.HCENTER);
}
}

Interfaz de usuario de bajo nivel EVENTOS DE BAJO NIVEL
Dentro de la clase Canvas, los eventos pueden manejarse de dos

formas distintas:
Ø A través de Commands: Tal y como se han utilizado hasta el

momento.
Ø A través de códigos de teclas: Método proporcionado por Canvas

para detectar eventos de bajo nivel. Estos códigos son valores
numéricos asociados a diferentes teclas de un dispositivo MID.
NOMBRE VALOR NOMBRE VALOR NOMBRE VALOR NOMBRE VALOR

KEY_NUM0 48 KEY_NUM6 54 DOWN 6 GAME_A 9
KEY_NUM1 49 KEY_NUM7 55 UP 1 GAME_B 10
KEY_NUM2 50 KEY_NUM8 56 LEFT 2 GAME_C 11
KEY_NUM3 51 KEY_NUM9 57 RIGHT 5 GAME_D 12
KEY_NUM4 52 KEY_STAR 42 FIRE 8
KEY_NUM5 53 KEY_POUND 35


Canvas proporciona unos métodos que permiten manejar los

eventos con facilidad. Los métodos para manejar códigos de
teclas son los siguientes:
Métodos Descripción
boolean hasRepeatEvents() Indica si el MID es capaz de detectar la repetición de
teclas.
String getKeyName(int codigo) Devuelve una cadena de texto con el nombre del código
asociado.
void keyPressed(int codigo) Se invoca cuando se pulsa una tecla.
void keyReleased(int codigo) Se invoca cuando se suelta una tecla.
void keyRepeated(int codigo) Se invoca cuando se deja pulsada una tecla.


La clase Canvas permite detectar eventos producidos por algún
tipo de puntero como un ratón o una pantalla táctil. Para ello
proporciona los siguientes métodos:
boolean hasPointerEvents() Devuelve true si el dispositivo posee algún puntero.
boolean hasPointerMotionsEvents() Devuelve true si el dispositivo puede detectar acciones
como pulsar, arrastrar y soltar puntero.
void pointerDragged() Se invoca cuando se arrastra el puntero.
void pointerPressed() Se invoca cuando se haced click.
void pointerReleased() Se invoca cuando se deja pulsado el puntero.


Interfaz de usuario de bajo nivel PANTALLA CANVAS
Canvas proporciona métodos para manipular elementos en una
pantalla. El método paint(Graphics g) se encarga de dibujar el
contenido de la pantalla. Para ello se usa un objeto de la clase
Graphics que es el que contiene las herramientas necesarias y
que se pasa como parámetro al método paint.
Ø El método paint() nunca debe ser llamado desde el programa. El

gestor de aplicaciones es el encargado de hacerlo.
Ø Para redibujar la pantalla actual se utiliza el método repaint().
Ø La implementación del MID no se encara de limpiar la pantalla

antes de cada llamada al método paint().


Interfaz de usuario de bajo nivel PANTALLA CANVAS
int getGameAction(int keyCode) Devuelve la acción del juego asociada con el código de
la tecla.
int getHeight() Devuelve la altura en pixels de la pantalla.
int getKeyCode(int gameAction) Devuelve el código de la tecla correspondiente a una
acción del juego.
int getWidth() Devuelve el ancho en pixels de la pantalla.
protected void hideNotify() Se lanza cuando se va a ocultar la pantalla canvas
debido a la recepción de una llamada. La
implementación está vacia.
boolean is DoubleBuffered() Chequea si el dispositivo implementa la tecnica Double
Bouffering.
protected void paint(Graphics g) Dibuja el contenido de la pantalla
void repaint() Redibuja toda la pantalla
void repaint(int x, int y, int width, int height) Redibuja una parte de la pantalla.
void serviceRepaint() Fuerza la ejecución de repaints pendientes.
void setFullScreenMode(boolean mode) Establece el modo de la pantalla.
protected void showNotify() Se lanza cuando se va a mostrar la pantalla canvas.
protected void sizeChanged(int w, int h) Se lanza cuando se modifica el área dibujable, por
ejemplo cuando se cambia de modo.

Interfaz de usuario de bajo nivel CLASE GRAPHICS
La clase Graphics nos proporciona la posibilidad de dibujar en una
pantalla Canvas. Un objeto Graphics puede obtenerse de dos
formas:
Ø Dentro de un método paint() de la clase Canvas.
Ø A través de una imagen, con el siguiente código:
Image imgtemp=Image.createImage(ancho,alto);
Graphics g=imgtemp.getGraphics().


Interfaz de usuario de bajo nivel CLASE GRAPHICS. Métodos
MÉTODOS
clipRect fillArc getGreenComponent

copyArea fillRect getRedComponent
drawArc fillRoundRect getStrokeStyle
drawChar fillTriangle getTranslateX
drawChars getBlueComponent getTranslateY
drawImage getClipHeight setClip
drawLine getClipWidth setColor
drawRect getClipX setFont
drawRegion getClipY setGrayScale
drawRGB getColor setStrokeStyle
drawRoundRect getDisplayColor translate
drawString getFont
drawSubstring getGrayScale


SISTEMA DE COORDENADAS
CANVAS
(0, 0) getWidth()
(getWidth(), 0)
getHeight()
GRAPHICS
translate(int x, int y)
Cambia el origen de
coordenadas al punto
definido.
(0, getHeight()) (getWidth(), getHeight())


MANEJO DE COLORES
Ejemplo:
DISPLAY g.setColor(0,0,255);
isColor() g.fillRect(0,0,getWidth(), getHeight());
numColors()
GRAPHICS
setColor(int RGB)
setColor(int R, int G, int B)
Para seleccionar un color.
8 bits para cada
componente.


MANEJO DE TEXTO
La clase Font permite seleccionar el tipo de letra. Los

atributos posibles son los siguientes:
Aspecto Estilo Tamaño

FACE_MONOSPACE BOLD SIZE_LARGE
FACE_PROPORTIONAL ITALIC SIZE_MEDIUM
FACE_SYSTEM PLAIN SIZE_SMALL
UNDERLINED
Font fuente=Font.getFont
(FACE_SYSTEM,STYLE_PLAIN,SIZE_LARGE);
g.setFont(fuente);
g.drawString(


POSICIONAMIENTO DE TEXTO
TOP|LEFT TOP|CENTER TOP|RIGHT
BASELINE|LEFT CADENA de TEXTO BASELINE|RIGHT
BOTTOM|LEFT BOTTOM|CENTER BOTTOM|RIGHT
BASELINE|CENTER


FIGURAS GEOMÉTRICAS
Líneas Arcos
g.setColor(0,0,0); g.drawArc(x,y,ancho,alto,gr-inicio,gr-final);
g.drawline(x1,y1,x2,y2); g.fillArc(x,y,ancho,alto,gr-inicio,gr-final);
Rectángulos
g.setColor(0,0,0);
g.drawRect(x,y,ancho,alto);
g.fillRect(x,y,ancho,alto);
g.drawRoundRect(x,y,ancho,alto,arcancho,arcalto);
g.fillRoundRect(x,y,ancho,alto,arcancho,arcalto);


IMÁGENES
Ø Inmutables: no es posible variar su aspecto.

Imag im= Image.createImage(“\dibujo.png”);
Ø Mutables: se trabaja sobre una zona de memoria en la que

se puede crear la imagen, modificarla, etc.
Image im=Image.createImage(75,25);
g.drawImage(im,0,0,TOP|LEFT);
g.drawImage(im,x,y,anchorpoint);


IMÁGENES


Interfaz de usuario de bajo nivel EJERCICIO
Implementar un Midlet que permita mostrar una imagen en

pantalla y moverla con el teclado del dispositivo.


public class MICANVAS extends Canvas{
private Image im;
private int x,y;
public MICANVAS() {
try{
im=Image.createImage("/bola.gif");
}
catch(Exception e){ } protected void keyPressed(int code){
x=getWidth()/2; switch(getGameAction(code)){
y=getHeight()/2; case Canvas.DOWN:{
} if((y+10)<getHeight()) y++;break;}
public void paint(Graphics g) { case Canvas.UP:{
g.setColor(255,255,255); if(y>0) y--;break;}
g.fillRect(0,0,getWidth(), getHeight()); case Canvas.LEFT:{
g.drawImage(im,x,y,Graphics.TOP|Graphics.LEFT); if(x>0) x--;break;}
} case Canvas.RIGHT:{
protected void keyPressed(int code){ if((x+10)<getWidth()) x++;break;}
... ... }
} repaint();
} }

Interfaz de usuario de bajo nivel THREADS
public class MICANVAS extends Canvas implements Runnable{

... ...
public MICANVAS() {
... ...
Thread t=new Thread(this);
t.start();
}
public void run(){
... ...
}
public void paint(Graphics g) {
... ...
}
protected void keyPressed(int code){
... ...
}
}


Implementar un Midlet que permita manejar un rectángulo en
horizontal. Dicho rectángulo deberá recoger círculos que caen
desde la parte superior de la pantalla. El juego finalizará cuando
algún círculo no sea recogido. Cada círculo deberá caer por
distinto camino y estarán equi-espaciados en el tiempo.

Inter Faz

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Inter Faz

Caricato da

Copyright:

Formati disponibili

APLICACIONES PARA TELEFONÍA MÓVIL DESARROLLO DE APLICACIONES

Sebastián García Galán

INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

INTERFACES GRÁFICAS DE USUARIO

Ø La interfaz de usuario de alto nivel

Ø La interfaz de usuario de bajo nivel

INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

Interfaces gráficas de usuario

Ticker Screen Canvas Graphics

TextBox List Alert Form

ChoiceGroup DateField TextField Gauge ImageItem StringItem

INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

Interfaces gráficas de usuario

void callSerially(Runnable r) Retrasa la ejecución del método run()

boolean flashBacklight(int duración)

int getBestImageHeight(int imagen) Devuelve el mejor alto de

int getBestImageWidth(int imagen) Devuelve el mejor ancho de

INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

Interfaces gráficas de usuario

int getBorderStyle(boolean luminosidad)

int getColor(int color) Devuelve un color basado en parámeto

Displayable getCurrent() Devuelve la pantalla actual.

static Display getDisplay(MIDElet m) Devuelve una referencia a la

boolean isColor() Devuelve true o false si la pantalla

INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

Interfaces gráficas de usuario

int numAlphaLevels() Devuelve el número de niveles alpha soportados.

int numColors() Devuelve el número de colores aceptados por el MID.

void setCurrent(Alert a, Displayable d)

void setCurrent(Item item) Establece la pantalla en la zona

INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

Interfaces gráficas de usuario

void addCommand (Command cmd) Añade el Comando cmd.

int getHeight() Devuelve el alto de la pantalla.

ticker getTicker() Devuelve el Ticker asignado a la pantalla.

string getTitle() Devuelve el título de la pantalla.

int getWidth() Devuelve el ancho de la pantalla.

boolean isShown() Devuelve true si la pantalla está activa.

INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

Interfaces gráficas de usuario

Void removeCommand (Command cmd) Elimina el Comando cmd.

Void setTicker(Ticker ticker) Establece un Ticker a la pantalla.

Void setTitle(String s) Establece un título a la pantalla.

protected void sizeChanged(int w, int h)

INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

Interfaces gráficas de usuario

Etiqueta: Cadena de texto que aparecerá en pantalla.

Prioridad: A mayor número, menor prioridad.

Interfaces gráficas de usuario

public int getCommandType() Devuelve el tipo del comando.

public String getLabel() Devuelve la etiqueta del comando.

public String getLongLabel() Devuelve la etiqueta larga.

public int getPriority() Devuelve la prioridad del comando.

public class aplicación extends MIDlet implements CommandListener{

INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

Interfaces gráficas de usuario

Salir Sigue Salir Atrás

INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

Interfaces gráficas de usuario

Interfaces gráficas de usuario

INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA

Interfaces gráficas de usuario

public void commandAction(Command c, Displayable d){

INGENIERÍA DE TELECOMUNICACIÓN DPTO. TELECOMUNICACIONES -- ÁREA DE INGENIERÍA TELEMÁTICA