Confía tu proyecto a un equipo profesional

¿Cómo estamos?
Hoy, avanzaremos un poquito en nuestro aprendizaje. Una de las principales funciones que debe hacer un programa es la adquisición de datos, y para ello tenemos la clase UITextField. Se trata sin más de un simple formulario, que por defecto al ser pulsado con el dedo (recordemos que el Iphone tiene pantalla táctil) desplegará un teclado virtual en la parte inferior de la pantalla

Empezamos:
Como este es el Artículo “Programar para Iphone desde Dos” me basare en los anteriores, “desde Cero” y “desde Uno” ,y doy por sabidas las cosas expuestas en ellos.

Explicación del ejemplo:

Para poder entender bien como funciona separaré el programa en dos vistas que ocupen la pantalla completa. Cada vista contará de un Botón para ir hacia la otra vista, y además un UITextField. El TextField de la primera vista nos servirá para adquirir los datos, y en el segundo (aunque podriamos utilizar un UILabel) nos servirá para copiar los datos que hayan sido introducidos en la vista anterior.

Creación del proyecto:

1.- Abrimos xcode.app y creamos un proyecto de tipo window.

Definición de Objetos y Acciones:

Como ya tenemos una cierta base ire al grano.

2.- En el archivo.h de nuestra app delegate, crearemos todos los Outlet y todas las Actions. También será conveniente deshabilitar el UITextField de la segunda vista.

#import <UIKit/UIKit.h>
@class TEXTFIELD_BLOGViewController;
@interface TEXTFIELD_BLOGAppDelegate : NSObject <UIApplicationDelegate>
{
IBOutlet UIWindow *window;

IBOutlet id VISTA1;
IBOutlet id VISTA2;

IBOutlet id TEXTFIELD1;
IBOutlet id TEXTFIELD2;

IBOutlet id BOTON_F;
IBOutlet id BOTON_B;

NSString *cadena;
}
- (IBAction) PULSAR_ENTER_EN_TEXTFIELD1: (id) sender;
- (IBAction) PULSAR_BOTON_F: (id) sender;
- (IBAction) PULSAR_BOTON_B: (id) sender;
@property (nonatomic, retain) UIWindow *window;
@end

Creación de interface y asignación de elementos:

3.- Ahora hacemos doble click sobre el archivo.xib para abrir y editar con el interface builder nuestra pantalla.

Arrastramos dos UIView a la ventana de MainWindow.xib y las nombramos como VISTA1 y VISTA2. Hacemos doble click sobre ellas para editarlas, y a cada una de las vistas le añadimos un UIButton y un UITextField.

Ya tenemos todos nuestros elementos creados, y solo nos queda vincularlos con nuestra App Delegate. Pues bien, pulsando el Control desde nuestra app delegate vinculamos los dos botones, las dos vistas y los dos TextField a los correspondientes IBOutlet que creamos en el Archivo.h . Después de esto, pulsando el Control vinculamos los botones con la App Delegate, asignando las acciones de PULSAR_BOTON.

Hasta aquí nada nuevo, nada que no supieramos ya.

Si hicieramos lo mismo con el TEXTFIELD1 (el de la vista 1) asignariamos la IBAction al evento de pulsar sobre el TextField, pero nosotros queremos que cuando demos a la tecla ENTER del teclado virtual este se oculte. Por defecto, Xcode, establece que cuando pulsemos sobre el TextField se muestre el teclado automaticamente, es decir, esto no hace que lo implementemos. Sin embargo, una vez mostrado, si le damos al ENTER, este no se oculta, y eso si lo tenemos que implementar. Para ello en el interface builder abrimos la venta Inpector, seleccionamos el TextField de la vista uno y pulsamos sobre la pestaña de la flechita.

