Hoy voy a mostrar cómo se crea una aplicación para iPhone desde 0.
Para mayor información recomiendo mirar la siguiente documentación oficial de Apple:
En este tutorial vamos a crear la siguiente aplicación:
Puede dar click sobre las imágenes de este tutorial para ver la imagen en su tamaño real.
En el tutorial 2 mostraré cómo darle algún comportamiento a ese botón.
Comencemos ...
Introducción
- Xcode es la herramienta de desarrollo que usaremos para crear aplicaciones para iPhone. En esta herramienta crearemos el código, e invocaremos al editor de GUI (Interface Builder) y al simulador (iPhone Simulator 3.0) para probar nuestras aplicaciones sin tener que pasarlas a un iPhone real.
Más información sobre Xcode aquí.
Xcode se puede ejecutar desde el menú de aplicaciones o desde el Dock:
- Cuando ejecutemos Xcode no veremos la ventana de un IDE, sino tan sólo el nombre de la aplicación en la barra de Mac:
- Ahora debemos abrir una ventana del IDE mediante la creación de un proyecto nuevo: File + "New Project...
- Luego veremos aparecer una ventana similar a la siguiente, donde se nos pide que seleccionemos el tipo de proyecto que queermos crear. Seleccionaremos "Window-based Application".
- Escribimos el nombre del proyecto en el campo correspondiente y damos click en "Save". En este tutorial voy a usar de nombre "HelloWorld" pero pueden usar el nombre que quieran. Los nombres por defecto de las clases y la GUI se forman a partir del nombre del proyecto.
- Debe aparecer una ventana parecida a la siguiente:
En la imagen pueden ver los archivos que son creados por XCode por defecto. En este momento los que más nos importan son:
- Mainwindow.xib: Es el archivo que contiene la GUI de nuestra aplicación.
- main.m: Es el archivo que contiene el punto de entrada de nuestra aplicación (la primer función que se ejecuta de la aplicación). Este archivo contiene la función main (funciona tal como en Java y C++).
- HelloWorldAppDelegate.h: Es el archivo de cabecera de la clase que contendrá la lógica de nuestra aplicación.
- HelloWorldAppDelegate.m: Es el archivo de implementación de la clase que contendrá la lógica de nuestra aplicación.
Para quienes conozcan de C++, los archivos ".m" son el equivalente a los archivos ".cpp". En Java los archivos ".java" son el equivalente a la unión de los ".h" y los ".m", ya que la clase es declarada en el mismo lugar donde se implementa (declarar: decir qué métodos y atributos tiene la clase, implementar: decir qué hace cada método y qué valores por defecto toma cada atributo).
En el resto de los tutoriales haremos símiles con Java para dar a entender más fácilmente el código que vayamos desarrollando.
- Ahora vamos a crear la GUI para nuestro botón y la clase controladora de esta GUI (aunque por ahora, no vamos a hacer nada en esta clase, recordemos: nuestro botón no hará nada). Para esto vamos de nuevo al menú "File" y seleccionamos "New File...". En la ventana que aparece seleccionamos "UIViewController subclass" para indicar que vamos a crear una nueva clase controladora de GUI (y su respectiva GUI).
- Si la casilla "With xib file user interface" no está activada, actívela. Esta le indica a XCode que además del controlador, queremos que cree la GUI. Al dar click en "Next" debemos introducir el nombre de nuestra clase controladora, aquí usaré "HelloWorldView.m". Damos click en "Finish" para finalizar.
- Después de esto ya tendremos 3 nuevos archivos en nuestro proyecto, el objetivo de cada archivo ya deben conocerlo, observen sus extensiones.
- Ahora vamos a darle una mirada al Interface Builder (el editor de las GUI). Para abrirlo damos doble click en el archivo "HelloWorldView.xib":
Este editor debe mostrar 4 ventanas:
- HelloWorld.xib: Es la ventana principal, muestra los componentes que hay dentro del archivo de GUI. Si le damos una mirada veremos que hay un objeto llamado "File's Owner", este nos servirá más adelante para enlazar la GUI con la clase controladora.
- View: Es la ventana donde diseñamos nuestra GUI, es un editor WYSIWYG. En los siguientes pasos usaremos esta ventana para dibujar nuestro primer botón.
- Propiedades: Esta ventana aparece como "View attributes" en la imagen ya que su nombre depende de la pestaña seleccionada. Es la ventana donde cambiaremos las propiedades de la GUI (color, título, entre otros) y su comportamiento (qué hacer al tocar el botón por ejemplo). Más tarde (tutorial 2) usaremos esta ventana para decidir qué hacer cuando a nuestro botón sea tocado.
- Library: Es la ventana que contiene los componentes gráfios que podemos agregar a nuestra interfaz, tales como botones, labels (textos), campos de texto, barras de desplazamiento, entre otros.
- A continuación agregaremos nuestro primer botón. Busque en la ventana "Library" el siguiente objeto:
Luego arrástrelo hasta la ventana "View" hasta la posición deseada. Debe quedar con una ventana similar a esta:
- Ahora dé doble click sobre el botón que acaba de agregar y escriba el texto que desee. Yo escribiré "Hola Mundo".
Esta es toda la configuración que debemos hacer a nuestra GUI mediante el Interface Builder, podemos guardar (Comando+S) y cerrar (Comando+Q). Ahora, vamos a indicarle a nuestra ventana que debe agregar una instancia de la clase HelloWorldView, esto lo hacemos mediante código en los pasos siguientes.
- Si abrimos el archivo "HelloWorldAppDelegate.h" veremos un código similar a este:
Debemos agregar las siguientes líneas en este archivo:
- @class HelloWorldView;
- HelloWorldView *myView;
- @property (nonatomic, retain) HelloWorldView *myView;
- Ahora veamos el archivo "HelloWorldAppDelegate.m":
Aquí debemos agregar las siguientes líneas:
- #import "HelloWorldView.h"
- @synthesize window, myViewController;
- HelloWorldView *aViewController = [[[HelloWorldView alloc] initWithNibName:@"HelloWorldView" bundle:[NSBundle mainBundle]] autorelease];
- self.myViewController = aViewController;
- [window addSubview:[aViewController view]];
- Las líneas recién agregadas sirven para indicarle a nuestra aplicación que un objeto de tipo "HelloWorldView" debe ser creado y agregado a nuestra ventana. Más adelante explicaré que hace cada una de estas líneas.
- Ya tenemos nuestra primer aplicación lista! Ahora debemos ejecutarla, para esto asegurémonos que tenemos seleccionado "iPhone Simulator 3.0" en el campo de selección de plataforma objetivo para compilación:
Nota: Si no encuentra la opción que aparece seleccionada en la anterior imagen, observe al final de este post la sección "¿No encuentra iPhone Simulator 3.0?".
Listo, ahora ya podemos compilar y probar nuestra aplicación, presione la tecla Comando+ENTER o el ícono "Build and Go" de la parte superior y deberá ver la siguiente ventana:
¡¡ Hemos terminado nuestra primer aplicación para iPhone !!
Es posible que no pueda ver la opción "iPhone Simulator 3.0" entre las opciones de dobjetivo de compilación. El menú que usted debería ver es el siguiente:
Si usted en cambio ve el siguiente menú (o alguno parecido):
Entonces es necesario que acceda al menu "Project" y seleccione la opción "Edit Project Settings":
Observe la opción "Base SDK for All Configurations":
Si usted no tiene seleccionado "iPhone Device 3.0" entonces selecciónelo del menú:
Después de esto cierre la ventana de configuración. Ya podrá acceder a la opción "iPhone Simulator 3.0" del menú de objetivos de compilación.
Y por último ...
¿Y esas líneas de código que agregamos para qué sirven? Bueno, en el próximo tutorial daré la explicación, pero para los curiosos, les queda de tarea ... :) ... recuerdan los 2 enlaces que día al inicio de este post ?
El código de este primer tutorial no está disponible, para los siguientes tutoriales dejaré el código enlazado dentro del post.
Chao !
Hasta la próxima !
No hay comentarios:
Publicar un comentario