Aplicaciones Móviles

CAPÍTULO XI

LA INTERFAZ DE USUARIO DE BAJO NIVEL

La clase Canvas es la superclase de todas las pantallas que usan las APIs de bajo nivel, al igual que
Screen era para las pantallas que usa-
ban las APIs de alto nivel, como vere- Display
mos en el siguiente esquema:
Todas las pantallas que vayamos a
crear usando las APIs de bajo nivel he- Screen Canvas
redan de la clase Canvas. Por esta ra-
zón, lo primero de todo es conocer a
fondo esta clase y luego iremos profun-
dizando en cada uno de los elementos Alert TextBox List Form Graphics
que la componen.

11.1. Canvas.
La clase Canvas permite manejar eventos de bajo nivel y dibujar cualquier cosa por pantalla.
Por esta razón se usa como base para la realización de juegos. Esta clase posee un método abs-
tracto llamado paint() que debemos implementar obligatoriamente y es el que se encarga de
dibujar en la pantalla del dispositivo MID.
Nota. No existe ningún impedimento que nos permita usar en el mismo MIDlet pantallas tanto
derivadas de Canvas como de Screen.

11.1.1. Eventos de bajo nivel

Los eventos de la clase Canvas podemos manejarlos de dos formas distintas:
A través de Commands como hemos visto en las aplicaciones anterio-
res, por lo que su funcionamiento ya lo conocemos.
A través de códigos de teclas. Este método es el que Canvas propor-
ciona, para detectar eventos de bajo nivel. Estos códigos son valores nu-
méricos que están asociados a Nombre Valor
las diferentes teclas de un MID.
Estos códigos corresponden a KEY_NUM0 48
las teclas de un teclado conven- KEY_NUM1 49
cional de un teléfono móvil (0- KEY_NUM2 50
9,*, #). La clase Canvas propor- KEY_NUM3 51
ciona estos códigos a través de KEY_NUM4 52
constantes que tienen asociados KEY_NUM5 53
KEY_NUM6 54
valores enteros, que veremos en
KEY_NUM7 55
la siguiente tabla:
KEY_NUM8 56
Con estos códigos podemos co- KEY_NUM9 57
nocer cuál es la tecla que ha pul- KEY_STAR 42
sado el usuario. Canvas propor- KEY_POUND 35
ciona unos métodos que permiten manejar estos eventos con facilidad:

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
Aplicaciones Móviles

11.1.1.1. Métodos para manejar códigos de teclas

La implementación de estos métodos es vacía, por lo que es
nuestro trabajo implementar los que necesitemos en nuestra
aplicación de acuerdo al propósito de ésta. Los métodos para el
manejo de códigos de teclas aparecen en la siguiente tabla:

Métodos Descripción
Indica si el MID es capaz de detectar la re-
boolean hasRepeatEvents()
petición de teclas
String getKeyName(int co- Devuelve una cadena de texto con el nom-
digo) bre del código de tecla asociado
void keyPressed(int codigo) Se invoca cuando pulsamos una tecla
void keyReleased(int codigo) Se invoca cuando soltamos una tecla
void keyRepeated(int codigo) Se invoca cuando se deja pulsada una tecla

11.1.1.2. Métodos para detectar eventos de puntero

El perfil MIDP nos permite detectar eventos producidos por
dispositivos equipados con algún tipo de puntero, ya sea de un
ratón o una pantalla táctil. Para ello; nos proporciona un con-
junto de métodos, cuya implementación es vacía. Estos méto-
dos en particular, detectan las tres acciones básicas que apare-
cen en la siguiente tabla:

Métodos Descripción
void pointerDragged() Invocado cuando arrastramos el puntero
void pointerPressed() Invocado cuando hacemos un “clic”
void pointerReleased() Invocado cuando dejamos de pulsar el puntero

11.1.1.3. Métodos para ver si el MID permite eventos de pun-

tero
Al igual que hacíamos con los eventos de teclado, es nuestro
deber implementar estos métodos si queremos que nuestro
MIDlet detecte este tipo de eventos.
Para saber si el dispositivo MID está equipado con algún tipo
de puntero podemos hacer uso de los métodos de la siguiente
tabla:

Métodos Descripción
Devuelve true si el dispositivo posee al-
boolean hasPointerEvents()
gún puntero
Devuelve true si el dispositivo puede de-
boolean has PointerMotionE-
tectar acciones como pulsar, arrastrar y
vents()
soltar el puntero.

11.1.2. Manipulación de elementos en una pantalla Canvas

La API de bajo nivel tiene dos funciones principales: Controlar los eventos de bajo nivel
y Controlar qué aparece en la pantalla del dispositivo MID.

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
Aplicaciones Móviles

Ahora veremos los métodos que nos proporciona Canvas para manipular los elementos
en pantalla y especialmente con la clase Graphics.
Antes de empezar a ver éstos métodos vamos a ver cuál es el mecanismo que usa la
clase Canvas para dibujar por pantalla.

11.1.2.1. El método paint()

La clase Canvas posee un método abstracto llamado paint(Graphics g) que se

ocupa de dibujar el contenido de la pantalla. Para ello, se usa un objeto de la
clase Graphics que es el que contiene las herramientas gráficas necesarias y que
se pasa como parámetro al método paint().

Cuando implementemos este método, tendremos que tener en cuenta lo si-

guiente:

El método paint() nunca debe ser llamado desde el programa. El gestor de aplica-
ciones es el que se encarga de realizar la llamada a éste método cuando sea necesa-
rio.

Cuando deseemos que se redibuje la pantalla actual debido a alguna acción en con-
creto del usuario o como parte de alguna animación, debemos realizar una llamada
al método repaint(). Al igual que ocurre con los eventos de teclado, la petición se
encolará y será servida cuando retornen todas las peticiones anteriores a ella.

La implementación del MID no se encarga de limpiar la pantalla antes de cada lla-

mada al método paint(). Por esta razón, éste método debe pintar cada pixel de la
pantalla para, que de esta forma, se evite ver porciones de pantallas anteriores no
deseadas.

Hemos dicho que el gestor de aplicaciones se encarga de invocar al método

paint() cuando sea necesario. Esta llamada la realiza normalmente cuando se
pone la pantalla Canvas como pantalla activa a través del método de la clase
Display setCurrent(Canvas) o después de invocar al método showNotify().
Debemos tener en cuenta que una pantalla Canvas no posee la capacidad de
restaurar su estado por sí misma, en caso de que el AMS interrumpa la ejecución
normal de la aplicación, por ejemplo para avisar de una llamada entrante.

Para resolver este inconveniente, Canvas nos proporciona dos métodos cuya im-
plementación es vacía: hideNotify() y showNotify(). Veremos cada uno:

El método hideNotify()

Es llamado justo antes de interrumpir a la aplicación y borrar la pantalla actual.

En él podríamos incluir el código necesario para salvar el estado actual de la
pantalla, de las variables, etc; y así, posteriormente poder restaurar correcta-
mente la aplicación.

El método showNotify()

Es invocado por el gestor de aplicaciones justo antes de devolver éste el control

a la aplicación. En él podemos insertar el código necesario para restaurar correc-
tamente la pantalla de la aplicación.

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
 Aplicaciones Móviles

GUIA DE PRACTICA DE LABORATORIO N° 15

Utilizando Clase Graphics
Enunciado. Crear una aplicación, donde inserte un objeto Graphics sobre una pantalla Canvas, y muestre un
gráfico textual “Hola Canvas” de color celeste. Haciendo uso del método paint().

1. Crear un proyecto de nombre: ProyBajoNivel

2. Crear un paquete de nombre pqteCanvas1
3. Crear un Midlet de nombre: MidHolaGrafico, y escribir el siguiente código:

package pqteCanvas1;

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

public class MidHolaGrafico extends MIDlet {

private HolaCanvas panCanvas;
private Display pantalla;

public MidHolaGrafico() {
pantalla = Display.getDisplay(this);
panCanvas = new HolaCanvas(this);
}
protected void destroyApp(boolean arg0) { }
protected void pauseApp() { }
protected void startApp() {
pantalla.setCurrent(panCanvas);
}
public void salir(){
destroyApp(false);
notifyDestroyed();
}}

4. Ahora en el mismo paquete pqteCanvas1, crear otro Midlet con el nombre HolaCanvas, y escribir el siguiente
código:
package pqteCanvas1;
import javax.microedition.lcdui.*;
public class HolaCanvas extends Canvas implements CommandListener{
private MidHolaGrafico midlet;
private Command salir;
public HolaCanvas(MidHolaGrafico mid) {
salir = new Command("Salir", Command.EXIT,1);
this.midlet = mid;
this.addCommand(salir);
this.setCommandListener(this);
}
protected void paint(Graphics g) {
g.setColor(255,255,255);
g.fillRect(0,0,getWidth(),getHeight());
g.setColor(0,0,0);
g.drawString("Bienvenido, para dar colores a texto", (getWidth()/2), (getHeight()/2),
Graphics.BASELINE|Graphics.HCENTER);
}
public void commandAction(Command c, Displayable d){
if (c == salir){
midlet.salir();
} } }

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
Aplicaciones Móviles

5. Guarde la aplicación y ejecute el archivo HolaCanvas.

Que sucede:________________________________________________________

6. Ahora ejecute el archivo MidHolaGrafico

Que sucede:_________________________________________

7. Que color muestra el texto Bienvenido: __________________

8. Para cambiar el color de texo a celeste, en la tercera línea del

bloque reemplazar con los valores:
g.setColor(150,30,240)
9. Para cambiar el color del fondo, utilice los siguientes valores
en la primera línea del bloque:
g.setColor(150,180,210);

10. Guarde la aplicación y ejecute.

11. Ahora Ud. Cambie el texto a color rojo, con un fondo que contraste y escriba el código correspondiente:
Color de letra rojo:__________________________________
Color de fondo _________________________________

Color de letra morado: __________________________

Color de fondo __________________________

12. Para cambiar el color se usa. ___________________________

13. Que pasa si reemplazas: g.fillRect(0,0,getWidth(),getHeight()); por g.fill-
Rect(90,120,getWidth(),getHeight());
Registre lo observado_____________________________________________________________________

14. Que permite realizer el siguiente: (getWidth()/2), (Cambia el valor actual por otro)
________________________________________________________________________________________________

15. Que permite realizer el siguiente: (getHeight()/2), (Cambia el valor actual por otro)
________________________________________________________________________________________________

16. Graphics.BASELINE| (Cambia la opción actual por otro). Registre lo que paso:
________________________________________________________________________________________________

17. Graphics.HCENTER); (Cambia la opción actual por otro). Registre lo que paso:
________________________________________________________________________________________________

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
Aplicaciones Móviles