Nos aparece una lista de todos los eventos a los que les podemos asignar IBAction. En este caso, el que nos sirve a nuestro proposito es Did End On Exit. Pulsamos con el ratón sobre el circulito que esta a la derecha  de Did End On Exit (no hace falta tener pulsado control) y sin soltar el ratón vamos hasta nuestra App Delegate y le asignamos la IBAction PULSAR_ENTER_EN_TEXTFIELD1.

Implementación de funciones:

Como ya lo tenemos todo vinculado, es hora de implementar nuestras funciones.

4.- Cerramos interface builder y nos vamos al Archivo.m. Allí escribiremos las tres funciones:

- (void)applicationDidFinishLaunching:(UIApplication *)application

{
[window addSubview:VISTA1];
[TEXTFIELD2 setEnabled:NO];
[window makeKeyAndVisible];
}

- (IBAction) PULSAR_ENTER_EN_TEXTFIELD1: (id) sender
{
//    [VISTA1 removeFromSuperview];
//    [window addSubview:VISTA1];

[TEXTFIELD1 resignFirstResponder];
}

- (IBAction) PULSAR_BOTON_F: (id) sender
{
[VISTA1 removeFromSuperview];
[window addSubview:VISTA2];
//    cadena = [TEXTFIELD1 text];
[TEXTFIELD2 setText:[TEXTFIELD1 text]];

}
- (IBAction) PULSAR_BOTON_B: (id) sender
{
[VISTA2 removeFromSuperview];
[window addSubview:VISTA1];
}

Lo primero que hace nuestro programa como ya sabeis es ejecutar applicationDidFinishLaunching. Allí cargamos en la ventana la vista1 y desactivamos el TextField2 para que aunque sea pulsado no haga nada (esto lo podriamos haber hecho desde interface builder con el inspector).

La función PULSAR_BOTON2, simplemente cambia de la vista2 a la vista1. Y la función PULSAR_BOTON1. Además de cargar la de la vista1 a la vista2, cambia la propiedad Text del TEXTFIELD2, asignandole el valor que haya en ese momento en la propiedad Text del TEXTFIELD1.

Cuando ejecutamos PULSAR_ENTER_EN_TEXTFIELD1 hay dos maneras de lograr lo mismo, una es descargando y cargando la vista1, y la otra es ejecutar el método de UITextField :  [TEXTFIELD1 resignFirstResponder];   que lo que hace es desactivar el teclado.

5.- Compilamos y comprobamos el funcionamiento.

Tened en cuenta que la propiedad Text de un UITextField puede ser asignada a una cadena o a un array. Como he dicho al principio, la adquisición de datos es una parte esencial de cualquier programa.

Como siempre es conveniente que investigueis con la ventana inspector del interface builder las carácteristicas que puede tener un UITextField.

Otros Artículos de la serie:

Programar para Iphone desde cero. UIButton. Nivel Tarzán.

Programa para Iphone desde uno. UIView. Nivel Piolín.

Programar para Iphone desde tres. NSMutableArray. Nivel Luis Aragonés.

Programar para Iphone desde cuatro. Controllers. Nivel Cantinflas.

Después de publicar el Nivel Tarzán, en el que explico el funcionamiento básico de la creación de botones, así como su manejo mediante código. Ahora vuelvo para explicaros el funcionamiento de las Vistas en el Nivel Piolín.
Las Vistas son de gran importancia y es fundamental conocer su funcionamiento, ya que, para que queremos programar un algoritmo si luego no sabemos mostrar su resultado por pantalla.

Empezamos:
Como este es el Artículo “Programar para Iphone desde Uno” me basare en el anterior, “desde Cero” ,y doy por sabidas las cosas expuestas en él.

Explicación del ejemplo:

Pretendo partir la pantalla en dos vistas, he ir cambiando lo mostrado en una de estas vistas según pulse unos botones que están en la otra vista.

Creación del proyecto:

1.- Abrimos xcode.app y creamos un proyecto de tipo window.

Definición de Objetos y Acciones:

