Primeros pasos en la programacin para Mviles

Antonio Garca Cabot Eva Garca Lpez

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.

2. Primeros pasos con J2ME

Preparando los ingredientes
Qu necesitamos para programar con J2ME para un dispositivo mvil? JDK 6 NetBeans NetBeans Mobility Pack

Hemos elegido el NetBeans como entorno de desarrollo y como compilador porque pensamos que es el ms sencillo de utilizar, aunque existen otros compiladores para J2ME como el J2ME Wireless Toolkit. En la pgina 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 pgina http://www.netbeans.org/ ,que nos permitir crear proyectos para dispositivos mviles.

Ya est todo listo y ahora qu?

Que no cunda el pnico, 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 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.

Nuestra primera aplicacin

Suponemos que no hemos seleccionado que por defecto nos incluya el hola mundo en el proyecto, as que nos encontramos ante un proyecto vaco. Vamos a insertar un MIDlet visual con el que podamos trabajar: 1 En el explorador de proyectos del NetBeans pulsamos con el botn derecho sobre nuestro proyecto y le pinchamos en New -> Visual MIDlet 2 Indicamos el nombre del MIDlet y pulsamos el botn Finish. Ya tenemos nuestro MIDlet, deber aparecernos una pantalla algo parecida a esta:

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:

Vamos a seleccionar uno de estos componentes que hemos aadido y en las propiedades de la derecha, cambiamos la propiedad Label por Operando 1 y el segundo componente lo cambiaremos por Operando 2. 7 Despus 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. Adems, tenemos que modificar la propiedad Type y seleccionar EXCLUSIVE. 8 Lo siguiente, es aadirle 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 diseo, este proceso lo repetiremos cuatro veces, para nuestros cuatro operandos (suma, resta, multiplicacin y divisin). Vamos

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:

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 aadir un nuevo botn de control de la aplicacin. 11 Hasta ahora no hemos insertado ni una sola lnea de cdigo, pero ha llegado el momento de meter unas cuentas lneas. Si pulsamos sobre el botn Source (al lado de Flow Design y Screen Design) veremos el cdigo que el NetBeans ha ido generando segn hemos ido insertado componentes. El cdigo que aparece en azul no podemos editarlo, es cdigo generado automticamente. Vamos a buscar en el cdigo el mtodo 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 cdigo:
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 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.

Una aplicacin ms avanzada

Vamos a realizar ahora una calculadora utilizando un servlet. Si hemos seguido los anteriores pasos, lo que tenemos que hacer a continuacin es comentar el cdigo que habamos introducido para que no lo tenga en cuenta a la hora de ejecutarse. Justo debajo de donde introdujimos el cdigo 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!"); }

Adems, debemos de colocar en los atributos de la clase este: String url; y debemos de aadir esto a la cabecera de la clase:
public class Calculadora extends MIDlet implements CommandListener, Runnable

