Confía tu proyecto a un equipo profesional

(Los fuentes del ejemplo están disponibles en el pie del artículo).

El ejemplo de hoy nos muestra la utilización de dos clases muy utilizadas. 

1. UITextField

Esta clase nos permite utilizar una simple caja de texto la cual habilita el teclado de nuestro iPhone/iPod Touch para introducir datos. Utilizaremos la tecla return para ocultar el teclado y volver al estado original del programa, aunque existe otra alternativa mucho más elegante y es definir el tipo de botón para aceptar datos:

myTextField.returnKeyType = UIReturnKeyDone;

myTextField.returnKeyType = UIReturnKeyReturn;

Otra buena práctica a la hora de utilizar este tipo de control, es validar los datos antes de ser aceptados. Para ello podemos añadir la función textFieldShouldReturn para controlar los datos introducidos justo cuando el usuario pulse la tecla Done  o Return:

- (BOOL)textFieldShouldReturn:(UITextField *)theTextField

2. UIInterfaceOrientationPortrait

Para controlar la autorotación, tu debes de gestionarla en la clase controladora de vistas ViewController y devolver en el método shouldAutorotateToInterfaceOrientation YES. Igualmente, si usas un toolbar, en la clase de cada uno de ellos debes de implementar también shouldAutorotateToInterfaceOrientation.

Para iniciar la aplicación en un modo concreto, utiliza el fichero de configuración info.plist y define la siguiente clave:

<key>UIStatusBarOrientation</key>

[theTextField resignFirstResponder];

[theTextField becomeFirstResponder];

Desde la úlitma versión publicada del SDK de iPhone por Apple, entre otras novedades hemos podido ver un nuevo tipo de proyecto a la hora de trabajar con nuestro entorno de desarrollo de xCode. En concreto hablamos de Cocoa Touch Utility el cual creará el esqueleto de una aplicación para iPhone con una animación bastante vistosa.

El efecto en cuestión lo podemos apreciar al pulsar un pequeño botón de información situado en la parte inferior derecha de nuestra ventana principal de la aplicación, y para reconocerlo en nuestro código fuente nos vamos a referir a él como FlipsideView.

Vamos a desgranar el proyecto creado para conocer nuevos detalles y aprender de ellos.

1. Ficheros de recursos

Un detalle que observamos es la creación de varios ficheros de recursos XIB, donde además del ya creado por defecto, vemos el que se encargar de la ventana principal de la aplicación y un segundo que es para la ventana de información que viene tras el efecto animado. Ambos ficheros solo constan de una simple vista.

2. Main View

Como su nombre bien indica, aqui encontramos la vista y el controlador de la misma encargados de la vista principal que aparece al ejecutar nuestra aplicación. Tan solo destacar en ella la creación del botón de información, ubicado en nuestro fichero MainViewController.m. Como era de imaginar es un botón sencillo de la clase UIButton con un valor asignado al método buttonWithType de UIButtonTypeInfoLight. Existen otros tipos predefinidos como:

typedef enum {
UIButtonTypeCustom = 0,
UIButtonTypeRoundedRect,
UIButtonTypeGlass,
UIButtonTypeDetailDisclosure,
UIButtonTypeInfoLight,
UIButtonTypeInfoDark,
UIButtonTypeContactAdd,
UIButtonTypeNavigation = 100,
UIButtonTypeNavigationBack,
UIButtonTypeNavigationDone
} UIButtonType;

3. Flipside View

Al igual que en el apartado 2 anterior, aquí encontramos los ficheros responsables de la vista de información con su controlador incluido. Destacamos la creación de una barra de navegación con el botón Done para volver a la vista anterior.

Para dicho control utilizamos la clase UINavigationBar donde definimos el tipo de botón que queremos insertar con initWithBarButtonSystemItem:UIBarButtonSystemItemDone. Existen otros como:

typedef enum {
UIBarButtonSystemItemDone,
UIBarButtonSystemItemCancel,
UIBarButtonSystemItemEdit,
UIBarButtonSystemItemSave,
UIBarButtonSystemItemAdd,
UIBarButtonSystemItemFlexibleSpace,
UIBarButtonSystemItemFixedSpace,
UIBarButtonSystemItemCompose,
UIBarButtonSystemItemReply,
UIBarButtonSystemItemAction,
UIBarButtonSystemItemOrganize,
UIBarButtonSystemItemBookmarks,
UIBarButtonSystemItemSearch,
UIBarButtonSystemItemRefresh,
UIBarButtonSystemItemStop,
UIBarButtonSystemItemCamera,
UIBarButtonSystemItemTrash,
UIBarButtonSystemItemPageCurl,
UIBarButtonSystemItemPlay,
UIBarButtonSystemItemPause,
UIBarButtonSystemItemRewind,
UIBarButtonSystemItemFastForward,
} UIBarButtonSystemItem;

