Professional Documents
Culture Documents
programacin
para Mviles
1. Introduccin
La realizacin de este manual ha surgido por la necesidad de motivar a los futuros
ingenieros de software a que se inicien en el mundo de la programacin para mviles.
Con estas breves indicaciones se pretende que el alumno pierda el miedo a programar
para estos dispositivos que hoy en da casi todo el mundo tiene. Podremos ver como
con muy poco esfuerzo podemos llegar a conseguir aplicaciones verdaderamente
vistosas y tiles.
JDK 6
NetBeans
Este ser nuestro taller a partir de ahora. Los pasos a seguir para crear un nuevo
proyecto son:
1 File -> New Project
2 Seleccionar el tipo Mobile y a la derecha Mobile Application.
3 Indicar el nombre del proyecto y la localizacin del mismo. Elegir si queremos que
por defecto en el proyecto nos aparezca el hola mundo.
4 Seleccionar el tipo de emulador que queremos que tenga nuestro proyecto, elegir
las versiones del CLDC y MIDP (Recomendable dejar las que vienen por defecto).
5 Indicar si queremos compatibilidad con alguno de los otros emuladores.
Ya tenemos nuestro proyecto creado.
Vamos a intentar hacer una calculadora para nuestro telfono mvil. Los pasos a
seguir son los siguientes:
1 Aadimos un Form a la aplicacin. Podemos hacerlo simplemente seleccionndolo
en la paleta de componentes de la derecha y pinchando despus en la zona de diseo
donde queramos colocarlo.
2 Si lo seleccionamos el nuevo Form que hemos aadido a la ventana de diseo,
veremos que a la derecha aparecen los distintos atributos de este componente.
Podemos cambiarlos a nuestro antojo. Por ejemplo, la propiedad Title vamos a
cambirsela por Calculadora.
3 Vamos a establecer un flujo de ventanas en nuestra aplicacin, para ello unimos el
Start Point del dispositivo mvil que aparece en la ventana de diseo con el nuevo
formulario aadido. Lo que hemos hecho es indicarle que cuando ejecutemos la
aplicacin aparezca el formulario.
4 Ahora, vamos a establecerle los botones de control a nuestra aplicacin, para ello,
seleccionamos en la paleta de componentes Exit Command y pinchamos sobre el
formulario, veremos que se aade un nuevo punto que pone: Exit. Bien, a
continuacin, vamos a arrastrar este nuevo punto hasta el punto del dispositivo mvil
etiquetado como Exit Point.
A estas alturas deberemos de tener algo parecido a esto:
5 Lo siguiente que tenemos que hacer es rellenar el formulario con los componentes
necesarios para la calculadora. Si lo seleccionamos y despus pinchamos sobre el
botn que arriba pone Screen Design entraremos en la ventana de diseo del
formulario.
6 En esta ventana, vamos a arrastrar de la lista de componentes el tipo TextField
hacia la pantalla de diseo del formulario. Este proceso lo haremos dos veces para
poder tener dos campos de texto. Debe de quedarnos una cosa tal que as:
a seleccionar cada uno de los Choice Element y cambiarles la propiedad String por cada
uno de los operandos.
9 A continuacin, aadimos un tercer TextField y cambiamos su propiedad Label y
le ponemos Resultado. Deberemos de tener una pantalla parecida a esta:
case 0:
textField4.setString(String.valueOf(operando1+operando2));
break;
case 1:
textField4.setString(String.valueOf(operando1-operando2));
break;
case 2:
textField4.setString(String.valueOf(operando1*operando2));
break;
case 3:
textField4.setString(String.valueOf(operando1/operando2));
break;
}
}
catch (Exception e)
{
textField4.setString("ERROR!");
}
Este cdigo solamente coge el contenido de los dos operandos, los convierte a entero
y segn se haya hecho la seleccin en el choiceGroup realiza una operacin u otra y el
resultado se mostrar en el tercer cuadro de texto.
El Resultado
12 Por ltimo, solamente nos queda ejecutar el proyecto, para ello seleccionamos en
el explorador de proyectos el proyecto de la calculadora con el botn derecho y
pulsamos sobre Run Project. Nos aparecer el emulador con la aplicacin disponible
para ejecutarse, pulsamos en el emulador en Launch y pasar a ejecutarse ya
nuestra aplicacin.
HttpConnection c = (HttpConnection)Connector.open(url);
c.setRequestMethod(HttpConnection.GET);
InputStream is = c.openDataInputStream();
int ch;
StringBuffer b = new StringBuffer();
while ((ch = is.read()) != -1)
{
b.append((char) ch);
System.out.print((char)ch);
}
textField4.setString(b.toString());
}
catch (Exception e)
{
e.printStackTrace();
}
}
int resultadoOperacion=0;
switch (operac)
{
case 1:
resultadoOperacion=operando1+operando2;
break;
case 2:
resultadoOperacion=operando1-operando2;
break;
case 3:
resultadoOperacion=operando1*operando2;
break;
case 4:
resultadoOperacion=operando1/operando2;
break;
}
out.write(String.valueOf(resultadoOperacion));
}
catch(Exception ee)
{
out.write(ee.toString());
}
}
public
void
doPost(HttpServletRequest
res)throws ServletException,IOException
{
doGet(req,res);
}
}
req,HttpServletResponse
NOTA: El servlet que se ha utilizado para la realizacin de este manual ha sido real y ha
estado colgado en un servidor, pero es muy posible que cuando se lea este manual, el
servlet ya est fuera de servicio.
Macromedia Flash
Antes de continuar, debemos explicar que en Flash todo son pelculas que estn
compuestas por un montn de fotogramas. En la parte superior de la imagen podemos
ver la lnea de tiempo, que contiene los fotogramas de los que hemos hablado. En la
parte central de la pantalla (el recuadro blanco) se encuentra el escenario, que es lo
que aparecer cuando pasemos nuestra aplicacin al dispositivo mvil.
En la parte inferior de la pantalla tenemos las propiedades de la aplicacin (tamao de
la pantalla, color de fondo, versin del ActionScript a utilizar, etc.), entre ellas una
opcin que nos pide la velocidad de fotogramas por segundo: lo normal es poner entre
15 y 24. En nuestro ejemplo hemos elegido 15.
A la izquierda de la lnea de tiempos tenemos dos capas por defecto: ActionScript y
Content. La primera vamos a utilizarla para introducir cdigo de funcionalidad en
nuestra aplicacin, mientras que la segunda la usaremos para hacer la parte grfica.
A continuacin, pulsamos sobre Archivo -> Importar -> Abrir biblioteca externa.
En nuestro disco duro tenemos que buscar un archivo que se llama Device Component
Set.fla, y una vez seleccionado, pulsamos sobre el botn Abrir. Se nos abrir una
paleta de herramientas como esta:
Si eres un poco impaciente y ests deseando ver cmo queda nuestra aplicacin,
podemos probarla pinchando sobre Control -> Probar Pelcula.
Continuemos, lo siguiente que vamos a hacer es insertar un botn. Vamos a pinchar en
Insertar -> Nuevo Smbolo, seleccionamos botn y le ponemos de nombre:
btnVerAnimal. Igual que ocurra en el escenario, disponemos de una lnea de tiempo,
y en ella nos aparecen cuatro fotogramas correspondientes a los tres estados de un
botn (Reposo, Sobre y Presionado) y la zona activa del mismo (Zona activa).
Pinchamos sobre el fotograma reposo, e introducimos en un texto en el escenario, que
ponga Ver Animal. El estado Sobre no lo vamos a tocar, porque esto es un ejemplo
para una PDA y por lo tanto, es innecesario definir nada. Sin embargo, vamos a pinchar
sobre el fotograma Presionado y vamos a insertar un fotograma clave.
Seleccionamos el texto y le cambiamos el color del que le hayamos puesto en el
fotograma Reposo. Por ltimo, pinchamos sobre el fotograma Zona activa en el
cual vamos a definir la zona activa del botn. Para ello, primeramente vamos a insertar
un fotograma clave y pintamos un rectngulo (Herramienta Rectngulo
) alrededor
del texto que tenemos. Ya tenemos nuestro botn. Para volver a la pantalla de nuestra
aplicacin podemos pinchar sobre Scene 1 en la mitad superior de la pantalla, justo
encima de la lnea de tiempo.
Vemos que desaparece de arriba el botn, pero si nos fijamos en el cuadro que se
encuentra a la derecha de la pantalla, llamado Biblioteca Ejemplo.fla vemos que
nos aparece ah el botn como un componente ms. Veamos esta pantalla:
Este cdigo es muy sencillito, el on(release) sirve para indicar que la accin se
efectuar
cuando
se
pulse
el
botn,
la
lnea:
animal
=
Lista1.data[Lista1.getSelectedIndex()]; se utiliza para asignar en la variable animal, el
nombre del animal que hemos seleccionado en la Lista1. Y por ltimo: gotoAndStop(2);
es para indicar que vamos a parar la reproduccin e irnos al segundo fotograma.
Vamos ahora a seleccionar el segundo fotograma de la capa Content y vamos a
insertar un texto que ponga Aqu est el animal. Insertamos un segundo texto y lo
colocamos en la parte inferior de la pantalla, que ocupe la mitad inferior de la pantalla,
ms o menos, y seleccionamos que sea Texto Dinmico, esto podemos hacerlo en la
parte inferior de la pantalla en el cuadro de propiedades. Adems donde pone Lnea
nica seleccionamos Multilnea. Tambin tenemos que introducir donde pone
<Nombre de instancia> le ponemos Texto y en la propiedad Var introducimos
descripcin.
Por ltimo, seleccionamos el fotograma 2 de la capa ActionScript y seleccionamos la
pestaa Acciones e introducimos el cdigo:
this.createEmptyMovieClip(contenedor,2);
contenedor._x=60;
contenedor._y=50;
contenedor.loadMovie(imgs/+animal+.jpg);
loadVariables(imgs/+animal+.txt,this);
El resultado final
Ya tenemos terminada nuestra aplicacin en Flash. Tan slo nos queda probarla. Para
ello nos vamos al men Control -> Probar pelcula. Si hemos ido siguiendo bien los
pasos, debera de salirnos la aplicacin ms o menos as:
Microsoft ActiveSync
distintas plantillas que podemos utilizar. Vamos a seleccionar Visual C# -> Smart
Device y luego la plantilla Aplicacin de dispositivo, podemos cambiarle el nombre
al proyecto y la ruta donde se guardar. De nombre vamos a ponerle: Calculadora.
Ya tenemos el proyecto creado. En pantalla nos aparecer ya creado un formulario
dentro de una PDA. Tenemos un amplio cuadro de herramientas en la parte izquierda
de la pantalla, justo donde pone Cuadro de Herramientas, escrito en vertical, si
movemos el cursor del ratn encima se nos desplegar el cuadro. Siempre que
retiremos el cursor, el cuadro se ocultar, podemos dejarlo fijo, pinchando sobre la
chincheta que hay justo en la parte superior del cuadro
. En la parte derecha
tenemos el explorador de soluciones, donde vemos el contenido de nuestro proyecto.
Y en la parte inferior, veremos un cuadro de propiedades donde nos aparecern las
propiedades de los distintos componentes que vayamos agregando a la aplicacin.
Vamos a comenzar, seleccionamos el formulario que nos apareca por defecto en la
PDA y vamos a sus propiedades, buscamos la propiedad Text y le introducimos
Calculadora. Despus, en la paleta de componentes, vemos que estos estn
categorizados, nosotros nos centraremos solamente en la seccin Controles de
dispositivo comunes. Seleccionamos un componente llamado Label y pinchamos
sobre el formulario de la PDA. Veremos que se ha insertado dentro de este y ya nos
aparecen las propiedades en la parte derecha. Buscamos la propiedad Name y le
introducimos: lbNum1, con esto estamos dando nombre a nuestro componente.
Ahora buscamos la propiedad Text y le ponemos: Operando 1. A continuacin,
vamos a insertar un segundo componente, tambin de tipo Label y lo introducimos
justo debajo del que ya tenamos. Le modificamos las propiedades Name y Text
con lbNum2 y Operando 2, respectivamente. Si hemos arrastrado los componentes
por el formulario, veremos que a veces nos aparecen unas lneas azules, eso se utiliza
para alinear los componentes de manera sencilla.
Ya sabemos cmo introducimos nuevos componentes a nuestra aplicacin, as que
vamos a introducir dos componentes de tipo TextBox justo al lado de los labels que
ya habamos introducido. Modificamos sus propiedades Text, esta borrando su
contenido (para que por defecto no aparezca texto) y Name con txtNum1.
Hacemos lo mismo para el segundo TextBox. A estas alturas, deberamos de tener
una pantalla como esta:
Introducimos un nuevo componente del tipo ComboBox, esto nos servir seleccionar
el operador de la calculadora. Buscamos su propiedad Items y le pinchamos sobre los
tres puntos que aparecen a la derecha
. Nos aparecer una
pantalla con un cuadro de texto en grande, aqu tenemos que introducirle los
operadores: +,-,* y /, hay que introducirlos uno por lnea.
Ahora, vamos a introducir otro Label que ponga Resultado y un TextBox vaco
como los anteriores. Adems, aadimos un Button cuya propiedad Text sea
Calcular. Debemos de tener en pantalla estos componentes:
Lo siguiente que tenemos que hacer es seleccionar el botn que hemos insertado y
pinchar en el rayo que aparece en la parte superior del cuadro de propiedades.
Hemos declarado tres variables de tipo double y una de tipo string. Fijaos, que cuando
introducs algo de cdigo, aveces aparecen en pantalla cuadros pequeos con una lista
de nombres, esto sirve para que podamos seleccionar en esa lista un determinado tipo
de dato, mtodo, clase, etc. y simplemente con darle al TAB ya se nos inserte ese
cdigo sin necesidad de escribirlo entero. Recordar que el Visual Studio 2005, es
sensible a las maysculas y minsculas. Ahora vamos a introducir el siguiente
fragmento de cdigo dentro del mtodo button1_Click():
num1 = Convert.ToDouble(txtNum1.Text);
num2 = Convert.ToDouble(txtNum2.Text);
operacion = comboBox1.SelectedItem.ToString();
switch (operacion)
{
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
result = num1 / num2;
break;
}
txtResult.Text = result.ToString();
El Resultado
Vamos a probar lo que hemos hecho hasta ahora. Para ello, vamos a pinchar sobre el
botn
que est en la parte superior de la pantalla. Nos aparecer una ventana
pequea donde podremos seleccionar el emulador que queramos que ejecute nuestra
aplicacin. Seleccionamos uno y le damos a aceptar. En pantalla, aparecer una
ventana donde podemos ver el emulador. Tras un tiempo se ejecutar la aplicacin
que hemos creado (puede tardar bastante en ejecutarse, dependiendo de si es la
primera vez que ejecutamos un proyecto de PocketPC en Visual Studio 2005). Si
cerramos el emulador, nos aparecer una ventana que nos preguntar si guardamos el
estado, es recomendable decirle que si, ya que as la prxima vez que iniciemos el
emulador no tardar tanto.
Los WebMethod son los mtodos que luego podremos invocar como servicios web.
Vamos a aadir justo debajo de este:
double result;
[WebMethod]
public double Calcular(double num1, double num2, string operacion)
{
switch (operacion)
{
case "+":
result = num1 + num2;
break;
case "-":
result = num1 - num2;
break;
case "*":
result = num1 * num2;
break;
case "/":
result = num1 / num2;
break;
}
return result;
}
Vemos que recibe 2 parmetros de tipo double que sern los nmeros y un string que
ser la operacin y el funcionamiento es el mismo que en el caso del ejemplo anterior:
un switch que indica que operacin es la seleccionada y se realiza la misma.
Si pulsamos con el botn derecho sobre el proyecto web que hemos creado, vemos
que nos aparece una opcin llamada Ver en el explorador, le pinchamos y se nos
abre una pantalla con los servicios web. Vamos a copiar la url que aparece en el cuadro
superior, en mi caso es: http://localhost:49170/WSCalculadora, esto puede variar,
pero siempre que la copiemos de ah no pasar nada.
Ahora tenemos que agregar en el proyecto de la calculadora, una referencia al servicio
web. Para ello, con el botn derecho, en el Explorador de Soluciones, vemos la
opcin Agregar referencia Web, le pinchamos y nos aparece una ventana como esta:
Esto es para utilizar la referencia web que hemos introducido. Ahora borramos el
cdigo que antes habamos escrito e insertamos este:
//Variables
double num1, num2, result;
string operacion;
private void button1_Click(object sender, EventArgs e)
{
num1 = Convert.ToDouble(txtNum1.Text);
num2 = Convert.ToDouble(txtNum2.Text);
operacion = comboBox1.SelectedItem.ToString();
Calculadora.localhost.Service calcular = new Service();
result = calcular.Calcular(num1, num2, operacion);
txtResult.Text = result.ToString();
}
Vemos que solo hemos quitado el switch y hemos insertado la llamada al servicio web.
Este nos devuelve el resultado en la variable result y lo mostramos en el cuadro de
texto.
Podemos probar este nuevo ejemplo, vamos a Herramientas -> Administrador de
emuladores de dispositivos. Seleccionamos el emulador que queramos con el botn
derecho y pinchamos en Conectar. Despus de unos instantes nos aparecer en
pantalla el emulador, volveremos a esa pantalla y con el botn derecho, seleccionamos
Colocar en la base. Debemos de tener instalado el ActiveSync y el parche de la red
virtual si queremos que esto funcione. Ahora no tenemos ms que ejecutar nuestra
aplicacin como en el ejemplo anterior, con
RESUMEN
Este documento ensea los pasos bsicos para desarrollar una aplicacin mvil,
presentando con un ejemplo la realizacin de una historia clnica, adicionalmente
se realiza una introduccin de las aplicaciones necesarias para la creacin de un
proyecto de este tipo, para ejecutarlo y visualizarlo en un simulador.
1. INTRODUCCIN
Cada da son ms los usuarios de dispositivos mviles, lo
que ha convertido estos dispositivos en una parte esencial
de la vida cotidiana de las personas, debido a las mejoras
tanto en la posibilidad de acceso como en el desarrollo de
software. Los sistemas operativos y las aplicaciones de
los dispositivos mviles han estado en constante
desarrollo como se menciona en [1], pero Sun
Mycrosystems da un paso adelante dentro de su
tecnologa Java y presenta J2ME (Java 2 Micro Edition)
que es una coleccin de funciones y procedimientos que
ofrece una biblioteca para ser utilizada en los desarrollos
de software. Esta librera est desarrollada en java y est
orientada a productos de consumo como PDAs,
telfonos mviles o electrodomsticos como se menciona
en [2].
2. PRIMEROS PASOS EN J2ME
3. COMPLEMENTOS
A J2ME se pueden agregar otros complementos que
trabajan en conjunto con el API de Java. Estos dos
complementos que se explican a continuacin o tcnicas
aplicadas a la programacin de dispositivos mviles son
package historial_clinico;
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
2.
this.menuScreen.append("Borrar", null);
//#style mainCommand
this.menuScreen.append( "Cerrar Sesion", null);
MIDlet
public HistorialClinico () { }
public Display getDisplay () { } //Para elegir la
pantalla que se quiere mostrar
public void exitMIDlet() { } //Consiste en declarar
las variables nulas y llamar a destroyApp
public void startApp() { } //Es la que contiene el
orden o la forma de mostrar las clases
public void pauseApp() { } // Para pausar la
aplicacin
public void destroyApp(boolean unconditional) { }
Para cerrar y liberar la aplicacin
public void commandAction(Command cmd,
Displayable screen) {} // Para asignar la funcin de
los botones
4.
//#style mainScreen
menuScreen = new List("HISTORIAL CLINICO",
List.IMPLICIT);
//#style mainCommand
this.menuScreen.append( "Registrar", null);
//#style mainCommand
this.menuScreen.append("Consultar", null);
//#style mainCommand
this.menuScreen.append("Actualizar", null);
//#style mainCommand
5. BIBLIOGRAFA