01 Interfaz Grafica de Usuario
-
Upload
juanka-izve -
Category
Documents
-
view
177 -
download
0
Transcript of 01 Interfaz Grafica de Usuario
J2ME (JAVA)
MIDLETSy Es una aplicacin java que me permite desarrollar
aplicaciones para celulares
Estructura basica de un MIDLETimport javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class basico extends MIDlet { public void startApp() { } public void pauseApp() { } public void destroyApp(boolean unconditional) { }Este metodo es invocado por el sistema cuando el midlet tiene que ser destruido
Este metodo hace acopio de los recursos que va ha necesitarEste metodo es invocado cuando se necesita detener la ejecucion del midlet temporalmente
}
Herramienta de Programaciny sun_java_wireless_toolkit-2_5-windowshttp://java.sun.com/products/sjwtoolkit/download-2_5.html
y Netbeans 6.7http://www.netbeans.org/downloads/start.html?platform=windows&lang=en&option=java&version=6.7.1
Herramienta de Programaciny MOTODEX Studio (Motorola) y https://developer.motorola.com/platforms/java/
y DEL SDK DE SONYERICSSONhttp://developer.sonyericsson.com/site/global/docstools/java/p_java.jsp
y JDEVELOPER MEhttp://www.oracle.com/technology/tech/java/index.html
Estructura basica de un MIDLETimport javax.microedition.midlet.*; import javax.microedition.lcdui.*; public class basico extends MIDlet { public basico(){ } public void startApp() { } public void pauseApp() { } public void destroyApp(boolean unconditional) { }
Este metodo representa el constructor
}
Como crear un proyecto para dispositivos celularesy Paso # 3: se pone el nonbre el proyecto y de
deselecciona create hello MIDlet
Presionar botn Siguiente COLOCAR NOMBRE DEL PROYECTO
Como crear un proyecto para dispositivos celularesy Paso # 4: se presionar finalizar
Presionar finalizar
Como crear un proyecto para dispositivos celularesy Paso # 5 : proyecto creado satisfactoriamente
Como crear un proyecto para dispositivos celularesy Paso # 6 : crear un paquete
Como crear un proyecto para dispositivos celularesy Paso # 7: poner nombre del paquete
Como crear un proyecto para dispositivos celularesy Paso # 8: poner nombre del paquete
Como crear un proyecto para dispositivos celularesy Paso # 9: poner nombre del MIDlet
Como crear un proyecto para dispositivos celularesy Paso # 10: proyecto creado
Como crear un proyecto para dispositivos celularesy Paso # 9: poner nombre del MIDlet
COMPONENTES DE INTERFAZ DE USUARIOy Ahora que tenemos una idea bsica sobre el
funcionamiento de un MIDlet, pasaremos a describir los elementos grficos de los que disponemos para crear interfaces de usuario
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy La clase Screen hereda directamente de Displayable y
permite crear las interfaces grficas de alto nivel. y Un objeto que herede de la clase Screen ser capaz de ser mostrado en la pantalla.y Disponemos de cuatro clases que heredan de
Screen y que nos sirven de base para crear las interfaces de usuario. Son Alert , Form , List y TextBox.
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELForm Alert
display.setCurrent(objForm);
display.setCurrent(objAlert);
display
display.setCurrent(objTextBox);
display.setCurrent(objList);
TextBox
List
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy La clase Display y Maneja pantalla y dispositivos de entrada y Todo Midlet posee al menos un objeto Display
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Un MIDlet tpico estar compuesto de varios de estos
elementos. y Por desgracia, y debido al pequeo tamao de la pantalla, no pueden mostrarse ms de un elemento a la vez, por lo que tendremos que ir mostrando el elemento que necesitemos que ocupar toda la pantalla
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Estos componentes los podemos imaginar como una
serie de fichas de las cuales slo podemos mostrar una cada vez. y Para cambiar de una pantalla a otra usamos el mtodo setCurrent de la clase Display : y display.setCurrent(list1); Cada uno de las cuatro clases anteriores dispone de los mtodo siguientes :getTitle() Devuelve el ttulo de setTitle(String s) - Establece el ttulo de la pantalla la pantalla
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy El API de MIDP nos proporciona una serie de
componentes que nos permitirn construir las interfaces de usuario de forma sencilla. Por supuesto, aunque estos componentes son potentes para el entorno que nos ocupa, siempre hay que tener presenta las limitaciones de los dispositivos mviles en cuanto a pantalla y en cuanto a interaccin con el usuario.
display
y Como hemos visto en el cdigo presentado hasta el
momento, siempre debemos recoger el objeto de tipo Display que gestiona lo que muestra la pantalla del dispositivo
Display
display; display = Display.getDisplay(this);
display.setCurrent(null);
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL
display
Display
display; display = Display.getDisplay(this);
display.setCurrent(null);
EXPLICACION DETALLADAy Display display;CREAR UNA REFERENCIA
Crear el objeto Display que es el control a la pantalla del dispositivo
display = Display.getDisplay(this);Este mtodo a travs del objeto de la clase Display lo podemos utilizar para poder colocar o insertar los distintos objetos que van ha mostrar en la pantalla
display.setCurrent(null);
CODIGO FUENTEDisplay display;
display = Display.getDisplay(this);
display.setCurrent(null);
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Pantalla de aviso (Alert)y La clase Alert es una clase que muestra un mensaje determinado. y Adems que muestra el mensaje lo hace en un tiempo o hasta que se produzca un comando de tipo OK. Se utiliza para mostrar errores u otro tipo de mensajes al usuario
Sintaxis :Alert aviso ; aviso=new Alert( );
aviso.setTitle("titulo general"); aviso.setString( SOY EL PROFESOR ");
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Pantalla de aviso (Alert)
En este metodo estamos adicionando el aviso a la pantalla
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Tiempo de Visualizacion del Alert
alerta.setTimeout(int tiempo) Este metodo nos permite especificar el tiempo en milisegundos.y alerta.setTimeout(Alert.FOREVER);Este otro metodo nos permite hacer que el mensaje se mantenga hasta que se pulse un botn del dispositivo .
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL y Tipos de AlertaINFO : Este tipo de Alerta simplemente muestra un mensaje cualquiera.
yEste metodo seType se le envia un parametro AlertType.INFO
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL y Tipos de AlertaALARM : Este tipo de Alerta se caracteriza por que representa una alarma .
yEste metodo seType se le envia un parametro AlertType.ALARM
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL y Tipos de AlertaCONFIRMATION : Este tipo de Alerta se caracteriza por que representa un mensaje de confirmacion cuando una tarea ya se ha realizado
Este metodo seType se le envia un parametro AlertType.CONFIRMATION
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL y Tipos de AlertaERROR : Este tipo de Alerta se caracteriza por que representa un mensaje de Error ante una operacion mal realizada
Este metodo seType se le envia un parametro AlertType.ERROR
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL y Tipos de AlertaERROR : Este tipo de Alerta se caracteriza por que representa un mensaje de Peligro ante alguna tarea realizada.
Este metodo seType se le envia un parametro AlertType.WARNING
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Colocar imagen en el AlertCrear un objeto que contenga la imagen
Adicionar el objeto que contiene la imagen al Alert
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy TextBoxy La clase TextBox permite introducir y editar texto a pantalla completa. Es como un pequeo editor de textos. Sintaxis :Capacidad de caracteres del Textbox Tipo de Textbox
Titulo
contenido del TextBox
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy TextBoxy La clase TextBox permite introducir y editar texto a pantalla completa. Es como un pequeo editor de textos. Sintaxis :Capacidad de caracteres del Textbox Tipo de Textbox
Titulo
contenido del TextBox
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Pantalla de aviso (Alert)
En este metodo estamos adicionando el TextBox a la pantalla
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Tipos de TextBox
ANY - Sin limitacin EMAILADDR - Slo una direccin de email NUMERIC - Slo se permiten nmeros PASSWORD - Los caracteres no sern visibles PHONENUMBER - Slo nmeros de telfono URL - Slo direcciones URL
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Adicionar Texto a un TextoBox
y Capturar el valor de Texto del TextBox
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Captura la longitud del contenido del TextboxAdiciona texto
Calcula longitud
Adiciona nuevamente texto
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy int getChars (char[] texto)
En el caso de getChars(), el texto ser almacenado en la variable texto en forma de array de caracteres.
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Listy Es un objeto que incluye una lista de opciones .
Sintaxis :
Titulo
Tipo de lista exclusiva
Cargado de datos a traves de un arreglo
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Tipos de listas y Exclusiva
Implicita
Multiple
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Cargar imgenes al List
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELDisplay
y FORM Un Form es un elemento de tipo contenedor, es decir, es capaz de contener una serie de elementos visuales con los que podemos construir interfaces ms elaboradas. Los elementos que podemos aadir a un formulario son:y y y y y y
Form
StringItem ImageItem TextField DateField ChoiceGroup Gauge
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy FORMForm formulario ;
formulario=new Form("Formulario");
En este metodo estamos adicionando el formulario a la pantalla
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy FORM
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Insertar una Imagen en el form
Este metodo me permite insertar la imagen en el Form
COMPONENTES DE LA INTERFAZ DEDisplay USUARIO DE ALTO NIVELy Los principales componentes que se insertan en un
formulario son :y TextField y ChoiceGroup y DateField y Etc,etc
.Form
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy TextField : es un objeto que describe un campo de texto y se inserta sobre un objeto de la clase Form. Caracteres
Sintaxis:
numricos impresos dentro del campo de texto
Etiqueta que describe el componente
Numero de caracteres permitidos
Define la modalidad de entrada de datos
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL
10 caracteres
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL
Este metodo me permite insertar el campo de texto al formulario
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy TextField :
Sintaxis:TextField campoTexto;campoTexto=new TextField("Campo de Texto", 1234", 10, TextField.NUMERIC);
TextField.NUMERIC : entrada numrica TextField.URL : soporta la direccin URL TextField.EMAILDDR : soporta la direccin de un correo TextField.ANY : soporta un texto cualquiera
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy ChoiceGroup
Un objeto ChoiceGroup define un grupo de elementos seleccionados que pueden incluirse en un objeto ,solamente soporta los modos de seleccin exclusivo y multiple.
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy ChoiceGroup Sintaxis :String[] paises={ peru", chile", brasil"}; ChoiceGroup w ; w=new ChoiceGroup( Paises :",List.EXCLUSIVE,paises,null);Etiqueta que describe el componente
Modalidad de seleccion
Cargado del contenido del componente
Parametro nulo por defecto
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL
Este metodo me permite insertar el choiceGroup al formulario
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy Capturar los elementos de un ChoiceGroup
int q= g1.getSelectedIndex();
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL
yDateFieldy Un componente DateField es un objeto que puede presentar la fecha y la hora sobre un objeto Form. Si no se inicializa el metodo setDate() devolvera null de forma que la interfaz de usuario debe tener prevista la indicacion de una fecha desconocida. y Un objeto de tipo DateField puede configurarse para aceptar una fecha , una hora o ambas cosas a la vez. Si se indica el modo DATE, solamente admitira fechas , si el modo indicado es TIME solamente permitira la utilizacion de horas y minutos y si se indica el modo de funcionamiento como DATE_TIME , permitira el uso de fecha y hora.
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVELy DateField y Sintaxis :y DateField calendario ;
calendario=new DateField("",DateField.DATE_TIME); calendario.setDate(new Date());
Calendario inicializado
Tipo de calendario
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL
DateField
COMPONENTES DE LA INTERFAZ DE USUARIO DE ALTO NIVEL
DateField
COMANDOS DE PANTALLAy Me permite definir una serie
de mecanismos a los usuarios para que naveguen a travs de diferentes pantallas que constituirn la aplicacin que se ejecute en el dispositivo mvil. El paquete javax.microedition.lcdui proporciona la clase Command, que es la que va a implementar los comandos que se presentan en la pantalla del dispositivo mvil para permitir la navegacin
COMANDOS DE PANTALLAy Los comandos se presentan al usuario en base a la
sucesion de pantallas.El objeto Command encapsula el nombre y toda la informacion relacionada con la semantica de la accion correspondiente al comando. Su objetivo principal es presentar una lista de posibles acciones al usuario. El comando resultante de esa seleccin estara definido en un objeto de tipo CommandListener asociado a la pantalla.
COMANDOS DE PANTALLACommand ok ; ok = new Command("Aceptar", Command.OK, 1); Command salir ; salir= new Command("Salir", Command.EXIT, 1);
EVENTO DE LOS COMANDOS DE PANTALLAy Se implementa la interfaz CommandListener import javax.microedition.midlet.*; import javax.microedition.lcdui.*;
public class Negocio extends MIDlet implements CommandListener {Command Command ok ;
salir ;
public void commandAction(Command c, Displayable s){ if (c == salir){ destroyApp(true); notifyDestroyed(); }else if(c==ok){ }public Negocio( ) {ok = new Command("Aceptar", Command.OK, 1);
}
salir= new Command("Salir", Command.EXIT, 1); } }
EVENTO DE LOS COMANDOS DE PANTALLAy Se implementa la interfaz CommandListener import javax.microedition.midlet.*; import javax.microedition.lcdui.*;
public class Negocio extends MIDlet implements CommandListener {Command Command ok ;
salir ;
public void commandAction(Command c, Displayable s){ if (c == salir){ destroyApp(true); notifyDestroyed(); }else if(c==ok){ }public Negocio( ) {ok = new Command("Aceptar", Command.OK, 1 );
}
salir= new Command("Salir", Command.EXIT, 1); } }
EVENTO DE LOS COMANDOS DE PANTALLAy Se implementa la interfaz CommandListener import javax.microedition.midlet.*; import javax.microedition.lcdui.*;
public class Negocio extends MIDlet implements CommandListener {Command Command ok ;
salir ;
public void commandAction(Command c, Displayable s){ if (c == salir){ destroyApp(true); notifyDestroyed(); }else if(c==ok){ }public Negocio( ) { salir= new Command("Salir", Command.EXIT, 1); } }ok = new Command("Aceptar", Command.OK, 1);
}
EVENTO DE LOS COMANDOS DE PANTALLAy Se implementa la interfaz CommandListener import javax.microedition.midlet.*; import javax.microedition.lcdui.*;
public classCommand Command
Negociook ;
extends MIDlet implements CommandListener {
salir ;
public void commandAction(Command c, Displayable s){ if (c == salir){ destroyApp(true); notifyDestroyed(); }else if(c==ok){ }public Negocio( ) { salir= new Command("Salir", Command.EXIT, 1); } }ok = new Command("Aceptar", Command.OK, 1);
}
EVENTO DE LOS COMANDOS DE PANTALLAy Se implementa la interfaz CommandListener import javax.microedition.midlet.*; import javax.microedition.lcdui.*;
public class basico extends MIDlet implements CommandListener {Command Command ok ;
salir ;
public void commandAction(Command c, Displayable s){ if (c == salir){ destroyApp(true); notifyDestroyed(); }else if(c==ok){ }public basico( ) {ok = new Command("Aceptar", Command.OK, 1);
}
salir= new Command("Salir", Command.EXIT, 1); } }
Display
Form
Display
Form
Display
Form
Display
Form
EVENTO DE LOS COMANDOS DE PANTALLA