Desarrollando sobre iPhone (4): nuestra primera aplicación (II)

En nuestro anterior post indicábamos cómo iba a ser nuestra aplicación HelloWorld y los pasos que íbamos a dar para construir nuestra aplicación, además de dar enlaces a documentación obligada. En este artículo empezamos abriendo el XCode y comenzamos a desarrollar.

Paso 1. Crear el Proyecto.

Por ello abrimos XCode y cerramos (si sale), la ventana de bienvenida de la aplicación. Antes de crear nuestro proyecto, podemos entrar en las preferencias de XCode. En General -> Layout escoged ‘All-In-One’, al menos si queréis poder comparar lo que veis en vuestras pantallas con las imágenes que veréis.

En este momento creamos el proyecto: File -> New Project, y escogemos View-Based:

Según indicamos en el artículo anterior, para un proyecto View-Based XCode nos crea una vista enlazada con una clase Controller (recordad que hablábamos del patrón MVC). Llamad al proyecto HelloWorld y guardadlo en la carpeta que deseéis. Veréis algo similar a esto:

Vemos que disponemos de varios ficheros:

• HelloWorldViewController.h y HelloWorldViewController.m. Ambos se corresponden con el controlador de nuestra pantalla. Aquí estará la lógica relacionada con nuestra vista; en nuestro caso, aquí deberá estar el código que haga que el valor del label cambie con lo que se introduzca en la caja de texto. Vemos que hay un fichero .h y otro .m. El primero es la cabecera, en Java sería la Interface. Aquí van las declaraciones de variables, métodos, etc. El fichero .m es el que contiene ya la implementación.
• HelloWorldViewController.xib. ib=Interface Builder. Este fichero es nuestra vista, la pantalla. Es invocado por MainWindow.xib, la fachada principal de vistas que no tocaremos.
• HelloWorldAppDelegate (.h y .m). No los vamos a modificar, dispone de un puntero a nuestro ViewController.
• Info.plist. Es un XML con información sobre nuestra aplicación. Aquí podemos por ejemplo indicar cuál es el icono de nuestra aplicación.

Paso 2. Diseñar la interfaz.

Vamos a comenzar a «dibujar» la pantalla de nuestra aplicación. Para ello, en XCode hacemos doble clic sobre el HelloWorldViewController.xib, y veremos que se abre la aplicación Interface Builder. Antes de nada, como consejo práctico os recomiendo que verifiquéis siempre que tengáis abiertas las paletas Inspector y Library. Las podéis abrir en el menú Tools de Interface Builder. La paleta Library os permitirá añadir diferentes controles a vuestra vista, y la paleta Inspector os permite ver las propiedades de cada objeto y modificarlas.

No vamos a tratar de hacer una aplicación bonita, sino que funcione. Comenzad localizando la pantalla, etiquetada como View. Si no está abierta, se abre haciendo doble clic sobre View en la pantalla siguiente:

Sobre la vista, arrastrad de la paleta Library un TextField arriba, un Label debajo y por último un Round Rect Button. Se nos fijamos, si tenemos seleccionado un control como el TextField, podemos mover el tamaño de este control, reubicarlo en la pantalla… y en la paleta Inspector podemos disponer de sus propiedades. Seleccionando el botón podemos ponerle un Title con valor «Cambia!». Al final nos quedará algo como esto:

Con esto hemos definido la interfaz de nuestra aplicación. Cumple con lo que habíamos previsto: una caja de texto (en adelante, TextField) donde meteremos información. Un Label (texto fijo) y un botón. Cuando pulsemos el botón, el Label mostrará lo que hayamos escrito en el TextField. Para ello tendremos que crear las variables que referencian al Label y al TextField en nuestro ViewController y deberemos indicarle a Interface Builder la relación entre el Label y el TextField con estas variables. También habrá que crear un método en el ViewController que se encargue de actualizar el valor del Label con lo que hayamos introducido en el TextField, y relacionar el botón con ese método en Interface Builder. Todo eso serán los pasos 3, 4 y 5 de nuestro guión inicial, y será explicado en el siguiente post.

Eso sí, antes de acabar os recomiendo que os fijéis en lo que sale en la paleta Library cuando tienes seleccionado por ejemplo un TextField para añadirlo a la vista:

Podéis observar que te explica que hace el control TextField, pero también pone debajo «UITextField». Esto es importante, porque nos está indicando qué clase del framework UIKit de Cocoa se corresponde con este control. Esto nos da una pista: para poder crear la variable que maneje este control en el ViewController, tendrá que ser de tipo UITextField.