Hay que entender, que una Vista (UIView), no es más que un trozo de pantalla. Bueno también puede ser la pantalla entera.

En un principio podemos pensar que únicamente necesitaremos dos Vistas, pero en realidad necesitaremos seis.

Una que ocupará toda la pantalla, y será la principal, sobre la que van incrustadas las demás. No es imprescindible para este programa hacer esto, pero si es recomendable ponerla siempre, para cambiar en cualquier momento la pantalla al completo. Esta será nuestra supervista.

Otras dos, que iran sobre la anterior, y que dividirán la pantalla en dos partes iguales. Estas serán las vistas contenedoras, supervistas de las siguientes.

Tres más, del mismo tamaño que las anteriores. Una con los botones, que la cargaremos en la división superior de la pantalla, y las otras dos que iran alternandose a la hora de cargarse en la división inferior. Pero esto lo veremos luego.

2.- Definimos nuestros objetos y las dos acciones en el Archivo.h.

#import <UIKit/UIKit.h>
@class VISTASViewController;
@interface VISTASAppDelegate : NSObject <UIApplicationDelegate>
{
IBOutlet UIWindow *window;

IBOutlet id VISTA_PRINCIPAL;
IBOutlet id VISTA_ABAJO;
IBOutlet id VISTA_ARRIBA;

IBOutlet id VISTA_ARRIBA_BOTONES;
IBOutlet id VISTA_ABAJO_1;
IBOutlet id VISTA_ABAJO_2;

IBOutlet id BOTON_VISTA_ABAJO_1;
IBOutlet id BOTON_VISTA_ABAJO_2;
}

@property (nonatomic, retain) UIWindow *window;

- (IBAction) PULSAR_BOTON_VISTA_ABAJO_1: (id) sender;
- (IBAction) PULSAR_BOTON_VISTA_ABAJO_2: (id) sender;
@end

Creación de interface y asignación de elementos:

3.- Ahora hacemos doble click sobre el archivo.xib para abrir y editar con el interface builder nuestra pantalla.

Hay dos maneras de colocar una vista en el sitio que quieras. Una de ellas es mediante código, asignandoles las coordenadas (en ese caso solo necesitaríamos 4 vistas) y la otra es tener vistas contenedoras colocadas en su sitio mediante el interface builder sobre las que cargaremos las vistas que realmente queremos mostrar. Digamos que tendríamos vistas auxiliares. A continuación entendereis esto de lo que hablo.

Insertamos en nuestra ventana una UIView que ocupe todo. 320 x 480. La vinculamos pulsando el Control con VISTA_PRINCIPAL.

Sobre esta insertaremos otra que ocupe la mitad superior. 320 x 240 en (0,0). La vinculamos con VISTA_ARRIBA.

Y otra en la mitad inferior. 320 x 240 en (0,240). La vinculamos con VISTA_ABAJO.

Ahora crearemos otra UIView, pero esta vez arrastrando desde el library hasta el mainwindow.xib, hacemos doble click sobre ella y le ponemos de dimensiones 320 x 240. Hacemos dos copias,  les ponemos a las tres distintos nombres. Las vinculamos pulsando el Control de App Delegate  hasta las vistas, ya sea hasta la ventana que se abre al hacer doble click o hasta el nombre del archivo.

También vincularemos los botones con la acciones. Los botone los creamos en la vista superior. Deberiais saber hacerlo.

A las vistas inferiores que hemos creado les añadimos cualquier elemento. Solo para distinguirlas.

Implementación de funciones:

Como ya lo tenemos todo vinculado, es hora de implementar nuestra sencilla función.

4.- Cerramos interface builder y nos vamos al Archivo.m. Allí escribiremos nuestras dos funciones de pulsar botón y usaremos la función applicationDidFinishLaunching para inicializar la ventana:

- (void)applicationDidFinishLaunching:(UIApplication *)application

