Teoria Mobile

Mobile
David Gan Jimnez

..
Universitat Oberta de Catalunya
Mobile
ndice
ndice ......................................................................................................... 3 Introduccin ............................................................................................... 5 Objetivos .................................................................................................... 6 1.- Introduccin al desarrollo de aplicaciones Mobile .................................. 7 1.1.- Tipos de dispositivos ........................................................................... 7 1.2.- Sistemas operativos ........................................................................... 10 1.3.- Herramientas de desarrollo ............................................................... 16 2.- WinForms para dispositivos mviles .................................................... 17 2.1.- Primera aplicacin para .NET Compact Framework.......................... 17 2.2.- Formularios de WinForms para dispositivos moviles ........................ 24 2.3.- Utilizacin de los controles de WinForms ........................................ 39 2.3.- Controles del .NET CF ....................................................................... 45 2.4.- Despliegue de aplicaciones WinForms para dispositivos mviles ..... 65 3.- Aplicaciones Web para dispositivos mviles ......................................... 71 3.1.- Creacin del proyecto Web ............................................................... 72 3.2.- Controles para mviles...................................................................... 76 3.3.- Ejecucin de aplicaciones Web para mviles .................................... 77 3.4.- Instalacin de la aplicacin en un servidor....................................... 80 Actividades ............................................................................................... 81 Bibliografa ............................................................................................... 87
Mobile
Introduccin
Hoy en da existen multitud de aparatos o dispositivos digitales que ofrecen caractersticas y funcionalidades similares a las de un ordenador de escritorio, pero con un tamao mucho ms reducido, por lo que permiten trabajar, escuchar msica, ver videos, etc. en cualquier lugar y en cualquier momento. El uso de estos dispositivos se ha extendido ltimamente, tanto para uso personal o de ocio, como para uso profesional. Las empresas han visto en ellos un mecanismo eficaz para que sus empleados puedan llevar y recopilar la informacin necesaria independientemente de donde se encuentren. Por otro lado, la mayora de estos dispositivos permiten aadir y ejecutar nuevas aplicaciones desarrolladas por otras empresas de software o por el propio usuario. En el caso de los sistemas operativos de Microsoft, estas aplicaciones se pueden desarrollar mediante la tecnologa .NET. En este tema introduciremos los dispositivos mviles para los que es posible desarrollar aplicaciones mediante .NET, y veremos cmo crear aplicaciones de ventana y aplicaciones Web especficas para ellos.
Mobile
Objetivos
Introducir los dispositivos mviles preparados para aplicaciones .NET
Aprender a desarrollar interfaces graficas de ventana para dispositivos mviles
Conocer las diferencias entre las aplicaciones Web normales y las orientadas a dispositivos mviles
Mobile
1.- Introduccin al desarrollo de aplicaciones Mobile
En este apartado veremos brevemente los diferentes dispositivos preparados para ejecutar aplicaciones basadas en .NET, as como los sistemas operativos y herramientas de desarrollo para dispositivos mviles que ofrece Microsoft.
1.1.- Tipos de dispositivos Los dos dispositivos principales compatibles con Microsoft .NET son el Pocket PC y el SmartPhone. Existen otros dispositivos como mediacenters porttiles, mp3, consolas, navegadores GPS o incluso mquinas expendedoras o terminales de punto de venta, que tambin son compatibles con la tecnologa .NET, aunque no los trataremos aqu porque no son tan conocidos ni frecuentes. A continuacin veremos las caractersticas principales de los dos primeros. Pocket PC Un Pocket PC (abreviado PPC), es un dispositivo mvil equivalente a una PDA, u ordenador porttil de bolsillo, que incorpora el sistema operativo Windows Mobile de Microsoft. Veremos este sistema operativo en el siguiente apartado. Debido a su tamao reducido, los Pocket PC tienen algunas limitaciones como el tamao de la pantalla o la ausencia de teclado. Para interaccionar con el usuario, estos aparatos proporcionan una pantalla tctil y un lpiz puntero que hace las veces de ratn. Tambin poseen algunos botones de funcin y de movimiento del cursor.
Figura 1 Ejemplos de Pocket PC
Aparte de su tamao reducido, las velocidades de proceso, y la memoria disponible de las PDAs son bastante ms reducidas que las de un ordenador de sobremesa. Generalmente los procesadores de estos aparatos estn basados en la arquitectura ARM (Acorn RISC Machine), una arquitectura de microprocesadores de bajo consumo especficamente desarrollada para dispositivos empotrados como cmaras digitales, mviles, consolas, etc.
Mobile
A pesar de las limitaciones, cada vez se fabrican aparatos con mayor capacidad de proceso y memoria, y que intentan solucionar las restricciones impuestas por el tamao reducido. Por ejemplo, algunos modelos de Pocket PC permiten girar la pantalla 90 para trabajar en modo horizontal, de forma que se aprovecha mejor la zona de visualizacin del dispositivo.
Figura 2 Pocket PC en modo horizontal
Por otro lado existen dispositivos que permiten incorporar teclados externos o que incorporan el teclado en el propio aparato, de forma que facilitan la introduccin de datos, y la interaccin con el mismo.
Figura 3 Teclado externo acoplado (izquierda) y teclado lser (derecha)
Figura 4 Pocket PCs con teclado incluido
Los Pocket PC pueden adems incorporar o combinarse con otros mltiples aparatos como receptores GPS, lectores de cdigos de barras, cmaras, impresoras, etc. Algunos modelos incluyen tambin funcionalidades de telfono mvil, de forma que pueden usarse para realizar y recibir llamadas o mensajes SMS o MMS. Los Pocket PC tambin permiten generalmente aumentar la capacidad del dispositivo aadiendo tarjetas de memoria.
Global Positioning System (GPS) o Sistema de Posicionamiento Global es un sistema de navegacin por satlite que permite determinar la posicin de un determinado objeto en todo el mundo con una precisin de pocos metros.
Figura 5 Pocket PC con telfono (izquierda) Pocket PC con GPS incorporado (derecha)
Mobile
Los Pocket PC permiten guardar y recibir el correo electrnico, gestionar mensajes, citas, ejecutar archivos multimedia, juegos, compartir mensajes de texto o multimedia con MSN Messenger, explorar Internet con Internet Explorer, visualizar videos o escuchar msica con Windows Media Player, etc. Las ltimas versiones de Pocket PC incluyen Office Mobile, un conjunto de versiones simplificadas de Word, Excel, PowerPoint y Outlook, que permiten visualizar y/o editar documentos de estos productos desde el dispositivo. Para sincronizar datos y comunicarse con otros dispositivos, los Pocket PC pueden incluir diferentes mecanismos de comunicacin como USB, WiFi, Bluetooth o IrDa (infrarrojos). La sincronizacin de los datos con un PC de escritorio se lleva a cabo generalmente mediante el programa ActiveSync de Microsoft (http://www.microsoft.com/windowsmobile/activesync/) o mediante el centro de sincronizacin de dispositivos en Windows Vista (http://www.microsoft.com/windowsmobile/devicecenter.mspx). La informacin sincronizada puede incluir los mensajes de la bandeja de entrada de Outlook, informacin de contactos, tareas, notas de texto, archivos, etc. Aparte de las aplicaciones que proporciona el propio sistema operativo Windows Mobile, existen multitud de aplicaciones de otras empresas de software para Pocket PC. Adems, es posible desarrollar fcilmente aplicaciones propias para este tipo de dispositivos mediante las herramientas que ofrece Microsoft .NET. Ms informacin sobre dispositivos Pocket PC en la siguiente direccin Web: http://www.microsoft.com/windowsmobile/pocketpc/default.mspx SmartPhone Un SmartPhone (o telfono inteligente), es un dispositivo mvil que integra en un telfono mvil funcionalidades de agenda electrnica o PDA. Aparte de las funcionalidades de telfono y de agenda bsicas, pueden incorporar otros aparatos o funcionalidades como cmaras digitales, navegacin GPS, comunicaciones Bluetooth, WiFi o IrDa, ranuras para tarjetas de memoria, etc.
Figura 6 Ejemplos de SmartPhone
10
Mobile
La diferencia fundamental entre un SmartPhone y un Pocket PC es que la funcionalidad primaria de un SmartPhone es la de telfono mvil, mientras que la funcionalidad primaria de un Pocket PC es la de agenda electrnica, aunque el SmartPhone ofrezca sendas funcionalidades (como ya hemos comentado algunos modelos de Pocket PC tambin tienen funcionalidades de telfono mvil). De hecho la tendencia es unificar estos dos tipos de dispositivos por lo que cada vez es menos clara la diferencia entre ellos. Por otro lado, un SmartPhone est pensado para ser utilizado con una sola mano y la interaccin se produce mediante los botones del telfono mvil, mientras que la interaccin con un Pocket PC se realiza principalmente mediante la pantalla tctil, por lo que es necesario utilizar las dos manos para su utilizacin. Existen distintos sistemas operativos para SmartPhone, como Symbian o Palm OS. Tambin existe una versin de Windows Mobile de Microsoft para SmartPhone. Igual que en la versin para Pocket PC, la versin para SmartPhone de Windows Mobile incluye multitud de aplicaciones como Internet Explorer, Windows Media Player, y Office Mobile. Ms informacin sobre dispositivos SmartPhone con sistema operativo de Microsoft en la siguiente direccin Web: http://www.microsoft.com/windowsmobile/smartphone/default.mspx
1.2.- Sistemas operativos El sistema operativo utilizado por Pocket PCs y SmartPhones es Windows Mobile. Este sistema operativo est a su vez basado en el sistema operativo Windows CE. Existe adems otro sistema operativo, Windows XP Embedded, utilizado en otros tipos de dispositivos como terminales de punto de venta o mquinas expendedoras. A continuacin veremos las caractersticas principales de cada uno de ellos. Windows CE Windows CE es un sistema operativo de Microsoft basado en componentes, diseado especficamente para dispositivos incrustados (embedded devices), y optimizado para este tipo de dispositivos que generalmente tienen menor capacidad de proceso y tamao de almacenamiento mnimo (el kernel de Windows CE se puede ejecutar en menos de un megabyte de memoria). Segn Microsoft, CE no es ningn acrnimo intencionado, el nombre implica varios conceptos de diseo como Compacto, Conectable o Compatible, no obstante se suele traducir generalmente como Compact Edition.
11
Mobile
Figura 7 Emulador de Windows CE
Windows CE soporta mltiples arquitecturas de CPU, y ofrece un conjunto de componentes, y plantillas predefinidas que permiten desarrollar un sistema operativo ajustado a las necesidades de cada dispositivo, seleccionando y configurando los elementos adecuados. Los fabricantes de dispositivos pueden adems incluir sus propias aplicaciones y componentes dentro del sistema creado. La creacin de sistemas a partir de plantillas y seleccin de componentes permite crear rpida y fcilmente sistemas para dispositivos empotrados con funcionalidades nativas en tiempo-real como, por ejemplo: Controladores industriales Terminales de punto de venta Cmaras digitales Dispositivos inteligentes Televisiones interactivas Etc Algunas partes del sistema operativo Windows CE se ofrecen como cdigo fuente a los desarrolladores de sistemas operativos empotrados para que puedan integrar sus dispositivos hardware de la mejor forma posible. Para desarrollar sistemas operativos adaptados a un determinado dispositivo, Windows CE proporciona el Platform Builder, un entorno de desarrollo integrado que permite disear y generar imgenes de sistemas, e instalarlas y depurarlas en el dispositivo empotrado.
Figura 8 Plattform Builder de Windows CE
12
Mobile
A partir de Windows CE Microsoft ha desarrollado otras plataformas especficas para ciertos dispositivos, como Windows Mobile para Pocket PC y SmartPhone. Ms informacin sobre Windows CE en la siguiente direccin Web: http://msdn.microsoft.com/embedded/windowsce/ Windows Mobile Windows Mobile es un sistema operativo basado en Windows CE para dispositivos mviles como Pocket PC y SmartPhone. Este sistema operativo est diseado para emular a las versiones de Windows para escritorio, tanto en la interfaz grfica como en el modo de utilizacin.
Figura 9 Pantalla de inicio de Windows Mobile para Pocket PC y SmartPhone
Windows Mobile intenta unificar en uno los distintos sistemas operativos de los distintos dispositivos mviles como Pocket PC o SmartPhone, lo cual no es sencillo, porque cada dispositivo tiene sus propias caractersticas. Por ello existen tres versiones de Windows Mobile: una para Pocket PC, una para Pocket PC Phone Edition, y otra para SmartPhone. En la pantalla o escritorio principal del sistema se muestra cierta informacin como la fecha, identificacin del usuario, correo en la bandeja de entrada, citas, contactos, tareas, etc. El tema de la pantalla principal y de las ventanas (el esquema de color, imagen de fondo, fuente, etc.), se puede modificar igual que en los sistemas de escritorio.
Figura 10 Personalizacin de la pantalla de inicio
En la barra superior (Pocket PC) o inferior (SmartPhone), se encuentra el men de inicio, dentro del cual encontraremos las aplicaciones instaladas en el dispositivo. En la barra superior tambin encontramos algunos iconos de notificacin de estado del dispositivo, como cobertura, estado bluetooth o
13
Mobile
batera restante. En el SmartPhone se dispone adems de una barra de iconos de acceso directo con las aplicaciones utilizadas recientemente.
Figura 11 Men de inicio (izquierda). Opciones de configuracin (derecha)
La interfaz grfica de Windows Mobile en dispositivos Pocket PC est pensada para ser utilizada mediante un lpiz digital. Los botones de las ventanas estn pensados para ser activados pulsando sobre ellos, y para introducir datos se puede utilizar el teclado virtual visualizado en pantalla, o el reconocimiento de caracteres.
Figura 12 Introduccin de datos por teclado virtual o por trazos reconocidos
Por el contrario, la interfaz del sistema operativo para SmartPhone est pensada para interactuar mediante las teclas del telfono mvil. Generalmente todas las ventanas tienen dos botones en la parte inferior, accionados por las dos teclas de accin del mvil, que permiten realizar determinadas acciones o visualizar mens. Las teclas del cursor se utilizan para desplazarse entre elementos y la tecla central del mvil o enter, se utiliza para ejecutar la accin seleccionada. Los datos se introducen mediante las teclas alfanumricas.
Figura 13 Introduccin de datos en un SmarPhone
14
Mobile
Para sincronizar los datos del dispositivo y del PC se utiliza alguno de los mecanismos de conexin de que disponga el dispositivo. Las ltimas versiones de Windows Mobile permiten el acceso al dispositivo mediante cable usb, bluetooth, IrDa o WiFi. Para realizar la sincronizacin se utiliza generalmente el programa ActiveSync de Microsoft. Windows Mobile incluye versiones reducidas de las aplicaciones comunes de los sistemas de escritorio, como Internet Explorer Mobile, MSN Messenger o Windows Media Mobile. Tambin incluyen versiones reducidas de algunos productos de Office, como Word, Excel, Outlook o PowerPoint. En la ltima versin de Windows Mobile, estas aplicaciones forman parte de la suite Office Mobile.
Figura 14 Windows Media Mobile,
Word Mobile y Excel Mobile, respectivamente
Este sistema operativo es el resultado de una evolucin de sistemas operativos basados en Windows CE. En la siguiente lista se enumeran cronolgicamente las versiones ms relevantes, as como la versin de Windows CE en la que estn basadas: Handheld PC 2.0 (basado en Windows CE 2.X) Palm PC v1.0/1.2 (Palm-size PC) (basado en Windows CE 2.X) Pocket PC 2000 (Palm-size PC v2) (basado en Windows CE 3.0) Pocket PC 2002 (basado en Windows CE 3.0) SmartPhone 2002 (basado en Windows CE 3.0) Windows Mobile 2003 (basado en Windows CE 4.2) Windows Mobile 2003 Second Edition (basado en Windows CE 4.2) Windows Mobile 5 (basado en Windows CE 5.0) Windows Mobile 6 (basado en Windows CE 5.2) Aparte de las mejoras en funcionalidades y nuevas aplicaciones de las ltimas versiones de Windows Mobile, se ha pasado de utilizar la memoria RAM como mecanismo de almacenamiento de la informacin de las aplicaciones, a utilizar memoria ROM. De este modo si se acaba la batera del dispositivo no se pierden los datos del usuario. Por eso los dispositivos que incorporan este nuevo sistema operativo tienen mayor cantidad de ROM que los anteriores.
15
Mobile
En cuanto al desarrollo de aplicaciones para dispositivos con el sistema operativo Windows Mobile, al estar basado en Windows CE, se pueden desarrollar y ejecutar aplicaciones .NET mediante el .NET Compact Framework. Windows XP embedded Windows XP embedded es una versin de Windows XP Professional basada en componentes. Est basada en el mismo cdigo que Windows XP Professional pero est pensado para los desarrolladores de sistemas empotrados que necesitan soporte para la API de Win32, aunque sin el overhead de Windows XP Professional. La diferencia bsica con Windows CE es que estn pensados para tipos de dispositivos diferentes, Windows CE permite crear sistemas operativos que puedan ejecutarse en dispositivos con muy pocos recursos, pero tiene menos funcionalidades y no ofrece el API de Win32 que si que tiene Windows XP Embedded. Windows XP Embedded est pensado para dispositivos con mayor capacidad como mquinas tragaperras, cajas registradoras, mquinas recreativas, clientes ligeros en general, robots industriales, mquinas expendedoras, etc. Dado que Windows XP Embedded est basado en Windows XP Professional, es posible utilizar las mismas herramientas de desarrollo para realizar aplicaciones para este sistema operativo, por ejemplo el .NET Framework y Visual Studio. Por otro lado, para crear nuevas imgenes de sistemas operativos especficos para un dispositivo en concreto, es posible utilizar las herramientas del entorno de desarrollo Windows Embedded Studio. Microsoft Windows Embedded Studio, es un conjunto de herramientas de desarrollo que permiten crear nuevas imgenes de sistemas operativos basados en los requisitos de hardware y software del sistema empotrado destino. Windows XP Embedded est dividido en unidades de funcionalidad claramente definidas, llamadas componentes. Los componentes que se incluyen en Windows XP Embedded se corresponden exactamente con las caractersticas de Windows XP Professional, como por ejemplo la aplicacin Notepad, o el explorador Internet Explorer. En total se incluyen ms de 10.000 componentes, entre los que proporciona Windows XP Professional y otros especficos para dispositivos empotrados como soporte para dispositivos sin unidad de almacenamiento, o inicio del sistema desde una tarjeta de memoria. Por otro lado es posible crear componentes personalizados e incluirlos en la base de datos de Windows XP Embedded para poder utilizarlos como parte de una imagen de sistema operativo. Ms informacin sobre Windows XP Embedded en la siguiente direccin Web: http://www.microsoft.com/windows/embedded/eval/xpe/default.mspx
16
Mobile
1.3.- Herramientas de desarrollo Debido a las limitaciones de recursos de los dispositivos mviles, para desarrollar aplicaciones .NET basados en Windows Mobile es necesario utilizar una versin ms limitada del framework, llamada .NET Compact Framework (.NET CF). Esta versin tiene la misma estructura que el .NET Framework completo, pero contiene menos funcionalidades, es decir menos clases y en algunas clases no todos los mtodos estn disponibles. Para saber si una clase o mtodo est disponible en el .NET CF, la documentacin del .NET Framework (tanto la disponible en la Web de MSDN como la que viene con Visual Studio), identifican las clases y miembros de clases que estn disponibles para el .NET CF mediante el icono :
Figura 15 Documentacin del .NET Framework indicando los mtodos compatibles con .NET CF
Visual Studio facilita el desarrollo de aplicaciones de .NET CF, ya que proporciona diferentes tipos de proyecto y diseadores especficos para esta plataforma. Tambin permite la depuracin y ejecucin de aplicaciones de .NET CF de forma integrada. Para depurar o ejecutar aplicaciones desarrolladas con el .NET CF es posible instalar los emuladores que permiten simular el funcionamiento de un dispositivo.
Figura 16 Emuladores de Windows Mobile para Pocket PC y SmartPhone
17
Mobile
2.- WinForms para dispositivos mviles
WinForms es el nombre que recibe el conjunto de funcionalidades que permiten desarrollar aplicaciones de ventana. La funcionalidad de WinForms se encuentra bsicamente dentro del namespace System.Windows.Forms. La implementacin de este namespace en el .NET CF est optimizada para mejorar el rendimiento y el tamao, por lo que las funcionalidades que utilizan ms recursos o que no son apropiadas para dispositivos mviles, no estn disponibles, por ejemplo: Soporte para drag and drop Capacidades de impresin Soporte para controles ActiveX Soporte limitado para grficos Soporta solamente un subconjunto de las propiedades mtodos y eventos que proporcionan los tipos de este namespace. A continuacin veremos un ejemplo sencillo de creacin de una aplicacin de WinForms para dispositivos mviles, y las herramientas que proporciona Visual Studio para facilitar su desarrollo. A continuacin estudiaremos los formularios y los diferentes controles disponibles en WinForms para dispositivos mviles y por ltimo veremos cmo instalar aplicaciones de este tipo.
2.1.- Primera aplicacin para .NET Compact Framework Gracias a las herramientas de Visual Studio, la creacin de aplicaciones de .NET CF para dispositivos mviles se asemeja mucho a la creacin de aplicaciones para ordenadores de escritorio. En este subapartado veremos un pequeo ejemplo.
Creacin del proyecto El primer paso para desarrollar una aplicacin mvil con Visual Studio, es por supuesto crear un proyecto, mediante la opcin Proyecto del men Archivo. A continuacin aparece la ventana de seleccin de tipo de proyecto. En primer lugar debemos seleccionar el lenguaje de programacin que queremos utilizar. En nuestro caso escogemos C#, y se abre una lista con distintas categoras de proyectos: Windows, Smart Device, Bases de datos, etc. Escogemos Smart Device, y nos vuelve a aparecer otra lista, esta vez de dispositivos disponibles (el numero de dispositivos depender del numero de
18
Mobile
SDK de Windows Mobile que hayamos instalado, por defecto solo aparecen Pocket PC y SmartPhone 2003 y Windows CE 5.0). Finalmente escogemos el dispositivo concreto para el que queremos desarrollar la aplicacin, por ejemplo Windows Mobile 5.0 Pocket PC. En la parte izquierda aparecen los distintos tipos de proyecto disponibles para esta plataforma:
Figura 17 Tipos de proyecto para dispositivos mviles
Podemos escoger uno de los siguientes tipos de proyectos: Aplicacin de dispositivo Biblioteca de clases Biblioteca de controles Aplicacin de consola Proyecto vaco crea una aplicacin de ventana crea una librera de clases crea una librera de controles crea una aplicacin sin interfaz grfica crea un proyecto en blanco
El (1.0) que aparece en algunos de los proyectos indica que se utiliza la versin 1.0 del .NET CF, el resto de proyectos utilizan la versin 2.0. Para el ejemplo escogemos el tipo de proyecto Aplicacin de dispositivo.
Creacin de la aplicacin Visual Studio crea automticamente una serie de ficheros de inicio del proyecto, concretamente el fichero Program.cs (programa principal), y el fichero Form1.cs (un formulario de la aplicacin). Inmediatamente despus, se abre el diseador de formularios especfico para la plataforma que hayamos seleccionado. En este caso, hemos escogido Pocket PC, por lo que aparece la silueta de este dispositivo, y la zona destinada a la ventana de la aplicacin de color blanco (ver figura 18).
19
Mobile
Figura 18 Diseador de WinForms para dispositivos mviles
En la zona interior al dispositivo, podemos arrastrar diferentes componentes grficos desde la barra de herramientas, que se ha adaptado para mostrar los componentes especficos para dispositivos mviles. Arrastramos tres componentes: un Textbox, un Button y un Label.
Figura 19 Diseo de controles
A continuacin modificamos las propiedades de cada elemento en la ventana de propiedades: Form Textbox Button Label Text = "Saludos S.A." Name = "nombre" Text = "" Name = "saludar" Text = "Saludar" Name = "saludo" Text = ""
Para escribir el cdigo de la aplicacin, hacemos doble-clic encima del botn, de forma similar a como haramos con una aplicacin de WinForms normal, tras los que aparece el cdigo fuente de la aplicacin, con el mtodo saludar_Click preparado para escribir el cdigo que gestione el evento de pulsar encima del botn:
private void saludar_Click(object sender, EventArgs e) { }
Ejemplo 1 Mtodo de gestin del evento Click
20
Mobile
El cdigo que escribiremos en el mtodo de gestin del evento ser el siguiente:

if (nombre.Text == "") { saludo.Text = "Hola desconocido"; } else { saludo.Text = "Hola " + nombre.Text; }
Ejemplo 2 Cdigo de gestin del evento
Compilacin y ejecucin del proyecto Ya podemos compilar la aplicacin, de forma idntica a como compilamos las aplicaciones del .NET Framework completo, es decir, mediante las opciones del men Generar. Los posibles errores que se puedan producir durante la compilacin aparecern en la ventana correspondiente en la parte inferior del entorno:
Figura 20 Errores de compilacin
Una vez compilada la aplicacin sin errores, podemos proceder a ejecutarla mediante las opciones Iniciar depuracin o Iniciar sin depurar del men Depurar. Dado que la aplicacin no se puede ejecutar en el propio equipo de desarrollo porque es una aplicacin de .NET CF, se debe de instalar en un dispositivo fsico, o alternativamente en un emulador, por lo que aparece una ventana de seleccin en la que tenemos que indicar en qu dispositivo queremos ejecutar la aplicacin. Por defecto se selecciona el emulador de la plataforma escogida al crear el proyecto:
Figura 21 Seleccin de la plataforma destino de implementacin
21
Mobile
Tras pulsar el botn Implementar se inicia el proceso de instalacin y ejecucin de la aplicacin en el dispositivo seleccionado. En este caso se abre el emulador de Pocket PC con Windows Mobile 5.0, y a continuacin se ejecuta la aplicacin (el proceso puede ser largo sobretodo la primera vez que se utiliza el emulador correspondiente, ya que Visual Studio tiene que instalar el .NET CF 2.0 en el dispositivo). Para interactuar con el emulador podemos utilizar el ratn como si fuese el lpiz digital del Pocket PC. Para el emulador de SmartPhone se utiliza el ratn para pulsar los distintos botones del dispositivo (ya que la pantalla del SmartPhone no suele ser tctil). Para poder escribir el nombre en el campo de texto, utilizamos el teclado en pantalla que aparece al pulsar el icono del teclado que hay en la barra inferior de la pantalla:
Figura 22 Aplicacin ejecutndose en el emulador de PocketPC
Depuracin del proyecto Las aplicaciones de .NET CF tambin se pueden depurar, utilizando puntos de interrupcin e inspeccin de variables. Por ejemplo, situamos un punto de interrupcin en la siguiente lnea:
Figura 23 Punto de interrupcin
Cuando pulsemos el botn Saludar, si hemos escrito algo en el campo de texto, el programa se detendr en este punto. Mediante la inspeccin de variables podemos visualizar los valores de cada una de las variables o expresiones involucradas en el contexto en el cual se ha detenido el programa, por ejemplo, podemos ver el valor de nombre.Text y de saludo.Text.
22
Mobile
Figura 24 Visualizacin automtica de variables relacionadas con el punto de interrupcin
Al pulsar en F10 o F11 (o seleccionar las opciones equivalentes Paso a paso por procedimientos y Paso a paso por instrucciones del men Depurar, vemos como la lnea amarilla avanza hasta la siguiente lnea de cdigo. Ahora podemos ver cmo ha cambiado el valor de Saludo.Text:
Figura 25 Modificacin en los valores de las variables
Para continuar con la ejecucin de la aplicacin podemos pulsar F5. Vemos como efectivamente el mensaje de saludo aparece en la etiqueta correspondiente. Una vez finalizada la aplicacin, podemos cerrarla mediante el botn de cierre de la ventana, parando la ejecucin desde Visual Studio (si hemos ejecutado mediante la opcin Iniciar depuracin, o cerrando el emulador. Si cerramos el emulador, deberemos indicar si queremos guardar el estado actual para futuras ejecuciones. Es conveniente guardar el estado para que la prxima vez que ejecutemos una aplicacin este todo configurado y tarde menos.
Cambio de la plataforma destino El objetivo de Microsoft es el de integrar el desarrollo de aplicaciones de forma que una misma aplicacin se pueda desarrollar una vez, y ejecutar en cualquier dispositivo. Por ejemplo, desarrollar una aplicacin mvil que se pueda ejecutar indistintamente en un Pocket PC o en un SmartPhone. Aunque esto no es posible de momento en Visual Studio 2005, s que es posible coger una aplicacin de una plataforma, y convertirla a otra plataforma distinta. Por ejemplo, vamos a cambiar la aplicacin que hemos creado para ejecutarla en un SmartPhone. Para ello, seleccionamos la opcin Cambiar plataforma destino del men Proyecto. A continuacin aparece una ventana en la que podemos seleccionar la nueva plataforma, en nuestro caso Windows Mobile 5.0 Smartphone SDK.
23
Mobile
Figura 26 Cambio de plataforma de destino
Para poder hacer efectivo el cambio, Visual Studio nos avisa de que es necesario cerrar y volver a abrir el proyecto. Si aceptamos, el proyecto se vuelve a cargar, modificando todos los formularios de Pocket PC a SmartPhone:
Figura 27 Cambio de plataforma a SmartPhone
Aparentemente todo esta correcto, aunque el texto del botn saludar ha desaparecido, y en cambio ha aparecido un icono de advertencia. Si intentamos ejecutar la aplicacin, aparece un error al intentar crear un objeto de tipo Button. El motivo es que los dispositivos SmartPhone no tienen pantalla tctil y por lo tanto no tiene sentido el control Button. En cambio s que se pueden utilizar los botones de accin del telfono (los dos botones que accionan los mens que aparecen en la parte inferior de la pantalla del dispositivo). Podemos definir un men contextual completo fcilmente, de forma similar a como se crean los mens de las aplicaciones convencionales. Pulsamos encima de la barra inferior y a continuacin aparecen las diferentes posiciones en las que podemos escribir opciones de men. En nuestro caso cambiamos el nombre del men por Saludar. Ahora slo falta enlazar el evento del accionar el men, con el evento del botn que hemos quitado. Para ello seleccionamos el men Saludar, y en la ventana de propiedades asignamos el mtodo saludar_Click al evento Click correspondiente.
24
Mobile
Figura 28 Asociar el mtodo de gestin del evento al botn del men
Ya podemos compilar y ejecutar la aplicacin. En el emulador de SmartPhone podemos utilizar las teclas del telfono mvil (pulsando sobre ellas con el ratn) para introducir texto, movernos por la interfaz grfica, o seleccionar opciones de los mens de la parte inferior:
Figura 29 Aplicacin ejecutndose en el emulador de SmartPhone
2.2.- Formularios de WinForms para dispositivos moviles En este subapartado hablaremos de las caractersticas y funcionalidades de los formularios en dispositivos mviles.
Caracteristicas de los formularios Los formularios, representados por la clase Form, son el componente principal de una aplicacin WinForms. En las aplicaciones WinForms para PC, todas las ventanas tienen un comportamiento y aspecto similar. En
25
Mobile
cambio en las aplicaciones de WinForms para dispositivos mviles, el aspecto y funcionamiento de la ventana depende del tipo de dispositivo para el que est diseada la aplicacin. A continuacin veremos las caractersticas especficas de cada plataforma. Pocket PC El dispositivo Pocket PC permite interactuar con las aplicaciones mediante un lpiz digital utilizado a modo de ratn, por lo que la entrada de datos se produce mediante un teclado mostrado en pantalla o utilizando un componente de reconocimiento de caracteres (ver figura 30). Por otro lado, todas las ventanas tienen una barra inferior en la que se puede habilitar un men de opciones. Este men se puede expandir utilizando el lpiz digital o bien las teclas de accin del dispositivo (ver figura 30).
Figura 30 A la izquierda teclado en pantalla. A la derecha men de la ventana
En la parte superior de la ventana hay una barra de estado con el ttulo de la ventana y una serie de iconos de notificacin, indicando parmetros como el volumen, la hora o la cantidad de batera disponible. A la derecha del todo, hay un icono que permite ocultar la ventana. Este icono puede ser o . En el primer caso, al pulsar sobre este botn la ventana se minimiza pero la aplicacin se sigue ejecutando en segundo plano. En el segundo caso se cierra la ventana, y finaliza la ejecucin de la aplicacin si la ventana que se cierra es la ventana principal. El tipo de botn que aparece se puede especificar mediante la propiedad MinimizeBox del formulario como veremos ms adelante. Tambin se puede quitar este botn mediante la propiedad ControlBox. SmartPhone Los dispositivos SmartPhone en general, no disponen de pantalla tctil, por lo que la interaccin con el usuario se realiza mediante los botones del telfono. Por ejemplo para utilizar los mens de la barra inferior de la ventana utilizamos
26
Mobile
las teclas de accin para abrir, y el nmero indicado a la izquierda del men o las teclas del cursor y la tecla de seleccin para escoger una opcin:
Teclas de accin Tecla de inicio
Tecla atrs Tecla de seleccin Teclas del cursor Tecla cancelar
Figura 31 Teclas de interaccin de un SmartPhone
En la parte superior de la ventana aparece tambin una barra de informacin con el ttulo de la ventana y algunos iconos que indican por ejemplo el estado de la batera y la cobertura. Sin embargo, esta barra de informacin no tiene icono para cerrar la ventana, sta puede cerrarse al pulsar la tecla de inicio o la tecla de cancelar (ver figura 31), aunque solamente se minimiza porque sigue ejecutndose en segundo plano. Para cerrar la ventana y/o la aplicacin es necesario aadir una opcin adicional en el programa que lo permita, por ejemplo en una opcin de men.
Creacin de formularios Existen dos formas de crear un formulario. La primera consiste en crear una instancia de la clase Form, y aadir los correspondientes controles a la coleccin Controls correspondiente. Esta coleccin almacena todos los controles incluidos en el formulario:
Form f = new Form(); Button b = new Button(); b.Text = "Aceptar"; f.Controls.Add(b);
Ejemplo 3 Creacin de un formulario
El formulario resultante del cdigo anterior es el que se muestra en la figura 32.
27
Mobile
Figura 32 Formulario resultado del
Ejemplo 3
Para posicionar los controles dentro del formulario y modificar su tamao, sera necesario modificar las propiedades Location y Size respectivamente de los controles insertados (veremos todas las propiedades de los controles en el apartado de utilizacin de los controles de WinForms). El problema que tiene esta forma de crear los formularios es que no es posible reutilizar el formulario creado en otro punto de la aplicacin o en otra aplicacin distinta. Por otro lado, es complicado situar manualmente los controles de forma que queden alineados correctamente, aparte de que en interfaces grficas complejas con multitud de controles, aumenta considerablemente la complejidad y el nmero de instrucciones necesarias, de forma que el proceso es ms costoso y se pueden producir ms errores. Para solucionar el primer problema (el de la reutilizacin), existe otra forma de crear formularios, que consiste en crear una clase que herede de la clase Form. Para definir la estructura de los componentes de la interfaz del nuevo formulario, se debe implementar el mtodo InitializeComponent, que se ejecuta al crear una instancia del formulario. Para el segundo problema (la complejidad de implementar las interfaces grficas manualmente), existen herramientas que permiten disear visualmente la interfaz y generar automticamente el cdigo necesario para crear la interfaz diseada, como por ejemplo el diseador de formularios de Visual Studio. Con Visual Studio podemos aadir formularios nuevos al proyecto mediante la opcin Windows Forms del submen Agregar dentro del men contextual del elemento del proyecto en el explorador de soluciones, o la opcin Agregar Windows Forms del men Proyecto. Una vez creado el formulario se abre el diseador de formularios que nos permite disear la interfaz grfica visualmente (ver figura 33). Como se puede ver, el diseador de formularios para dispositivos mviles se adapta automticamente al tipo de dispositivo para el que se est desarrollando la aplicacin, mostrando incluso el contorno del dispositivo. Podemos abrir este diseador
28
Mobile
para un formulario en concreto haciendo doble-clic encima del elemento que representa el formulario en la ventana del explorador de soluciones. En el explorador de soluciones los formularios se pueden distinguir del resto de elementos por el icono asociado (ver figura 34). Adems el elemento correspondiente al formulario se puede expandir, dejando ver otros dos ficheros que forman parte de la definicin del formulario, uno de ellos con extensin .Designer.cs, y el otro con extensin .resx.
Figura 33 Diseador de formularios (adaptado para Pocket PC)
Figura 34 Explorador de soluciones
El fichero con extensin .Designer.cs contiene todo el cdigo fuente del formulario generado automticamente por el diseador de formularios. Visual Studio utiliza un tipo parcial para dividir el cdigo fuente de la clase del formulario en dos, la parte generada automticamente, y la que introduce el desarrollador para gestionar los eventos de los componentes de la ventana. El cdigo que genera la interfaz grfica se implementa dentro del mtodo InitializeComponent, que es llamado desde el constructor de la clase. Una vez abierto el diseador de formularios, la barra de herramientas se adapta, presentando los controles especficos disponibles para aplicaciones WinForms para dispositivos mviles. Podemos aadir controles al formulario seleccionando el control deseado en la barra de herramientas y arrastrn-
29
Mobile
dolo hacia la zona en blanco del formulario, como se puede ver en la siguiente figura:
Figura 35 Agregar controles al diseador de formularios desde la barra de herramientas
Al mover controles por el formulario el diseador muestra unas lneas que permiten alinear el componente con el resto de controles del formulario (ver figura 36). Para modificar las propiedades de los componentes que aadimos al formulario se utiliza la ventana de propiedades (ver figura 36).
Figura 36 A la izquierda alineacin de controles. A la derecha ventana de propiedades
Tambin podemos realizar algunas operaciones con los controles del formulario mediante las opciones del men contextual de cada uno de ellos, como por ejemplo definir el orden de los controles que se solapan mediante las opciones Traer al frente o Enviar al fondo. Algunos controles no se visualizan en la interfaz grfica directamente aunque intervienen en ella de alguna forma. Estos controles no visibles se muestran en la parte inferior del diseador de formularios:
Figura 37 Componentes no visibles
30
Mobile
Una vez colocados los controles de la interfaz, deberemos definir las acciones a realizar cuando el usuario interacta con esos controles, por ejemplo qu pasa cuando el usuario pulsa sobre un botn, o cuando selecciona un elemento de una lista. Para definir estas acciones a realizar, WinForms utiliza el mecanismo de eventos de .NET. Cada posible accin del usuario sobre un control o sobre el formulario produce un evento. El desarrollador puede crear un mtodo que gestione el evento para realizar una determinada accin en caso de que se produzca. Si no hay ningn mtodo que gestione un evento determinado, la accin del usuario que provoca ese evento no obtendr respuesta. Por ejemplo si el usuario hace clic sobre un campo de texto pero para este campo de texto no se ha escrito ningn mtodo que gestione el evento Click, no se ejecutar ninguna accin. Para aadir mtodos de gestin para un evento del formulario o de uno de sus controles, podemos utilizar la ventana de propiedades del diseador de formularios. Para ello, seleccionamos el formulario o control para el que queremos gestionar un evento, y en la ventana de propiedades pulsamos sobre el botn que tiene el dibujo de un rayo, para cambiar a la lista de eventos disponibles para el control. Para aadir un mtodo de gestin de uno de los eventos, por ejemplo el evento Click, hacemos doble-clic encima de ese evento en la lista.
Figura 38 Lista de eventos disponibles
Automticamente Visual Studio crear un nuevo mtodo con la signatura adecuada para gestionar ese evento y lo registrar como observador de ese evento para el control o formulario que hubisemos seleccionado. El siguiente paso consiste en especificar la accin a realizar cuando se produzca el evento dentro del mtodo de gestin, tal y como se muestra en el
private void Form1_Click(object sender, EventArgs e) { // este cdigo no se genera automticamente, es el // cdigo que aade el desarrollador para definir las // acciones que se han de llevar a cabo al producirse // el evento // Visual Studio solamente crea la cabecera del mtodo MessageBox.Show("Hola"); }
Ejemplo 4 Mtodo de gestin del evento Click del formulario
31
Mobile
Propiedades, eventos y mtodos de los formularios A continuacin repasaremos los miembros ms relevantes de la clase Form para dispositivos Pocket PC y SmartPhone. Las propiedades y eventos se pueden modificar desde la ventana de propiedades cuando el diseador de formularios est abierto, y los mtodos se pueden utilizar en cualquier punto de la aplicacin que sea necesario. Propiedades La clase Form contiene, entre otras, las siguientes propiedades: Name Indica el nombre del formulario. Es equivalente al nombre de la clase, es decir, al modificar esta propiedad se modifica tambin el nombre de la clase y viceversa AutoScroll Indica si se muestran las barras de desplazamiento cuando hay controles fuera del espacio de la ventana BackColor Permite establecer el color de fondo del formulario. Los colores se representan mediante la clase Color del namespace System.Drawing, que veremos ms adelante ContextMenu Mediante esta propiedad es posible establecer un men contextual que aparece al mantener presionado el lpiz digital sobre un elemento durante un breve lapso de tiempo. Esta propiedad no est disponible para formularios de SmartPhone. ControlBox Indica si aparece el icono de cerrar la ventana en la esquina superior derecha del formulario Esta propiedad no est disponible para formularios de SmartPhone. Controls Es la lista de controles incluidos en el formulario. Permite aadir o eliminar controles del formulario Font Permite especificar una fuente para el texto del formulario. Para establecer o consultar el valor de esta propiedad se utiliza la clase Font del namespace System.Drawing que veremos ms adelante ForeColor Icon Permite establecer el color del texto del formulario Permite indicar el icono que se muestra en la barra de informacin de la ventana
32
Mobile
Location
Indica la posicin de la esquina superior izquierda del formulario. Esta propiedad no est disponible para formularios de SmartPhone.
Locked
Si esta propiedad es true, no es posible modificar el tamao ni la posicin de la ventana (propiedades Location y Size respectivamente).
Menu
Permite asociar un men a la ventana. El men aparece en la parte inferior de la ventana
MinimizeBox Indica si se muestra el icono de minimizar o de cerrar la ventana. Esta propiedad no est disponible para formularios de SmartPhone. Size Permite modificar el tamao de la ventana mediante la clase Size del namespace System.Drawing que veremos ms adelante Skin Indica si se muestra el contorno del dispositivo en el diseador de formularios de Visual Studio o no Text Permite indicar el titulo que se muestra en la barra de informacin de la ventana ToolBar Permite asignar una barra de herramientas a la ventana. Esta propiedad no est disponible para formularios de SmartPhone. TopMost Indica si la ventana est por encima del resto de ventanas
Se recomienda realizar la actividad 1 de la pgina 81 antes de continuar
Eventos La clase Form provoca los siguientes eventos: Activated Click Se lanza este evento cuando el formulario est activo Se lanza al pulsar con el lpiz digital en el formulario. Este evento no est disponible para formularios de SmartPhone. Closed Se lanza cuando el formulario est cerrado
33
Mobile
Closing Deactivate
Se lanza cuando el formulario se est cerrando Se lanza cuando el formulario no est activo
DoubleClick Se lanza al pulsar dos veces seguidas en el formulario con el lpiz digital. Este evento no est disponible para formularios de SmartPhone. GotFocus KeyDown KeyPress Se lanza cuando el formulario recibe el foco Se lanza al pulsar alguna de las teclas del dispositivo. Se lanza despus de haber pulsado y liberado alguna de las teclas del dispositivo KeyUp Load Se lanza al liberar alguna de las teclas del dispositivo Se lanza cuando se ha cargado la ventana, justo antes de mostrarla al usuario LostFocus MouseDown Se lanza cuando el formulario pierde el foco Se lanza al pulsar con el lpiz digital en la pantalla tctil. Este evento no est disponible para formularios de SmartPhone. MouseMove Se lanza al arrastrar el lpiz digital por la pantalla del dispositivo. Este evento no est disponible para formularios de SmartPhone. MouseUp Se lanza al levantar el lpiz digital de la pantalla tctil. Este evento no est disponible para formularios de SmartPhone. Paint Se lanza cuando se repinta la ventana.
En los eventos de teclado KeyDown, KeyPress y KeyUp, es posible comprobar que tecla se ha pulsado mediante la propiedad KeyCode del parmetro de tipo KeyEventArgs del mtodo de gestin del evento. El valor de esta propiedad es el cdigo de la tecla que se ha pulsado, que se puede comparar con los diferentes elementos de la enumeracin Keys para discernir la tecla pulsada.
Se recomienda realizar la actividad 2 de la pgina 81 antes de continuar
34
Mobile
Mtodos La clase Form dispone de los siguientes mtodos: Activate BringToFront Activa el formulario, y le proporciona el foco Coloca el formulario por delante del resto de formularios Close Focus Hide Invalidate Cierra el formulario Otorga el control del foco al formulario Oculta el formulario, pero no lo cierra Invalida una regin del formulario de forma que se obliga a repintar esa zona. Refresh Obliga a invalidar todo el formulario, de forma que se repinta todo su contenido. SendToBack Show ShowDialog Enva el formulario detrs del resto de formularios Muestra el formulario al usuario Muestra el formulario como un cuadro de dilogo, es decir, el resto de ventanas de la aplicacin se bloquean hasta que sta se cierra. Update Hace que se vuelvan a repintar las regiones no vlidas del formulario.
Se recomienda realizar la actividad 3actividad 2 de la pgina 81 antes de continuar
Utilizacin de formularios Las aplicaciones WinForms tienen siempre un formulario principal que es el que se muestra al iniciar la aplicacin. Si se cierra este formulario, se finaliza la aplicacin. Para crear un formulario y establecerlo como formulario principal de la aplicacin es necesario utilizar la clase Application.
35
Mobile
La clase Application proporciona mtodos estticos para controlar una aplicacin de WinForms. En el .NET CF esta clase soporta solamente dos de los mtodos principales: Run Inicializa un contexto de aplicacin y establece el formulario indicado como parmetro como formulario principal de la aplicacin. Exit Finaliza la ejecucin de la aplicacin, cerrando todos los formularios abiertos de la aplicacin, incluido el formulario principal. Al crear un proyecto de WinForms con Visual Studio, se crea la clase Program.cs con el programa principal Main en el que utiliza la clase Application para iniciar la aplicacin con el formulario principal:
Application.Run(new Form1());
Ejemplo 5 Inicializacin de la aplicacin WinForms con una nueva instancia del formulario Form1
Al cerrar el formulario principal la clase Application lo detecta automticamente y finaliza la aplicacin. Para cerrar la aplicacin manualmente, por ejemplo mediante alguna opcin de men, podemos utilizar el mtodo Exit:
Application.Exit();
Ejemplo 6 Finalizacin de la aplicacin WinForms
Aparte del formulario principal, las aplicaciones WinForms pueden tener otros formularios secundarios, accesibles desde la aplicacin mediante alguna opcin del formulario principal o de otro formulario secundario. Disponer de varios formularios secundarios permite distribuir mejor las funcionalidades de la aplicacin en vez de colocar toda la informacin en el formulario principal. Para mostrar un formulario secundario por pantalla en primer lugar creamos una instancia del formulario y a continuacin llamamos al mtodo Show o ShowDialog, dependiendo de si queremos que el formulario que vamos a abrir bloquee o no al resto de formularios de la aplicacin. El mtodo ShowDialog se suele utilizar para abrir formularios que ofrecen o solicitan una serie de informacin del usuario, como por ejemplo una ventana de opciones de configuracin, un mensaje, una pregunta, etc. La ejecucin del mtodo ShowDialog devuelve un valor de la enumeracin DialogResult, correspondiente a la accin seleccionada al cerrar el cuadro de dilogo , por ejemplo Aceptar, Cancelar, Si, No, etc. El ejemplo 7 muestra como mostrar un formulario con el mtodo ShowDialog y realizar una determinada accin en funcin del valor de DialogResult:
36
Mobile
Form1 f = new Form1(); DialogResult d = f.ShowDialog(); if (DialogResult.OK == d) { // Accion si se ha pulsado OK } else if (DialogResult.Cancel == d) { // Accion si se ha pulsado Cancelar }
Ejemplo 7 Comprobacin del DialogResult resultado de llamar al mtodo ShowDialog
El valor que se devuelve se puede establecer mediante la propiedad especial DialogResult del formulario, por ejemplo, el siguiente ejemplo muestra como asignar el valor OK a la propiedad DialogResult antes de cerrar la ventana en el evento Closing:
private void Form1_Closing(object sender, CancelEventArgs e) { this.DialogResult = DialogResult.OK; }
Ejemplo 8 Asignacin de un valor a la propiedad DialogResult del formulario antes de cerrarlo
En formularios de PocketPC es posible establecer el valor de DialogResult que se devuelve en funcin del botn que pulsa el usuario, siguiendo los siguientes pasos: 1.- Deberemos tener un botn para cada opcin disponible, por ejemplo uno para Aceptar y otro para Cancelar. 2.- Los botones tambin tienen una propiedad DialogResult que podemos establecer para estos botones, respectivamente DialogResult.Accept y DialogResult.Cancel. 3.- Al pulsar sobre cualquiera de los dos botones deberemos cerrar la ventana mediante el mtodo Close (los formularios del .NET CF no soportan las propiedades AcceptButton ni CancelButton que permiten cerrar automticamente la ventana al pulsar uno de los dos botones indicados por estas propiedades) 4.- Automticamente se devuelve el valor del DialogResult asociado al botn que se haya pulsado.
37
Mobile
Cuadros de dilogo Los cuadros de dilogo son tambin formularios, aunque se utilizan puntualmente para mostrar un mensaje al usuario o pedirle que seleccione o introduzca un determinado dato. Dentro del namespace de WinForms existen algunos cuadros de dilogo predefinidos que permiten realizar tareas comunes. CommonDialog Es una clase base a partir de la cual se pueden crear otros cuadros de dilogo FileDialog Muestra un cuadro de dilogo en el que el usuario puede seleccionar un archivo. Es una clase abstracta que sirve de base para las clases OpenFileDialog y SaveFileDialog. OpenFileDialog Muestra un cuadro de dilogo en el que el usuario puede seleccionar un archivo para abrir. SaveFileDialog Muestra un cuadro de dilogo en el que el usuario puede seleccionar un archivo para grabar. MessageBox Muestra un mensaje al usuario y permite seleccionar una accin a realizar. Los cuadros de dilogo no estn disponibles para SmartPhone. Estos dilogos tienen una serie de propiedades que permiten inicializarlos y recuperar la seleccin del usuario: FileName devuelve el nombre del fichero seleccionado por el usuario InitialDirectory permite establecer el directorio que se muestra inicialmente en el dilogo Filter permite establecer un filtro de ficheros de modo que solamente se muestren los ficheros que cumplen con el patrn indicado No obstante, debido a ciertas restricciones de diseo, los cuadros de dilogo de seleccin de ficheros solo permiten inspeccionar carpetas que se encuentren dentro de la carpeta My documents del dispositivo. Para acceder al resto del sistema de ficheros del dispositivo es necesario utilizar un componente personalizado. El ejemplo 9 muestra un cuadro de dilogo para abrir un fichero de imagen, iniciando en el directorio My Pictures
OpenFileDialog ofd = new OpenFileDialog(); ofd.Filter = "Imagenes (*.BMP;*.JPG;*.GIF)" + "|*.BMP;*.JPG;*.GIF|Todos los ficheros (*.*)|*.*"; ofd.InitialDirectory = "My Pictures";
38
Mobile
if (ofd.ShowDialog() == DialogResult.OK) { string file = ofd.FileName; }

Ejemplo 9 Asignacin de un valor a la propiedad DialogResult del formulario antes de cerrarlo
El cuadro de dilogo creado por el cdigo del ejemplo anterior tiene el siguiente aspecto:
Figura 39 Cuadro de dilogo seleccin de fichero
En cuanto al cuadro de dilogo MessageBox, contiene el mtodo esttico Show que permite especificar el tipo de mensaje que se muestra al usuario. La signatura del mtodo Show es la siguiente:
Show (mensaje, titulo, botones, icono, boton_por_defecto)
El mensaje y el titulo son el mensaje que se quiere mostrar al usuario y el titulo de la ventana de mensaje respectivamente. Los botones se indican mediante la enumeracin MessageBoxButtons, que tiene varios valores posibles, por ejemplo OK, OKCancel, YesNoCancel, etc. Para SmartPhone solamente acepta los valores de esta enumeracin con dos opciones, es decir, los valores YesNoCancel y AbortRetryIgnore no estn permitidos. El icono del dilogo se especifica mediante otra enumeracin, en este caso MessageBoxIcon, cuyos valores posibles son: Asterisk, Exclamation, Hand, None y Question. Cada uno de ellos corresponde con un icono distinto que indica el motivo del mensaje (alerta, informacin, error o pregunta). Por ltimo, el botn por defecto se especifica mediante la enumeracin MessageBoxDefaultButton, que contiene tres valores: Button1, Button2 y Button3, correspondientes a los botones seleccionados mediante la enumeracin MessageBoxButtons. El siguiente ejemplo muestra como mostrar un mensaje con el icono de alerta (triangulo amarillo) con tres botones Yes, No y Cancel:
MessageBox.Show("Mensaje", "Titulo", MessageBoxButtons.YesNoCancel, MessageBoxIcon.Exclamation, MessageBoxDefaultButton.Button1);
Ejemplo 10 Creacin de un cuadro de dilogo MessageBox
39
Mobile
El aspecto del cuadro de dilogo MessageBox en Pocket PC tiene el aspecto que se muestra en la siguiente figura. Los iconos mostrados corresponden con los valores de la enumeracin MessageBoxIcon en orden (Asterisk, Exclamation, Hand, None y Question):
Figura 40 Apariencia del cuadro de dilogo MessageBox en PocketPC
En SmartPhone el aspecto de este cuadro de dilogo es bastante diferente. En la siguiente imagen se muestran los dilogos MessageBox equivalentes a los anteriores pero para SmartPhone (y especificando YesNo como botones del dilogo, ya que el MessageBox de SmartPhone no acepta tres botones):
Figura 41 Apariencia del cuadro de dilogo MessageBox en SmartPhone
2.3.- Utilizacin de los controles de WinForms En este subapartado veremos cmo utilizar los controles de WinForms disponibles para dispositivos mviles.
Caractersticas comunes de los controles Todos los controles de WinForms heredan directa o indirectamente de la clase Control. Esta clase soporta solamente un subconjunto de los mtodos, propiedades y eventos de su homloga en el .NET framework completo, tal y
40
Mobile
como veremos a continuacin. Podemos utilizar los controles de dos formas, manualmente o utilizando el diseador de formularios de Visual Studio. La forma manual consiste en crear una instancia de la clase que representa el control que se quiere insertar en el formulario, modificar las propiedades que sean imprescindibles (como por ejemplo la localizacin y el tamao), u otras propiedades que permiten darle formato al control (como por ejemplo el color de fondo o la fuente del texto), y aadir la instancia a la lista de controles del formulario o de otro control, representada por la propiedad Controls de la clase Form o de la clase Control respectivamente. Los controles que permiten insertar otros controles en su interior se denominan contenedores. Tambin es posible gestionar los eventos provocados por ese control, aadiendo observadores y mtodos de gestin del evento manualmente. El siguiente ejemplo muestra cmo crear un botn situado en la posicin (10,20) con tamao 40x20 y con el fondo de color verde claro, que al pulsarlo muestra el mensaje "Hola":
Form f = new Form(); Button b = new Button(); b.Text = "OK"; b.Location = new Point(10, 20); b.Size = new Size (40, 20); b.BackColor = Color.LightGreen; b.Click += new EventHandler(b_Click); f.Controls.Add(b); ... static void b_Click(object sender, EventArgs e) { MessageBox.Show("Hola"); }
Ejemplo 11 Insercin de un control a un formulario
Con Visual Studio todo el cdigo anterior se genera automticamente al aadir el botn al formulario en el diseador de formularios, modificar sus propiedades en la ventana de propiedades y aadir mtodos de gestin de eventos tambin desde la ventana de propiedades, como vimos en el apartado de utilizacin de formularios. Antes de ver los diferentes controles disponibles para dispositivos mviles, veremos los miembros ms importantes disponibles en la clase Control del .NET CF. El resto de controles del .NET CF heredan estos miembros de la clase Control, aunque no siempre implementan su funcionalidad por diferentes motivos de rendimiento. Del mismo modo, los controles personalizados que heredan directamente de la clase Control tambin heredan estos miembros.
41
Mobile
Propiedades La clase Control tiene entre otras las siguientes propiedades: Anchor permite enlazar el control con los bordes del contenedor en el que est ubicado, de forma que se mueve o se modifica su tamao al cambiar la posicin o el tamao del contenedor. En la ventana de propiedades de Visual Studio se muestran los bordes a los que esta enlazado el control, y se puede modificar fcilmente la seleccin pulsando en la propiedad correspondiente y seleccionando los bordes deseados en el componente visual que aparece como se muestra en la siguiente figura:
Figura 42 Seleccin de los enlaces del control a los bordes del contenedor
Como ejemplo tenemos un botn dentro de un objeto Panel, como se puede ver en el primer dibujo de la Figura 43. Enlazamos el botn al borde superior (Top) e inferior (Bottom) solamente, mediante la propiedad Anchor. Al modificar la altura del objeto Panel vemos como se modifica la altura del botn para que las distancias entre los bordes superior e inferior del botn y los del panel se mantengan (dibujo central de la Figura 43). En cambio si modificamos el ancho del objeto Panel, el botn se mueve para mantener la proporcin de espacio entre el borde izquierdo y el derecho (dibujo de la derecha de la Figura 43).
Figura 43 Demostracin de la utilidad de la propiedad Anchor
42
Mobile
BackColor
permite establecer el color de fondo del control. Los colores se representan mediante la clase Color del namespace System.Drawing.
ClientSize
devuelve el tamao til del control (sin incluir bordes ni barras de desplazamiento). El tamao se devuelve mediante la clase Size del namespace System.Drawing.
ContextMenu Controls
permite asociar un men contextual al control es la coleccin de controles que se sitan dentro del control. A los controles que tienen otros controles en su interior se les denomina contenedores.
DataBindings
permite establecer o recuperar los enlaces de datos del control. Un enlace de datos o databinding es una asociacin entre una fuente de datos y una propiedad del control. Si el contenido de la fuente de datos se modifica, tambin se modifica el valor de la propiedad con la que est asociada.
Dock
permite acoplar el control a uno de los bordes de su contenedor. Los valores posibles para esta propiedad son: None, Top, Bottom, Left, Right o Fill. En la ventana de propiedades del diseador de formularios, al modificar el valor de esta propiedad, se abre un control que permite seleccionar uno de los valores anteriores:
Figura 44 Control de seleccin del valor de la propiedad Dock
En la Figura 45 se puede ver el efecto de aplicar uno u otro valor de dock a un botn dentro del formulario.
43
Mobile
None
Top
Bottom
Left
Right
Fill
Figura 45 Efecto de la propiedad Dock sobre un botn
Font
permite establecer la fuente del texto del control. Para establecer o consultar el valor de esta propiedad se utiliza la clase Font del namespace System.Drawing
ForeColor
permite establecer el color del texto del control mediante la clase Color del namespace System.Drawing permite establecer la localizacin del control respecto la esquina superior izquierda de su contenedor mediante la clase Point del namespace System.Drawing
Location
Name Parent Size
permite recuperar o establecer el nombre del control devuelve el contenedor del control permite establecer el tamao del control mediante la clase Size del namespace System.Drawing permite cambiar el texto mostrado dentro del control indica si el control se visualiza o no
Text Visible
44
Mobile
Eventos A continuacin comentamos los eventos ms importantes de la clase Control para dispositivos mviles. La gestin de los eventos de los controles es idntica a la de la gestin de los eventos del formulario, bien manualmente o bien mediante la ventana de propiedades del diseador de formularios. Click se produce al puntear la pantalla tctil con el lpiz digital DoubleClick se produce al puntear dos veces seguidas en el mismo punto de la pantalla tctil con el lpiz digital KeyDown KeyPress KeyUp MouseDown MouseMove MouseUp se produce al pulsar una tecla del dispositivo se produce al pulsar y soltar una tecla del dispositivo se produce al soltar una tecla del dispositivo se produce al poner el lpiz digital sobre la pantalla tctil se produce al mover el lpiz digital por la pantalla tctil se produce al levantar el lpiz digital de la pantalla tctil Paint Resize Mtodos BringToFront Focus Hide Invalidate Coloca el control por delante del resto de controles Otorga el control del foco al formulario Oculta el control de forma que no se muestre por pantalla Invalida una regin del control de forma que se obliga a repintar esa zona. Refresh Obliga a invalidar todo el formulario, de forma que se repinta todo su contenido. SendToBack Show Update Enva el control detrs del resto de controles Muestra el control al usuario Hace que se vuelvan a repintar las regiones no vlidas del control. se produce cuando es necesario repintar el control se produce cuando se cambia el tamao del control
45
Mobile
2.3.- Controles del .NET CF Una vez hemos visto las caractersticas comunes de los controles, heredadas de la clase Control, vamos a ver uno a uno los controles ms importantes de los disponibles en el .NET CF, y como utilizarlos dentro de una aplicacin de WinForms. Label y LinkLabel Las etiquetas sirven para mostrar informacin al usuario. El usuario no puede modificar directamente el texto de la etiqueta. La diferencia entre Label y LinkLabel es que LinkLabel permite que el usuario pulse encima de la etiqueta como si fuese un link de una pgina Web.
Figura 46 Controles Label y LinkLabel
La propiedad principal de las etiquetas es la propiedad Text, que permite establecer el mensaje mostrado. Otras propiedades interesantes son las que permiten dar formato al texto de la etiqueta: BackColor, ForeColor, Font, etc. En cuanto a eventos, solamente el LinkLabel proporciona el evento Click que se lanza cuando el usuario pulsa o selecciona la etiqueta correspondiente.
TextBox Los campos de texto sirven para que el usuario pueda modificar o insertar un valor determinado. La propiedad principal es la propiedad Text que permite establecer o recuperar el texto que se muestra en el control.
Figura 47 Control TextBox
El control TextBox contiene otras propiedades especficas, aparte de las heredadas de la clase Control: Multiline indica si el control acepta ms de una lnea de texto. Si se activa esta propiedad a true, es posible modificar la altura del control, sino solamente se puede modificar su anchura.
46
Mobile
PasswordChar
indica el carcter que se muestra en el campo de texto en vez del texto que introduce el usuario. Es til para campos de texto que requieran la introduccin de un password. indica si el contenido del campo de texto se puede modificar o no.
ReadOnly
El control TextBox soporta adems los eventos de teclado KeyDown, KeyUp y KeyPress, que permiten controlar los caracteres que inserta el usuario en el control.
Button Este control muestra un botn en la pantalla. La utilidad de los botones es realizar alguna accin cuando el usuario pulsa encima de ellos. Este control no est disponible en SmartPhone, ya que las pantallas de estos dispositivos no suelen ser tctiles, y por lo tanto no existe el concepto de pulsar sobre un botn de la ventana.
Figura 48 Control Button
La propiedades ms importantes son la propiedad Text, que permite establecer el texto que se muestra en el botn, y la propiedad DialogResult, que permite asociar al botn el valor de DialogResult correspondiente a la accin del botn. Como ya vimos en el apartado de utilizacin de formularios el valor de la propiedad DialogResult del ltimo botn pulsado se asigna a la propiedad DialogResult del formulario al cerrar ste, y se devuelve como resultado del mtodo ShowDialog en caso de que el formulario se hubiese mostrado mediante este mtodo. Finalmente, para ejecutar una accin al pulsar sobre el botn se utiliza el evento Click. Podemos configurar la gestin de este evento tanto desde la ventana de propiedades en la pestaa eventos, como haciendo doble-clic sobre el botn en el diseador de formularios. En ambos casos se crea un mtodo de gestin y se registra al evento del botn seleccionado.
47
Mobile
CheckBox y RadioButton Estos dos controles permiten seleccionar diferentes opciones. Los CheckBox permiten seleccionar ms se una de las opciones, mientras que los RadioButton solamente permiten escoger una de las opciones. Para SmartPhone el control RadioButton no est disponible.
Figura 49 Controles CheckBox (izquierda) y RadioButton (derecha)
Para comprobar si un CheckBox o un RadioButton estn seleccionados se utiliza la propiedad booleana Checked, que tambin permite seleccionar la correspondiente opcin desde el propio programa. El CheckBox adems incluye la propiedad CheckState con los valores: Unchecked, Checked y Indeterminate. El valor Unchecked equivale al valor false de la propiedad Check. Si la propiedad Check es true, el valor de CheckState puede ser Checked (seleccin normal) o Indeterminate (seleccin sombreada). Para poder utilizar el valor Indeterminate es necesario adems que la propiedad ThreeState tenga valor true. En la siguiente figura se muestra el efecto de cada uno de los valores de la propiedad CheckState:
Figura 50 Estados del control CheckBox. De arriba abajo: Unchecked, Checked y Indeterminate
Cuando hay ms de un RadioButton en un formulario es posible crear grupos de RadioButton de forma que solamente se pueda escoger una opcin entre los RadioButton que pertenecen a un mismo grupo, pero que se puedan escoger varias opciones de grupos distintos. Para configurar diferentes grupos basta con juntar los RadioButton de un mismo grupo dentro del mismo contenedor, por ejemplo dentro de un Panel (veremos un poco ms adelante este control):
Figura 51 Grupos de controles RadioButton. A la izquierda vista del diseador de formularios la derecha vista de la aplicacin ejecutndose en el emulador
48
Mobile
En cuanto a los eventos que soportan estos dos controles, los ms interesantes son el evento Click que se produce al pulsar encima del control, y los eventos CheckStateChanged (slo en la clase CheckBox) y CheckedChanged (slo en la clase RadioButtton) que se producen cuando se modifica el valor de la propiedad CheckState en un CheckBox o la propiedad Checked en un RadioButton respectivamente, ya sea porque el usuario ha pulsado sobre el control o bien porque se ha modificado su valor desde el propio programa.
ComboBox y ListBox Estos controles permiten mostrar listas de elementos que el usuario puede seleccionar. La diferencia bsica entre los dos es que el control ComboBox muestra los elementos en una lista desplegable, mientras que el control ListBox muestra una lista completa de todos los elementos. El control ListBox no est disponible en SmartPhone.
Figura 52 Controles ComboBox (izquierda) y ListBox (derecha)
Para especificar los elementos que se muestran en estos controles se pueden utilizar las propiedades Items y DataSource. La propiedad Items es una coleccin de elementos de tipo object. Los elementos se pueden especificar en tiempo de ejecucin directamente desde la ventana de propiedades como se muestra en la siguiente figura, o directamente desde el cdigo mediante el mtodo Add de la coleccin Items, como se puede ver en el ejemplo 12.
Figura 53 Al seleccionar la propiedad Items en la ventana de propiedades (izquierda) aparece una ventana para insertar las cadenas de caracteres a mostrar en la lista (derecha)
49
Mobile
b.Items.Add("Malaga");
Ejemplo 12 Aadir un nuevo elemento a la coleccin de elementos de un ComboBox o ListBox
Si se aaden objetos en vez de cadenas de caracteres a la coleccin Items, se utiliza el mtodo ToString para convertir estos objetos a string y mostrarlos en la lista. La segunda forma de insertar datos en estos controles es mediante la propiedad DataSource. A esta propiedad se le pueden asignar colecciones de objetos o incluso un DataSet con datos procedentes de bases de datos (veremos cmo enlazar con datos de bases de datos en el tema de acceso a datos). El siguiente ejemplo muestra como asignar a la propiedad DataSource una lista de instancias de la clase Persona:
Persona Persona Persona Persona p1 p2 p3 p4 = = = = new new new new Persona("Jose", "000000000"); Persona("Maria", "111111111"); Persona("Pablo", "222222222"); Persona("Rosa", "333333333");
ArrayList lp = new ArrayList(); lp.Add(p1); lp.Add(p2); lp.Add(p3); lp.Add(p4); b.DataSource = lp;

Ejemplo 13 Asignacin de un ArrayList de objetos Persona a la propiedad DataSource de un ComboBox o ListBox
Si ejecutamos el ejemplo anterior directamente, el control ComboBox o ListBox utilizar el mtodo ToString de la clase Persona para mostrar los elementos. Suponiendo que la clase Persona no implementa este mtodo, se ejecuta el que hereda de la clase object, y que devuelve un string con el nombre de la clase a la que pertenece la instancia:
Figura 54 Problema al mostrar instancias de clases que no tienen implementado el mtodo ToString
Para solucionar este problema tenemos dos soluciones. La primera consiste en implementar el mtodo ToString de forma que devuelva el nombre de la Persona para que estos aparezcan en la lista. La segunda opcin es establecer el valor de las propiedades DisplayMember y ValueMember, indicando el valor de cul de las propiedades de los objetos del DataSource debe utilizarse para mostrar el elemento en la lista o para recuperar el valor
50
Mobile
seleccionado actualmente en la lista. En el caso de la clase Persona podemos escoger por ejemplo utilizar la propiedad Nombre:
b.DisplayMember = "Nombre"; b.ValueMember = "Nombre";
Ejemplo 14 Asignacin de las propiedades DisplayMember y ValueMember de un ComboBox o ListBox
El resultado final en este caso es el esperado. De esta forma podemos crear otras listas en que se muestren otras propiedades aunque los elementos sean los mismos (sobrescribiendo el mtodo ToString los elementos se visualizaran de la misma forma en todas las listas):
Figura 55 Resultado al especificar un valor para la propiedad DisplayMember del control
Para consultar o establecer la posicin o el elemento actual seleccionado en un control ComboBox o ListBox se utilizan las propiedades SelectedIndex, SelectedItem o SelectedValue: SelectedIndex indica la posicin del elemento seleccionado dentro de la lista, empezando desde 0 para el primer elemento. SelectedItem devuelve la instancia correspondiente al elemento seleccionado SelectedValue devuelve el valor de la propiedad del elemento seleccionado indicada por ValueMember. Por ltimo, los eventos ms significativos de estos dos controles son SelectedIndexChanged y SelectedValueChanged, que se producen al modificarse los valores de las propiedades SelectedIndex y SelectedValue respectivamente. Estas propiedades se pueden modificar cuando el usuario selecciona un elemento en la lista, o bien desde el propio programa.
Se recomienda realizar la actividad 10 actividad 2de la pgina 83 antes de continuar
51
Mobile
Panel La clase Panel representa un contenedor que permite incluir otros controles en su interior. Se utiliza para organizar los controles dentro de la ventana. Tambin se puede utilizar para crear controles personalizados ya que es uno de los nicos controles de WinForms para .NET CF que soporta el evento Paint heredado de la clase Control, y utilizado para pintar contenido personalizado.
Figura 56 Utilizacin de objetos Panel para organizar los controles del formulario
Splitter La clase Splitter permite dividir una zona de la pantalla en dos, de forma que el usuario puede modificar el tamao de cada una de las dos partes mediante la lnea que las separa. Este control no est disponible para SmartPhone. Por ejemplo, para separar el formulario en dos zonas horizontales, aadimos en primer lugar un objeto Panel al diseador de formularios, y lo acoplamos a la parte superior de la pantalla mediante la propiedad Dock. A continuacin aadimos un componente de tipo Splitter. Por defecto este control se acopla al margen izquierdo pero podemos cambiar la propiedad Dock para que se ajuste a la parte superior, colocndose justo por debajo del objeto Panel. Finalmente aadimos un nuevo Panel al formulario y le asignamos el valor Fill a la propiedad Dock para que ocupe el resto de la ventana:
Figura 57 Insercin de dos paneles y un Splitter de separacin entre ellos
52
Mobile
Podemos modificar el grosor de la lnea divisoria del Splitter, bien modificando directamente su tamao en el diseador de formularios o mediante la propiedad Size. Tambin podemos especificar un tamao mnimo para cada una de las zonas que separa el Splitter mediante las propiedades MinExtra (tamao mnimo de la zona no acoplada con el Splitter) y MinSize (tamao mnimo de la zona acoplada al Splitter). Si aadimos algunos controles a cada uno de los objetos Panel de cada lado del Splitter y ejecutamos la aplicacin, podemos ver el efecto:
Figura 58 De izquierda a derecha: 1.- posicin inicial, 2.- movimiento del Splitter hacia arriba, 3.movimiento del Splitter hacia abajo
TabControl La clase TabControl es un componente que permite mostrar diferentes paneles superpuestos para organizar mejor los controles por categoras. Para pasar de un panel a otro se utilizan las pestaas del TabControl. Este componente no est disponible para SmartPhone:
Figura 59 Control TabControl
Para aadir pestaas nuevas o eliminar alguna de las existentes pulsamos con el botn secundario del ratn encima de la barra inferior del control (en la que se muestran las pestaas), y seleccionamos la opcin Agregar ficha o Quitar ficha respectivamente. Para modificar el nombre de la pestaa modificamos la correspondiente propiedad Text.
53
Mobile
Podemos aadir controles a las diferentes fichas del mismo modo en que aadimos controles al formulario o a un objeto Panel. Para aadir un control a una de las fichas es necesario que su correspondiente pestaa est seleccionada.
Figura 60 Aadir controles a las fichas de un TabControl
Para consultar o establecer la ficha mostrada por un componente en un momento dado se utiliza la propiedad SelectedIndex. Si se modifica esta propiedad, ya sea porque el usuario selecciona una pestaa o porque se modifica su valor desde el propio programa, se provoca el evento SelectedIndexChanged.
Se recomienda realizar la actividad 11 actividad 2de la pgina 83 antes de continuar
HScrollBar y VScrollBar Estos dos controles permiten mostrar una barra de desplazamiento horizontal o vertical respectivamente. Si la propiedad AutoScroll del formulario o de un contenedor tiene valor true aparecen estos dos componentes automticamente si hay controles que sobresalen del tamao de la ventana.
Figura 61 Aparicin automtica de las barras de desplazamiento
Aunque generalmente la utilidad principal de estos controles es la de permitir realizar scroll del contenido de un contenedor de forma automtica, tambin es posible aadir y utilizar explcitamente estos controles en el formulario.
54
Mobile
Para definir el comportamiento de las barras de desplazamiento las clases HScrollBar y VScrollBar tienen las siguientes propiedades: LargeChange indica el incremento en la posicin de la barra que se produce al pulsar en la parte interior de la barra de desplazamiento SmallChange indica el incremento en la posicin de la barra que se produce al pulsar en las flechas de los extremos de la barra de desplazamiento Value Minimum indica la posicin actual de la barra de desplazamiento indica el valor de la propiedad Value cuando la barra de desplazamiento est al principio (a la izquierda en HScrollBar y arriba en VScrollBar) Maximum indica el valor de la propiedad Value cuando la barra de desplazamiento est al final (a la derecha en HScrollBar y abajo en VScrollBar) Adems, cada vez que se modifica la posicin de la barra de desplazamiento (es decir se modifica la propiedad Value), se produce el evento ValueChanged. PictureBox El control PictureBox permite mostrar una imagen en su interior. Para establecer la imagen que muestra el control modificamos la propiedad Image correspondiente, bien desde el diseador de formularios, seleccionando la imagen mediante un dilogo de seleccin de ficheros, o bien desde el propio programa como muestra el ejemplo siguiente:
pictureBox1.Image = new Bitmap("fichero.jpg");
Ejemplo 15 Asignacin de una imagen a la propiedad Image de un PictureBox desde un fichero
La propiedad Image del PictureBox es de tipo Image (clase perteneciente al namespace System.Drawing), que es una clase abstracta, por lo que utilizamos alguna de sus subclases para crear una instancia, en el ejemplo anterior la clase Bitmap. En vez de especificar directamente el nombre del fichero (con lo que es necesario incluir el fichero con el programa), es posible utilizar el archivo de recursos del formulario para almacenar la imagen y asignar la imagen desde este archivo a la propiedad Image (as es como lo hace el diseador de formularios):
// recupera el archivo de recursos del formulario
System.ComponentModel.ComponentResourceManager resources = new System.ComponentModel.ComponentResourceManager(typeof(Form1));
55
Mobile
// obtiene la imagen del archivo de recursos y la asigna // a la propiedad Image del PictureBox
pictureBox1.Image = ((System.Drawing.Image)(resources.GetObject("pictureBox1.Image"))); Ejemplo 16 Asignacin de una imagen a la propiedad Image de un PictureBox desde el archivo de recursos del formulario
Para que las instrucciones anteriores funcionen, es necesario incluir el objeto pictureBox1.Image en el archive de recursos Form1.resx que se puede visualizar en el explorador de soluciones expandiendo el elemento Form.cs. Si pulsamos con el botn secundario del ratn encima del elemento Form1.resx y seleccionamos la opcin Ver cdigo, veremos el cdigo XML correspondiente al archivo de recursos. Una de las entradas de este archivo debe incluir el cdigo binario de la imagen, como se muestra en la siguiente figura:
Figura 62 Cdigo binario de la imagen dentro del fichero de recursos del formulario
Ms informacin sobre los archivos de recursos en la siguiente direccin Web: http://msdn2.microsoft.com/en-us/library/f45fce5x(VS.80).aspx Una vez asignada la imagen que se va a mostrar, podemos ajustarla al tamao del control mediante la propiedad SizeMode. Esta propiedad admite tres valores posibles: Normal (La imagen se muestra en su tamao original, coincidiendo la coordenada (0,0) de la imagen y del control), StretchImage (La imagen se agranda para ocupar todo el tamao del control), CenterImage (La imagen se muestra en su tamao original, centrada respecto al control).
Figura 63 Efecto de los diferentes valores de la propiedad SizeMode
Se recomienda realizar la actividad 12 actividad 11actividad 2de la pgina 84 antes de continuar
56
Mobile
ImageList La clase ImageList permite almacenar una serie de imgenes en tiempo de compilacin que despus se pueden utilizar en otros controles de la ventana en tiempo de ejecucin. Este control no est disponible para SmartPhone. El control ImageList no tiene representacin grfica dentro del formulario por lo que se muestra en la parte inferior del diseador de formularios.
Figura 64 El control ImageList aparece en la parte inferior del diseador de formularios
Para aadir imgenes al control ImageList utilizamos la propiedad Images de ste. Al seleccionar esta propiedad en la ventana de propiedades, aparece una ventana en la que podemos aadir, modificar o quitar imgenes del control:
Figura 65 Ventana de edicin de la propiedad Images de un ImageList
Las imgenes aadidas en el ImageList se incluyen en el fichero de recursos del formulario como en el caso de la imagen del PictureBox. Por otro lado la propiedad ImageSize permite establecer el tamao utilizado para las imgenes incluidas en el control, independientemente del tamao real que tengan las imgenes aadidas, es decir, al utilizar una imagen de un ImageList en otro control, la imagen tendr el tamao indicado por la propiedad ImageSize, aunque el tamao real de la imagen utilizada sea mayor o menor. Una vez configurado un control ImageList, se pueden utilizar en otros controles las imgenes almacenadas en l, como veremos en cada caso en particular.
57
Mobile
ProgressBar y TrackBar El control ProgressBar muestra una barra de progresin, til por ejemplo para mostrar el % de una accin que se ha realizado. El control TrackBar muestra una lnea de valores con una marca indicando el valor actualmente seleccionado. Este control no est disponible para SmartPhone.
Figura 66 Controles ProgressBar y TrackBar
Ambos controles tienen las propiedades Minimum, Maximum y Value, que representan el valor mnimo de la barra (cuando est a la izquierda), el valor mximo (cuando est a la derecha) y el valor actual respectivamente. Aparte de estas propiedades, la clase TrackBar contiene otras propiedades que permiten definir el comportamiento de la barra: TickFrequency Orientation TickStyle indica la frecuencia de las lneas de medicin indica si la orientacin es horizontal o vertical permite escoger entre distintos estilos para las lneas de medicin LargeChange indica el nmero de posiciones que se mueve la marca del valor al pulsar sobre el control SmallChange indica el nmero de posiciones que se mueve la marca del valor al mover sta mediante las teclas del cursor Adems la clase TrackBar produce el evento ValueChange cada vez que se modifica el valor de la propiedad Value, ya sea porque el usuario modifica la posicin de la marca o porque se modifica desde el propio programa.
DomainUpDown y NumericUpDown Ambos controles muestran un contador que se puede mover hacia delante o hacia atrs mediante unos botones. El control DomainUpDown permite mostrar elementos de cualquier tipo, mientras que el control NumericUpDown
58
Mobile
muestra valores enteros. Estos controles no estn disponibles para SmartPhone.
Figura 67 Controles DomainUpDown y NumericUpDown
Para establecer los elementos que se muestran en el control DomainUpDown se utiliza la propiedad tems de forma anloga a como se utiliza esta misma propiedad para los controles ComboBox y ListBox que vimos anteriormente. Para establecer el valor mnimo y mximo del control NumericUpDown, se utilizan las propiedades Minimum y Maximum respectivamente. En cuanto al valor seleccionado, el control DomainUpDown contiene la propiedad SelectedIndex que indica la posicin del elemento seleccionado dentro de la coleccin Item, mientras que el control NumericUpDown contiene la propiedad Value, que devuelve el valor numrico actual del control. Cuando se modifican estas propiedades, ya sea por intervencin del usuario o desde el propio programa, se producen los eventos SelectedItemChanged y ValueChanged respectivamente.
MainMenu y ContextMenu Estos dos controles permiten mostrar un men principal o un men secundario respectivamente. La clase ContextMenu no est disponible para SmartPhone. El men principal se muestra en la parte inferior de la pantalla. Puede aadirse ms de un men al formulario pero slo se puede utilizar uno de ellos como men principal. Para establecer el men principal de la ventana se utiliza la propiedad Menu del formulario que vimos en el apartado de utilizacin de formularios. Por defecto al crear un formulario se aade un objeto de tipo MainMenu, que se puede eliminar en caso de que no haga falta. En cambio los mens contextuales se muestran cuando el usuario pulsa con el botn secundario del ratn encima del formulario o de un control. Los mens principales se asocian siempre a un formulario, en cambio los mens contextuales pueden estar asociados a cualquier control mediante la correspondiente propiedad ContextMenu que vimos en el apartado de propiedades de la clase Control.
59
Mobile
Para editar las opciones de un men, seleccionamos lo seleccionamos en la parte inferior del diseador de formularios:
Figura 68 Los controles MainMenu y ContextMenu aparecen en la parte inferior del diseador de formularios
Al seleccionar un men, ste aparece en la parte inferior del formulario, permitiendo insertar nuevas opciones fcilmente pudiendo incluso crear submens dentro del propio men:
Figura 69 Edicin de las opciones del men
Cada una de las opciones dentro del men se crea internamente mediante una instancia del control MenuItem. Estas instancias se nombran automticamente a medida que se crean opciones de men. El diseador de formularios permite cambiar los nombres asignados automticamente si seleccionamos la opcin Editar nombres del men contextual que aparece al pulsar el botn secundario del ratn encima del men en el diseador de formularios:
Figura 70 Edicin de los nombres de los controles MenuItem correspondientes a las opciones del men
Para volver a editar el texto de las opciones de men, deseleccionamos la opcin Editar nombres del men contextual anterior. Cuando el usuario selecciona una de las opciones de un men, el MenuItem correspondiente provoca el evento Click. Para implementar una accin como respuesta a las diferentes opciones del men basta con gestionar este evento para cada una de las opciones.
60
Mobile
ToolBar El control ToolBar permite mostrar una barra de herramientas en la ventana. Este control no est disponible para SmartPhone. El control ToolBar se muestra la lnea inferior de la ventana, igual que el men principal, por lo que al aadir los dos componentes se divide el espacio disponible es esta parte de la ventana para los dos controles:
Figura 71 Control ToolBar
Los botones del ToolBar se especifican mediante la propiedad Buttons. Al seleccionar esta propiedad en la ventana de propiedades, aparece una ventana que permite aadir, modificar o eliminar botones fcilmente:
Figura 72 Ventana de edicin de botones del ToolBar
Para cada botn podemos especificar una serie de propiedades, entre ellas la imagen que se va a mostrar en el botn. Para especificar las imgenes de los botones, el control ToolBar tiene la propiedad ImageList que permite asignar una instancia de la clase ImageList con las imgenes que se van a utilizar. Una vez establecida esta propiedad, aadimos los botones, y modificamos la propiedad ImageIndex en la ventana de edicin de botones. Esta propiedad indica el ndice en el objeto ImageList de la imagen que se asigna al botn. Cuando el usuario pulsa uno de los botones del control, se produce el evento ButtonClick del ToolBar. Dentro del mtodo de gestin del evento es necesario discernir cual de los botones se ha pulsado mediante el parmetro de tipo ToolBarButtonClickEventArgs, que contiene la propiedad Button indicando el botn que se ha pulsado:
private void toolBar1_ButtonClick(object sender, ToolBarButtonClickEventArgs e) { if (e.Button.ImageIndex == 0) { // Accion para el boton 0 }
61
Mobile
else if (e.Button.ImageIndex == 1) { // Accion para el boton 1 } else if (e.Button.ImageIndex == 2) { // Accion para el boton 2 } }
Ejemplo 17 Gestin del evento ButtonClick de un control ToolBar
StatusBar El control StatusBar permite mostrar una barra de estado en la parte inferior de la ventana, justamente encima del men principal. Este control no est disponible para SmartPhone.
Figura 73 Control StatusBar
La propiedad principal de este control es la propiedad Text que permite modificar el mensaje que muestra la barra de estado. DateTimePicker y MonthCalendar Estos dos controles permiten seleccionar una fecha. El primero es similar a un ComboBox que muestra la fecha seleccionada. Al pulsar sobre la flecha de la parte derecha del control, se abre un calendario que permite escoger una fecha diferente.
Figura 74 Control DateTimePicker
Las propiedades Value, MinDate y MaxDate permiten consultar o establecer la fecha seleccionada, la primera fecha mostrada y la ltima fecha mostrada respectivamente. Al modificar la propiedad Value se produce el evento ValueChanged. Por otro lado, el control MonthCalendar muestra un calendario de un mes entero en el que se puede seleccionar la fecha deseada, o incluso un rango de fechas. Este segundo control no est disponible en SmartPhone.
62
Mobile
Figura 75 Control MonthCalendar
Para establecer o consultar las fechas seleccionadas se utilizan las propiedades SelectionStart y SelectionEnd. Al modificar las fechas seleccionadas se produce el evento DateChanged. El control MonthCalendar tiene tambin estas otras propiedades que pueden ser de utilidad para configurar su comportamiento: BoldedDates Es una matriz de objetos DateTime que permite poner en negrita fechas especiales. FirstDayOfWeek Permite establecer que da de la semana se muestra en primer lugar MinDate MaxDate indica la fecha mnima mostrada indica la fecha mxima mostrada
MaxSelectionCount indica el nmero mximo de das que se pueden seleccionar en el calendario ShowToday ShowTodayCircle indica si se muestra la fecha de hoy en el calendario indica si la fecha de hoy se muestra dentro de un crculo. TodayDate ListView El control ListView permite mostrar una lista de elementos mediante diferentes visualizaciones, de forma parecida al explorador de archivos. Este control no est disponible para SmartPhone. De igual modo que el control ListBox, el control ListView tiene la propiedad tems, que permite establecer la lista de elementos que se van a mostrar en la lista. Para seleccionar el tipo de visualizacin del control, es posible modificar el valor de la propiedad View. Los valores posibles son: LargeIcon, SmallIcon, Details y List. El efecto de cada uno de estos valores se muestra en la figura 76. representa la fecha de hoy
63
Mobile
LargeIcon
SmallIcon
Details
List
Figura 76 Diferentes visualizaciones del control ListView
Aparte de las propiedades Items y View, el control ListView contiene otras propiedades, entre las que encontramos las siguientes: CheckBoxes indica si se muestran controles CheckBox al lado de los elementos de la lista Columns especifica los nombres y valores de las columnas de la visualizacin SmallIcon.
FullRowSelect
indica si en la visualizacin SmallIcon, al seleccionar un elemento se seleccionan tambin todas sus propiedades del resto de columnas.
LargeImageList indica el objeto ImageList que contiene las imge-
nes para los elementos de la lista que se muestran en las visualizaciones con iconos grandes (LargeIcon)
SmallImageList indica el objeto ImageList que contiene las imge-
nes para los elementos de la lista que se muestran en las visualizaciones con iconos pequeos (todas menos LargeIcon) Los principales eventos que produce este control son los siguientes: ColumnClick producido cuando el usuario pulsa encima del encabezado de una de las columnas en el modo de visualizacin Details. ItemActivate ItemCheck se produce al hacer doble-click encima de un elemento de la lista producido al seleccionar el CheckBox de alguno de los elementos de la lista (si la propiedad CheckBoxes esta activada)
SelectedIndexChange se produce al seleccionar un elemento de la lista
64
Mobile
Treeview El control TreeView permite mostrar datos jerrquicos en forma de rbol. Los elementos que se muestran en este control son de tipo TreeNode. Podemos editar visualmente los nodos del rbol modificando la propiedad Nodes:
Figura 77 Edicin de los elementos del control TreeView
Figura 78 Control TreeView
Otras propiedades importantes del control TreeView son las siguientes: CheckBoxes indica si se muestran controles CheckBox al lado de los elementos del rbol ImageIndex indica el ndice de la imagen utilizada para los elementos ImageList Indent
SelectedImageIndex
especifica un ImageList asociado al control indica el nmero de espacios de indentacin entre los diferentes niveles del rbol indica el ndice de la imagen utilizada para los elementos seleccionados
ShowLines ShowPlusMinus
indica si se muestran las lneas entre nodos padre e hijo indica si se muestran los smbolos + o delante de los elementos para expandir o contraer sus nodos hijo
ShowRootLines
indica si se muestran las lneas entre nodos raz
65
Mobile
En cuanto a los mtodos que provoca este control, estos son los ms significativos: AfterSelect Se produce al seleccionar uno de los nodos el rbol AfterCheck Se produce al marcar el control CheckBox de uno de los nodos el rbol [Before/After]Collapse Se producen antes y despus de que se haya contrado uno de los nodos del rbol respectivamente [Before/After]Expand Se producen antes y despus de que se haya expandido uno de los nodos del rbol respectivamente DataGrid El control DataGrid permite mostrar un conjunto de datos DataSet en forma tabular. Hablaremos ms en detalle de este componente y de cmo mostrar datos desde una fuente de datos en el tema de acceso a datos. Timer Es un control que permite contar el tiempo y ejecutar ciertas acciones al pasar el tiempo especificado. Al aadir un control de este tipo se aade a la parte inferior del diseador de formularios ya que no tiene representacin grfica. El funcionamiento de un objeto Timer es el siguiente. Cada X milisegundos este control desencadena el evento Tick. El intervalo X se puede establecer mediante la propiedad Interval del control. Para activar o desactivar el control basta con establecer la propiedad Enabled a true o false respectivamente.
2.4.- Despliegue de aplicaciones WinForms para dispositivos mviles Una vez creada la aplicacin para dispositivos mviles, es necesario instalarla en el dispositivo para poder ejecutarla. En este apartado veremos en primer lugar como instalar la aplicacin directamente desde Visual Studio, manualmente y finalmente veremos cmo crear programas de instalacin para la aplicacin.
66
Mobile
Instalacin desde Visual Studio Visual Studio instala automticamente la aplicacin en el dispositivo mvil o en el emulador cada vez que sta se ejecuta mediante las opciones Iniciar depuracin y Iniciar sin depurar del men Depurar, o bien al seleccionar la opcin Implementar o Implementar solucin del men contextual del proyecto o de la solucin que queremos instalar en el dispositivo respectivamente:
Figura 79 Implementar proyecto o solucin en un dispoositivo
Si el dispositivo no tiene instalada una versin compatible del .NET CF, Visual Studio la instala automticamente.
Instalacin manual La instalacin manual de una aplicacin en un dispositivo mvil consiste bsicamente en copiar los ensamblados correspondientes de la aplicacin en la carpeta correspondiente del dispositivo. Para traspasar los archivos al dispositivo, podemos utilizar ActiveSync. Si lo tenemos instalado, al conectar el dispositivo al ordenador ste se activar automticamente.
Figura 80 ActiveSync
67
Mobile
Para visualizar el contenido del dispositivo, pulsamos sobre el botn Explorar, y aparecer el directorio raz de las carpetas del dispositivo.
Figura 81 Exploracin del sistema de ficheros del dispositivo
Los archivos de programa se suelen instalar dentro del directorio Archivos de programa, que a su vez se encuentra dentro de la carpeta especial Mi dispositivo (la que tiene un icono en forma de Pocket PC). Al explorar las carpetas del dispositivo podemos realizar algunas acciones sobre los ficheros como en el explorador de archivos, por ejemplo podemos crear una carpeta para instalar los ensamblados de la aplicacin:
Figura 82 Creacin de carpetas en el dispositivo
Una vez creada la carpeta podemos copiar los ensamblados de la aplicacin arrastrndolos a la nueva carpeta creada en el dispositivo:
Figura 83 Ensamblados copiados manualmente en el dispositivo
68
Mobile
Una vez instalada la aplicacin, basta con acceder a la carpeta correspondiente desde el dispositivo y pulsar sobre el icono correspondiente al ensamblado principal. Para que la aplicacin funcione en el dispositivo es necesario que haya una versin compatible del .NET CF instalada.
Programas de instalacin Si es necesario implementar la aplicacin en ms de un dispositivo, o se quiere distribuir o vender la aplicacin, es necesario proporcionar un mecanismo de instalacin ms sofisticado, mediante un programa de instalacin. Visual Studio proporciona un tipo de proyecto para crear archivos CAB autoinstalables en el dispositivo:
Figura 84 Creacin de un proyecto de fichero CAB para Smart Device
Una vez creado un proyecto de este tipo, podemos aadir los ensamblados de los proyectos de la propia solucin, mediante la opcin Resultados del proyecto del submen Agregar dentro del men contextual del elemento que representa al proyecto CAB en el explorador de soluciones. Esta opcin permite aadir diferentes resultados de un proyecto, como el cdigo fuente, los recursos, o los ensamblados (resultado principal):
Figura 85 Seleccin del proyecto y el tipo de resultado a agregar
69
Mobile
A medida que aadimos elementos al proyecto CAB, en la ventana del explorador de soluciones aparecen estos elementos, y sus correspondientes dependencias:
Figura 86 Elementos del proyecto CAB en la ventana del explorador de soluciones
Las dependencias se calculan automticamente, pero se pueden aadir otras nuevas. Los ensamblados del .NET CF que son dependencias de los proyectos tambin se incluyen, pero por defecto se marcan como excluidos, es decir que no se copiarn en el fichero CAB porque se supone que el .NET CF estar instalado en el dispositivo. Si es necesario copiar alguno de ellos, es posible marcarlo como no excluido, seleccionndolo y modificando la propiedad Exclude a false en la ventana de propiedades. La ventana de propiedades tambin muestra propiedades sobre el resto de elementos del proyecto. Para el elemento que representa el proyecto permite modificar algunas propiedades generales, como el autor, el nombre del producto, las versiones de sistema operativo requeridas, etc.:
Figura 87 Propiedades del proyecto CAB en la ventana de propiedades
En la parte central de la pantalla, aparece la parte del sistema de ficheros que se va a crear en el dispositivo. Por defecto aparecen dos carpetas: Archivos de programa y la carpeta de la aplicacin.
Figura 88 Carpetas de instalacin
70
Mobile
En este sistema de ficheros podemos aadir carpetas nuevas o carpetas especiales, como Mis documentos o Carpeta del men Inicio:
Figura 89 Aadir carpetas especiales
Todo el contenido que se aade en estas carpetas, se instala en el dispositivo al ejecutar el archivo CAB. Por ejemplo, si queremos incluir un acceso directo de la aplicacin en la ventana de programas, deberemos incluir la carpeta especial Programas, y aadir en ella un acceso directo mediante la opcin Crear nuevo acceso directo del men contextual. Aparte del sistema de ficheros, es posible aadir entradas en el registro del sistema. Para abrir una u otra visualizacin, utilizamos los botones que hay a tal efecto encima de la ventana del explorador de soluciones: vamente. y respecti-
Figura 90 Edicin de entradas en el registro del sistema
Para crear programas de instalacin ms complejos, que permitan instalar la aplicacin directamente desde el ordenador de escritorio al que est conectado el dispositivo, es necesario implementar parte del proceso de instalacin manualmente. El siguiente artculo explica cmo crear aplicaciones de instalacin a partir de archivos CAB mediante la aplicacin CeAppMgr.exe (WinCE Application Manager): http://msdn.microsoft.com/library/default.asp?url=/library/enus/dnppcgen/html/netcfdeployment.asp
71
Mobile
3.- Aplicaciones Web para dispositivos mviles
Hoy en da la mayora de los dispositivos mviles tienen capacidades de conexin a la red, ya sea permanente o temporalmente, de forma que tambin es posible crear aplicaciones Web para este tipo de dispositivos. No obstante, el desarrollo de aplicaciones Web para dispositivos mviles es ms complejo, ya que existen algunas diferencias fundamentales con las aplicaciones Web normales, principalmente: Existen diferentes lenguajes Web que son soportados por unos u otros dispositivos, por ejemplo HTML en las PDAs, WML (Wreless Markup Language) para telfonos WAP (Wireless Application Protocol) o cHTML (compact HTML). Los dispositivos pueden tener pantallas de tipos muy diferentes: distintos tamaos, distintos nmeros de filas y columnas de texto, orientacin horizontal o vertical, pantallas en color o en blanco y negro, etc. Las diferentes velocidades de conexin de los dispositivos tambin afectan a la cantidad de contenido que se puede enviar desde el servidor de forma que no ralentice demasiado la aplicacin en el cliente. Para solventar estas diferencias, dentro de ASP.NET existen una serie de controles de usuario anlogos a los controles ASP.NET normales pero especficos para dispositivos mviles. Al generar la pgina que se enva al cliente, estos controles se traducen teniendo en cuenta las caractersticas del dispositivo mvil para el que est destinada la pgina, lo que proporciona un mecanismo fcil y rpido de desarrollar aplicaciones Web mviles que funcionen en un amplio rango de dispositivos. La primera versin de estos controles especficos apareci poco despus del lanzamiento del .NET Framework 1.0, bajo el nombre de MMIT (Microsoft Mobile Internet Toolkit). Se trataba de un paquete instalable que se integraba con Visual Studio .NET, permitiendo crear aplicaciones ASP.NET especficas para dispositivos. Junto con el .NET Framework 1.1, aparecieron los ASP.NET Mobile controls, sucesores de MMIT, e integrados de entrada en el entorno de desarrollo Visual Studio .NET 2003 y posteriormente en Visual Studio 2005. Microsoft lanza peridicamente actualizaciones de los controles ASP.NET mobile para soportar nuevos dispositivos. Esto permite aumentar el nmero de dispositivos que pueden visualizar una aplicacin Web realizando modificaciones
Cuando hablamos de aplicaciones o pginas Web (HTML) o ASP.NET normales nos referimos a aquellas diseadas y desarrolladas especficamente para equipos de escritorio
72
Mobile
mnimas o nulas en su cdigo fuente. Estas actualizaciones se pueden descargar gratuitamente desde la siguiente pgina Web: http://msdn2.microsoft.com/es-es/asp.net/aa336588(en-us).aspx Dentro de un proyecto de sitio Web de Visual Studio se pueden aadir pginas ASP.NET normales y pginas ASP.NET para mviles, de forma que se puede reutilizar la misma lgica de negocio para las dos interfaces grficas, facilitando as el mantenimiento de la aplicacin. Cuando un dispositivo se conecta a una pgina ASP.NET para mviles, el servidor recupera informacin tcnica acerca del hardware del dispositivo, del navegador y de la velocidad de conexin. Basndose en esta informacin, los controles ASP.NET mobile de la pgina, producen una u otra salida en funcin del lenguaje de marcado utilizado, de las capacidades del navegador, de las propiedades de la pantalla del dispositivo y de la velocidad de conexin. En la siguiente direccin se puede visualizar una presentacin acerca de la arquitectura de ASP.NET mobile: http://www.asp.net/mobile/flasharchitecture.aspx?tabindex=6 A continuacin veremos los conceptos bsicos para crear aplicaciones Web para dispositivos mviles. Tambin comentaremos las diferencias con el desarrollo de aplicaciones Web normales.
3.1.- Creacin del proyecto Web En Visual Studio 2005 no hay un proyecto especfico de aplicaciones Web para dispositivos mviles, porque una aplicacin ASP.NET puede a su vez contener pginas para mviles y pginas normales. Para crear pues una aplicacin que contenga pginas ASP.NET adaptadas para mviles, creamos un Sitio Web ASP.NET normal y corriente mediante la opcin Nuevo->SitioWeb del men Archivo:
Figura 91 Creacin de un proyecto de sitio Web ASP.NET
73
Mobile
Deberemos especificar el lenguaje de programacin que queremos usar, y la ubicacin del proyecto, ya sea en un directorio fsico o en una direccin Web directamente (por ejemplo en una carpeta virtual del servidor IIS). En versiones anteriores de Visual Studio, las aplicaciones ASP.NET se creaban directamente en una carpeta virtual de IIS para poder ejecutarse. A partir de la versin 2005, se incorpora un servidor de prueba independiente, de forma que las aplicaciones ASP.NET pueden crearse, compilarse y probarse sin necesidad de instalarlas en el servidor IIS (slo es necesario instalarlas en el servidor IIS cuando la aplicacin ya est terminada). Una vez seleccionado el tipo de proyecto, Visual Studio crea y configura la carpeta correspondiente y aade por defecto una pgina ASP.NET normal. Para crear pginas ASP.NET especficas para mviles, aadimos un nuevo elemento al proyecto de tipo Formulario Mobile Web Forms:
Figura 92 Aadir un formulario Web para mviles
A continuacin Visual Studio crea una nueva pgina .aspx para mviles y se abre su correspondiente cdigo para editarlo:
Figura 93 Cdigo de la pgina .aspx
Como se puede comprobar, la sintaxis de una pgina ASP.NET en general, es una extensin de HTML con los tags especficos de ASP.NET para definir los diferentes controles de la pgina. En este caso los controles son controles para mviles, por lo que van precedidos del prefijo mobile. Aparte del fichero .aspx de la pgina, Visual Studio crea un fichero de cdigo fuente para el lenguaje de programacin seleccionado al crear el pro-
74
Mobile
yecto. Este fichero se denomina code behind, porque es el cdigo fuente que se ejecuta por detrs de la pgina, es decir, cada vez que la pgina es enviada al servidor y procesada por el CLR. Para abrir este fichero podemos seleccionar la opcin Ver cdigo del men contextual del elemento correspondiente a la pgina .aspx en el explorador de soluciones. Tambin podemos expandir este elemento y hacer doble clic sobre el fichero de cdigo fuente correspondiente:
Figura 94 Fichero code behind
Dentro de este fichero se define una clase con el mismo nombre que la pgina .aspx, que hereda de la clase Page o MobilePage en el caso de pginas para mviles. Dentro de esta clase se debe incluir toda la lgica de la pgina .aspx correspondiente, fundamentalmente los mtodos de gestin de los eventos producidos en sta. Por defecto, al crear este fichero Visual Studio incluye la definicin del mtodo Page_Load, que gestiona el evento Load de la pgina. Este evento se produce cada vez que se realiza una peticin de la pgina, por lo que se debe contener las instrucciones necesarias para inicializar los componentes de la misma convenientemente. Dentro del mtodo Page_Load a veces es necesario saber si la peticin realizada es una primera peticin o un postback. Esto podemos saberlo gracias a la propiedad IsPostBack del objeto Page:
public partial class _Default : System.Web.UI.MobileControls.MobilePage { protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { // acciones en caso de que sea la primera vez // que se visita la pgina } } }
Ejemplo 18 Comprobacin de si la peticin es un postback, en el mtodo Page_Load
Con Visual Studio tambin es posible editar los formularios ASP.NET visualmente como en las aplicaciones WinForms. Para pasar de la vista del cdigo a la vista del diseador de formularios Web y viceversa, utilizamos las pestaas que hay a tal efecto en la parte inferior del rea de edicin.
Figura 95 Pestaas de las diferentes vistas de edicin
75
Mobile
Al pasar al modo diseo, vemos que aparece un rectngulo delimitador del rea de trabajo. En las pginas ASP.NET normales no aparece ningn delimitador porque los ordenadores de escritorio en los que se visualizarn no tienen en principio limitaciones de tamao a la hora de visualizarlas. En cambio los dispositivos s que disponen de un rea reducida de trabajo.
Figura 96 Delimitacin del rea de trabajo
Cada recuadro de delimitacin se corresponde con un objeto de tipo Form (no el mismo Form que para aplicaciones WinForms). Dentro de una misma pgina ASP.NET para mviles puede haber ms de un objeto Form. Para aadir nuevos objetos Form a la pgina los arrastramos desde la barra de herramientas al rea de diseo:
Figura 97 Elemento Form en la barra de herramientas
Del mismo modo podemos aadir el resto de controles a cada uno de los formularios de la pgina:
Figura 98 Aadir elementos a los formularios de la pgina
Al visualizar una pgina .aspx se muestra siempre el primer formulario. Para cambiar entre formularios se puede modificar la propiedad ActiveForm del objeto Page:
ActiveForm = OtroForm;
Donde OtroForm es el nombre del formulario que se quiere activar. Tambin es posible cambiar entre formularios utilizando un control de tipo Link, y asignando la direccin #NombreForm a la propiedad NavigateUrl, donde NombreForm es el nombre del formulario que se mostrara al pulsar sobre el control Link.
76
Mobile
3.2.- Controles para mviles Cuando editamos una pgina Web para mviles, la barra de tareas se adapta para mostrar los controles especficos disponibles para mviles. En este subapartado veremos los ms importantes. Controles bsicos Dentro del apartado Formularios Mobile Web Forms de la barra de herramientas encontramos los controles elementales necesarios para realizar interfaces graficas Web. Entre ellos encontramos los controles Panel, Label y TextBox que son muy similares a los componentes con el mismo nombre de WinForms. Los controles Command, Link, List, Image y Calendar tambin tienen similitud con los controles de WinForms Button, LinkLabel, ListBox, PictureBox y MonthCalendar respectivamente. El resto de controles son especficos para mviles o en general para aplicaciones Web, a continuacin comentamos los ms comunes: TextView es anlogo al control Label, pero acepta fragmentos de cdigo HTML y los muestra con el formato correspondiente.
SelectionList
permite mostrar una lista de elementos de diferentes modos: como un ComboBox, como ListBox, como lista de controles RadioButton, como lista con seleccin mltiple o como lista de controles CheckBox. El tipo de visualizacin se puede seleccionar mediante la propiedad SelectType.
StyleSheet AdRotator
permite definir estilos para la pgina en la que se incluye Muestra anuncios rotativos en la pgina Web
Controles de validacin Los controles de validacin permiten comprobar que el usuario introduce los datos correctamente en los controles del formulario, mostrando un mensa-
77
Mobile
je de error en caso de que no se cumpla una determinada condicin en los datos introducidos. Los controles de validacin disponibles son los siguientes:
RequiredFieldValidator
comprueban que se ha rellenado el valor de un campo
CompareValidator
compara el valor de un control con el valor especificado
RangeValidator
comprueba que el valor de un control este dentro de un rango especificado
RegularExpressionValidator comprueba que el valor de un control
cumpla una determinada expresin regular CustomValidator permite crear una validacin personalizada del valor de un control ValidationSummary muestra un resumen de las validaciones de cada uno de los objetos de validacin de la pgina Controles HTML Aparte de los controles de ASP.NET para mviles, podemos incluir controles HTML normales a la pgina, ya que el resultado final de la traduccin de la pgina es cdigo HTML. Estos controles estn disponibles en el apartado HTML de la barra de herramientas:
Figura 99 Controles HTML
3.3.- Ejecucin de aplicaciones Web para mviles Al ejecutar una aplicacin ASP.NET desde Visual Studio, por defecto aparece el navegador predeterminado del sistema, mostrando la pgina principal de la aplicacin.
78
Mobile
Figura 100 Visualizacin de la aplicacin en el navegador por defecto
Si la aplicacin se est desarrollando en una carpeta del sistema de ficheros y no en el servidor de IIS, se ejecutar una instancia del servidor de desarrollo de ASP.NET que permita visualizar la aplicacin. Se puede seleccionar otro navegador distinto mediante la opcin Explorar con del men Archivo. En la ventana que aparece podemos definir diferentes navegadores y especificar el que queremos que se utilice por defecto:
Figura 101 Seleccin de los navegadores preferidos
Alternativamente podemos utilizar los programas de emulacin que proporcionan algunos fabricantes de mviles como Openwave, Nokia, Ericsson o Motorola:
Figura 102 Emulador de openwave
Tambin es posible utilizar los emuladores de Pocket PC y SmartPhone o un dispositivo fsico. Para ello es necesario configurar correctamente la conexin a
79
Mobile
Internet del dispositivo a utilizar. En el caso de los emuladores se puede configurar la conexin a travs de ActiveSync siguiendo los siguientes pasos: 1.- En primer lugar abrimos el Administrador de emuladores de dispositivos, mediante la correspondiente opcin del men Herramientas de Visual Studio.
Figura 103 Administrador de emuladores
2.- A continuacin pulsamos con el botn secundario del ratn encima del emulador de dispositivo que queremos configurar y seleccionamos la opcin Conectar. El administrador de emuladores enciende el emulador correspondiente. 3.- Volvemos a pulsar con el botn secundario del ratn encima del emulador y seleccionamos la opcin Colocar en la base. Esto provoca que el dispositivo se conecte con ActiveSync y aparezca un asistente de conexin (si es la primera vez que se conecta el emulador a ActiveSync). 4.- Tras configurar la conexin con ActiveSync, el dispositivo dispone de conexin a Internet. Podemos abrir Mobile Internet Explorer y navegar hasta la direccin correspondiente en la que se encuentra la pgina Web:
Figura 104 Visualizacin de una pgina ASP.NET mobile en los emuladores de Pocket PC y Smartphone
En la siguiente pgina Web se puede encontrar ms informacin acerca de cmo configurar los emuladores para mostrar aplicaciones Web: http://msdn2.microsoft.com/en-us/library/f38yc3w5(VS.80).aspx
80
Mobile
3.4.- Instalacin de la aplicacin en un servidor Para instalar la aplicacin Web en su ubicacin definitiva una vez finalizada, y ponerla a disposicin de cualquier dispositivo con capacidades de conexin a Internet, debemos instalarla en un servidor Web como IIS. Esto podemos hacerlo fcilmente desde Visual Studio seleccionando la opcin Publicar sitio Web del men Generar:
Figura 105 Publicar sitio Web
Podemos especificar directamente una localizacin en la que instalar la aplicacin, o pulsar en el botn de la derecha con los puntos suspensivos para ms opciones:
Figura 106 Seleccin de la localizacin
En la pantalla anterior se puede escoger entre varias localizaciones: Sistema de ficheros local, servidor de IIS local, un servidor FTP o un servidor Web remoto. Una vez configurada la localizacin de publicacin, esta se utilizar para publicar los resultados de la compilacin de la aplicacin cada vez que sta se recompile.
81
Mobile
Actividades
Actividad 1 1.- Crear una aplicacin de PocketPC y modificar el titulo del formulario principal por Aplicacin PocketPC. 2.- Cambiar el color de fondo del formulario por el color GreenYellow 3.- Mostrar el icono OK en la parte superior derecha de la ventana 4.- Cambiar el icono del formulario 5.- Ejecutar la aplicacin
Actividad 2 1.- Crear una aplicacin para PocketPC que cambie el color de fondo del formulario cada vez que se pulsa la pantalla con el lpiz digital, o se pulsa el botn del cursor hacia arriba. 2.- Modificar la aplicacin anterior para que funcione con SmartPhone. En este caso cambiar el color de fondo al pulsar el botn de arriba del cursor o la tecla 1. 3.- Modificar la aplicacin para que al pulsar en el icono OK de la esquina superior derecha de la ventana no se cierre la aplicacin.
Actividad 3 1.- Crear una aplicacin para PocketPC con un formulario con el ttulo Ventana 0 que tenga tres opciones de men: Abrir otra, Ir al fondo y Cerrar. 2.- Al pulsar sobre el men Abrir otra se abrir otra ventana igual, pero con titulo Ventana X donde X es el nmero de la ventana actual + 1. Al pulsar sobre la opcin Ir al fondo se mover la ventana detrs del resto de ventanas abiertas. Finalmente al pulsar sobre la opcin Cerrar se cerrar la ventana actual.
Actividad 4 1.- Crear una aplicacin de PocketPC con dos formularios. En el formulario principal aadir una opcin de men que abra el segundo formu-
82
Mobile
lario como dilogo. En el segundo formulario aadir tres botones, con los valores de DialogResult: Yes, No y Cancel respectivamente. 2.- Si se pulsa el botn Yes, el color de fondo del formulario cambiar a color verde, si se pulsa No cambiara a color rojo y si se pulsa Cancel se quedara como est.
Actividad 5 1.- Crear una aplicacin para PocketPC con una opcin de men que abra un dilogo para buscar un fichero. Una vez seleccionado, la aplicacin mostrara un mensaje de informacin con el nombre del fichero seleccionado, o un mensaje de error si el usuario cierra el dilogo sin seleccionar ningn fichero. 2.- Al cerrar la aplicacin mediante el icono OK de la esquina superior derecha del formulario, preguntar si realmente se quiere salir de la aplicacin, y en funcin de la respuesta se cierre o no la ventana.
Actividad 6 1.- Aadir un Label a un formulario en blanco. Cambiar el mensaje por Esto es un mensaje. 2.- Cambiar la fuente del Label por Arial Negrita de tamao 10, de color verde 3.- Aadir un LinkLabel a la ventana y hacer que al pulsar sobre l se abra un dilogo de mensaje con el texto Has pulsado el link.
Actividad 7 1.- Aadir un TextBox a un formulario en blanco 2.- Hacer que al pulsar la tecla a en el TextBox se escriba una s y que al pulsar la tecla z no se escriba nada. 3.- Aadir otro TextBox a la ventana y configurarlo para aceptar mltiples lneas.
Actividad 8 1.- Aadir un botn a un formulario en blanco. Hacer que al pulsar sobre el botn se cierre la ventana
83
Mobile
2.- Aadir otro botn con el texto 0 que al pulsar sobre l incremente en 1 el nmero mostrado actualmente, es decir que el texto del botn vaya tomando los valores 1, 2, 3, etc. a medida que se pulsa sobre el botn.
Actividad 9 1.- Aadir cuatro CheckBox y cuatro RadioButton a un formulario en blanco. 2.- Cambiar el texto de los CheckBox por: Casad@, Tiene coche, Tiene piso y Tiene trabajo. 3.- Cambiar el texto de los RadioButton por: Hombre, Mujer, Menor de edad, Mayor de edad. 4.- Configurar los controles anteriores de forma que se puedan seleccionar las caractersticas aplicables a una persona en concreto.
Actividad 10 1.- Crear la clase Coche con las propiedades Marca, Color y Matricula 2.- Aadir a un formulario en blanco un ComboBox que muestre los elementos de una coleccin de instancias de tipo Coche. Hacer que en la lista se muestre la marca del coche, seguida de un guin y de la matricula correspondiente (Por ejemplo SEAT B0000RT). 3.- Aadir al formulario un ListBox que muestre la misma lista de objetos Coche. En este caso hacer que muestre solamente la matricula de cada coche.
Actividad 11 1.- Aadir un TabControl a un formulario en blanco 2.- Aadir una nueva ficha 3.- Modificar los nombres de las fichas por: label, text y button respectivamente. 4.- En la ficha label incluir un control Label, en la ficha text un TextBox y en la ficha button un Button. 5.- Hacer que al pulsar el botn de la tercera ficha el texto del TextBox de la segunda ficha se muestre en la etiqueta de la primera ficha.
84
Mobile
Actividad 12 1.- Aadir un control PictureBox a un formulario en blanco 2.- Cambiar el color del fondo 3.- Asignar una imagen al control de forma que quede centrada
Actividad 13 1.- Crear un formulario con tres TrackBar y un Panel. Cada TrackBar corresponder a uno de los colores primarios (Rojo, Verde y Azul), y el valor de cada TrackBar indicara la cantidad del color correspondiente en el color de fondo del objeto Panel. Al mover un TrackBar, se modificara el color del Panel para mostrar la nueva mezcla de colores. 2.- Aadir un ProgressBar y un botn a un formulario en blanco. Al pulsar en el botn, ejecutar dos bucles anidados, los dos de 0 a 1000000. Dentro del bucle interior no se ejecutar ninguna instruccin, pero dentro del bucle exterior se aumentar una unidad el valor de la barra de progresin. Al finalizar el bucle exterior la barra de progresin llegara a su valor mximo.
Actividad 14 1.- Aadir un componente DomainUpDown y dos NumericUpDown a un formulario en blanco. 2.- Aadir al DomainUpDown los elementos correspondientes a los meses del ao, y configurar cada NumericUpDown para poder seleccionar el da y el ao respectivamente. 3.- Aadir un botn al formulario. Al pulsar sobre el botn hacer que se compruebe que la fecha indicada en conjunto por los tres controles UpDown es correcta. Si lo es, mostrar un dilogo con un mensaje informativo, indicando que da de la semana corresponde a la fecha seleccionada. Si no es correcta, mostrar un dilogo con un mensaje de error.
Actividad 15 1.- Aadir un ContextMenu a la ventana y aadir las opciones Copiar, Cortar y Pegar 2.- Aadir un TextBox al formulario y asociarle el men contextual anterior. 3.- Al pulsar sobre la opcin Copiar del men contextual utilizar el portapapeles para almacenar el string mostrado en el TextBox.
85
Mobile
4.- Al pulsar sobre la opcin Cortar hacer lo mismo que en la opcin Copiar, pero adems borrar el texto del TextBox. 5.- Al pulsar sobre la opcin Pegar del men contextual cambiar el contenido actual del TextBox por el contenido del portapapeles.
Actividad 16 1.- Crear un proyecto CAB e incluir dos o tres de los resultados de los proyectos de las otras actividades. 2.- Instalar las aplicaciones en una carpeta dentro de la carpeta Mis documentos. 3.- Aadir un acceso directo a cada aplicacin en el men de inicio y en la carpeta de programas. 4.- Compilar y ejecutar el proyecto de instalacin.
Actividad 17 1.- Crear un proyecto de aplicacin ASP.NET para dispositivos mviles 2.- Aadir dos formularios y un control Label y otro Command en cada uno de ellos, como se indica en la figura:
3.- Hacer que al pulsar sobre el botn de un formulario se active el otro formulario y viceversa.
Actividad 18 1.- Crear una aplicacin que simule el proceso de reserva de un billete de avin, tal y como se indica en los pasos siguientes: a) Escoger un continente (mediante un control desplegable).
86
Mobile
b) En funcin del continente, mostrar otro control desplegable con los pases disponibles (no hace falta ser exhaustivo) c) En funcin del pas indicado, mostrar las ciudades disponibles en una lista. d) Una vez seleccionada la ciudad mostrar otro formulario en el que se permita seleccionar la fecha y la hora del vuelo mediante un componente Calendar y un componente TextBox respectivamente. Comprobar que se especifica una fecha correcta. e) Cambiar de formulario para mostrar otras opciones adicionales: Viajar en 1era / turista (RadioButton) Extras: Comida, Televisin, Msica, (CheckBox)
f) Al final mostrar el mensaje Su billete ha sido reservado en otro formulario en el que aparezca la imagen de un avin volando.
87
Mobile
Bibliografa
Microsoft Mobile Developer Center http://msdn.microsoft.com/mobility/ Microsoft Windows Mobile Home http://www.microsoft.com/windowsmobile/default.mspx Microsoft Windows Embedded http://www.microsoft.com/windows/embedded/default.mspx HPC Factor. The History of Windows CE http://www.hpcfactor.com/support/windowsce/ Wigley A., Wheelwright S. (2003) .NET Compact Framework Core Reference MSPress Windows Forms Controls in the .NET Compact Framework http://msdn2.microsoft.com/en-us/library/5c632yz4(VS.80).aspx Graphics and Drawing http://msdn2.microsoft.com/en-us/library/hf85w92t(VS.80).aspx Andy Wigley and Peter Roxburgh Building Microsoft ASP.NET Applications for Mobile Devices, Second Edition MSPress http://www.microsoft.com/MSPress/books/6709.asp Mobile ASP.NET Web Applications http://www.asp.net/mobile

Teoria Mobile

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Teoria Mobile

Uploaded by

Copyright:

Available Formats

Mobile

David Gan Jimnez

Universitat Oberta de Catalunya

Universitat Oberta de Catalunya

Universitat Oberta de Catalunya

Introducir los dispositivos mviles preparados para aplicaciones .NET

Aprender a desarrollar interfaces graficas de ventana para dispositivos mviles

Universitat Oberta de Catalunya

1.- Introduccin al desarrollo de aplicaciones Mobile

Figura 1 Ejemplos de Pocket PC

Universitat Oberta de Catalunya

Figura 2 Pocket PC en modo horizontal

Figura 3 Teclado externo acoplado (izquierda) y teclado lser (derecha)

Figura 4 Pocket PCs con teclado incluido

Universitat Oberta de Catalunya

Figura 6 Ejemplos de SmartPhone

Universitat Oberta de Catalunya

Universitat Oberta de Catalunya

Figura 7 Emulador de Windows CE

Figura 8 Plattform Builder de Windows CE

Universitat Oberta de Catalunya

Figura 9 Pantalla de inicio de Windows Mobile para Pocket PC y SmartPhone

Figura 10 Personalizacin de la pantalla de inicio

Universitat Oberta de Catalunya

Figura 11 Men de inicio (izquierda). Opciones de configuracin (derecha)

Figura 12 Introduccin de datos por teclado virtual o por trazos reconocidos

Figura 13 Introduccin de datos en un SmarPhone

Universitat Oberta de Catalunya

Figura 14 Windows Media Mobile,

Word Mobile y Excel Mobile, respectivamente

Universitat Oberta de Catalunya

Universitat Oberta de Catalunya

Figura 16 Emuladores de Windows Mobile para Pocket PC y SmartPhone

Universitat Oberta de Catalunya

2.- WinForms para dispositivos mviles

Universitat Oberta de Catalunya

Figura 17 Tipos de proyecto para dispositivos mviles

Universitat Oberta de Catalunya

Figura 18 Diseador de WinForms para dispositivos mviles

Figura 19 Diseo de controles

Universitat Oberta de Catalunya

El cdigo que escribiremos en el mtodo de gestin del evento ser el siguiente:

Figura 20 Errores de compilacin

Figura 21 Seleccin de la plataforma destino de implementacin

Universitat Oberta de Catalunya

Figura 22 Aplicacin ejecutndose en el emulador de PocketPC

Figura 23 Punto de interrupcin

Universitat Oberta de Catalunya

Figura 24 Visualizacin automtica de variables relacionadas con el punto de interrupcin

Figura 25 Modificacin en los valores de las variables

Universitat Oberta de Catalunya

Figura 26 Cambio de plataforma de destino

Figura 27 Cambio de plataforma a SmartPhone

Universitat Oberta de Catalunya

Figura 28 Asociar el mtodo de gestin del evento al botn del men

Figura 29 Aplicacin ejecutndose en el emulador de SmartPhone

Universitat Oberta de Catalunya

Figura 30 A la izquierda teclado en pantalla. A la derecha men de la ventana

Universitat Oberta de Catalunya

Teclas de accin Tecla de inicio

Tecla atrs Tecla de seleccin Teclas del cursor Tecla cancelar

Figura 31 Teclas de interaccin de un SmartPhone

El formulario resultante del cdigo anterior es el que se muestra en la figura 32.