11.2. La clase Graphics

public class Graphics
Cuando invocamos al método paint(Graphics g) tenemos que pasarle como parámetro
un objeto Graphics. Este objeto nos facilita dibujar en una pantalla Canvas.

11.2.1. Constructores:
Un objeto Graphics podemos obtener de dos maneras:
Dentro del método paint() de la clase Canvas. Aquí podemos usar el objeto
Graphics para pintar en la pantalla del dispositivo.
A través de una imagen usando el siguiente código:
Image imgtemp = Image.createImage(ancho,alto);
Graphics g = imgtemp.getGraphics();
La clase Graphics posee multitud de métodos que nos permitirán seleccionar colores,
dibujar texto, figuras geométricas, etc.

11.2.2. Sistema de coordenadas

Teniendo en cuenta las nociones necesarias para poder dibujar en la pantalla de un MID. Dado
que la clase Graphics nos va a proporcionar bastantes recursos para dibujar en una pantalla
Canvas, hay que saber que la pantalla esta organizada en base a pixeles, ya que al programar en
bajo nivel se trabaja a nivel de pixel.
La clase Canvas nos proporciona los métodos necesarios para obtener el ancho y el alto de la
pantalla a través de getWidth() y getHeight() respectivamente. Una posición en la pantalla es-
tará definida por dos coordenadas x e y que definirán el desplazamiento lateral y vertical, siendo
la posición (0,0) el pixel situado en la esquina superior izquierda. Incrementando los valores de
x e y, nos moveremos hacia la derecha y hacia abajo respectivamente.
Podemos cambiar el origen de coordenadas de la pantalla mediante el método de la clase
Graphics translate(int x, int y). Éste método cambia el origen de coordenadas al punto definido
por los parámetros x e y provocando un desplazamiento de todos los objetos en pantalla. Piénsese
en lo útil que resulta este método para provocar scrolls.