{
// Override point for customization after app launch
[window addSubview:VISTA_PRINCIPAL];
[VISTA_PRINCIPAL addSubview:VISTA_ARRIBA];
[VISTA_PRINCIPAL addSubview:VISTA_ABAJO];
[VISTA_ARRIBA addSubview:VISTA_ARRIBA_BOTONES];
[VISTA_ABAJO addSubview:VISTA_ABAJO_1];
[window makeKeyAndVisible];
}

- (IBAction) PULSAR_BOTON_VISTA_ABAJO_1: (id) sender
{
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1];
[UIView setAnimationTransition:(UIViewAnimationTransitionCurlUp) forView:VISTA_ABAJO cache:NO];
[VISTA_ABAJO_2 removeFromSuperview];
[VISTA_ABAJO addSubview:VISTA_ABAJO_1];
[UIView commitAnimations];
}

- (IBAction) PULSAR_BOTON_VISTA_ABAJO_2: (id) sender
{
[VISTA_ABAJO_1 removeFromSuperview];
[VISTA_ABAJO addSubview:VISTA_ABAJO_2];
}

Con el metodo addSubview de las UIView, cargamos sobre una Vista otra vista. Y con el método removeFromSuperview, lo que hacemos es eliminar la vista de donde sea que este cargada.

En la función PULSAR_BOTON_VISTA_ABAJO_2 he puesto el cambio de vista normal y corriente y en la función PULSAR_BOTON_VISTA_ABAJO_2 lo he puesto para que sea animado.

5.- Compilamos y comprobamos el funcionamiento.

Espero que haya sido de utilidad y para cualquier duda estamos en los foros. También podeis dejar comentarios.

Otros Artículos de la serie:

Programar para Iphone desde cero. UIButton. Nivel Tarzán.

Programar para Iphone desde dos. UITextField. Nivel Barragán.

Programar para Iphone desde tres. NSMutableArray. Nivel Luis Aragonés.

Programar para Iphone desde cuatro. Controllers. Nivel Cantinflas.

Recientemente he entrado a formar parte de este Blog. Debido a que poseo mucha menos experiencia y conocimiento que Antonio (el oráculo) he estado pensando como poder colaborar en la sección de ejemplos. Pues bien, me he dado cuenta de que quizás hay un hueco para mi, y es atender a esa gente que como yo quiere aprender a programar para Iphone pero esta un poco perdido porque nunca ha visto Objective-C.

Voy a realizar una serie de post exponiendo con todo detalle los progresos que logro en mi aprendizaje, eso si, describiendolo todo según mi particular manera de entender las cosas y empezaré desde el principio.

Empezamos:

En realidad ya deberiais haber empezado, leeros las secciones de “Hola Mundo” y “La antesala al desarrollo”.

Explicación del ejemplo:

Pretendo realizar un programa que muestre en pantalla un boton (UIButton) que cuando sea pulsado cambie el texto que lo define de “NO” a “YES” y de “YES” a “NO”. ¿Simple, verdad? Ya puse que esto era nivel de dominio del lenguaje Tarzán.

Creación del proyecto:

1.- Abrimos xcode.app y creamos un proyecto de tipo window.

Definición de Objetos y Acciones:

2.- Únicamente deberemos crear un Objeto, que será de tipo IUButton (Botón). Al crear el proyecto entre otras cosas nos aparecen dos archivos que definen la clase delegate (principal a mi entender). En el archivo.h declararemos los elementos.

Como es un Botón. Declararemos un Objeto (IBOutlet) de tipo botón en si y un IBAcción para la acción que realizaremos cuando se pulse el Botón. De la siguiente manera.

#import <UIKit/UIKit.h>
@class BOTONViewController;
@interface BOTONAppDelegate : NSObject <UIApplicationDelegate>
{
IBOutlet UIWindow *window;
IBOutlet id BOTON; //en lugar de id podría poner UIButton
BOOL pulsacion;
}
@property (nonatomic, retain) UIWindow *window;
- (IBAction) PULSAR_BOTON: (id) sender;
@end