Tambin tenemos que insertar este mtodo:

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 opcin seleccionada del choiceGroup, y llamar al servlet indicando la direccin IP donde se encuentra, con el nombre del servlet y los parmetros que se le han de enviar, en este caso, los dos operandos y la operacin a realizar. Todo esto lo guardamos en un tipo de dato String. A continuacin 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 peticin al servlet deja bloqueado el flujo de datos del programa principal. Cuando hemos mandado iniciar el hilo, se ejecuta el contenido del mtodo run(), en el cual vemos que lo primero es crear una conexin con el servlet y abrirla, para ello utilizamos el mtodo open() de la clase Connector. A continuacin indicamos que los parmetros al servlet se los mandaremos como tipo GET (Es decir, iran includos en la propia url). El resto del cdigo sirve para leer la respuesta del servlet que es de tipo String y por ltimo la colocamos en el textField4. Hemos cubierto la ejecucin del programa principal y del hilo con try-catch para prevenir las posibles excepciones que se puedan dar (Fallo de conexin 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 despus de ensearnos el formulario que nos indicar que se desea acceder a la red, debemos de indicarle Yes.

A continuacin mostramos el cdigo 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 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.

3. Primeros pasos con Flash

Preparando los ingredientes
Qu necesitamos para desarrollar en Flash para un dispositivo mvil? Macromedia Flash Flash Pocket PC Development Kit

Para empezar, debemos recordar que Macromedia Flash es un software de pago, aunque existe una versin de evaluacin para utilizarlo gratuitamente durante 30 das. En este ejemplo vamos a desarrollar una aplicacin para Pocket PC, por eso necesitamos el Flash Pocket PC Development Kit. Si quisiramos desarrollar para un telfono mvil, necesitaramos 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 continuacin, en el apartado de la derecha de Crear a partir de plantilla, pulsamos sobre la opcin PDA. Si no apareciera esta pantalla automticamente, deberemos ir al men Archivo -> Nuevo y en la pestaa Plantillas deberemos seleccionar la opcin 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 botn Aceptar. Una vez hecho esto, deber aparecer una pantalla como la siguiente:

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.

Seleccionamos la capa Content y a continuacin hacemos clic con el botn derecho sobre la casilla correspondiente al segundo fotograma (la lnea de tiempos de abajo), y escogemos la opcin Insertar fotograma clave. Ahora veremos un crculo sobre esta casilla, que nos indica que la operacin 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 tamao. Volvemos a introducir otro texto ms abajo, escribiendo lo siguiente: Seleccione animal. Con la herramienta de pinchamos sobre el escenario y cambiamos el color de fondo, mediante seleccin las propiedades que aparecen abajo. A estas alturas tenemos que tener una pantalla parecida a esta:

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:

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 pestaa Parmetros 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 smbolo + podemos introducir las etiquetas de los animales que queramos que aparezcan. Vamos a introducir Buho, Pato, Pantera y Serpiente, despus 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 informacin 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 pestaa Acciones, pulsamos sobre ella y nos aparecer un cuadro donde podemos introducir el cdigo para nuestra aplicacin. Por defecto, nos aparece ya una lnea de cdigo (fscommand("FullScreen", true);), debajo de ella introducimos stop();. Esto har que la aplicacin no cambie al siguiente fotograma.

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 ) alrededor un fotograma clave y pintamos un rectngulo (Herramienta Rectngulo 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:

A continuacin lo que tenemos que hacer es seleccionar el primer fotograma de la capa Content de nuestra aplicacin 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 aadirle funcionalidad al botn que acabamos de insertar, para ello vamos a seleccionarlo y pinchar sobre la pestaa de Acciones que est en la parte inferior de la pantalla, tenemos que aadir el siguiente fragmento de cdigo:
on(release) { animal = Lista1.data[Lista1.getSelectedIndex()]; gotoAndStop(2); }

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:

4. Primeros pasos con .NET

Preparando los ingredientes
Qu necesitamos para desarrollar en Flash para un dispositivo mvil? 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 mvil con un ordenador. Nosotros lo necesitaremos para conectar el emulador del dispositivo mvil al ordenador. Podemos descargarlo de la pgina 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 pgina del Academic Alliance: http://msdn30.e-academy.com/elms/Storefront/Home.aspx?campus=ualc_comp Actualmente, tambin existe ya un Service Pack 1 para el Visual Studio 2005, sera interesante tenerlo instalado. Tambin se puede descargar de la pgina de Microsoft. Por ltimo, el Virtual Machine Network Driver For Microsoft Device Emulator es un pequeo 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 pgina 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 Configuracin 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 instalacin) y en el cuadro de la derecha las

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.

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 botn 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 cdigo. Vemos que ya se ha insertado un mtodo, llamado private void button1_Click(object sender, EventArgs e). Lo que introduzcamos entre las dos llaves { } de este mtodo ser lo que se ejecute cuando pinchemos sobre l botn cuando estemos ejecutando la aplicacin. 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 diseador (donde insertbamos los componentes) y el de la izquierda sirve para ver el cdigo de

la aplicacin. Ahora vamos a introducir, introducir este cdigo dentro de la clase Form1, fuera de ningn mtodo:
//Variables double num1, num2, result; string operacion;

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

Deberamos haber cambiado el Name del ltimo TextBox introducido, si no la ltima lnea 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 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.

Una aplicacin ms avanzada

Ahora vamos a hacer una calculadora pero utilizando servicios web. Para ello, hay que insertar una aplicacin web en nuestro proyecto e introducir los servicios web. Pulsamos con el botn 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 cdigo de la aplicacin web. Por defecto nos aparece este cdigo:
[WebMethod] public string HelloWorld() { return "Hola a todos"; }

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:

Copiamos la url en el cuadro etiquetado como Direccin URL: y le pinchamos sobre el botn . 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 opcin: 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 cdigo del primer ejemplo que hicimos, en mi caso era el llamado Form1.cs, lo podis 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 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 .