DISEÑO DE INTERFACES DE USUARIO CON XCODE. XCode y el desarrollo de Aplicaciones para IPhone, IPad e IPod. Diseño de Interfaces de Usuario con XCODE

Transcripción

1 DISEÑO DE INTERFACES DE USUARIO CON XCODE XCode y el desarrollo de Aplicaciones para IPhone, IPad e IPod Diseño de Interfaces de Usuario con XCODE

2 COMPUTER HUMAN INTERACTION AND COLLABORATION RESEARCH GROUP Diseño de Interfaces de Usuario con XCODE AUTORES: Manuel Ortega Cantero Miguel Gómez Ortiz Ana Isabel Molina Díaz Francisco Jurado Monroy CHICO UCLM - JCCM Escuela Superior de Informática UCLM Paseo Universidad Ciudad Real Manuel.Ortega@uclm.es DISEÑO DE INTERFACES DE USUARIO CON XCODE por Manuel Ortega Cantero et al is licensed under a Creative Commons Reconocimiento-NoComercial- CompartirIgual 3.0 Unported License.

3

4 Tabla de Contenidos 0. Introducción Propósito de este libro Agradecimientos Bibliografía Dispositivos y programa de desarrolladores de Apple Dispositivos: iphone, ipad, ipod Desarrollo de Aplicaciones sobre IPhone Equipo de desarrollo Certificado de desarrollador Agregar dispositivos Identificador de Aplicaciones (AppID) Perfiles Objective-C y XCode Generalidades sobre el lenguaje Sentencias condicionales Bucles App1: Linterna Introducción Instalaciones necesarias Creando el proyecto Desarrollando la interfaz Añadiendo las conexiones Desarrollando el código Probando la aplicación en un iphone App2: Calculadora Introducción Desarrollando la interfaz Añadiendo las conexiones Mejorando la interfaz Desarrollando el código Posibles mejoras Probando la aplicación en un iphone App3: Lista de la compra Introducción... 51

5 GRUPO CHICO - UCLM 5.2 Creando el proyecto Desarrollando las interfaces MainWindow CompraViewController CarroViewController AnadirViewController Añadiendo las conexiones Código Fuente Probando la aplicación en un iphone

6 Capítulo 0 0. Introducción En este capítulo vamos a introducir las convenciones usadas en este libro y a presentar en general el propósito de éste. A ntes de comenzar el capítulo vamos a explicar algunas convenciones utilizadas en este texto. Abajo a la izquierda podemos ver algunos iconos que nos servirán para remarcar partes de este libro. ICONOS Información importante Preguntas Ejercicio propuesto Estos iconos nos van a ayudar a seleccionar la información que debe ser retenida por el alumno, nos permitirán hacer preguntas para conocer si se han aprendido los conceptos, Se propondrán ejercicios y se detallarán los conceptos explicados en revisiones finales. Revisión A lo largo del libro hablaremos del IPhone pero nos estaremos refiriendo no solo a este dispositivo sino también al IPod y al IPad, ya que el desarrollo de aplicaciones para estos tres dispositivos puede llevarse a cabo con mínimos cambios, solo teniendo en cuenta las especiales características de cada uno, que serán explicadas en el siguiente capítulo. 0.1 Propósito de este libro El propósito de este libro es enseñar a construir Interfaces Gráficas de Usuario (GUI) mediante la herramienta XCODE de Apple. Existen multitud de libros sobre XCODE y sobre el desarrollo de aplicaciones para IPhone, IPad y IPod. Algunas de ellas han sido seleccionadas en la Bibliografía de este Capítulo de Introducción. Todos ellos tienen información valiosa para los desarrolladores de aplicaciones para estos dispositivos, pero nuestra principal idea al redactar este libro es presentar las herramientas de desarrollo de Apple para el prototipado y la generación de Interfaces de Usuario. El enfoque seguido en el libro es el de hacer una introducción al entorno XCode y a las principales características del lenguaje Objective-C para inmediatamente proceder a realizar pequeños proyectos de aplicaciones de complejidad creciente que nos irán introduciendo en los conceptos del desarrollo de interfaces de usuario para estos dispositivos. Es el enfoque que siguen los libros [10,11,12] de la bibliografía por lo que se sugiere la continuación del estudio de estos temas mediante estos libros.

7 GRUPO CHICO - UCLM Hay tres libros en castellano [7,8,9] que sirven para profundizar en el desarrollo de aplicaciones mediante XCode, Cocoa y que incluyen un estudio avanzado de Objective-C. También se recomienda su lectura en paralelo con este libro, ya que tratan de forma mas pormenorizada la sintaxis del lenguaje y el framework Cocoa. El libro puede ser utilizado en clases prácticas de asignaturas como las de Interfaces de Usuario o Interacción Persona Ordenador. También en las de Introducción a la Programación, siempre que se utilice como lenguaje de programación C u Objective- C. Este libro se adhiere a la licencia Creative Commons y puede ser reproducido siempre citando la fuente que se ha utilizado y no puede obtenerse beneficio alguno de su distribución. 0.2 Agradecimientos Para la realización de este libro se ha contado con una ayuda del Departamento de Tecnologías y Sistemas de Información de la Universidad de Castilla La Mancha (UCLM), de acuerdo a una subvención de la Junta de Comunidades de Castilla La Mancha (JCCM). A estas tres entidades queremos agradecer la oportunidad de poder redactar esta herramienta que los alumnos de los estudios del Grado de Informática de la UCLM podrán utilizar a partir del curso escolar Bibliografía 1. John Ray y Sean Johnson, Sams teach yourself IPhone Application Development in 24 hours, Sams Publishing, Apple Inc., Object-Oriented Programming with Objective-C, Apple Developer Publications, Apple Inc., ios Application Programming Guide, Apple Developer Publications, Apple Inc., ios Technology Overview, Apple Developer Publications, Apple Inc., The Objective-C Programming Language, Apple Developer Publications, Dan Pilone y Tracey Pilone, Head First iphone Development, O Really, Bert Altenberg, Alex Clarke y Philippe Mougin, Become an Xcoder, versión 1.15, disponible en Disponible en castellano. 8. Fernando Lopez, El lenguaje Objective-C para programadores C++ y Java, Disponible en 4