4. Application Controllers

Para finalizar, aqui encontramos la clase encargada de la carga y visualización de ambas vistas, así como de gestionar los eventos que se producen en ambas (ver (IBAction)toggleView:(id)sender en ambos controladores de vista así como action:@selector(toggleView en ambos botones de info y done).

El encargado de este efecto es setAnimationTransition que mediante UIViewAnimationTransitionFlipFromLeft y UIViewAnimationTransitionFlipFromRight produce la animación.

(Los fuentes del ejemplo están disponibles en el pie del artículo).

El ejemplo que explicamos a continuación permite por una parte obtener información de nuestro proceso actual en ejecución y por otra mostrar un mensaje aprovechando la clase UIAlertView.

1. NSProcessInfo

Esta clase nos proporciona métodos para acceder a la información de nuestro proceso actual. Cada proceso tiene un objeto NSProcessInfo compartido, conocido como agente de información. Dicho agente puede devolver información como argumentos, variables de entorno, nombre del dispositivo que lo ejecuta o nombre del proceso.

Igualmente también incluye un método operatingSystem el cual devuelve un enumerador que identifica el sistema operativo donde se está ejecutando el proceso.

NSString *hostName = [[NSProcessInfo processInfo] hostName];

La información más importante a consultar es:

• hostname
• operatingSystem
• arguments
• processName
• environment

UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Título" 

    message:"Mensaje" delegate:self defaultButton:@"OK" 

    cancelButton:@"Cancelar" otherButtons:nil];

Solo ha pasado un mes desde la anterior, y de nuevo llega otra versión beta más del kit de desarrollo de iPhone, en este caso la cuarta, en la que incluye novedades como el soporte OpenGL, que servirá para hacer aún más atractivas las aplicaciones para nuestro iPhone/iPod Touch, así como funciones de imagen/video con gran número de efectos.

Aunque esta es la novedad más importante, no dejemos de pasar otras como:

• Mejoras en nuestro entorno de desarrollo xCode
• Mejor integración con Interface Builder
• Herramienta de análisis Shark

(Los fuentes del ejemplo están disponibles en el pie del artículo).

Tras nuestro primer ejemplo de Hola mundo, no podíamos desaprovechar la oportunidad de reproducir el mismo ejemplo, aprovechando las bondades que nos ofrece la herramienta de generación de recursos Interface Builder.

Al igual que hicimos en el anterior ejemplo, nos creamos un proyecto de tipo Cocoa Touch Application. Una vez hayamos cargado nuestro entorno de desarrollo xCode, haremos doble click sobre nuestro fichero de recursos MainWindow.xib, que se encuentra localizado bajo la carpeta de Resources en nuestro árbol de ficheros del proyecto.

Mediante esta acción se ejecutará Interface Builder y nos abrirá los ficheros que componen nuestro archivo de recursos XIB.

Por defecto, nuestro asistente de creación de xCode, al seleccionar un tipo de proyecto Cocoa Touch Application, además de nuestro fichero principal main.m y nuestro fichero delegado holamundo2AppDelegate, nos genera un tercer fichero (realmente dos si contamos con el fichero de cabecera .h y el fichero de implementación .m) para nuestra vista, donde nosotros somos los encargados de darle vida al igual que ya vimos en el ejemplo anterior, en el que mostramos nuestro texto de saludo de “Hola Mundo”.

Bien, pues en este caso, evitaremos manejar dicho fichero, hasta el punto de poder eliminarlo de nuestro proyecto si queremos, teniendo en cuenta de eliminar igualmente la declaración del objeto de dicha clase (MyView:UIView) que se encuentra en nuestra clase delegada.

Volviendo al tema de nuestro editor de recursos Interface Builder, tan solo tendremos que modificar el nombre de la clase de nuestra vista de MyView por UIView, ya que delegaremos todo el proceso de pintado a la clase principal UIView y añadiremos a la misma un control de tipo UILabel que se encuentra en nuestra ventana de controles.

Para terminar, utilizando nuestra ventana de herramientas, cambiaremos el color de fondo de nuestra vista que por defecto viene en azul y cambiaremos el texto de nuestro control Label para que figure “Hola mundo”. Sin necesidad de guardar los cambios, volvemos a nuestro entorno de desarrollo xCode el cual detectará automáticamente los cambios de nuestro fichero XIB y nos pedirá guardarlos, compilamos y ejecutamos nuestro ejemplo.