Creación de interface y asignación de elementos:

3.- Ahora haremos doble click sobre el archivo MainWindow.xib. Y se habrirá el interface builder. Agregaremos un Objeto tipo UIButton a nuestra ventana. Quizás sería mejor hacerlo mediante vistas, pero eso ya sería nivel concursante de Gran Hermano.

El programa a sí mismo se pregunta, ¿qué objeto será este UIButton que acaban de poner en la ventana? Es decir, el programa no sabe que objeto es ese. Para informar a nuestro programa que el botón que acabamos de insertar es el IBOutlet que habíamos creado en el archivo.h, debemos posicionar el ratón sobre el archivo de nuestra app delegate, pulsamos la tecla control y seguido el botón izquierdo del ratón y sin soltarlo llevamos el ratón hasta ponerlo encima del objeto botón que habíamos insertado y soltamos (vemos que al hacer esto ha ido saliendo una línea azul, y también vemos como se selecciona el botón). Al soltar, nos pide que le asignemos un IBOutlet, que como solo tenemos uno es fácil. Le damos a BOTON (esta opción nos aparece ya que en el archivo.h pusimos IBOutlet id BOTON;).

Lo que acabamos de hacer significa que el botón que hemos insertado en la ventana para nuestro código va a ser la variable BOTON que es de tipo UIButton.

4.- Pero, ¿qué pasará cuando pulsamos el botón?. Nosotros queremos que lo que pase es que se ejecute un cierto código. Este código será el que haya en la función PULSAR_BOTON, que la hemos catalogado como IBAction para poder asignarsela mediante el interface builder al botón.

Ahora procedemos en sentido contrario para asignar la acción, con la tecla control pulsada vamos desde el botón hasta nuestra app delegate. Y seleccionamos PULSAR_BOTON.

Con esto estamos diciendole al programa que ejecute la función PULSAR_BOTON cuando el usuario pulse el botón al que se la hemos asignado. Tened en cuenta que varios elementos, incluso de distintos tipos, pueden tener asignada la misma IBAction.

Implementación de funciones:

5.- Si ejecutamos el programa ahora tal cual, aparecera el botón pero si lo pulsamos no hará nada. Ya que aun no hemos escrito que es lo que debe hacer la función PULSAR_BOTON.

Abrimos el archivo.m y vemos que ya tiene dos funciones escritas en él:

- (void)applicationDidFinishLaunching:(UIApplication *)application
{
// Override point for customization after app launch
[window makeKeyAndVisible];
pulsacion = NO;
}
- (void)dealloc
{
[window release];
[super dealloc];
}

La primera se ejecuta cuando se carga el programa. Y con ella estamos cargando la ventata principal. También inicializamos la variable “pulsacion”.

Y la segunda es para liberar memoria a la hora de salir del programa.

Nosotros en el archivo.h tenemos definida la IBAction, y la añadiremos ahora en el archivo.m al final o donde querais:

- (IBAction) PULSAR_BOTON: (id) sender

{
if (pulsacion == NO)
{
[BOTON setTitle:@"YES" forState:0];
pulsacion = YES;
}
else
{
[BOTON setTitle:@"NO" forState:0];
pulsacion = NO;
}
}

Con esta función vamos alternando entre asignar “YES” o “NO” al título del botón, teniendo en cuenta su valor actual.

6.- Compilamos y ejecutamos el programa para comprobar el funcionamento.

Recomiendo que con el interface builder modifiqueis las distintas opciones del botón para aprender todas las posibilidades que os dá.

Otros Articulos de la serie:

Programar para Iphone desde uno. UIView. Nivel Piolín.

Programar para Iphone desde dos. UITextField. Nivel Barragán.

Programar para Iphone desde tres. NSMutableArray. Nivel Luis Aragonés.

Programar para Iphone desde cuatro. Controllers. Nivel Cantinflas.