8 DESARROLLO DE INTERFACES DE USUARIO CON X CODE 9. Fernando Lopez, Programación Cocoa con Foundation Framework, Disponible en David Mark, Joachim Bondo, Owen Goss, Peter Honeder, Ray Kiddy, Steve Finkelstein, Tom Harrington, Jonathan Saggau, Noel Llopis, Joe Pezzillo, Florian Pflug, Dylan Bruzenak, Ben Smith, iphone advanced Projects, Apress, Dave Mark y Jeff LaMarche, Beginning iphone 3 Development: Exploring the iphone SDK, Apress, David Barnard, Joachim Bondo, Dan Burcaw, David Kaneda, Craig Kemper, Tim Novikoff, Chris Parrish, Brad Ellis, Keith Peters, Ju rgen Siebert, Eddie Wilson, iphone user interface design, Apress,

9

10 Capítulo 1 1. Dispositivos y programa de desarrolladores de Apple En primer lugar presentamos las principales características de los dispositivos que vamos a usar para el desarrollo de las Interfaces de Usuario (UI). Posteriormente describimos el programa de desarrolladores de Apple que necesitamos conocer para desarrollar aplicaciones en XCode. 1.1 Dispositivos: iphone, ipad, ipod Los dispositivos que vamos a utilizar para el desarrollo de interfaces de usuario son verdaderamente máquinas con grandes capacidades. A pesar de su pequeño tamaño, un IPhone es un computador con un sistema operativo capaz, UNIX, con una memoria que haría las delicias de cualquier mini de los años 80 y que en su última versión de sistema operativo permite multitarea en las aplicaciones, aunque de una manera limitada, ya que las restricciones para la conservación de la batería tienen que estar presentes en todo momento. Un IPhone (3G/3GS) tiene una resolución de 320 x 480 píxeles (Figura 1). Esta restricción es una de las más importantes. Vamos a restringir nuestras interfaces de usuario a esta circunstancia en este libro, aunque el IPad o un IMac, nos permitirían interfaces de usuario más complejas. Un IPhone 4 tiene una resolución de 960 x 640, añadiendo una resolución envidiable que Apple ha denominado retina display y que supone para una pantalla semejante a las anteriores elevar a 326 píxeles por pulgada los anteriores 163. En cuanto al IPad, su resolución es de 1024 x 768 píxeles (Figura 2). Podemos utilizar OpenGL ES para realizar gráficos 2D y 3D, y en el caso de los IPhone 3GS puede usarse OpenGL 2.0 gracias a un chipset 3D que integra este terminal. El IPhone dispone de procesadores ARM a 412 y 600 MHz y una memoria de 128 Mb y 256 Mb para los modelos 3G y 3GS, respectivamente. Esta es una de las restricciones más importantes a tener en cuenta en el desarrollo de aplicaciones, ya que aunque los dispositivos tienen memorias de 16 y 32 Gb, el IPhone no maneja memoria dinámica.

11 GRUPO CHICO - UCLM La conectividad va desde la EDGE de más baja velocidad hasta la actual HSDPA 7.2 para acceso de pago y la conectividad WiFi y Bluetooth. Figura 1. IPhone (Extraído del Simulador de XCode) 8