El mismo resultado que en nuestro ejemplo anterior, terminado en la mitad de tiempo lo podemos resumir en los siguientes pasos:

• Creación del proyecto de tipo Cocoa Touch Application
• Modificación de nuestro fichero MainWindow.xib
  • Cambiamos MyView por UIView mediante la ventana de herramientas
  • Añadimos un control de tipo Label (UILabel)

Applicación de ejemplo: holamundo2.zip

Antes de pasar al segundo ejemplo de nuestro Hola Mundo (parte II) es importante conocer y tener un primer acercamiento con nuestro formato de recursos.

Con la llegada de la versión de xCode para Leopard, se introdujo un nuevo formato para generar nuestra interfaz gráfica, y que sustituirían al anterior formato NIB. En concreto es la herramienta de xCode llamada Interface Builder la responsable de manejar dichos ficheros XIB. Aunque vino para sustituir a su anterior formato, nada tienen que ver hoy en día ambos formatos, ya que un fichero XIB ya no es un paquete (el cual contenía dentro de una carpeta la declaración de los elementos de interfaz de la aplicación en desarrollo, las relaciones entre los mismos, así como las instancias de las clases declaradas en Interface Builder) sino un fichero de información con estructura XML.

Aunque en el siguiente artículo que ya hemos comentado al comienzo de este post veremos como interactuan interfaz de recursos con nuestro código fuente, es conveniente conocer previamente la herramienta Interface Builder para la generación de nuestros ficheros XIB.

En la creación de nuestros proyectos, por defecto se incluye un fichero XIB vacío, para trabajar con él. Haciendo doble click sobre dicho elemento en nuestro árbol de ficheros de xCode accedemos a Interface Builder.

Dividimos Interface Builder (bajo nuestro criterio) en cuatro apartados bien diferenciados:

• Visor de proyectos. El cual nos permite ver todos los controles insertados en nuestra ventana de interfaz de usuario.
• Visor de objetos. A modo de editor visual nos facilita la colocación e inserción de cualquier control en nuestra ventana o vista.
• Ventana de herramientas. Herramientas como atributos, conexiones, tamaños, etc, nos permiten configurar nuestros controles.
• Ventana de librería. Colección de todos los controles disponibles para insertar, agrupados y con una pequeña explicación del uso de cada uno. 

Otro aspecto importante es la diferenciación entre los distintos tipos de trabajo con el visor de objetos, que podemos optar por el modo ventana (como ventana principal de nuestra aplicación) o vista (como vistas de tipo UIViewController que componen nuestra aplicación). Haciendo doble click en cada una de ellas desde nuestro visor de proyectos podemos verlas y trabajar con ellas.

Habiendo visto este pequeño repaso de la herramienta Interface Builder y de sus ficheros XIB, nos preparamos para el siguiente proyecto donde repetiremos de nuevo un clásico Hola Mundo, y del cual desecharemos parte del código que nos genera el asistente de creación de proyectos de xCode para sustituirlo por parte de trabajo con Interface Builder.

(Los fuentes del ejemplo están disponibles en el pie del artículo).

Nuestra primera aplicación para iPhone/iPod Touch, como no podía ser de otra manera, es el típico “Hola mundo”, en el que vamos a descubrir conceptos básicos de la estructura de una aplicación para iPhone, aunque muy importantes, ya que independientemente de la complejidad de la aplicación que hagamos, son comunes para casi todas.

Abrimos nuestro entorno de desarrollo xCode, y creamos una aplilcación para iPhone, la cual llamaremos “holamundo“. (recordamos los pasos ya vistos en el anterior artículo xCode, nuestro entorno de trabajo)

1. FICHERO PRINCIPAL main.m

Desplegamos nuestro nodo principal del arbol de la izquierda y localizamos en fichero principal main.m que se encuentra bajo la categoría de Other Sources, y ayudándonos con la opción Editor situada en la barra de botones superior abrimos el fichero en modo edición (alternando dicho botón nos mostrará una lista de ficheros en la categoría que nos encontremos o bien nos abrirá el editor). Este fichero es el punto principal de nuestra aplicación.

Tras el comentario vemos la inclusión del fichero de cabecera principal del framework UIKit, necesario ya que recordemos que contiene las clases relacionadas con la interfaz gráfica de nuestro iPhone. A continuación nos encontramos con el punto de entrada de nuestra aplicación, la función main.

#import <UIKit/UIKit.h>
int main(int argc, char *argv[])
{
    NSAutoreleasePool * pool = [[NSAutoreleasePool alloc] init];
    int retVal = UIApplicationMain(argc, argv, nil, nil);
    [pool release];
    return retVal;
}