11.2.3. Manejo de colores

La clase Graphics nos proporciona métodos con los que podremos seleccionar:
 Colores
 Pintar la pantalla de un color determinado o zonas de ellas
 Dibujar líneas
 Rectángulos, etc.
Veremos varios métodos que nos suministra la clase Display con los que podremos saber si el
dispositivo en cuestión cuenta con pantalla a color o escala de grises (Display.isColor()), y tam-
bién podremos conocer el número de colores soportados (Display.numColors()). Para crear
aplicaciones de calidad deberíamos usar constantemente estos métodos en ellas.
En particular, la clase Graphics nos proporciona un modelo de color de 24 bits, con 8 bits para
cada componente de color (rojo, verde y azul).
Podemos seleccionar un color invocando al método Graphics.setColor(int RGB) o
Graphics.setColor(int rojo, int verde, int azul) donde podemos indicar los niveles de los com-
ponentes que conforman el color que deseamos usar. Ejemplos de cómo realizar la selección de
algunos colores básicos:
Graphics g;

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
Aplicaciones Móviles

g.setColor(0,0,0) //Selecciono el color negro

g.setColor(255,255,255) //Selecciono el color blanco
g.setColor(0,0,255) //Selecciono el color azul
g.setColor(#00FF00) //Selecciono el color verde
g.setColor(255,0,0) //Selecciono el color rojo

Si después de seleccionar un color se escribe lo siguiente:

g.fillRect(0,0,getWidth(),getHeight())
Se pintaría toda la pantalla del color seleccionado con anterioridad.

11.2.4. Manejo de texto Atributos

As- FACE_SYSTEM
Es posible incluir texto en una pantalla Canvas. Al FACE_MONOSPACE
igual que hacíamos en el punto anterior con los colo- pecto FACE_PROPORTIONAL
res, es posible seleccionar un estilo de letra con el que STYLE_PLAIN
posteriormente podremos escribir texto por STYLE_BOLD
pantalla. Para ello nos ayudaremos de la clase Font Estilo
STYLE_ITALIC
que nos permitirá seleccionar el tipo de letra y alma-
STYLE_UNDERLINED
cenarlo en un objeto de este tipo para posteriormente
Ta- SIZE_SMALL
usarlo en nuestro Canvas.
SIZE_MEDIUM
Para seleccionar un tipo de letra tenemos que tener en maño
cuenta los tres atributos que definen nuestra fuente, SIZE_LARGE
en la siguiente tabla:
Tabla de Fuentes disponibles
Realizando combinaciones de atributos tendremos bastantes tipos de fuentes donde elegir. Para
crear una determinada fuente tendremos que invocar al método:
Font.getFont(int aspecto, int estilo, int tamaño) que nos devuelve el objeto Font deseado.
Por Ejemplo:
Font fuente = Font.getFont(FACE_SYSTEM, STYLE_PLAIN, SIZE_ MEDIUM);

Una vez obtenido el objeto Font, debemos asociarlo al objeto Graphics que es el que realmente
puede escribir texto en pantalla. Esto lo haremos de la siguiente manera:

g.setFont(fuente); //Seleccionamos la fuente activa.

g.drawString(“Cadena de texto”, getWidth()/2, getHeight()/2, BASE-
LINE|HCENTER);

Este código selecciona un tipo de fuente con la que posteriormente se escribe la cadena “Cadena
de texto” posicionado en la pantalla en el punto medio (getWidth()/2, getHeight()/2). El pará-
metro BASELINE|HCENTER indica el posicionamiento del texto con respecto al punto medio.

11.2.4.1. Posicionamiento del texto

Ya hemos visto que al mostrar una cadena de texto por pantalla hemos de indicar la
posición en la que
queremos si-
tuarla. Esta posi-
ción viene indi-
cada por el punto
de anclaje o an-
chorpoint (en in-
glés). En la Fi-
gura siguiente podemos ver el valor y situación dentro de la cadena de texto de los
distintos anchorpoints.
Opciones de anclaje disponibles para una cadena de texto

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
Aplicaciones Móviles

GUIA DE PRACTICA DE LABORATORIO N° 16

Utilizando Sistema de Coordenadas

Enunciado. Crear una aplicación, donde visualice una imagen en toda la pantalla del celular, teniendo en cuenta
las coordenadas, y muestre un gráfico textual “Hola Nohemy” de color blanco.

1. Abrir el proyecto de nombre: ProyBajoNivel.

2. Crear un paquete de nombre pqteCanvasVisor
3. Crear un Midlet de nombre: MidVisorImagen, y escribir el siguiente código:

package pqteCanvasVisor;

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
import java.io.*;

class CanvasCargar extends Canvas{

public void paint(Graphics g){
//cargamos la imagen
int ancho=0;
int alto=0;
try{
Image img=Image.createImage("/MaleFlores.png");
//limpiamos la pantalla
g.setColor(255,255,255);
g.fillRect(0, 0, getWidth(),getHeight());
//Ponemos la imagen al centro de la pantalla
ancho=getWidth();
alto=getHeight();
g.drawImage(img,ancho/2, 4,Graphics.HCENTER|Graphics.TOP);
}catch(IOException ex){
g.drawString("Error al cargar",0,0,0);
}
g.setColor(255,0,0);
//creamos un recuadro para la pantalla
g.drawRect(1,1,ancho-3,alto-3);
g.setColor(255,255,255);
//escribimos el texto
Font f=Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD, Font.SIZE_LARGE);
g.setFont(f);
g.drawString("Hola Nohemy",ancho/2,alto, Graphics.HCENTER|Graphics.BOTTOM);
} }