12 DESARROLLO DE INTERFACES DE USUARIO CON X CODE Figura 2. IPad (Extraído del Simulador de XCode) La característica más importante y lo que le ha convertido en un terminal revolucionario es la capacidad multitouch (usando hasta 4 dedos) de su pantalla. También integra un GPS (3G/3GS/4) y una brújula digital (3GS/4), capacidades que han supuesto su uso como terminal de bajo coste en aplicaciones de Realidad Aumentada. Se añaden a las características de estos terminales un audio de alta calidad y el uso de vibración. Además disponemos de cámaras para realizar fotos de hasta 3 megapíxeles con capacidades para realizar y editar vídeo en las versiones superiores del dispositivo. Muchas de las características presentadas se encuentran en los terminales ipod y ipad, pero no todas, aunque esto varía con el tiempo y es de prever que el IPad terminará teniendo cámara integrada tanto en el frontal como en el reverso del dispositivo lo que lo convertirá en el mejor instrumento para realizar a bajo coste aplicaciones de Realidad Aumentada. 1.2 Desarrollo de Aplicaciones sobre IPhone Para desarrollar una aplicación y ejecutarla en el Simulador de IPhone solo es necesario descargar el fichero dmg correspondiente sobre un ordenador Apple con sistema operativo Mac OS X, y con preferencia la versión denominada Snow Leopard (10.6). Si se quieren subir aplicaciones a la tienda ITunes de aplicaciones (App Store) es necesario pagar a Apple 99 $ anuales. La Universidad de Castilla La Mancha tiene un acuerdo con Apple España para desarrollar aplicaciones y poderlas ejecutar en IPhone de acuerdo a una licencia especialmente destinada a la formación en Universidades. Es de acuerdo a esta licencia como vamos a desarrollar las interfaces de usuario de este curso. Los pasos pasa desarrollar, probar y distribuir las aplicaciones iphone OS son los siguientes: 1. Crear un equipo de desarrollo en el iphone Developer Program ( o solicitar formar parte de alguno ya existente. 2. Solicitar un certificado de desarrollador y que éste sea aceptado por alguno de los administradores del equipo de desarrollo. 3. Agregar dispositivos (IPod Touch, IPhone o IPad) al equipo de desarrollo. 4. Asignar un App ID o identificador de aplicación para cada aplicación que se desarrolle. 9

13 GRUPO CHICO - UCLM 5. Crear un perfil en el que se agrupe el certificado de desarrollador, el identificador del dispositivo donde se va a instalar la aplicación y el identificador de la aplicación que se va a probar Equipo de desarrollo Dentro del equipo de desarrollo del programa para universidades existen 3 roles posibles: Member: Perteneciendo a este rol se podrá solicitar el certificado de desarrollador. Para probar aplicaciones se necesitará descargar un perfil, los cuales sólo pueden ser creados por algún miembro de rango superior. Admin: Además de los permisos de un member podrá invitar a personas al equipo, aprobar certificados de desarrollador, introducir dispositivos, crear AppID y crear perfiles. Agent: Además de los permisos de un admin podrá activar un AppID para usar el servicio de notificaciones Push. Es el único rol que tiene contacto directo con el programa de desarrollo de iphone Certificado de desarrollador Para crear un certificado en primer lugar se deben desactivar las opciones OCSP y CRL del llavero del ordenador Mac. Para esto se debe hacer clic en Acceso a llaveros > Preferencias > Certificados (Figura 3). Figura 3. Configuración de certificados en MacOS X. 10

14 DESARROLLO DE INTERFACES DE USUARIO CON X CODE A continuación se debe solicitar el certificado, para lo cual es necesario hacer clic en Acceso a llaveros > Asistente para certificados > Solicitar un certificado a una autoridad de certificación (Figura 4). Figura 4. Solicitud de certificado. 11

15 GRUPO CHICO - UCLM Se escribe el correo electrónico así como el nombre del desarrollador, a continuación se elige la opción Guardar en el disco y se establece el tamaño de la clave en 2048 bits y Algoritmo RSA (Figura 5). Figura 5. Instalando el certificado en nuestro ordenador. En el siguiente paso se subirá el certificado al portal de desarrollo de tu equipo y se esperará a que éste sea aceptado por al menos un Admin o por el Agent. La aceptación/rechazo te será comunicada vía correo electrónico. La reinstalación del SO del Mac puede dar problemas con el certificado, por lo que es recomendable crear uno nuevo o exportar el anterior antes de reinstalar Agregar dispositivos Se pueden agregar hasta 200 ipod Touch, ipad o iphone para los que cada uno obtendrá automáticamente un identificador (ID) único. 12

16 DESARROLLO DE INTERFACES DE USUARIO CON X CODE Figura 6. Añadiendo dispositivos en el portal de Apple Developer Identificador de Aplicaciones (AppID) Este identificador es necesario sólo cuando se usen algunas características del sistema operativo del iphone, como las notificaciones Push o el intercambio de datos entre aplicaciones. El identificador esta formado por dos partes: (ID generado por apple).(id generado por el usuario) Existen dos tipos de identificadores: Wildcard: Permite el intercambio de datos entre las aplicaciones que compartan la parte fija del AppID (antes del asterisco). Ejem: AB76TY.* ó U87UTR.es.uclm.* 13

17 GRUPO CHICO - UCLM Explicit: Permite a la aplicación usar el servicio de notificaciones Push. Ejem: G5R45E.es.uclm.burbuja Figura 7. Gestión de Identificadores de Aplicaciones (App ID) en el portal de desarrolladores. 14

18 DESARROLLO DE INTERFACES DE USUARIO CON X CODE Perfiles Con el perfil se consigue agrupar todo lo necesario para probar las aplicaciones en un dispositivo real. Al crear el perfil se agrupa el certificado del autor de la aplicación con el identificador del dispositivo en el que vamos a probar y con el identificador de la aplicación que se va a instalar. Figura 8. Gestión de Perfiles (Provisioning Profiles). Una vez creado, en el portal de desarrollo del equipo, se descargará el perfil al dispositivo en el se que va a realizar la prueba. Antes de ejecutar la prueba, se debe introducir en Xcode el App ID (si el elegido es de tipo Wildcard no será necesario) y seleccionar el dispositivo que está agregado en el perfil. 15

19

20 Capítulo 2 2. Objective-C y XCode Presentamos de manera sucinta la sintaxis de Objective-C. Además se explica el uso del entorno XCode de manera abreviada con vistas a compilar algunos programas muy simples. 2.1 Generalidades sobre el lenguaje La sintaxis de Objective C es un superconjunto de C. Por tanto para conocer las principales sentencias de Objective C sobre convenciones en nombres de variables, instrucciones de selección, de control, etc. pueden seguirse cualquiera de los libros de consulta sobre C. Solo vamos a detallar algunas características que es necesario saber bien porque pertenecen al superconjunto de C que no están en el C estándar o porque es ligeramente diferente del estándar. Sobre las variables se usa la convención habitual de comenzar con letra minúscula y usar la nomenclatura camelcase. Objective C distingue mayúsculas de minúsculas, por lo que hay que tener cuidado en este sentido. Es mejor por tanto llamar a una variable como anchorectangulo en la convención camelcase y saber que la variable anchorectangulo es diferente a la anterior. Los tipos de datos primitivos son los mismos de C, así como las operaciones matemáticas o los comentarios en el programa, que como en otros lenguajes de programación es muy recomendable utilizar. Para imprimir resultados en la salida estándar podemos utilizar las funciones predeterminadas de C, pero en Objective-C además podemos utilizar funciones del entorno Cocoa como NSLog() que imprime en la consola (Console) del Entorno Integrado de Desarrollo (IDE) XCode. Podemos ver la consola en el menú [Run] (Cmd-Shift-R). Hemos usado la función NSLog que se diseñó para presentar mensajes de error en la consola, pero podemos utilizarla perfectamente para presentar información en la salida estándar, junto a otras funciones más específicas de esta tarea. También podemos hacer uso de printf() como en el siguiente código: //[programa1] #include <stdio.h> int main() {

21 GRUPO CHICO - UCLM printf("hola mundo\n"); return 0; Al ejecutarlo, se muestra el texto "Hola mundo" en la Consola, que nunca a nadie se le había ocurrido como salida de un programa hasta el nacimiento de este libro. Si queremos utilizar los Strings en Objective-C tenemos que poner el texto y " (entre las comillas dobles). La salida completa del compilador en la consola es algo de este estilo: Figura 9. La Consola de XCode con el resultado de la ejecución del programa 1. Para probar la función NSLog() vamos a utilizar el siguiente código: //[programa 2] #import <Foundation/Foundation.h> int main (int argc, const char * argv[]) //línea 3 { NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init]; //línea 5 // insert code here... NSLog(@"Hola mundo"); [pool drain]; //Línea 8 return 0; NSLog() es parte de una librería denominada Foundation. Para poder utilizarla tenemos que poner la directiva del compilador siguiente: #import <Foundation/Foundation.h> Para escribir este programa tienes que hacer los siguientes pasos (Hemos utilizado XCode 3.2.3, puede ser ligeramente diferente en otras versiones): 1. Selecciona un nuevo Proyecto (File>New Project) y asegúrate de elegir Command Line Tool y Type Foundation (Figura 10). 18

22 DESARROLLO DE INTERFACES DE USUARIO CON XCODE 2. Tras poner un nombre al programa, en este caso programa2, aparece un archivo denominado programa2.m que es el que albergará nuestro código Objective-C (Figura 11). 3. Abre programa2.m y podrás editar el código y añadir el que hemos propuesto. Verás que parte del código ya lo ha añadido automáticamente XCode, así que completa lo que falte. 4. Abre la Consola con Cmd-Shift-R ( R) para ver el resultado de la compilación y ejecución. Si el resultado es Program exited with status value:0. todo ha salido bien. Figura 10. Elección de un nuevo Proyecto de Línea de Instrucciones. 19

23 GRUPO CHICO - UCLM Figura 11. El IDE XCode con nuestro nuevo programa. En el programa que acabamos de ver es importante NSAutoreleasePool, así como pool y drain. Con la primera instrucción solicitamos memoria (línea 3) y con la instrucción en la línea 8 la liberamos. Vamos a introducir un error en nuestro código para ver como aparecen los errores en XCode. Cambiemos el programa 2 eliminando el punto y coma final de la línea 8: //[programa 3] #import <Foundation/Foundation.h> int main (int argc, const char * argv[]) //línea 3 { NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init]; //línea 5 // insert code here... NSLog(@"Hola mundo"); [pool drain] //Línea 8, LE QUITAMOS el ; return 0; Clicamos en el botón de Build and Run: 20

24 DESARROLLO DE INTERFACES DE USUARIO CON XCODE Figura 12. Ventana de depuración mostrando el error. El resultado de la compilación aparece en la fig. 12. En la línea de información, abajo a la derecha se nos informa de que la compilación ha fallado con un error. Claramente advierte de que falta el punto y coma al final de la línea. Para aprender más sobre el depurador recomendamos leer la documentación en línea de que dispone XCode, para ello en el menú Help busca Debugging in the debugger. El depurador de XCode es de una potencia extraordinaria por lo que se recomienda conocer en detalle todas sus características. A pesar de esta potencia su estudio en este libro excede los objetivos de un texto de introducción que es lo que presentamos aquí. Solo vamos a explicar algunas técnicas esenciales para el manejo del depurador. Una de las características más interesantes en un depurador es la posibilidad de insertar puntos de ruptura del flujo de programación (breakpoints) donde podemos parar la ejecución del programa y observar los valores de variables seleccionadas, los resultados intermedios, etc. Para ello hacemos clic con el ratón secundario en el margen gris que está a la izquierda del código (donde aparecen los números de línea) y en la línea en la que queremos que el programa suspenda la ejecución. En ese punto Xcode insertará un "breakpoint" (punto de ruptura), que se representa mediante una flecha azul (Figura 13). 21

25 GRUPO CHICO - UCLM Figura 13. Ventana de depuración con 2 breakpoints. Hemos colocado dos puntos de ruptura en el código en las líneas 5 y 9. Eliminamos el error en la línea 8 y lanzamos la compilación en este caso no sobre el icono anterior sino sobre el nuevo que aparece denominado "Build and Debug" (Compilar y depurar): El botón de compilar y depurar. La ventana del Depurador aparece en la figura

26 DESARROLLO DE INTERFACES DE USUARIO CON XCODE Figura 14. Depurador con la consola y el punto de break en la línea 5. El Depurador de Xcode permite ejecutar el programa paso a paso y consultar el valor de las variables. El programa se ejecuta hasta que se alcanza el primer breakpoint. Los botones de Restart y Continue nos sirven para volver al principio y por tanto colocar el flujo en el primer breakpoint o para ir al siguiente punto de corte. No necesitamos nada más por el momento para escribir, depurar y ejecutar programas para Mac OS X. 2.2 Sentencias condicionales. Las sentencias condicionales son igual que en C. Una sentencia if es del tipo: if (volumen > 50) { NSLog(@"El volumen es mayor que 50."); 23

27 GRUPO CHICO - UCLM Una sentencia if-else por el contrario tiene esta forma: if (volumen > 50) { NSLog(@"El volumen es mayor que 50."); else { NSLog(@"El volumen es menor que 50."); Los operadores admitidos para comparar números son los siguientes: == igual a > mayor que < menor que >= mayor o igual que <= menor o igual que!= distinto de 2.3 Bucles. Podemos utilizar bucles for cuando conocemos el numero exacto de veces que tenemos que realizar el bucle: int x; for (x = 1; x <= 5; x++) { NSLog(@"El valor de x es %d", x); Y utilizar los bucles while y do-while: int cont = 1; while (cont <= 10) { NSLog(@"El valor del contador es %d", cont); contador = cont + 1; int cont = 1; do { NSLog(@"El valor del contador es %d", cont); contador = cont + 1; while (cont <= 10); 24

28 DESARROLLO DE INTERFACES DE USUARIO CON XCODE Capítulo 3 3. App1: Linterna Vamos a desarrollar una aplicación que durante algún tiempo tuvo bastantes descargas en la AppStore de Apple: una linterna. Aunque será mucho mejor que la que se podía descargas por 0,79 $. 3.1 Introducción A través de este capitulo se explicarán las nociones básicas para realizar una aplicación sencilla para el iphone. En este caso se trata de una linterna, que tendrá un control de intensidad y una opción de auto off, para que se apague automáticamente pasados unos segundos. Se comenzará explicando todas las tareas necesarias para empezar a programar en Objective-C, los programas imprescindibles y las nociones básicas para llevar a cabo el proyecto. Después se desarrollará la aplicación paso a paso y explicando lo más representativo de cada uno de ellos. 3.2 Instalaciones necesarias Para la programación del iphone o del ipod touch es necesaria la descarga del iphone SDK with Xcode. Esta descarga se realiza a través de la Web del centro de desarrollo de Apple ( para lo cual es necesario formar parte de algún equipo de desarrollo de Apple. Una vez instalado el Xcode ya podemos empezar a programar nuestra aplicación para el iphone/ipod Touch. 3.3 Creando el proyecto Debemos lanzar el Xcode (por defecto se encuentra en /Developer/Applications/Xcode) y elegir la opción File > New Project. Seleccionamos la opción Windows-based Application (Véase Figura 15). La plantilla Windows-based Application es la plantilla por defecto y está preparada para ser personalizada por el usuario y proporciona una ventana y el controlador de la aplicación. Se podría usar de igual modo la plantilla View-based Application que proporciona algunos elementos más, pero en este tutorial crearemos el resto de elementos que se necesiten para realizar la aplicación. 25

29 GRUPO CHICO - UCLM Figura 15: Elección del tipo de proyecto Una vez seleccionada la plantilla Windows-based Application, se nos muestra una ventana en la que debemos dar nombre a nuestro proyecto, le daremos el nombre de Linterna y elegiremos la ruta donde queramos que se guarde la carpeta que contendrá todos los archivos de nuestro proyecto. Después de crear el proyecto se nos muestra la pantalla principal de Xcode (Véase Figura 16). Si nunca hemos usado antes Xcode, dedicaremos el tiempo que consideremos necesario para explorar un poco la aplicación. 26

30 DESARROLLO DE INTERFACES DE USUARIO CON XCODE Figura 16: Vista inicial del proyecto En la parte superior izquierda podemos elegir el tipo de dispositivo en el cual queremos ejecutar nuestra aplicación. Por defecto aparece iphone Simulator que es el que utilizaremos, si queremos probar la aplicación en un dispositivo real necesitaremos seguir los pasos marcados en el Apartado 3.7. En la parte izquierda tenemos agrupados todos los archivos que forman parte de nuestro proyecto. Al hacer clic en cada uno de ellos se mostrará su contenido en la parte derecha, mientras que con doble clic se mostrará su contenido en una nueva ventana. Ahora vamos a añadir la clase controladora. Esta será la responsable de mostrar, definir y controlar los elementos de la interfaz. Para añadirla pulsamos File > New File y dentro de Cocoa Touch Class seleccionamos UIViewController subclass (Véase Figura 17). Hay que asegurarse de que no esta seleccionada la opción With XIB for user interface. Le daremos el nombre de LinternaViewController y crearemos también la cabecera (Also create LinternaViewController.h). Al hacer clic en File > New File los archivos se crearán en la carpeta que tengamos seleccionada, por lo que deberíamos tener seleccionada previamente la carpeta Classes. 27

31 GRUPO CHICO - UCLM Figura 17: Añadiendo la clase controladora de la interfaz El archivo MainWindow.xib (dentro de Resources) será el que defina la vista de nuestro controlador. Podríamos crear nuestro propio fichero xib, pero aumentaría la complejidad de la aplicación. Los archivos xib, antiguamente nib, son ficheros que contienen una descripción de los componentes de la interfaz gráfica, se cargan al arrancar la aplicación y los usa Cocoa (API de programación de Mac OS X) para dibujar la ventana y sus componentes en pantalla. Se trata de ficheros XML de acuerdo a las tendencias actuales de separación de la Interfaz de Usuario y la lógica de la aplicación y a las posibilidades que las técnicas de Model-Based User Interface Design añaden a la generación automática de interfaces de usuario. Una vez creados mediante el paso anterior los archivos LinternaViewController.h, LinternaViewController.m y teniendo MainWindow.xib vamos a añadir los principales métodos y variables a la cabecera. Para lo cual hacemos clic en LinternaViewController.h y añadimos: 28

32 DESARROLLO DE INTERFACES DE USUARIO CON XCODE #import LinternaViewController : UIViewController { IBOutlet UILabel*autooff; IBOutlet UILabel*segto; IBOutlet UIProgressView * progreso; - (IBAction)sliderChanged:(id)sender; - (IBAction)segmentedChanged:(id)sender; - (void)contadortiempo: (NSDecimalNumber *)intervalo; - (void)actualizarporcentaje: (NSDecimalNumber *) En este código se define la interfaz LinternaViewController que deriva de UIViewController, y a su vez se definen las variables necesarias. Entre estas, se encuentra la variable progreso que es de tipo UIProgressView y que nos mostrará el tiempo que resta para que se cierre la aplicación. Autooff y segto son dos etiquetas de texto. IBOutlet indica al compilador que ese elemento se enlazará con la herramienta Interface Builder, por lo que posteriormente habrá que conectar la variables con los objetos que añadamos en la interfaz mediante la herramienta Interface Builder. El método sliderchanged servirá para ajustar la intensidad de la linterna. Cada vez que se modifique la posición del slider este método tomará el control. Cuando pulsemos algún segmento será el método segmentedchanged el que tomará el control y lanzará un hilo para programar el cierre de la aplicación. Los dos métodos restantes son dos métodos de apoyo que sirven para actualizar la barra de progreso y para controlar el tiempo restante hasta el cierre programado de la aplicación. IBAction indica al compilador que el método se lanzará con una acción de la herramienta Interface Builder, por ejemplo, pulsando un botón en la interfaz. 3.4 Desarrollando la interfaz Antes de seguir debemos guardar nuestro proyecto (File > Save). Para comenzar con el desarrollo de la interfaz necesitaremos el Interface Builder. Este se puede abrir directamente desde nuestro proyecto en Xcode, para lo cual, haremos doble clic en el archivo MainWindow.xib. Nos aparece la interfaz vacía y una ventana que muestra los elementos del archivo MainWindow.xib. Para añadir los elementos necesarios en la interfaz haremos clic en Tools > Library. En primer lugar arrastramos desde la librería Cocoa Touch Controllers un objeto UIViewController a MainWindow.xib. Debemos fijarnos en el objeto View Controller que acabamos de añadir, que será el responsable de controlar la vista. Para esto, debemos hacer clic sobre este y en Identity (pulsar Tools > Inspector) seleccionar nuestra clase LinternaViewController, que es la que va a controlar nuestra interfaz (Véase la Figura 18). 29

33 GRUPO CHICO - UCLM Figura 18: Contenido del archivo MainWindow.xib Ahora tenemos que arrastrar a la ventana de la interfaz (doble clic sobre Window dentro de MainWindow.xib si no aparece) las dos etiquetas (UILabel) necesarias, una barra de segmentos (UISegmentedControl), una barra de progreso (UIProgressView) y un slider (UISlider). Todos se encuentran en Library - Cocoa Touch Inputs and Values. Nos debe quedar algo similar a lo mostrado en la Figura 19. Haciendo doble clic en cada etiqueta de texto podremos poner el texto que queramos dentro de esta. Debemos pulsar Tools > Inspector y hacer clic en la barra de segmentos, para que quede correctamente configurado, dentro de Attributes el estilo debe ser Bar, tiene que tener 4 segmentos con los siguientes nombres: 10, 30, 60 y 120. Es muy importante que ninguno de ellos esté seleccionado de antemano, todos deben tener desmarcada la opción selected. A continuación hacemos clic en el slider, establecemos el valor mínimo a 180, el máximo a 255 y el inicial también a 255. En la barra de progreso debemos seleccionar la opción Hidden y establecer el valor de progreso a 0. 30

34 DESARROLLO DE INTERFACES DE USUARIO CON XCODE Figura 19: Interfaz de la linterna 3.5 Añadiendo las conexiones Ya tenemos la interfaz en bruto, pero no está relacionada/conectada con ninguno de los métodos o variables que hemos definido en nuestra cabecera LinternaViewController.h. A continuación vamos a conectar la vista del controlador Linterna View Controller con la interfaz que hemos desarrollado, con esto será nuestra clase LinternaViewController la que manejará los eventos producidos por la interfaz. Para manejar los eventos debemos hacer clic en el objeto Linterna View Controller, seleccionar connections y crear una conexión desde Outlet - view hasta Window de la ventana MainWindow.xib, como muestra la Figura

35 GRUPO CHICO - UCLM Figura 20: Conexión entre la interfaz y el controlador A continuación debemos crear una conexión entre las etiquetas de texto y las variables con su mismo nombre. Para esto haremos de nuevo clic sobre Linterna View Controller y en connections crearemos una conexión entre segto y Label (seg to) y entre autooff y Label (Auto OFF) como muestra la Figura 21. Para mostrar Label hay que desplegar el contenido de View dentro de MainWindow.xib. Figura 21: Conexión entre autooff y Label (Auto OFF) Nos quedan por conectar el slider, la barra de segmentos y la barra de progreso. Para este último debemos hacer doble clic de nuevo en el objeto Linterna View Controller y crear una conexión entre progreso y Progress View. 32

36 DESARROLLO DE INTERFACES DE USUARIO CON XCODE Posteriormente hay que crear una conexión entre segmentedchanged y Bar Segmented Control (se encuentra dentro de Received Actions), de tipo Touch up Inside. Lo mismo para sliderchanged. Ya tenemos conectado nuestro controlador Linterna con la vista de la interfaz, con las etiquetas, el slider, la barra de segmentos y la barra de progreso. Debemos guardar el archivo MainWindow.xib (File > Save) y ya podemos cerrar el Interface Builder. 3.6 Desarrollando el código Debemos dotar de contenido a los métodos declarados en la cabecera, para lo cual añadiremos a LinternaViewController.m lo siguente: - (IBAction)sliderChanged:(id)sender{ UISlider *slider = (UISlider *)sender; [[self view] setbackgroundcolor:[uicolor colorwithred:((int)(slider.value))/255.0 green:((int)(slider.value))/255.0 blue:((int)(slider.value))/255.0 alpha:1.0f]]; - (IBAction)segmentedChanged:(id)sender{ [progreso sethidden:no]; [segto sethidden:yes]; UISegmentedControl *segmen = (UISegmentedControl *)sender; [autooff settextcolor: [UIColor redcolor]]; switch (segmen.selectedsegmentindex) { case 0: [NSThread detachnewthreadselector:@selector(contadortiempo:) totarget:self withobject:[nsdecimalnumber numberwithfloat: 0.1]]; break; case 1: [NSThread detachnewthreadselector:@selector(contadortiempo:) totarget:self withobject:[nsdecimalnumber numberwithfloat: 0.3]]; break; case 2: [NSThread detachnewthreadselector:@selector(contadortiempo:) totarget:self withobject:[nsdecimalnumber numberwithfloat: 0.6]]; break; case 3: [NSThread detachnewthreadselector:@selector(contadortiempo:) totarget:self withobject:[nsdecimalnumber numberwithfloat: 1.2]]; break; [segmen sethidden:yes]; - (void) actualizarporcentaje: (NSDecimalNumber *) porcentaje{ progreso.progress=[porcentaje floatvalue]/100.0; - (void) contadortiempo: (NSDecimalNumber *) intervalo{ NSAutoreleasePool *apool = [[NSAutoreleasePool alloc] init]; for(int i=1; i<=100; i++){ [self performselectoronmainthread:@selector(actualizarporcentaje:) withobject:[nsdecimalnumber numberwithint: i] waituntildone:false]; [NSThread sleepfortimeinterval:[intervalo floatvalue]]; exit(0); [apool release]; 33

37 GRUPO CHICO - UCLM - (void)dealloc { [autooff release]; [segto release]; [progreso release]; [super dealloc]; El método sliderchanged será llamado cada vez que movamos el valor del slider y lo que hará es actualizar el color de fondo de pantalla, desde un blanco grisáceo hasta el blanco más brillante, que será el que más luz aporte. El método segmentedchanged será llamado cuando hagamos clic en algún segmento que representa un intervalo de tiempo. Este abrirá un hilo que llamará al método contadortiempo con un valor determinado. También se ocultará la barra de segmentos y la etiqueta segto, a la vez que se cambia el color de letra de la etiqueta autooff. El motivo de usar un hilo es que gracias a este cuando activemos el temporizador podremos seguir regulando la intensidad y visualizando los cambios en la barra con el contador de tiempo. Sin el hilo, no se podría cambiar el valor de ningún objeto de la pantalla, ya que el programa se quedaría congelado hasta que terminase el bucle. El método contadortiempo se encargará de que la aplicación se apague cuando pase un intervalo concreto de tiempo y de llamar a actualizarporcentaje que cambiará el valor de la barra que muestra el tiempo que falta para que la aplicación se cierre de manera automática. Tiene un bucle con 100 operaciones, en cada iteración se queda dormido un intervalo de tiempo que depende de la opción pulsada en la barra de segmentos. Además en cada iteración se actualiza la barra de progreso del contador de tiempo. Se han elegido 100 iteraciones para que los incrementos del valor de la barra de progreso sean lo más suaves posibles. En dealloc debemos añadir las variables creadas para que las libere de la memoria. 3.7 Probando la aplicación en un iphone Para probar la aplicación en un iphone o en un ipod touch será necesario seguir esta serie de pasos: 1. Crear un equipo de desarrollo en el iphone Developer Program o solicitar formar parte de alguno ya existente. 2. Solicitar un certificado de desarrollador. Para lo cual se debe crear un certificado en el llavero del Mac (Asistente para Certificados > Solicitar un certificado de una autoridad de certificación), guardarlo en el disco duro y posteriormente subirlo al portal de desarrollo del equipo. Este tendrá que ser aceptado por alguno de los administrares del equipo de desarrollo. 3. Agregar dispositivos (ipod touch o iphone) al equipo de desarrollo, cada uno obtendrá un identificador único. 4. Asignar un App ID o identificador de aplicación para cada aplicación que se desarrolle. Únicamente será necesario en aquellas aplicaciones que usen características del sistema 34

38 DESARROLLO DE INTERFACES DE USUARIO CON XCODE operativo del iphone, como las notificaciones Push o el intercambio de datos entre aplicaciones. 5. Crear un perfil en el que se agrupe el certificado de desarrollador, el identificador del dispositivo donde se va a instalar la aplicación y un identificador de aplicación válido. Este perfil se descargará al dispositivo en el que se vaya a probar la aplicación. 35

39

40

41 GRUPO CHICO - UCLM Capítulo 4 4. App2: Calculadora En este capitulo implementamos una calculadora. Si buscamos en la Appstore veremos que hay cientos de aplicaciones del mismo tipo que se venden entre 0 y 12,99 euros. Veremos que no es tan difícil hacer una por nosotros mismos. 4.1 Introducción Vamos a implementar una calculadora formada por los diez dígitos; las operaciones sumar, restar, multiplicar, dividir y resultado; y la opción de cancelar la operación actual. Debemos lanzar el Xcode (por defecto se encuentra en /Developer/Applications/Xcode) y elegir la opción File > New Project. Seleccionamos la opción Windows-based Application (Véase Figura 22). La plantilla Windowsbased Application es la plantilla por defecto, está preparada para ser personalizada por el usuario y proporciona una ventana y el controlador de la aplicación. Se podría usar de igual modo la plantilla View-based Application que proporciona algunos elementos más, pero en este tutorial crearemos el resto de elementos que se necesiten para realizar la aplicación. Una vez seleccionada la plantilla Windows-based Application, se nos muestra una ventana en la que debemos dar nombre a nuestro proyecto, le daremos el nombre de Calculadora y elegiremos la ruta donde queremos que se guarde la carpeta que contendrá todos los archivos de nuestro proyecto. Después de crear el proyecto se nos muestra la pantalla principal de Xcode (Véase Figura 23). Si nunca hemos usado antes Xcode, dedicaremos el tiempo que consideremos necesario para explorar un poco la aplicación. 38

42 DESARROLLO DE INTERFACES DE USUARIO CON XCODE Figura 22: Eleccion del tipo de proyecto Figura 23: Vista inicial del proyecto 39

43 GRUPO CHICO - UCLM En la parte superior izquierda podemos elegir el tipo de dispositivo en el cual queremos ejecutar nuestra aplicación, por defecto viene iphone Simulator que es el que utilizaremos, si queremos probar la aplicación en un dispositivo real necesitaremos seguir los pasos marcados en el Apartado 9. En la parte izquierda tenemos agrupados todos los archivos que forman parte de nuestro proyecto, al hacer clic en cada uno de ellos se mostrará su contenido en la parte derecha, con doble clic se mostrará su contenido en una nueva ventana. Ahora vamos a añadir un View Controller, este será el responsable de mostrar, definir y controlar los elementos de la interfaz. Para añadirlo pulsamos File > New File y dentro de Cocoa Touch Class seleccionamos UIViewController subclass (Véase Figura 24). Debe estar seleccionada la opción With XIB for user interface. Le daremos el nombre de Calcu y crearemos también la cabecera (Also create Calcu.h ). Al hacer clic en File > New File los archivos se crearán en la carpeta que tengamos seleccionada, por lo que deberíamos tener seleccionada previamente la carpeta Classes. Figura 24: Añadiendo el controlador de la interfaz El archivo Calcu.xib será el que defina la vista de nuestro controlador. 40

44 DESARROLLO DE INTERFACES DE USUARIO CON XCODE Los archivos xib, antiguamente nib, son ficheros que contienen una descripción de los componentes de la interfaz gráfica, se cargan al arrancar la aplicación y los usa Cocoa (API de programación de Mac OS X) para pintar la ventana y sus componentes en pantalla. Una vez creados mediante el paso anterior los tres archivos (Calcu.h, Calcu.m y Calcu.xib) vamos a añadir los principales métodos y variables a la cabecera. Para lo cual hacemos clic en Calcu.h y añadimos: #import Calcu : UIViewController { float resultado; int operacionactual; float numeroactual; IBOutlet UILabel *pantallacalculadora; BOOL continuaroperacion; -(IBAction)cancelarOperacion; -(IBAction)botonNumeroPresionado:(id)sender; En este código se define la interfaz Calcu que deriva de UIViewController, a su vez se definen las variables necesarias. Entre estas, se encuentra la variable pantallacalculadora que muestra el resultado de la operación o el último número introducido. IBOutlet indica al compilador que ese elemento se enlazará con la herramienta Interface Builder, por lo que posteriormente habrá que conectar la variable con la etiqueta de texto que añadamos en la interfaz. El método cancelaroperacion servirá para borrar el contenido de la pantalla (el botón AC de la calculadora). Los dos métodos restantes se lanzarán cuando se presione en la calculadora un dígito o una operación. IBAction indica al compilador que el método se lanzará con una acción de la herramienta Interface Builder, por ejemplo, pulsando un botón en la interfaz. 4.4 Desarrollando la interfaz Antes de seguir debemos guardar nuestro proyecto (File > Save). Para comenzar con el desarrollo de la interfaz necesitaremos el Interface Builder. Este se puede abrir directamente desde nuestro proyecto en Xcode, para lo cual, haremos doble clic en el archivo Calcu.xib. 41

45 GRUPO CHICO - UCLM Figura 25. Contenido del archivo Calcu.xib Nos aparece la interfaz vacía y una ventana (Véase Figura 25) que muestra los elementos del archivo Calcu.xib. Para añadir los elementos necesarios en la interfaz haremos clic en Tools > Library y arrastramos los botones (Round Rect Button) necesarios y la etiqueta (Label) que mostrará el resultado de las operaciones o los dígitos marcados, ambos se encuentran en Library - Cocoa Touch Inputs and Values. Haciendo doble clic en cada botón podremos poner el texto que queramos dentro de este. Nos debe quedar algo similar a lo mostrado en la Figura 26, la colocación de los botones y de la etiqueta, es indiferente. 42

46 DESARROLLO DE INTERFACES DE USUARIO CON XCODE Figura 26. Interfaz de la calculadora Un dato a tener en cuenta es que el texto que le hemos añadido a cada botón no lo identifica, es decir, por ahora no podríamos saber que botón se ha pulsado ya que no tienen ningún identificador individual. Para solucionar esto vamos a añadir un identificador a cada uno de los botones. Debemos pulsar Tools > Inspector, ahora hacemos clic en cada uno de los botones y en Attributes tenemos la etiqueta (Tag) en la que debemos introducir el identificador de cada botón. Para los dígitos, hacemos clic en cada uno de ellos y ponemos el identificador igual al número que representan (tag=1 para el número 1, tag=2 para el 2 ). Para las operaciones: 1 para la suma, 2 para la resta, 3 para la multiplicación, 4 para la división y 5 para el igual. Para el botón AC, no es necesaria ninguna etiqueta porque será una conexión única con su método, no cómo el caso de los dígitos que van conectados los diez botones al mismo método (botonnumeropresionado), por lo que necesitamos poder saber cual es el botón que se ha pulsado concretamente. 4.5 Añadiendo las conexiones Ya tenemos la interfaz en bruto, pero no está relacionada/conectada con ninguno de los métodos o variables que hemos definido en nuestra cabecera Calcu.h. 43

47 GRUPO CHICO - UCLM Debemos fijarnos en el objeto File s Owner que será el responsable de controlar la vista. Para esto, debemos hacer doble clic sobre este y en Identity seleccionar nuestra clase Calcu, que es la que va a controlar nuestra interfaz. A continuación vamos a conectar la vista del controlador Calcu con la interfaz que hemos desarrollado, con esto será nuestra clase Calcu la que manejará los eventos producidos por la interfaz. Para esto debemos hacer doble clic en el objeto File s Owner, seleccionar connections y crear una conexión (si no está creada) desde Outlet - view hasta el View de la ventana Calcu.xib, como muestra la Figura 27. Figura 27. Conexión entre la interfaz y el controlador Calcu A continuación debemos crear una conexión entre la etiqueta que mostrará los resultados y la variable pantallacalculadora que hemos creado anteriormente. Para esto haremos de nuevo doble clic sobre File s Owner y en connections crearemos una conexión entre pantallacalculadora y Label (Véase Figura 28). Para mostrar Label hay que desplegar el contenido de View dentro de Calcu.xib. 44

48 DESARROLLO DE INTERFACES DE USUARIO CON XCODE Figura 28. Conexión entre pantallacalculadora y la etiqueta de la interfaz Nos quedan por conectar todos los botones, las operaciones, los dígitos y la operación AC. Para esto debemos hacer doble clic de nuevo en el objeto File s Owner e ir creando conexiones de tipo Touch up Inside entre botonnumeropresionado y cada uno de los dígitos (Véase Figura 29). Luego haremos lo mismo entre botonoperacionpresionado y cada uno de los botones de operación. 45

49 GRUPO CHICO - UCLM Figura 29. Conexión entre el método botonnumeropresionado y el Button 1 Por ultimo, relacionamos el método cancelaroperacion con el botón AC. Ya tenemos conectado nuestro controlador Calcu con la vista de la interfaz, con la etiqueta que muestra el resultado y con todos los botones. Debemos guardar el archivo Calcu.xib (File > Save) y ya podemos cerrar el Interface Builder. 4.6 Mejorando la interfaz No es muy difícil darle un toque de color y mejorar el diseño de nuestra interfaz. Aquí vamos a mostrar un ejemplo de cómo podría quedar la interfaz aplicando un par de mejoras. Empezamos diseñando nuestros propios botones en alguna herramienta de diseño gráfico (GIMP, Seashore, PhotoShop, Paint, etc). Una vez que tengamos las imágenes correspondientes a cada botón/operación debemos agregarlas a nuestro proyecto, para lo cual crearemos una carpeta en Xcode, haciendo clic en Proyect > New Group, a la que llamaremos botones. Haciendo clic derecho sobre la nueva carpeta y pulsando Add > Existing Files podremos adjuntar a nuestro proyecto las imágenes que necesitemos. 46

50 DESARROLLO DE INTERFACES DE USUARIO CON XCODE Ahora, de nuevo en el Interface Builder, haremos doble clic sobre cada botón, y en Background seleccionaremos la imagen que le corresponda. La agregamos a Background y no a Image porque queremos añadir un efecto de resaltado al pulsar cada botón, si estuviese en Image no sería visible. Para esto, debemos seleccionar la opción Shows Touch On Highlight, dentro de los atributos del botón. Para poner el fondo de pantalla negro, pulsaremos este y en Background seleccionamos el color negro. Lo mismo haremos para cambiar el color de la etiqueta que muestra el resultado. Con estos cambios podríamos obtener una interfaz similar a la que se muestra continuación. Figura 30: Interfaz mejorada 4.7 Desarrollando el código Para que al ejecutar nuestro proyecto se lance la interfaz creada debemos añadir el siguiente código en los archivos AppDelegate, estos se encargan de la gestión de memoria del programa y de lanzar el controlador de nuestra interfaz. En CalculadoraAppDelegate.h debemos añadir: #import "Calcu.h" 47

51 GRUPO CHICO - Calcu; En CalculadoraAppDelegate.m, dentro del método applicationdidfinishlaunching, debemos añadir: Calcu *viewcontroller = [[Calcu alloc] initwithnibname:@"calcu" bundle:[nsbundle mainbundle]]; [window addsubview:[viewcontroller view]]; Por último nos falta dotar de contenido a los métodos declarados en la cabecera, para lo cual añadiremos a Calcu.m lo siguiente: -(IBAction)botonNumeroPresionado:(id)sender { numeroactual = numeroactual*10 + (float)[sender tag]; pantallacalculadora.text = [NSString stringwithformat:@"%.3f",numeroactual]; continuaroperacion=false; -(IBAction)cancelarOperacion { numeroactual = 0; pantallacalculadora.text operacionactual = 0; -(IBAction)botonOperacionPresionado:(id)sender { if (operacionactual == 0){ resultado = numeroactual; else { switch (operacionactual) { case 1: resultado = resultado + numeroactual; break; case 2: resultado = resultado - numeroactual; break; case 3: resultado = resultado * numeroactual; break; case 4: resultado = resultado / numeroactual; break; case 5: if(continuaroperacion) numeroactual = resultado; else resultado = numeroactual; break; continuaroperacion=true; 48