Primeros pasos en la

programación
para Móviles

Antonio García Cabot

Eva García López

 1. Introducción

La realización 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 programación para móviles.
Con estas breves indicaciones se pretende que el alumno pierda el miedo a programar
para estos dispositivos que hoy en día casi todo el mundo tiene. Podremos ver como
con muy poco esfuerzo podemos llegar a conseguir aplicaciones verdaderamente
vistosas y útiles.
 2. Primeros pasos con J2ME

Preparando los ingredientes

¿Qué necesitamos para programar con J2ME para un dispositivo móvil?

- JDK 6

- NetBeans

- NetBeans Mobility Pack

Hemos elegido el NetBeans como entorno de desarrollo y como compilador porque

pensamos que es el más sencillo de utilizar, aunque existen otros compiladores para
J2ME como el J2ME Wireless Toolkit. En la página http://www.java.sun.com/ podemos
encontrar en un solo instalador el JDK 6 y el NetBeans. El NetBeans Mobility Pack lo
podemos descargar de la página http://www.netbeans.org/ ,que nos permitirá crear
proyectos para dispositivos móviles.

Ya está todo listo ¿y ahora qué?

Que no cunda el pánico, vayamos con calma. Lo primero es arrancar el entorno
NetBeans (seguramente en nuestro escritorio tendremos un icono de acceso directo),
tras unos cuantos segundos de carga, deberemos de ver una pantalla como esta:
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 localización 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.

Nuestra primera aplicación

Suponemos que no hemos seleccionado que por defecto nos incluya el “hola mundo”
en el proyecto, así que nos encontramos ante un proyecto vacío. Vamos a insertar un
MIDlet visual con el que podamos trabajar:

1º En el explorador de proyectos del NetBeans pulsamos con el botón derecho sobre

nuestro proyecto y le pinchamos en “New” -> “Visual MIDlet”

2º Indicamos el nombre del MIDlet y pulsamos el botón “Finish”.

Ya tenemos nuestro MIDlet, deberá aparecernos una pantalla algo parecida a esta:
Vamos a intentar hacer una calculadora para nuestro teléfono móvil. Los pasos a
seguir son los siguientes:

1º Añadimos un Form a la aplicación. Podemos hacerlo simplemente seleccionándolo

en la paleta de componentes de la derecha y pinchando después en la zona de diseño
donde queramos colocarlo.

2º Si lo seleccionamos el nuevo Form que hemos añadido a la ventana de diseño,

veremos que a la derecha aparecen los distintos atributos de este componente.
Podemos cambiarlos a nuestro antojo. Por ejemplo, la propiedad “Title” vamos a
cambiársela por “Calculadora”.

3º Vamos a establecer un flujo de ventanas en nuestra aplicación, para ello unimos el

“Start Point” del dispositivo móvil que aparece en la ventana de diseño con el nuevo
formulario añadido. Lo que hemos hecho es indicarle que cuando ejecutemos la
aplicación aparezca el formulario.

4º Ahora, vamos a establecerle los botones de control a nuestra aplicación, para ello,
seleccionamos en la paleta de componentes “Exit Command” y pinchamos sobre el
formulario, veremos que se añade un nuevo punto que pone: “Exit”. Bien, a
continuación, vamos a arrastrar este nuevo punto hasta el punto del dispositivo móvil
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 después pinchamos sobre el
botón que arriba pone “Screen Design” entraremos en la ventana de diseño del
formulario.

6º En esta ventana, vamos a arrastrar de la lista de componentes el tipo “TextField”

hacia la pantalla de diseño del formulario. Este proceso lo haremos dos veces para
poder tener dos campos de texto. Debe de quedarnos una cosa tal que así:

Vamos a seleccionar uno de estos componentes que hemos añadido y en las

propiedades de la derecha, cambiamos la propiedad “Label” por “Operando 1” y el
segundo componente lo cambiaremos por “Operando 2”.

7º Después de haber insertado los dos TextField, vamos a insertar en el formulario un

componente llamado “choiceGroup”. Una vez insertado, lo seleccionamos y le
cambiamos la propiedad “Label”, vamos a ponerle “Operadores”. Además, tenemos
que modificar la propiedad “Type” y seleccionar “EXCLUSIVE”.

8º Lo siguiente, es añadirle opciones al choiceGroup que hemos insertado, para ello

