Hello World en IOS sin StoryBoard

0. Índice de
contenidos.

• 1. Entorno
• 2. Introducción
• 3. Creación del proyecto
• 4. Creación de la primera vista
• 5. Hacer que nuestra vista se muestre al lanzar la aplicación
• 6. Crear la vista para Ipad
• 7. Conclusiones

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

• Hardware: Portátil Mac Book Pro 17″ (2,6 Ghz Intel Core i7, 8 GB DDR3)
• Sistema Operativo: Mac OS X Mavericks
• XCode 5.0.1

2. Introducción

Actualmente cuando empiezas a programar en Objective-C te encuentras con bastante documentación de como crear un proyecto con el famoso StoryBoard, de hecho nuestro compañero Saúl lo explica muy bien en este otro tutorial.

La experiencia no ha enseñado que este sistema no es el mejor para comenzar a desarrollar en esta plataforma y que cuando existe más de un programador modificándolo se producen muchos problemas de conflictos en el sistema de control de versiones, que hace que estés más tiempo resolviéndolos que desarrollando funcionalidad.

En este tutorial vamos a ver cómo crear nuestra aplicación Hola Mundo sin la ayuda del StoryBoard de forma que afiencemos los conceptos de los que nos abstrae como la creación de la primera vista que se muestra al lanzar la aplicación. Nos servirá como base para ir desarrollando paso a paso otras funcionalidades típicas en este tipo de desarrollos.

3. Creación del proyecto

Para crear el proyecto abrimos el XCode y creamos un nuevo proyecto. Vamos a File –> New –> Project y seleccionamos «Empty Application»

En el siguiente formulario establecemos la información de nuestro proyecto y seleccionamos la opción «Universal» en «Devices» indicando que la aplicación va a funcionar tanto en «IPhone» como en «IPad».

Pulsando en «Next» el asistente nos solicita que le indiquemos la carpeta donde se va a almacenar el proyecto. La seleccionamos y pulsamos en «Create».

De esta forma veremos que XCode nos crea la siguiente estructura de proyecto.

Ahora si pulsamos en el «Play» tendremos que ver que se levanta el simulador de IOS y muestra una pantalla completamente en blanco.

Esto significa que el proyecto se ha creado correctamente y que podemos continuar. En este punto podemos ejecutar la aplicación con cualquiera de los simuladores que tenemos disponibles o dispositivos físicos conectados dado que hemos definido que nuestra aplicación va a ser universal.

4. Creación de la primera vista

Ahora vamos a crear la primera vista de nuestra aplicación que como no puede ser de otra forma mostrará un precioso «Hola Mundo!» 🙂

Para ello en el menu seleccionamos «File» –> «New» –> «File» y en el asistente que se muestra seleccionamos «iOS» –> «Cocoa Touch» –> «Objective-C Class».

Pulsamos en «Next» y le damos un nombre a nuestra clase y le indicamos que va a ser una subclase de «UIViewController» y que vamos a utilizar un XIB para definir la interfaz.

Pulsamos en «Next» y seleccionamos el «Target», la carpeta donde queremos que se almacene y el nombre de nuestra vista.

Pulsamos en «Create». Con lo que nos añade los siguientes ficheros a nuestra estructura.

Nos ha creado tres nuevos archivos para nuestro nuevo «View Controller»: la interfaz .h, la implementación .m y el fichero de interfaz de usuario .xib que será el que abramos primero.

Llegados a este punto vamos a añadir un «label» con el texto más famoso de la programación: «Hola Mundo!». Para ello desde el panel de la derecha arrastramos un elemento «label» a la «View» y le ponemos el famoso texto pinchando dos veces sobre el «label».

No es muy ambicioso pero recordad que antes de correr hay que gatear 😉

5. Hacer que nuestra vista se muestre al lanzar la aplicación

Los aventurados que le hayan dado al «Play» habrán podido comprobar como la vista que se arranca al comienzo de la aplicación sigue en un blanco inmaculado. Para mostrar nuestra vista recién creada tenemos que editar el fichero «AppDelegate.m» y buscar el método «didFinishLaunchingWithOptions» que es el método que se invoca cuando se termina de lanzar la aplicación.

En este método vamos a especificar que se cargue nuestro controlador con la vista .xib asociada con el siguiente contenido:

Ahora si volvemos a pulsar en el «Play» veremos como se nos carga nuestra vista con el label indicado.

6. Crear la vista para Ipad

Ahora vamos a crear una vista similar para mostrar cuando la aplicación se ejecute en un IPad. Para ello seleccionamos «New» –> «File» –> «iOS» –> «User Interface» –> «View»

Pulsamos en «Next» y en el siguiente pantalla establecemos el «Device Family» a «Ipad»

Al pulsar en «Next» podremos dar un nombre y seleccionar la carpeta donde almacenarlo. Es una buena práctica identificar la pantalla con el sufijo del dispositivo. Pulsando en «Create» ya tendremos nuestro xib creado.

Como en el caso anterior vamos a añadir un label con el texto «Hola Mundo en Ipad!!!» para distinguirla de la anterior. La idea es que se muestre una vista u otra en función del dispositivo donde se ejecute la aplicación.

Sin modificar una línea de código vamos a ejecutar la aplicación en un simulador de tipo Ipad. Con lo que nos vamos a encontrar con un error en tiempo de ejecución que dirá algo parecido a esto «*** Terminating app due to uncaught exception ‘NSInternalInconsistencyException’, reason: ‘-[UIViewController _loadViewFromNibNamed:bundle:] loaded the «HelloWorldViewController» nib but the view outlet was not set.'». Esto significa que el controlador no tiene una vista asociada para el dispositivo que lo está ejecutando.

Para resolver esto abrimos la vista xib de Ipad y para asociar la vista con el controlador tenemos que posicionarnos encima del «File’s Owner» y en la sección «Custom Class» seleccionamos el ViewController adecuado.

Tendremos también que asociar el «File’s Owner» con la «View». Para ello pulsamos con el botón derecho encima del «File’s Owner» y arrastramos el «+» de view al «View» del árbol como se muestra en la imagen.

Ahora si le damos al «Play» con un simulador de tipo «Ipad» tendremos que ver la vista correctamente.

7. Conclusiones

En este tutorial hemos visto los primeros pasos que hay que dar para empezar a crear una aplicación en IOS. En futuros tutoriales iremos añadiendo funcionalidad a este proyecto para ir mostrando cómo hacer otras técnicas con esta plataforma.

Espero que os sirva de ayuda para empezar a desarrollar y evitaros más de un dolor de cabeza. Nosotros ya llevamos un tiempo desarrollando en esta plataforma y la verdad es que se le coge cariño. 🙂

Cualquier duda o sugerencia en la zona de comentarios.

Saludos.