NSAutoreleasePool es la clase encargada de la gesitón de memoria de Cocoa (nuestra API de programación para iPhone) y [pool release] envia un mensaje para liberarla. UIApplicationMain es la encargada de crear el objeto y el delegado de la aplicación e iniciar el ciclo de eventos. Los cuatro parámetros enviados son:

• argc Número de parámetros recibidos. (Recibido en la función main)
• argv Lista de argumentos. (Recibido en la función main)
• principalClassName Nombre de la clase UIApplication. (Si pasamos nil, se asume que es UIApplication)
• delegateClassName Nombre de la clase desde donde el delegado de la aplicación es instanciado. Si tu asignas al parámetro anterior una subclase de UIApplication, tu debes designar la subclase como el delegado obligatoriamente. En definitiva la instancia de dicha subclase recibe los mensajes como delegado de la aplicación. (Parámetro opcional).

2. FICHERO DELEGATE holamundoAppDelegate.m

El objeto asignado como delegate lo hemos definido en el cuarto parametro de nuestra función UIApplicationMain como ya hemos visto en el punto anterior. Este proceso asigna a dicha clase la posibilidad de recibir los mensajes que se procesen en la aplicación. Por defecto, tal y como ha sido creado nuestro proyecto de ejemplo, en la clase delegada viene definido el método applicationDidFinishLaunching el cual recibirá un mensaje de UIApplication cuando la aplicación termine de cargarse.

- (void)applicationDidFinishLaunching:(UIApplication *)application

{

window = [[UIWindow alloc] initWithFrame:[[UIScreen 

   mainScreen] bounds]];

contentView = [[MyView alloc] initWithFrame:[window bounds]];

[window addSubview:contentView];

[window makeKeyAndVisible];

}

El asistente de creación de nuestro proyecto incluye al igual que la clase delegada (holamundoAppDelegate), una clase que implementa la funcionalidad de la vista (MyView) que es la región contenida dentro de nuestra ventana. Nuestra clase de vista, la cual hereda de UIView, es utilizada para organizar de forma mucho más estructurada nuestra aplicación y para entenderlo bien solo debemos de pensar que una aplicación puede y debe tener múltiples vistas. Igualmente UIView es la clase proporcionada para gestionar todo tipo de animaciones y movimientos que vemos en cualquier aplicación de iPhone.

Volviendo al párrafo anterior, cuando recibimos el mensaje en el momento que nuestra aplicación termina de cargarse (applicationDidFinishLaunching) mostramos el contenido de nuestra vista, no sin antes inicializar nuestra ventana con el tamaño de la totalidad de la pantalla de nuestro iPhone e inicializar nuestra vista con el tamaño de nuestra ventana (initWithFrame).

3. FICHERO VISTA MyView.m

El método initWithFrame es el método que vamos a utilizar para la creación del contenido de nuestra vista (definido por defecto por nuestro asistente de creación de proyecto). Los objetos padre de nuestra vista se denominan supervistas y los objetos hijos subvistas. Al objeto padre principal de nuestra vista se accede mediante super.

A continuación crearemos una etiqueta de texto del tipo UILabel para mostrar el contenido de “Hola mundo”. Dicha etiqueta la definiremos como una propiedad de la siguiente manera:

1. 1. En nuestro fichero de cabecera MyView.h dentro de la definición de nuestra clase (UILabel *label;)
   2. A continuación de nuestra clase, haciendo coincidir el mismo nombre.
   3. En nuestro fichero de implementación MyView.m, mediante la directiva @synthesize la cual implementa automáticamente los métodos getter/setter de nuestra propiedad.

- (id)initWithFrame:(CGRect)frame {
    if (self = [super initWithFrame:frame]) 
{        
	self.backgroundColor = [UIColor whiteColor];
	CGRect labelFrame = CGRectMake(40, 200, 220, 30);
		
self.label = [[UILabel alloc] initWithFrame:labelFrame];
self.label.textColor = [UIColor 
     colorWithRed:0 green:0 blue:0 alpha:1.0];
self.label.textAlignment = UITextAlignmentCenter;
self.label.font = [UIFont systemFontOfSize:30];
self.label.text = @"Hola Mundo";
[self addSubview: self.label];
}
    return self;
}

Compilamos, ejecutamos y ahi tenemos nuestra primera aplicación.

Gracias a nuestro asistente de creación, completando la creación de UIApplication, holamundoAppDelegate y MyView hemos conseguido nuestra primera aplicación, sin necesidad de utilizar el editor de recursos Interface Builder (que en breve ya veremos).

Aplicación de ejemplo: holamundo.zip