public class MidVisorImagen extends MIDlet implements CommandListener{

private Command salir;
private Display display;
private CanvasCargar pantalla;
public MidVisorImagen() {
//recuperamos el objeto Display
display=Display.getDisplay(this);
//creamos el comando de salida
salir=new Command("Salir",Command.EXIT,2);
//creamos la pantalla principal
pantalla=new CanvasCargar();
//establecemos el comando de salida
pantalla.addCommand(salir);
pantalla.setCommandListener(this);
}
protected void destroyApp(boolean arg0) { }
protected void pauseApp() { }

protected void startApp() throws MIDletStateChangeException {

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
 Aplicaciones Móviles

// establecemos el "display" actual a nuestra pantalla

display.setCurrent(pantalla);
}

public void commandAction(Command c, Displayable d) {

if(c==salir){
destroyApp(false);
notifyDestroyed();
}
}
}

4. Guardar y ejecutar la aplicación, visualizara este resultado:

5. Cambiar el texto.
_______________________________________________________________________________________

6. Cambiar el color del texto.

_______________________________________________________________________________________

7. Para que se utiliza BASELINE|HCENTER ___________________________________________________

_______________________________________________________________________________________

8. Colocar el texto en la parte superior. Que hago: ________________________________________________

_______________________________________________________________________________________

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
Aplicaciones Móviles