vamos a seleccionar el componente “Choice Element” y lo arrastramos sobre el
choiceGroup que tenemos en la ventana de diseño, este proceso lo repetiremos cuatro
veces, para nuestros cuatro operandos (suma, resta, multiplicación y división). Vamos
a seleccionar cada uno de los Choice Element y cambiarles la propiedad String por cada
uno de los operandos.

9º A continuación, añadimos un tercer TextField y cambiamos su propiedad “Label” y

le ponemos “Resultado”. Deberemos de tener una pantalla parecida a esta:

10º Lo siguiente que tenemos que hacer es volver a la pantalla de “Flow Design” y
arrastrar un componente llamado “Ok Command” encima del formulario para añadir
un nuevo botón de control de la aplicación.

11º Hasta ahora no hemos insertado ni una sola línea de código, pero ha llegado el
momento de meter unas cuentas líneas. Si pulsamos sobre el botón “Source” (al lado
de “Flow Design” y “Screen Design”) veremos el código que el NetBeans ha ido
generando según hemos ido insertado componentes. El código que aparece en azul no
podemos editarlo, es código generado automáticamente. Vamos a buscar en el código
el método commandAction(), veremos que no tiene contemplados los casos de que
ejecutemos el exitCommand1 o el okCommand1. A nosotros ahora nos interesa rellenar
la parte de que ocurra el okCommand1. De modo que donde está etiquetado como: //
Insert pre-action code here, vamos a insertar este código:
try
{
int operando1=Integer.parseInt(textField1.getString());
int operando2=Integer.parseInt(textField3.getString());
int operador=choiceGroup1.getSelectedIndex();
switch (operador)
{
 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 código solamente coge el contenido de los dos operandos, los convierte a entero
y según se haya hecho la selección en el choiceGroup realiza una operación 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 botón derecho y
pulsamos sobre “Run Project”. Nos aparecerá el emulador con la aplicación disponible
para ejecutarse, pulsamos en el emulador en “Launch” y pasará a ejecutarse ya
nuestra aplicación.
Una aplicación más avanzada
Vamos a realizar ahora una calculadora utilizando un servlet. Si hemos seguido los
anteriores pasos, lo que tenemos que hacer a continuación es comentar el código que
habíamos introducido para que no lo tenga en cuenta a la hora de ejecutarse. Justo
debajo de donde introdujimos el código introducimos este:

try
{
int operador=choiceGroup1.getSelectedIndex();
String operacion="";
switch (operador)
{
case 0:
operacion="1";
break;
case 1:
operacion="2";
break;
case 2:
operacion="3";
break;
case 3:
operacion="4";
break;
}

url="http://193.146.58.131/riicu/CalculadoraServlet?op1="+textFi
eld1.getString()+"&op2="+textField3.getString()+"&operacion="+operacio
n;
Thread thread = new Thread(this);
thread.start();
}
catch (Exception e)
{
textField4.setString("ERROR!");
}

Además, debemos de colocar en los atributos de la clase este: String url; y

debemos de añadir esto a la cabecera de la clase:

public class Calculadora extends MIDlet implements CommandListener,

Runnable

También tenemos que insertar este método:

public void run()

{
try
{
 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();
}
}

Ahora lo que estamos haciendo es capturar la opción seleccionada del “choiceGroup”,

y llamar al servlet indicando la dirección IP donde se encuentra, con el nombre del
servlet y los parámetros que se le han de enviar, en este caso, los dos operandos y la
operación a realizar. Todo esto lo guardamos en un tipo de dato String. A continuación
creamos un hilo de esta misma clase y lo mandamos iniciarse (este hilo ejecutará la
llamada al servlet). Se ha de utilizar un hilo ya que si no, no funciona, porque la
petición al servlet deja bloqueado el flujo de datos del programa principal.

Cuando hemos mandado iniciar el hilo, se ejecuta el contenido del método “run()”, en
el cual vemos que lo primero es crear una conexión con el servlet y abrirla, para ello
utilizamos el método “open()” de la clase “Connector”. A continuación indicamos que
los parámetros al servlet se los mandaremos como tipo GET (Es decir, iran incluídos en
la propia url). El resto del código sirve para leer la respuesta del servlet que es de tipo
String y por último la colocamos en el textField4.

Hemos cubierto la ejecución del programa principal y del hilo con try-catch para
prevenir las posibles excepciones que se puedan dar (Fallo de conexión con el servlet,
que el hilo sea interrumpido, etc.).

Ya solo nos queda ejecutar el proyecto como se indicó en pasos anteriores y ver que
ocurre. Si lo hemos hecho bien, nos aparecerá una pantalla de advertencia después de
enseñarnos el formulario que nos indicará que se desea acceder a la red, debemos de
indicarle “Yes”.
A continuación mostramos el código del servlet que se ha utilizado en este manual,
aunque no se explicará ya que no es el objetivo de dicho manual.

package servlet;
import javax.servlet.*;
import java.io.*;
import javax.servlet.http.*;

public class CalculadoraServlet extends HttpServlet

{
PrintWriter out;

public void init()

{

public void doGet(HttpServletRequest req,HttpServletResponse

res)throws ServletException,IOException
{
try
{
String op1=(String)req.getParameter("op1");
String op2=(String)req.getParameter("op2");
String operacion=(String)req.getParameter("operacion");
String resultado="";

res.setContentType("text/html");
out=res.getWriter();
BufferedReader in =req.getReader();
//Operaciones:
//Suma=1;
//Resta=2;
//Multiplicacion=3;
//Division=4;
int operac=Integer.parseInt(operacion);
int operando1=Integer.parseInt(op1);
int operando2=Integer.parseInt(op2);
 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 req,HttpServletResponse
res)throws ServletException,IOException
{
doGet(req,res);
}
}

NOTA: El servlet que se ha utilizado para la realización 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.
 3. Primeros pasos con Flash

Preparando los ingredientes

¿Qué necesitamos para desarrollar en Flash para un dispositivo móvil?

- Macromedia Flash

- Flash Pocket PC Development Kit

Para empezar, debemos recordar que Macromedia Flash es un software de pago,

aunque existe una versión de evaluación para utilizarlo gratuitamente durante 30 días.
En este ejemplo vamos a desarrollar una aplicación para Pocket PC, por eso
necesitamos el Flash Pocket PC Development Kit. Si quisiéramos desarrollar para un
teléfono móvil, necesitaríamos el Flash Lite 2 Content Development Kit.

Ya está todo listo, ¿y ahora qué?

Lo primero que tenemos que hacer es arrancar el Macromedia Flash. Nos deberá
aparecer una pantalla como esta:
A continuación, en el apartado de la derecha de “Crear a partir de plantilla”, pulsamos
sobre la opción “PDA”. Si no apareciera esta pantalla automáticamente, deberemos ir
al menú “Archivo” -> “Nuevo” y en la pestaña “Plantillas” deberemos seleccionar la
opción “PDA”. En el cuadro central de la ventana aparecen todas las plantillas a partir
de las cuales podemos desarrollar. En nuestro caso escogeremos “Windows Mobile –
Pantalla completa” y pulsaremos sobre el botón “Aceptar”. Una vez hecho esto,
deberá aparecer una pantalla como la siguiente:

Antes de continuar, debemos explicar que en Flash todo son películas que están
compuestas por un montón de fotogramas. En la parte superior de la imagen podemos
ver la línea 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 aplicación al dispositivo móvil.

En la parte inferior de la pantalla tenemos las propiedades de la aplicación (tamaño de

la pantalla, color de fondo, versión del ActionScript a utilizar, etc.), entre ellas una
opción 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 línea de tiempos tenemos dos capas por defecto: “ActionScript” y

“Content”. La primera vamos a utilizarla para introducir código de funcionalidad en
nuestra aplicación, mientras que la segunda la usaremos para hacer la parte gráfica.
Seleccionamos la capa “Content” y a continuación hacemos clic con el botón derecho
sobre la casilla correspondiente al segundo fotograma (la línea de tiempos de abajo), y
escogemos la opción “Insertar fotograma clave”. Ahora veremos un círculo sobre esta
casilla, que nos indica que la operación se ha realizado correctamente.

El siguiente paso es seleccionar el primer fotograma de la capa “Content” y, en la

paleta de la izquierda cogemos la herramienta de texto (simbolizada por una “A”) y
pinchamos con ella sobre el escenario. Escribimos “Zoo virtual” y en la parte inferior
veremos que aparecen unas propiedades para dar formato al texto que acabamos de
introducir. Cambiamos, por ejemplo, el color y el tamaño. Volvemos a introducir otro
texto más abajo, escribiendo lo siguiente: “Seleccione animal”. Con la herramienta de
selección pinchamos sobre el escenario y cambiamos el color de fondo, mediante
las propiedades que aparecen abajo. A estas alturas tenemos que tener una pantalla
parecida a esta:

A continuación, 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 botón “Abrir”. Se nos abrirá una
paleta de herramientas como esta:
Arrastrar un componente “Device DropDown” al escenario. En la parte inferior de la
pantalla veremos sus propiedades, en la parte de <Nombre de instancia> le
cambiamos el nombre a “Lista1”. Si ahora pinchamos en la pestaña “Parámetros” de la
parte inferior de la pantalla, veremos una tabla con unos campos (“Labels”, “Data”,
“Row Count” y “Change Handler”). En el campo “Labels”, si pinchamos sobre él, en la
parte izquierda veremos una lupa , vamos a pinchar sobre ella y nos aparecerá una
pantalla. Pinchando sobre el símbolo + podemos introducir las etiquetas de los
animales que queramos que aparezcan. Vamos a introducir “Buho”, “Pato”, “Pantera”
y “Serpiente”, después pincharemos en “Aceptar”. Por último, si pinchamos sobre el
campo “Data” veremos el mismo icono de la “lupa” a la izquierda, pinchamos sobre él
y e introducimos los nombres de los animales, para luego buscar información sobre
ellos. Introducimos “buho”, “pato”, “pantera” y “serpiente”.

Ahora, vamos a seleccionar la capa “ActionScript” del primer fotograma. En la parte

inferior de la pantalla tenemos la pestaña “Acciones”, pulsamos sobre ella y nos
aparecerá un cuadro donde podemos introducir el código para nuestra aplicación. Por
defecto, nos aparece ya una línea de código (“fscommand("FullScreen", true);”), debajo
de ella introducimos “stop();”. Esto hará que la aplicación no cambie al siguiente
fotograma.
Si eres un poco impaciente y estás deseando ver cómo queda nuestra aplicación,
podemos probarla pinchando sobre “Control” -> “Probar Película”.

Continuemos, lo siguiente que vamos a hacer es insertar un botón. Vamos a pinchar en

“Insertar” -> “Nuevo Símbolo”, seleccionamos “botón” y le ponemos de nombre:
“btnVerAnimal”. Igual que ocurría en el escenario, disponemos de una línea de tiempo,
y en ella nos aparecen cuatro fotogramas correspondientes a los tres estados de un
botón (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 botón. Para ello, primeramente vamos a insertar
un fotograma clave y pintamos un rectángulo (Herramienta Rectángulo ) alrededor
del texto que tenemos. Ya tenemos nuestro botón. Para volver a la pantalla de nuestra
aplicación podemos pinchar sobre “Scene 1” en la mitad superior de la pantalla, justo
encima de la línea de tiempo.

Vemos que desaparece de arriba el botón, 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 botón como un componente más. Veamos esta pantalla:
A continuación lo que tenemos que hacer es seleccionar el primer fotograma de la
capa “Content” de nuestra aplicación y arrastrar al escenario el componente
“btnVerAnimal”. Lo colocamos donde queramos, en este caso, en la parte inferior de la
pantalla y listo.

Nos queda añadirle funcionalidad al botón que acabamos de insertar, para ello vamos
a seleccionarlo y pinchar sobre la pestaña de “Acciones” que está en la parte inferior
de la pantalla, tenemos que añadir el siguiente fragmento de código:
on(release) {

animal = Lista1.data[Lista1.getSelectedIndex()];

gotoAndStop(2);

Este código es muy sencillito, el “on(release)” sirve para indicar que la acción se
efectuará cuando se pulse el botón, la línea: “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 reproducción 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,
más o menos, y seleccionamos que sea “Texto Dinámico”, esto podemos hacerlo en la
parte inferior de la pantalla en el cuadro de propiedades. Además donde pone “Línea
única” seleccionamos “Multilínea”. También tenemos que introducir donde pone
“<Nombre de instancia>” le ponemos “Texto” y en la propiedad “Var” introducimos
“descripción”.

Por último, seleccionamos el fotograma 2 de la capa “ActionScript” y seleccionamos la

pestaña “Acciones” e introducimos el código:
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 aplicación en Flash. Tan sólo nos queda probarla. Para
ello nos vamos al menú “Control” -> “Probar película”. Si hemos ido siguiendo bien los
pasos, debería de salirnos la aplicación más o menos así:
 4. Primeros pasos con .NET

Preparando los ingredientes

¿Qué necesitamos para desarrollar en Flash para un dispositivo móvil?

- Microsoft Visual Studio 2005

- Microsoft ActiveSync

- Virtual Machine Network Driver For Microsoft Device Emulator

El ActiveSync es el programa que se utiliza para conectar un dispositivo móvil con un

ordenador. Nosotros lo necesitaremos para conectar el emulador del dispositivo móvil
al ordenador. Podemos descargarlo de la página de Microsoft:
http://www.microsoft.com.

El Microsoft Visual Studio 2005 lo vamos a utilizar para desarrollar las aplicaciones y a
la vez poderlas emular. Este software es de pago, pero como alumnos de la
Universidad de Alcalá, podemos descargarlo totalmente gratis desde la página del
Academic Alliance:

http://msdn30.e-academy.com/elms/Storefront/Home.aspx?campus=ualc_comp

Actualmente, también existe ya un Service Pack 1 para el Visual Studio 2005, sería
interesante tenerlo instalado. También se puede descargar de la página de Microsoft.

Por último, el “Virtual Machine Network Driver For Microsoft Device Emulator” es un
pequeño parche que se instala para poder crear una red virtual y acceder a ella desde
el emulador del Visual Studio 2005. Es gratuito y se puede descargar desde la página
web de Microsoft.

Ya está todo listo, ¿y ahora qué?

Lo primero que tenemos que hacer es arrancar el Visual Studio 2005. Si es la primera
vez que lo arrancamos, nos pedirá que seleccionemos el entorno de desarrollo que
deseamos.
Nosotros vamos a seleccionar “Configuración general de desarrollo” y pinchamos sobre
“Iniciar Visual Studio”. Tras un tiempo, el Visual Studio arrancará, su aspecto es este:

Vamos a crearnos una calculadora en .NET, concretamente en C#, así lo podremos

comparar con el ejemplo realizado anteriormente con Java. Lo primero, es crear un
nuevo proyecto para comenzar a trabajar: “Archivo” -> “Nuevo” -> “Proyecto”. Nos
aparecerá una ventana con las distintas opciones que tenemos para crear un proyecto.
En la parte izquierda tenemos el tipo de proyecto que podemos crear (Dependerá de
las opciones que le hayamos indicado en la instalación) y en el cuadro de la derecha las
distintas plantillas que podemos utilizar. Vamos a seleccionar “Visual C#” -> “Smart
Device” y luego la plantilla “Aplicación 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 ratón 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 aparecerán las
propiedades de los distintos componentes que vayamos agregando a la aplicación.

Vamos a comenzar, seleccionamos el formulario que nos aparecía por defecto en la

PDA y vamos a sus propiedades, buscamos la propiedad “Text” y le introducimos
“Calculadora”. Después, en la paleta de componentes, vemos que estos están
categorizados, nosotros nos centraremos solamente en la sección “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 continuación,
vamos a insertar un segundo componente, también de tipo “Label” y lo introducimos
justo debajo del que ya teníamos. 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 líneas azules, eso se utiliza
para alinear los componentes de manera sencilla.

Ya sabemos cómo introducimos nuevos componentes a nuestra aplicación, así que

vamos a introducir dos componentes de tipo “TextBox” justo al lado de los labels que
ya habíamos 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, deberíamos 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 línea.

Ahora, vamos a introducir otro “Label” que ponga “Resultado” y un “TextBox” vacío
como los anteriores. Además, añadimos un “Button” cuya propiedad “Text” sea
“Calcular”. Debemos de tener en pantalla estos componentes:
Lo siguiente que tenemos que hacer es seleccionar el botón que hemos insertado y
pinchar en el “rayo” que aparece en la parte superior del cuadro de propiedades.

Veremos que las propiedades pasan a convertirse en un listado de eventos de un

determinado componente que tengamos seleccionado. Si queremos volver a ver las
propiedades de un componente, pinchamos en el botón de la izquierda del rayo.

Bien, nos encontramos ante los eventos, vamos a buscar el evento “Click” y pinchamos
doblemente sobre él, veremos que pasamos a la ventana de código. Vemos que ya se
ha insertado un método, llamado private void button1_Click(object sender,
EventArgs e). Lo que introduzcamos entre las dos llaves { } de este método será lo
que se ejecute cuando pinchemos sobre él botón cuando estemos ejecutando la
aplicación. A estas alturas, cabe destacar que en el explorador de soluciones, si
seleccionamos el archivo “Form1.cs”, justo en la parte superior del explorador de
soluciones, hay dos botones , el de la derecha sirve para ver el diseñador
(donde insertábamos los componentes) y el de la izquierda sirve para ver el código de
la aplicación. Ahora vamos a introducir, introducir este código dentro de la clase
“Form1”, fuera de ningún método:

//Variables
double num1, num2, result;
string operacion;

Hemos declarado tres variables de tipo double y una de tipo string. Fijaos, que cuando
introducís algo de código, aveces aparecen en pantalla cuadros pequeños con una lista
de nombres, esto sirve para que podamos seleccionar en esa lista un determinado tipo
de dato, método, clase, etc. y simplemente con darle al TAB ya se nos inserte ese
código sin necesidad de escribirlo entero. Recordar que el Visual Studio 2005, es
sensible a las mayúsculas y minúsculas. Ahora vamos a introducir el siguiente
fragmento de código dentro del método “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();

Deberíamos haber cambiado el “Name” del último “TextBox” introducido, si no la

última línea nos dará error. Si no lo hemos cambiado en lugar de “txtResult.Text”
tendremos que poner “textBox1”.

El Resultado
Vamos a probar lo que hemos hecho hasta ahora. Para ello, vamos a pinchar sobre el
botón que está en la parte superior de la pantalla. Nos aparecerá una ventana
pequeña donde podremos seleccionar el emulador que queramos que ejecute nuestra
aplicación. Seleccionamos uno y le damos a aceptar. En pantalla, aparecerá una
ventana donde podemos ver el emulador. Tras un tiempo se ejecutará la aplicación
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 próxima vez que iniciemos el
emulador no tardará tanto.

Una aplicación más avanzada

Ahora vamos a hacer una calculadora pero utilizando servicios web. Para ello, hay que
insertar una aplicación web en nuestro proyecto e introducir los servicios web.
Pulsamos con el botón derecho, sobre nuestro proyecto en el “Explorador de
Soluciones” -> “Agregar” -> “Nuevo sitio web”. En la ventana que nos aparece
podemos seleccionar la plantilla que queramos, seleccionamos “Servicio Web
ASP.NET”, que nos permitirá crear los servicios web. Seleccionamos el lenguaje en el
cual queremos implementarlos y le ponemos el nombre que queramos, nosotros le
hemos puesto de nombre WSCalculadora y como lenguaje C#.

Directamente nos aparecerá el código de la aplicación web. Por defecto nos aparece
este código:

[WebMethod]
public string HelloWorld() {
return "Hola a todos";
}

Los WebMethod son los métodos que luego podremos invocar como servicios web.
Vamos a añadir 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 parámetros de tipo double que serán los números y un string que
será la operación y el funcionamiento es el mismo que en el caso del ejemplo anterior:
un switch que indica que operación es la seleccionada y se realiza la misma.
Si pulsamos con el botón derecho sobre el proyecto web que hemos creado, vemos
que nos aparece una opción 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 botón derecho, en el “Explorador de Soluciones”, vemos la
opción “Agregar referencia Web”, le pinchamos y nos aparece una ventana como esta:

Copiamos la url en el cuadro etiquetado como “Dirección URL:” y le pinchamos sobre el

botón . Veremos que en el cuadro grande inferior, aparece la misma pantalla que
nos apareció cuando vimos en el explorador los servicios web. Dentro de ese cuadro
grande, tenemos que pinchar sobre la opción: “Service.asmx” y vemos que se nos
activa el cuadro de texto de la derecha. Dejamos por defecto, en ese cuadro,
“localhost” y le damos a “Agregar referencia”.

Ya queda poco. Vamos a ir al código del primer ejemplo que hicimos, en mi caso era el
llamado “Form1.cs”, lo podéis encontrar en el proyecto “Calculadora” del “Explorador
de soluciones”. Debemos insertar arriba del todo, donde los “using”, esto:

using Calculadora.localhost;

Esto es para utilizar la referencia web que hemos introducido. Ahora borramos el
código que antes habíamos 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 botón
derecho y pinchamos en “Conectar”. Después de unos instantes nos aparecerá en
pantalla el emulador, volveremos a esa pantalla y con el botón 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 más que ejecutar nuestra
aplicación como en el ejemplo anterior, con .