TEL-352 Seminario de Telemática II Capítulo 5-3 J2ME ...

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


• Abarcar los aspectos relacionados con la programación de una interfaz de usuario customizada en J2ME.


Capítulo 5

Objetivos


• 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.


Capítulo 5

Introducción



Capítulo 5

Despliegue


• 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()


Capítulo 5

La Clase Canvas


• Se puede obtener información de las dimensiones del Canvas:

– Ancho: getWidth()– Alto: getHeight()

• MIDP 2.0 ofrece fullscreen:– setFullScrenMode(true)


Capítulo 5

Información del Canvas


• 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.

} }


Capítulo 5

Painting y Repainting


• 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().


Capítulo 5

Painting y Repainting


Dibujado de Gráficos

• La clase Graphics contiene métodos para dibujar:– Formas– Texto– Imágenes

• Espacio de coordenadas:


Capítulo 5


Formas

• Graphics contiene uma colección de formas rellenas y de contorno:


Capítulo 5


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); } }


Capítulo 5

Formas


Formas

• Ejemplo:• ..\..\ejemplos\cap5-3\ejemplo5\src\PacerCanvas.java• ..\..\ejemplos\cap5-3\ejemplo5\src\Pacer.java


Capítulo 5


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)


Capítulo 5


• 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);

}


Capítulo 5

Líneas


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).


Capítulo 5


• 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)


Capítulo 5

Texto


Texto

• Ejemplo:– ..\..\ejemplos\cap5-3\ejemplo6\src\TextCanvas.java– ..\..\ejemplos\cap5-3\ejemplo6\src\TextMIDlet.java


Capítulo 5


• Un font está definido por:– Tipo de fuente (face):

• FACE_SYSTEM• FACE_MONOSPACE• FACE_PROPORTIONAL

– Estilo:• STYLE_PLAIN• STYLE_BOLD• STYLE_ITALIC• STYLE_UNDERLINE


Capítulo 5

Selección de Font


– Tamaño:• SIZE_SMALL• SIZE_MEDIUM• SIZE_LARGE

• Ejemplo:Font f = Font.getFont(

Font.FACE_PROPORTIONAL, Font.STYLE_ITALIC, Font.SIZE_SMALL);


Capítulo 5

Selección de Font


Selección de Font

– Ejemplo:• ..\..\ejemplos\cap5-3\ejemplo7\src\FontCanvas.java• ..\..\ejemplos\cap5-3\ejemplo7\src\FontMIDlet.java


Capítulo 5


• 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


Capítulo 5

Medidas del Texto


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:


Capítulo 5




Capítulo 5



• 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)


Capítulo 5



• 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


Capítulo 5


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);


Capítulo 5


• 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


Capítulo 5

Eventos de Teclado


Eventos de Teclado

• Los dispositivos incluyen más teclas, pero los valores entregados dependen del fabricante.

• Códigos de softkeys:


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


• 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


Capítulo 5

Game Actions


• Ejemplo:– ..\..\ejemplos\cap5-3\ejemplo8\src\KeyCanvas.java– ..\..\ejemplos\cap5-3\ejemplo8\src\KeyMIDlet.java


Capítulo 5

Game Actions


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


Capítulo 5


Multithreading

• Ejemplo:– ..\..\ejemplos\cap5-3\ejemplo9\src\SweepCanvas.java– ..\..\ejemplos\cap5-3\ejemplo9\src\Sweep.java


Capítulo 5


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.


Capítulo 5


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).


Capítulo 5


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();

}


Capítulo 5


Animación

• Ejemplo:– ..\..\ejemplos\cap5-3\ejemplo10\src\SweepGameCanvas.java– ..\..\ejemplos\cap5-3\ejemplo10\src\SweepGame.java


Capítulo 5


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.


Capítulo 5



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


Capítulo 5



• 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();

}


Capítulo 5


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()


Capítulo 5


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()


Capítulo 5


Layers

• Para dibujar la escena se llama al método paint(Graphics g, int x, int y).


Capítulo 5


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)


Capítulo 5


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.


Capítulo 5


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.


Capítulo 5


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)


Capítulo 5


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)


Capítulo 5


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().


Capítulo 5


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)


Capítulo 5


Animación de Sprites

• Sprite dispone de métodos para cambiar de frame.– nextFrame()– prevFrame()– setFrame(int sequenceIndex)


Capítulo 5


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


Capítulo 5


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)


Capítulo 5




Capítulo 5




Capítulo 5

• Ejemplo:– ..\..\ejemplos\cap5-3\ejemplo11\src\QuatschCanvas.java– ..\..\ejemplos\cap5-3\ejemplo11\src\QuatschMIDlet.java

TEL-352 Seminario de Telemática II Capítulo 5-3 J2ME ...

Documents

Transcript of TEL-352 Seminario de Telemática II Capítulo 5-3 J2ME ...