11.3. Figuras geométricas

La clase Graphics nos proporciona métodos, capaces de mostrar figuras geométricas por pantalla. Estas
figuras pueden ser: líneas, rectángulos y arcos.

11.3.1. Líneas. Esta es la figura más simple que podemos representar. Una línea es definida por un
punto inicial (x1, y1) y un punto final por (x2, y2). Pues solo con dos puntos podremos di-
bujar cualquier línea en una pantalla Canvas.

Constructor: Llamamos a su constructor de la siguiente forma:

g.setColor(0,0,0) //Selecciono el color negro
g.drawLine(x1,y1,x2,y2) //Dibujo una línea desde (x1,y1) a (x2,y2)
Ancho de Línea. El ancho de la línea, será de 1 pixel. Además, podremos definir si la traza
de la línea queremos que sea continua o discontinua. Esto lo realizaremos a través de los
métodos: getStrokeStyle() que devuelve el estilo de la línea y setStrokeStyle(int estilo) que
selecciona el estilo respectivamente.
Estilo de Línea. El estilo puede ser: SOLID (líneas continuas) o DOTTED (líneas discon-
tinuas). El estilo que utilicemos afecta también a cualquier figura geométrica que dibujemos.
Ejemplo:
Solid: __________________ Dotted -------------------------

11.3.2. Rectángulos. Esta figura, nos permite dibujar hasta 4 tipos diferentes de rectángulos:
1. Plano (sin relleno)
2. Plano con color de relleno
3. Redondeado (sin relleno)
4. Redondeado con color de relleno

Parámetros: Para crear cualquier tipo de rectángulo tenemos que definir cuatro parámetros:
 Los dos primeros corresponden al punto inicial (x,y) y
 Los dos últimos al ancho y alto del rectángulo:
