Primeros pasos en iOS 6

Bueno chavos,antes que nada una disculpa por la escuela he estado algo ausente del blog. Bueno regresando al tema, esta vez les mostrare como hacer el hola mundo en iOS 6, para esto necesitamos lo siguiente:

• Principalmente una Mac(puede ser apple o una hackintosh(luego les mostrare como realizar una hackintosh), lo que importa es el SO)
• Tener instalado xCode(click aquí para descargar)

Una vez que tengamos esto, procederemos a abrir nuestro xCode

Al abrir nuestro xCode veremos una pantalla como la siguiente(yo ya tengo algunos proyectos nuevos, si es su primera vez verán el campo derecho vacío)

Nosotros elegiremos la primer opción: Create a new Xcode project

Una vez hecho eso nos aparecerá la siguiente pantalla:

Hay veremos que el Xcode nos esta pidiendo el tipo de aplicación que desarrollaremos. ya sea iOS o OS X, nosotros elegiremos Application en la sección de iOS y hay en esa sección seleccionaremos Single View Application y daremos click en Next

 Nos aparecera una ventana donde nos pedirá entre otras cosas el nombre del Producto, Nombre de la Organización, identificación de la compañía,dispositivos y el uso de storyboards. Para esta practica nombraremos el producto como PrimerosPasos y seleccionaremos el uso de storyboards y click en next(Nos pedirá la ruta física donde guardaremos el proyecto, por ahora dejaremos la ruta por default o ustedes pueden elegir otra ruta para guardar sus proyectos y daremos click en create):

Si seguimos los pasos correctamente y anda extraño sucede, veremos nuestra pantalla de propiedades de nuestro proyecto, en esta pantalla dentro de muchas otras cosas podremos decirle en que orientación correrá nuestra aplicación, eso una vez que controlemos el acelerometro, por lo pronto no lo utilizaremos así que basta con dejarle la orientación portrait

Antes de empezar a Programar echaremos un vistazo a nuestro lado izquierdo hay ubicaremos el archivo: MainStoryboard.storyboard y le daremos click

Al hacer esto nos aparecerá nuestra interfaz, la pantalla que el usuario controlara:

Ahora la pregunta del millón: como agrego las cajas de texto, mis labels, botones, etc? en el lado derecho de nuestra pantalla ubicaremos la sección de objetos, de hay buscaremos Cajas de Texto, Labels, botones, etc.

Ahora Diseñaremos nuestra interfaz, será simple es una caja de texto(aquí capturaremos lo que queremos mostrar), una label(mostraremos lo que queremos mostrar) y 2 botones(uno para mostrar en la label lo que escribimos y el otro para controlar el teclado). Basta con ubicar los objetos y arrastrarlos:

Para editar el Texto de una label o de un botón, basta con darle doble click  en los objetos y cambiarles el nombre

Ahora ya tenemos nuestra interfaz, ahora sigue la parte "fea": la programación, antes de esto ubicaremos 2 archivos en nuestro navegador de proyecto: ViewController.h y ViewController.m

estos archivos son las clases de nuestra interfaz, pero no son iguales ya que en una se instancian(archivos .h) los objetos y en otra se declaran los métodos a usar(archivos .m), pero para poder usar un método este forzosamente debe de estar declarado. Nosotros ligaremos nuestros botones a 2 instancias de eventos(que seran los metodos que efectuaran todas las operaciones) y 2 variables(1 variable que es la caja de texto, la cual es la variable de entrada y otra que es la variable de salida o la Label), pero, como hacer esto? Simple nos cambiaremos al editor asistente , al hacer esto nos cambiara la pantalla y veremos algo como esto:

Ahora para ligar los objetos, haremos click derecho en nuestros objetos y arrastraremos hasta abajo donde dice @interface ViewController : UIViewController, esto debe de ser al archivo ViewController.h, que es un archivo .h por lo tanto es donde se instancian y se ligan los objetos:

Al hacer eso nos saldrá un campo, donde le indicaremos si es un Outlet o un Action, donde los Outlet son campos manipulables o variables y los Action son los Listeners, los eventos, los métodos de los botones donde efectuaremos nuestras operaciones.

Una vez que hemos entendido estas diferencias procederemos a declararlos con nuestros nombres(en el Campo Name colocaremos el nombre), yo los he nombrado txtEntrada(caja de texto), lblSalida(label), btnCambiar(botón Cambiar) y quitarTexto(botón quitar Texto). Para crear las conexiones daremos click en connect:

Podemos ver que las variables, son del tipo @property y los eventos son del tipo IBAction. Podemos ver que la declaración de métodos y de variables es distinta, para declarar una variable se debe de seguir este proceso:

@property([weak|strong], nanotomic) [Clase donde se almacena el tipo de la variable] [tipo de la variable]* [nombre de la variable];

y para declarar un método seguimos el siguiente proceso:

[-|+]([tipo del método])[nombre del método]:([variable, si existe, que le pasaremos])[nombre de esa variable];

De esta manera podremos declarar nuestras variables o en todo caso métodos(que a punto personal, a mi me gusta separar todo por métodos), ahora ya que declaramos y ligamos nuestras variables y eventos con lo que tenemos en la interfaz, procederemos a hacer uso de ello; para esto nos dirigiremos al archivo ViewController.m, hay en ese archivo exactamente debajo de @implementation ViewController, declararemos nuestros variables de entrada y salida con el siguiente código:

@synthesize txtEntrada;
@synthesize lblSalida;

Solo los datos del tipo Outlet o variables pueden ser del tipo @synthesize, ya que los métodos ya se declararon, si recordamos que nombramos a nuestros botones btnCambiar y quitarTeclado, si hachamos un vistaso en nuestro archivo, veremos que ya están declarados los eventos, solo falta codificarlos:

Primero codificaremos el boton btnCambiar, pondremos lo siguiente:

lblSalida.text=txtEntrada.text;

Esto nos indica que la Label tomara el valor de la caja de texto, ahora, porque declarar un botón que nos quite el teclado? Porque iOS como tal no dispone de una función que nos "quite" el teclado de la pantalla, hay que crear un botón(la mayoría de los desarrolladores crea un botón "invisible" y lo ubica atrás de todos los objetos) el cual nos quite el teclado, para hacer esto en el método quitarTeclado escribimos lo siguiente:

txtEntrada.resignFirstResponder;

Le estamos indicando que al hacer click, resigne nuestro teclado, que lo "quite" de la pantalla. Si seguimos todos los pasos tenemos que tener algo como lo siguiente:

Ahora lo correremos y veremos su funcionamiento:

Podemos ver que funciona perfectamente, los 2 botones cumplen su función y bueno todo funciona correctamente. Bueno chavos eso fue todo por esta vez espero y les haya servido ^_^. Cualquier duda o comentario favor de dejarlo en comentarios y si tardo en contestarles es porque en la escuela me traen como perro =P