Desde hace poco tiempo a causa de un nuevo proyecto al que fui asignado me toco empezar a buscar información para desarrollar en iOS, aunque únicamente consistió en una prueba de concepto y viabilidad del proyecto, empece por comprarme un libro y empezar a leerlo en la medida en la que el trabajo me lo permite, ahora quiero compartir con ustedes lo poco que hasta ahora he aprendido, que insisto es poco, pero me esta gustando bastante, no solo el framework (Cocoa Touch) sino también el entorno de trabajo (Xcode).

Intentare guiarles de la manera mas clara posible en la creación de una versión del hola mundo en Xcode para iOS.

Empezaremos ejecutando Xcode y seleccionando la opción de crear un nuevo proyecto. Inmediatamente después debemos seleccionar una plantilla (template), en la parte superior izquierda seleccionamos la opción Application en la sección iOS, seguido seleccionamos en el panel derecho la opción Single View Application y pulsamos el botón Next.

 Luego tenemos que rellenar el nombre del proyecto, el dispositivo para el que se elabora la App con los datos de la siguiente gráfica.

De los valores ingresados una muy breve descripción:

Product name: Nombre de la aplicación

Class Prefix: Prefijo dado a las clases para evitar conflictos de nombre.

Una vez realizados los pasos anteriores, Xcode nos habrá generado un conjunto de archivos, desplegar la carpeta de nombre HelloWorld para poder visualizarlos, entre ellos podrán ver un fichero de nombre BIDViewController.xib. Al seleccionarlo observarán como en el editor aparece lo que será la interfaz gráfica sin ningún componente.

En el panel inferior derecha del Xcode se encuentra ubicada la biblioteca de componentes, de allí arrastraremos a la interfaz los componentes necesarios para poder construir una GUI parecida a la imagen.

Empezaremos arrastrando una etiqueta (label) y la ubicaremos en la parte superior izquierda veremos como el editor tiene una especie de asistente que nos ayudara a la ubicación mostrando unas lineas azules para marcarnos los bordes, el centrado, alineación con otros componentes, etc. Una vez ubicada la etiqueta hacemos doble click en el componente y editamos el valor de la etiqueta y escribimos «Nombre:».

Seguido ahora arrastraremos un campo de texto (text field) y luego ajustaremos su longitud alargando el campo por los bordes y de igual manera apoyandonos de estas lineas azules que nos indican cuando estamos en el limite de los bordes de la pantalla.

Por ultimo arrastramos un botón y lo ubicamos centrado en la parte inferior. Hacemos doble clic en el botón y le asignamos el texto «Saludar».

Terminado el diseño de la GUI vamos a aprovechar alguna de las ventajas del IDE (Xcode) que de forma transparente realizando unos sencillos pasos nos generara el código necesario para nuestra aplicación.

1. Ir al menu yView->Assistant Editor->Show Assistant Editor, podremos ver como la vista donde editábamos la GUI se ha dividido en 2.
2. Hacemos clic en el campo de texto y pulsando la tecla ctrl lo arrastramos hacia el lado derecho donde se esta el código y soltar antes del @end. Nos aparecerá una pequeña ventana y deberemos rellenar los valores como lo indica la siguiente imagen. Al terminar presionar el botón connect.
   
3. Seguido realizamos el mismo paso pero con el botón «Saludar» y rellenamos lo datos de la ventana con los datos que aparecen en la siguiente imagen.
   

 

Ya casi hemos terminado con la interfaz gráfica (como pueden ver uso de forma intercambiable GUI e interfaz gráfica) pero antes deberemos seleccionar el archivo BIDViewController.m (veremos como en el editor principal se carga el archivo). Agregaremos un método y editaríamos otro antes del @end, como aparece en la siguiente imagen. Siendo más explícito editaremos el action saludar que Xcode nos ha dejado ya el esqueleto del método (lo hizo justo cuando arrastramos el botón saludar al lado derecho del código y nos apareció la ventana a la que le ingresamos información) y agregaremos el action textFieldDoneEditing.

El primer action (saludar) que hemos editado será el que llevará a cabo la funcionalidad cuando pulsemos el botón saludar (que aunque no conozcamos el lenguaje podemos interpretar que es lo que hace). La funcionalidad consistirá en arrojar una alerta (especie de ventana modal) concatenando la cadena «Hola » el contenido que hayamos ingresado en el campo de texto. El segundo action (textFieldDoneEditing) sencillamente hace que se oculte el teclado al pulsar enter, sino agregamos este método y lo enlazamos con la vista al poner el cursor sobre el campo de texto aparecería el teclado y este no se ocultaría.

Seleccionamos de nuevo el archivo BIDViewController.xib, luego en el editor en la parte izquierda veremos 3 iconos, File’s Owner,  First Responder y View, seleccionamos la vista (View) y luego presionamos las teclas cmd+alt+6 y en la parte derecha de nuestra ventana se mostrara el connections inspector. Seleccionamos el botón «Saludar», nos aparecerán todos los eventos del botón debajo del titulo Send Event, luego seleccionamos el circulo correspondiente al evento Touch Up Inside y lo conectamos (arrastrando) al File’s Owner, nos deberá aparecer el método saludar y lo seleccionamos.

Para terminar seleccionamos el campo de texto y aun mostrandose el panel connections inspector (en caso que no este repetimos los pasos para que aparezca) seleccionamos el circulo correspondiente al evento Did End On Exit y lo conectamos con el File’s Owner y seleccionamos el action textFieldDoneEditing e inmediatamente después guardamos (cmd+s).

Finalmente ya hemos terminado, ahora de haber podido seguir todos las indicaciones antes señaladas en el post podremos ejecutar nuestra primera App para Iphone, que esperas!!! vamos a probarla, pulsemos cmd+r.

¿Qué tal? yo si les soy sincero a mi lo que me asombro la primera vez fue el entorno, es muy amigable ya desearía yo que algún editor Java me generara un código legible y de forma tan sencilla para generar y darle funcionalidad a una GUI, se que a mucho les gusta quizás el modo mas largo, codificando todo y así ya luego al usar estos asistentes saber donde, cuando y como se genera el código, pero bueno mi intención en un principio es hacer un Hola Mundo, Hola Pedro u Hola María que se desarrollase de forma sencilla, rápida y así tener un primer acercamiento con esta tecnología. Espero que les haya parecido interesante, ¿conoces algún recurso que quieras compartir con nosotros?, a que esperas, la información es poder, compartela y así todos podemos beneficiarnos.