Ejemplo: g.drawRect(x,y,ancho,alto);
Constructores. Para dibujar un rectángulo de cualquier tipo, primero seleccionamos un color, y
luego procedemos a dibujar de esta manera cada tipo:
Rectángulo sin relleno:
g.setColor(0,0,0); //Selecciono el color negro
g.drawRect(x,y,ancho,alto); //Dibujo un rectángulo
Rectángulo con relleno: Para dibujar un rectángulo con color de relleno escribimos lo siguiente:
g.fillRect(x,y,ancho,alto);
Rectángulo con esquinas redondeadas: Para construir rectángulos con las esquinas redondea-
das, es necesario definir dos parámetros más: arcWidth y arcHeight que especifican el grado
de redondez, tal y como aparece a continuación:

La creación de un rectángulo de este tipo escribimos, de una de las siguientes maneras:

g.drawRoundRect(x,y,ancho,alto,arcWidth,arcHeight)
g.fillRoundRect(x,y,ancho,alto,arcWidth,arcHeight)

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
 Aplicaciones Móviles

GUIA DE PRACTICA DE LABORATORIO N° 17

Dibujando Figuras Geométricas
Enunciado. Crear una aplicación, donde visualice varias figuras como triangulo, cuadrado y 1 línea y de fondo de
pantalla de color negro.
1. Abrir el proyecto de nombre: ProyBajoNivel.
2. Crear un paquete de nombre pqteDibujos
3. Crear un Midlet de nombre: Figuras, y escribir el siguiente código:

package pqteDibujo;
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

public class Midfiguras extends MIDlet implements CommandListener{

private Command exitCommand;
private Display display;
private SCanvas screen;
public Midfiguras() {
display=Display.getDisplay(this);
exitCommand = new Command("Salir",Command.SCREEN,2);
screen=new SCanvas();
screen.addCommand(exitCommand);
screen.setCommandListener(this);
}
protected void destroyApp(boolean arg0) {}
protected void pauseApp() {
// TODO Auto-generated method stub
}
protected void startApp()throws MIDletStateChangeException{
display.setCurrent(screen);
}
public void commandAction(Command c, Displayable d) {
if (c == exitCommand) {
destroyApp(false);
notifyDestroyed();
} } }

class SCanvas extends Canvas {

public void paint(Graphics g) {
g.setColor(0,0,0);
g.fillRect (0, 0, getWidth(), getHeight());
g.setColor(0,0,250);
g.drawLine (0, 0, 100, 100);
g.fillRect (50, 50, 30, 30);
g.setColor(0,250,0);
g.fillTriangle(0,60,60,0,60,60);
//los valores (x1,y1,x2,y2,x3,y3) del triangulo
g.setColor(255, 255, 255);
g.drawRect(60,60,60,60);//
} }
4. Guardar y ejecutar el Midlet. (dibuje el resultado).
5. Cambie el color del triángulo, que pasos siguió:
_______________________________________________________________________________________
6. Cambie la posición del triángulo, que pasos siguió:
_______________________________________________________________________________________
7. Cambie el tamaño del cuadrado en 15 pixeles más para ambos ejes, que pasos siguió:
8. Guardar y ejecutar el Midlet. (dibuje el nuevo resultado).

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
Aplicaciones Móviles

11.3.3. Arcos
En este caso podemos dibujar dos tipos de arcos: Arco simple o arco con color de
relleno. Para dibujar un arco tenemos que imaginarnos que ese arco va dentro de una
“caja”, por ejemplo, así:

Aquí podemos ver un círculo y también el cuadrado que delimita a ese círculo.
Para crear un arco tenemos que tener en mente la “caja” que lo delimitara, esto es así;
porque a la hora de crear un arco tenemos que crear primero esa caja, especificando los
parámetros como cuando creamos un rectángulo, además del ángulo inicial y ángulo
total.

El ángulo inicial es desde donde empezaremos a construir el arco, siendo 0 el punto

situado a las 3 en punto, 90 situado a las 12, 180 situado a las 9 y 270 situado a las 6.
(Como en un reloj).

El ángulo total especifica la amplitud que tendrá el arco.

Ejemplo:
Si construimos estos arcos de la siguiente manera:

g.drawArc(1,1,getWidth()-1,getHeight()-1,0,270); ó
g.fillArc(1,1,getWidth()-1,getHeight()-1,90,290);

Tendremos los siguientes resultados:

g.drawArc g.fillArc

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
Aplicaciones Móviles

GUIA DE PRACTICA DE LABORATORIO N° 18

Dibujando Arcos con y sin Relleno
Enunciado. Crear una aplicación, donde visualice dos arcos; una de ellas con relleno de color guindo y el otro
arco sin relleno, a su vez se debe visualizar el texto correspondiente a cada uno de ellos.

