tel-352 seminario de telemática ii capítulo 5-3 j2me
TRANSCRIPT
CHM-2008 Seminario de Telemática II 1
Capítulo 5-3J2ME: Interfaz de Usuario
Customizada
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Telemática
TEL-352Seminario de Telemática II
CHM-2008 Seminario de Telemática II 2
• Abarcar los aspectos relacionados con la programación de una interfaz de usuario customizada en J2ME.
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Objetivos
CHM-2008 Seminario de Telemática II 3
• Si se desea desarrollar una aplicación con una interfaz de usuario específica, la API de interfaz de usuario J2ME es insuficiente.
• Para este tipo de aplicaciones se dispone de la clase Canvas, la que provee acceso a bajo nivel.
• También MIDP2.0 dispone del paquete javax.microedition.lcdui.game, que incluye:
– Soporte para gráficos basados en layers.– Animación de sprites.
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Introducción
CHM-2008 Seminario de Telemática II 4
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Despliegue
CHM-2008 Seminario de Telemática II 5
• El Canvas es la base de una interfaz de usuario customizada.
• No forma parte de Screen, sino que es una subclase de Displayable.
• En una aplicación se pueden mezclar pantallas de objetos Screen y Canvas.
• Canvas contiene los métodos de manejo de eventos:– paint()– keyPressed()
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
La Clase Canvas
CHM-2008 Seminario de Telemática II 6
• Se puede obtener información de las dimensiones del Canvas:
– Ancho: getWidth()– Alto: getHeight()
• MIDP 2.0 ofrece fullscreen:– setFullScrenMode(true)
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Información del Canvas
CHM-2008 Seminario de Telemática II 7
• Cada vez que se necesite dibujar, la implementación MIDP invoca al método paint().
• Ejemplo:import javax.microedition.lcdui.*;public class ejemploCanvas extends Canvas {
public void paint(Graphics g) { // Draw stuff using g.
} }
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Painting y Repainting
CHM-2008 Seminario de Telemática II 8
• En caso de redibujado manual no se puede llamar directamente a paint().
• Para esto se dispone del método repaint():– void repaint() – void repaint(int x, int y, int width, int height)
• El método repaint, no redibuja inmediatamente, sino que envía una solicitud que luego será atendida por el servicio repaint.
• Para forzar el servicio repaint a que procese la solicitudes, se puede llamar al método serviceRepaint().
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Painting y Repainting
CHM-2008 Seminario de Telemática II 9
Dibujado de Gráficos
• La clase Graphics contiene métodos para dibujar:– Formas– Texto– Imágenes
• Espacio de coordenadas:
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 10
Formas
• Graphics contiene uma colección de formas rellenas y de contorno:
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 11
public class PacerCanvas extends Canvas { public void paint(Graphics g) {
int w = getWidth(); int h = getHeight(); g.setColor(0xffffff); g.fillRect(0, 0, w, h); g.setColor(0x000000); for (int x = 0; x < w; x += 10) g.drawLine(0, w - x, x, 0); int z = 50; g.drawRect(z, z, 20, 20); z += 20; g.fillRoundRect(z, z, 20, 20, 5, 5);z += 20; g.drawArc(z, z, 20, 20, 0, 360); } }
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Formas
CHM-2008 Seminario de Telemática II 12
Formas
• Ejemplo:• ..\..\ejemplos\cap5-3\ejemplo5\src\PacerCanvas.java• ..\..\ejemplos\cap5-3\ejemplo5\src\Pacer.java
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 13
Color
• Graphics mantiene el estado del color actual para el dibujado de las formas.
• Cada color se representa por las componentes RGB, con 8 bits por componente.
• Método para asignar color:– void setColor(int RGB) – void setColor(int red, int green, int blue)
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 14
• Graphics mantiene también un estado para el estilo de línea.
• Existen dos estilos de líneas:– SOLID– DOTTED
• Ejemplo:public void paint(Graphics g) {
g.drawRect(20, 10, 35, 35); g.setStrokeStyle(Graphics.DOTTED); g.drawRect(20, 60, 35, 35);
}
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Líneas
CHM-2008 Seminario de Telemática II 15
Texto
• Graphics permite dibujar texto en cualquier parte de la pantalla de forma sencilla.
• La ubicación se base en un punto de anclaje (anchor).
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 16
• Para dibujar un texto se necesita:– String de texto.– Ubicación.– Tipo de punto de anclaje.
• Métodos para dibujar texto:– void drawChar(char character, int x, int y, int anchor) – void drawChars(char[] data, int offset, int length, int x, int y, int
anchor) – void drawString(String str, int x, int y, int anchor)– void drawSubstring(String str, int offset, int len, int x, int y, int
anchor)
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Texto
CHM-2008 Seminario de Telemática II 17
Texto
• Ejemplo:– ..\..\ejemplos\cap5-3\ejemplo6\src\TextCanvas.java– ..\..\ejemplos\cap5-3\ejemplo6\src\TextMIDlet.java
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 18
• Un font está definido por:– Tipo de fuente (face):
• FACE_SYSTEM• FACE_MONOSPACE• FACE_PROPORTIONAL
– Estilo:• STYLE_PLAIN• STYLE_BOLD• STYLE_ITALIC• STYLE_UNDERLINE
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Selección de Font
CHM-2008 Seminario de Telemática II 19
– Tamaño:• SIZE_SMALL• SIZE_MEDIUM• SIZE_LARGE
• Ejemplo:Font f = Font.getFont(
Font.FACE_PROPORTIONAL, Font.STYLE_ITALIC, Font.SIZE_SMALL);
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Selección de Font
CHM-2008 Seminario de Telemática II 20
Selección de Font
– Ejemplo:• ..\..\ejemplos\cap5-3\ejemplo7\src\FontCanvas.java• ..\..\ejemplos\cap5-3\ejemplo7\src\FontMIDlet.java
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 21
• Con la clase Font se puede conocer información del espacio que ocupa un texto.
• Esto permite adecuar texto, en función del tamaño de la pantalla.
• Métodos:– int charWidth(char ch) – int charsWidth(char ch, int offset, int length) – int stringWidth(String str) – int substringWidth(String str, int offset, int len)
• Ver ejemplo: BoxTextCanvas
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Medidas del Texto
CHM-2008 Seminario de Telemática II 22
Dibujado de Imágenes
• La clase Graphics dispone de un método para dibujado de imágenes:
– void drawImage(Image img, int x, int y, int anchor)
• La ubicación de la imagen también se base en un punto de anclaje:
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 23
Dibujado de Imágenes
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 24
Dibujado de Imágenes
• Graphics también posee de un método para dibujado de una región de la imagen:
– void drawRegion(Image src, int x_src, int y_src, int width, int height, int transform, int x_dest, int y_dest, int anchor)
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 25
Dibujado de Imágenes
• El parámetro transform, se utiliza para aplicar alguna transformación a la imagen:
– TRANS_NONE– TRANS_ROT90– TRANS_ROT180– TRANS_ROT270– TRANS_MIRROR– TRANS_MIRROR_ROT90– TRANS_MIRROR_ROT180– TRANS_MIRROR_ROT270
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 26
Clipping de Dibujado
• Graphics mantiene una forma rectangular de clipping.• El clipping limita el dibujado sólo al rectángulo definido.• Métodos para obtener información:
– getClipX(), getClipY(), – getClipWidth(), getClipHeight().
• Métodos para modificar el clipping:– void setClip(int x, int y, int width, int height);
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 27
• El Canvas maneja los eventos de teclado a más bajo nivel que el Displayable.
• El Canvas también incluye métodos para lectura de teclas individuales del terminal:
– protected void keyPressed(int keyCode) – protected void keyReleased(int keyCode)
• Constantes definidas:– KEY_NUM0,…,KEY_NUM9– KEY_STAR, KEY_POUND
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Eventos de Teclado
CHM-2008 Seminario de Telemática II 28
Eventos de Teclado
• Los dispositivos incluyen más teclas, pero los valores entregados dependen del fabricante.
• Códigos de softkeys:
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
-203-202-5-4-3-2-1LG
-4-1-2-62-61-60-59Siemens
-22-21-20-5-2-6-1Alcatel
-22-21-20-5-2-6-1Motorola
-7-6-5-4-3-2-1Samsung
-7-6-5-4-3-2-1Sony Ericsson
-7-6-5-4-3-2-1Nokia
Softkey DerSofkey IzqDisparoDerechaIzquierdaAbajoArriba
CHM-2008 Seminario de Telemática II 29
• MIDP ofrece una abstracción de mayor nivel para leer el teclado llamado game action.
• Se mapea el teclado en un conjunto de acciones.• Pasando como parámetro el keycode al método
getGameAction(), se obtiene una acción.• Valores posibles de acciones:
– UP, DOWN, LEFT, RIGTH, LEFT– FIRE, GAME_A, GAME_B, GAME_C, GAME_D
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Game Actions
CHM-2008 Seminario de Telemática II 30
• Ejemplo:– ..\..\ejemplos\cap5-3\ejemplo8\src\KeyCanvas.java– ..\..\ejemplos\cap5-3\ejemplo8\src\KeyMIDlet.java
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
Game Actions
CHM-2008 Seminario de Telemática II 31
Multithreading
• Todos los métodos que se invocan en la aplicación, que no son controlados por el programador, se llaman callbacks.
• Estos callbacks son producidos por threads del sistema.• En ocasiones es conveniente que el desarrollador
implementes sus propios threads.• Por ejemplo:
– Animaciones de carga– Accesos a la red
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 32
Multithreading
• Ejemplo:– ..\..\ejemplos\cap5-3\ejemplo9\src\SweepCanvas.java– ..\..\ejemplos\cap5-3\ejemplo9\src\Sweep.java
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 33
GameCanvas
• El GameCanvas está compuesto de 5 clases:– Una clase provee métodos para animación y key
polling.– Las otras 4 se usan para layers.
• GameCanvas tiene 2 ventajas sobre el Canvas:– La aplicación tiene el control exacto cuando se
actualiza el display.– Se puede controlar que región de la pantalla se
actualiza.
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 34
Animación
• GameCanvas extiende los métodos de Canvas para animación y key polling.
• Proceso de dibujado con Canvas:– Se redefine el método paint().– En paint() se dibuja la pantalla.– Para actualizar la pantalla se llama a repaint().
• Proceso de dibujado con GameCanvas:– Se dibuja en la pantalla.– Cuando se desea actualizar la pantalla, se llama a
flushGraphics() (método bloqueante).
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 35
Animación
• Modelo de “loop principal” de la aplicación usando GameCanvas:
Graphics g = getGraphics(); while(true) {
// Revisar entradas (input). // Actualizar estado del juego. // Dibujar escena usando g.flushGraphics();
}
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 36
Animación
• Ejemplo:– ..\..\ejemplos\cap5-3\ejemplo10\src\SweepGameCanvas.java– ..\..\ejemplos\cap5-3\ejemplo10\src\SweepGame.java
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 37
Polling usando Key States
• GameCanvas provee un método alternativo para lectura de teclas.
• En vez de usar callbacks (Canvas), permite leer el estado de las teclas inmediatamente:
– public int getKeyStates()• Esto permite mayor control en la aplicación.• El método getKeyStates() devuelve un entero en cada
bit representa el estado de una tecla.
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 38
Polling usando Key States
BIT GAMECANVAS GAME ACTIONUP_PRESSED UPDOWN_PRESSED DOWNLEF_PRESSED LEFTRIGHT_PRESSED RIGHTFIRE_PRESSED FIREGAME_A_PRESSED GAME_AGAME_B_PRESSED GAME_BGAME_C_PRESSED GAME_CGAME_D_PRESSED GAME_D
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 39
Polling usando Key States
• Ejemplo:Graphics g = getGraphics(); while(true) {
int ks = getKeyStates(); if ((ks & UP_PRESSED) != 0)
moveUp(); else if ((ks & DOWN_PRESSED) != 0)
moveDown(); // ... // Update game state. // Draw stuff using g. flushGraphics();
}
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 40
Layers
• Un Layer es un elemento gráfico que se puede usar para crear una escena:
– Fondo1 de un bosque.– Fondo2 una ciudad.– Fondo3 construcciones cercanas.– Etc.
• La clase Layer tiene un conjunto de métodos para localización:
– public final int getX() – public final int getY()
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 41
Layers
– public final int getWidth() – public final int getHeight()
– public void setPosition(int x, int y)
• También posee un método para movimiento:– public void move(int dx, int dy)
• Se puede manejar la visibilidad del layer:– getVisible()– setVisible()
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 42
Layers
• Para dibujar la escena se llama al método paint(Graphics g, int x, int y).
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 43
Manejo de Layers
• Para manejar varios layers se dispone de la clase LayerManager, la que contendrá la lista de layers.
• Cada layer tiene asociado un índice (0 más cercano).• Métodos:
– void append(Layer l) – void insert(Layer l, int index)
• LayerManager también incluye el concepto de viewWindow:
– void setViewWindow(int x, int y, int width, int height)
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 44
Tiled Layer
• TiledLayer es un tipo de Layer, que se puede construir en base a tiles, es decir, bloques de imágenes que se vinculan usando índices.
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 45
Tiled Layer
• TiledLayer es una grilla de celdas, en que cada celda tiene un índice de un tile.
• Se debe especificar el número de filas y columnas.
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 46
Tiled Layer
• Para crear un TiledLayer:– public TiledLayer(int columns, int rows, Image
image, int tileWidth, int tileHeight)
• Para asignar los índices de las celdas:– public void setCell(int col, int row, int tileIndex)
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 47
Tiled Layer
• También se pueden crear tiles animados.• Para crear un tile animado:
– int createAnimatedTile(int staticTileIndex)
• El valor retornado es el índice del tile animado.• Para cambiar el contenido del tile animado:
– void setAnimatedTile(int animatedTileIndex, intstaticTileIndex)
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 48
Sprites
• Un Sprite es una secuencia de imágenes que representan una animación.
• Para crear un sprite:– public Sprite(Image image, int frameWidth, int frameHeight)
• Los sprites se dibujan cuando se llama al método paint().
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 49
Animación de Sprites
• Para realizar la animación de un sprite se debe definir la secuencia de índices que la representan.
• Por ejemplo en este caso la secuencia es: {0,1,2,3}.• Para definir la secuencia:
– void setFrameSequence(int[] sequence)
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 50
Animación de Sprites
• Sprite dispone de métodos para cambiar de frame.– nextFrame()– prevFrame()– setFrame(int sequenceIndex)
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 51
Transformación de Sprites
• Es posible transformar la imagen de un sprite:– void setTransform(int transform)
• Tipos de transformaciones:– TRANS_NONE– TRANS_ROT90– TRANS_ROT180– TRANS_ROT270– TRANS_MIRROR– TRANS_MIRROR_ROT90 TRANS_MIRROR_ROT180
TRANS_MIRROR_ROT270
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 52
Manejo de Colisiones
• La API soporta detección de colisiones entre sprites, layers e imágenes basada en rectángulos:
– Detección sólo basada en la intersección del rectángulo.– Considerando intersección de píxeles opacos.
• Métodos:– boolean collidesWith(Sprite s, boolean pixelLevel)– boolean collidesWith(TiledLayer t, boolean pixelLevel) – boolean collidesWith(Image image, int x, int y, boolean
pixelLevel)
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 53
Manejo de Colisiones
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
CHM-2008 Seminario de Telemática II 54
Manejo de Colisiones
Universidad Técnica Federico Santa MaríaDepartamento de Electrónica
Capítulo 5
• Ejemplo:– ..\..\ejemplos\cap5-3\ejemplo11\src\QuatschCanvas.java– ..\..\ejemplos\cap5-3\ejemplo11\src\QuatschMIDlet.java