1 Crear el proyecto: ProyEvaluaciónGraf.

2 Crear un paquete de nombre pqteEvaluaciónGraf
3 Crear un Midlet de nombre: MidArcos
4 Registrar la codificación pertinente:
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
____________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________
_______________________________________________________________________________________

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
Aplicaciones Móviles

11.3.4. Imágenes
Ya veíamos cuando estudiábamos el interfaz de alto nivel que era posible insertar imágenes en
nuestros formularios. Estas imágenes que podíamos insertar provenían del archivo .jar ya que
estaban almacenadas en un archivo gráfico .png. Pues bien, en una pantalla Canvas también es
posible insertar imágenes. Además, aquí es posible usar dos tipos distintos de objetos Image: o
Inmutables: Son imágenes que, como las que usábamos en la API de alto nivel, provienen de un
archivo con formato gráfico. Se llaman inmutables ya que no es posible variar su aspecto.

Image im = Image.createImage(“\imagen.png”);
o Mutables: Cuando tratamos con imágenes mutables, realmente estamos trabajando sobre un
bloque de memoria en el que podemos crear la imagen que deseemos, modificarla, etc.

Image im = Image.createImage(75,25);
im = crearImagen();

Una vez creado el objeto Image, sea del tipo que sea, sólo nos queda mostrarlo por la pantalla
del dispositivo MID. La clase Graphics nos proporciona el método drawImage(imagen,x,y,an-
chorpoint) que nos permite mostrar la imagen especificada en el primer parámetro situando el
punto de anclaje anchorpoint que indiquemos en la posición (x,y).

public void paint(Graphics g){

g.drawImage(imagen,x,y,anchorpoint);
}
Al igual que ocurría con las cadenas de texto, las imágenes las posicionaremos en pantalla ayu-
dándonos de los puntos de anclaje. En este caso poseemos los puntos que ilustra la Figura si-
guiente

Figura Opciones de anclaje disponibles para una imagen

En el siguiente ejemplo vamos a mostrar una imagen por pantalla, la cual podremos mover a
nuestro gusto usando el teclado del dispositivo MID.

import javax.microedition.lcdui.*;
public class Imagen extends Canvas implements CommandListener {
private MoverImagen midlet;
private Image im;
private Command salir;
private int x, y;

public Imagen(MoverImagen mid){

salir = new Command("Salir",Command.EXIT,1);
this.midlet = mid;
this.addCommand(salir);
this.setCommandListener(this);
try{
im = Image.createImage("/dibujo.png");
}
catch (Exception e){
System.out.println("Error al cargar archivo de imagen");

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.
Aplicaciones Móviles

CARGAR DIBUJOS VECTORIALE

Este MIDlet llevara por nombre MIDCanvas por ser Canvas una clase con objetos que nos
permiten dibujar y pintar gráficos.
Nos ubicamos en el área de trabajo y allí digitamos el siguiente código:

package pqtMobiles;

import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;

public class MIDCanvas extends MIDlet implements CommandListener {

private Command exitCommand;
private Display display;
private SSCanvas screen;
public MIDCanvas() {
display=Display.getDisplay(this);
exitCommand = new Command("Salir",Command.SCREEN,2);
screen=new SSCanvas();
screen.addCommand(exitCommand);
screen.setCommandListener(this);
}
public void startApp() throws MIDletStateChangeException {
display.setCurrent(screen);
}
public void pauseApp() { }
public void destroyApp(boolean unconditional) { }
public void commandAction(Command c, Displayable s) {
if (c == exitCommand) {
destroyApp(false);
notifyDestroyed();
} } }
class SSCanvas extends Canvas {
public void paint(Graphics g) {
g.setColor(255,255,255);
g.fillRect (0, 0, getWidth(), getHeight());
g.setColor(0,0,250);
g.drawLine (0, 0, 100, 100);
g.fillRect (50, 50, 30, 30);
g.setColor(0,250,0);
g.fillTriangle(0,60,60, 0, 60, 60);
g.setColor(255,0,0);
g.drawRoundRect(60,60,60,60,60,60);
} }

Finalmente ejecutamos el MIDlet y se muestra así:

Recopilado por: Lic. Nohemy Esther Carhuancho Hidalgo Dra. María Magdalena Gómez Galindo.