iSorteo de iPhone4Spain

Participa en iSorteo

Noticias, Aplicaciones, Jailbreak y Tutoriales de iPhone, iPad y iPod Touch

30

Abr

Curso de Programación iOS. Clase 6: insertar elementos en UITableViewController

Mario Sevilla,

30 de Abril de 2012 a las 23:08

Curso de Programación iOS. Clase 6: insertar elementos en UITableViewController

Bienvenidos a la Clase 6 del Curso de Programación iOS de iPhone4Spain.

En esta clase, veremos cómo añadir información en un objeto de la clase “UITableView” entre distintas escenas a través del patrón “delegado” (delegate). La utilización de este patrón nos ayudará a, en un momento dado, reorganizar las escenas sin que esto suponga algo muy laborioso ya que el patrón “delegado“ hace que el padre sólo contenga aquellos métodos que el hijo necesita.El ejemplo que vamos a explicar en esta clase, consiste en una “UITableView” en la que podemos añadir celdas con información previamente añadida. También tendremos acceso a un “UIViewController” donde se mostrará el detalle de la celda seleccionada. Cargaremos datos en la “UITableView” desde un “NSMutableArray”.

Creamos un proyecto vacío, lo vamos a llamar “Clase6”.

Una vez se ha generado todo el proyecto agregaremos los ficheros “Objective-C class“.

En el ejemplo de hoy tenemos dos “UIViewController” que las hemos llamado “DetailViewController” y “NewElementViewController“. También agregamos un “TableViewController” que lo hemos llamado “ListViewController“.

La estructura de ficheros de nuestro programa tiene el siguiente aspecto.

Abrimos el fichero “AppDelegate.m”. Creamos el objeto de la clase “ListViewController”, también creamos un objeto de la clase “UINavigationController” y lo inicializamos con “initWithRootViewController” al objeto “ListViewController” anteriormente creado. Asignamos el objeto “UINavigationController” a “rootViewController” para que sea la escena que se abra cuando arranquemos la aplicación.

Abrimos el fichero “NewElementViewController.h”. Declaramos el protocolo “NewElementDelegate”. En él se pueden declarar métodos que puede o tiene que llevar la clase padre de “NewElementViewController”, en este caso “ListViewController”. Indicamos, con el siguiente código, que “ListViewController” tiene que llevar implementado el método “newContactDidChanged” ya que, al no indicar nada. Al no definirlo con @optional, por defecto es @require. También se puede definir como @require pero el efecto sería el mismo.

Dentro de “@interface NewElementViewController” declaramos tres propiedades: La primera es el propio “delegate”, la segunda y la tercera son dos “IBoutlet” de la clase “UITextField”. Seguidamente declaramos dos “IBAction”, “saveNewContact” y “cancelNewContact”, que se encargarán de hacer la funcionalidad de los botones cuando éstos sean pulsados.

Una vez hecho el paso anterior, el siguientes es abrir el fichero “NewElementViewController.m” y hacer “@synthesize”  de todos los objetos declarados en el “NewElementViewController.h” para que el compilador genere el código para crear los métodos accesorios para sus propiedades.

Ahora implementamos los métodos, “saveNewContact” y “cancelNewContact”, anteriormente declarados en “NewElementViewController.h”.

El método “saveNewContact” guardará los datos introducidos en los dos “UITextField” en el objeto “NSMutableDictionary” que creamos al entrar en el método. Una vez hecho esto saldrá de la escena con la propiedad “dismissModalViewControllerAnimated”.

El método “cancelNewContact”, simplemente saldrá de la escena modal con la propiedad  “dismissModalViewControllerAnimated”.

En el “NewElementViewController.xib” y enlazamos, tanto los “IBOutlet” con los “UILabel” correspondientes, como los “IBAction” con los “UIButton” correspondientes.

Vamos ahora a modificar el fichero “DetailViewController.h”.

En él vamos a declarar tres @property:

  • NSMutableDictionary item” -> contendrá la información de la fila seleccionada de la “UITableViewController”.
  • IBOutlet UILabel nameLabel” -> en el que guardaremos el nombre del contacto seleccionado de la lista.
  • IBOutlet UILabel surnameLabel” -> en el que guardaremos el apellido del contacto seleccionado de la lista.

Abrimos ahora el fichero “DetailViewController.m” y hacemos @synthesize de las @property que hemos declarado en el fichero “DetailViewController.h”.

Buscamos el método “viewDidLoad” y asignamos a la propiedad “text” de los “IBOutlet” cada uno de los campos que el objeto “item” tiene.

En “DetailViewController.xib” hay que enlazar los “IBOutlet” con sus correspondientes componentes.

En el fichero “ListViewController.h” vamos a declarar una @property, “items”, donde almacenaremos todos los datos de la lista. Además, vamos a declarar un “IBAction”, el cual será el encargado de abrir la escena de en la que añadiremos contactos a la lista.

Abrimos el fichero “ListViewController.m”, importamos “DetailViewController.h” y “NewElementViewController.h”, y hacemos @sinthesize de la @property declarada en “ListViewController.h”.

En el método “viewDidLoad” tenemos que inicializar el objeto “items”, le vamos a poner un título a la escena “ListViewController” y creamos un “rigthBarButtonItem” el cual ejecutará el método declarado anteriormente “addElement”.

Ahora vamos a insertar en la “UITableView” los datos asignados, anteriormente, a la “NSMutableArray”. Para hacer esto, hay que modificar 3 métodos:

  • numberOfSectionsInTableView: En él indicamos el número de secciones que vamos a tener en nuestro listado.
  • numberOfRowInSection: En este método vamos a indicar el número de filas que tendrá una sección.
  • cellForRowAtIndexPath: Es el método donde configuraremos la fila en cuestión para que se muestre la información deseada.

Al arrancar la aplicación no habrá ningún dato en la lista, por lo que primero tenemos que añadir un contacto.

Implementamos el método “IBOutlet” “addElement”, en el que mostraremos la escena modal.

También hay que implementar el método “newContactDidChanged” en el que asignamos los nuevos contactos a la lista y actualizamos el “UITableView”.

Por último, vamos a “ListViewController.xib” y enlazamos todos los “IBAction” y “IBOutlet“.

Ejecutamos y comprobamos el funcionamiento de la aplicación.

La clase de hoy y la última, que será publicada el lunes 7 de mayo, no tendrán ejercicio propuesto. De esta manera podréis aprovechar y repasar las clases anteriores del curso. Intentad combinar los ejercicios vistos con anterioridad para practicar.

Un saludo y hasta la próxima clase!!!

Leer Mas

28

Abr

Curso de Programación iOS. Clase 5: solución y explicación del ejercicio propuesto

Mario Sevilla,

28 de Abril de 2012 a las 15:41

Curso de Programación iOS. Clase 5: solución y explicación del ejercicio propuesto

Bienvenidos a la solución y explicación del ejercicio propuesto de la Clase 5 del Curso de Programación iOS de iPhone4Spain.

Cómo ya vimos en la Clase 5, veremos cómo crear un listado y un detalle utilizando el protocolo delegado (delegate).

Este protocolo nos permitirá realizar aplicaciones mucho mejor acabadas y nos facilitará el proceso de reestructurado de la aplicación, siempre que éste sea necesario.

Empezaremos, como siempre, creando un nuevo proyecto “Empty Application” y le escribimos un nombre. Nosotros lo hemos llamado “EjercicioClase5“.

Añadimos dos nuevos ficheros. Uno subclase de “UITableViewController” y el otro subclase de “UIViewController“. En ambos seleccionamos la opción “With XIB for user interface” para que genere la interfaz de usuario.

El “UITableViewController” es el que vamos a utilizar para hacer el listado de elementos. Lo hemos llamado “ListViewController“.

El “UIViewController” lo utilizaremos para realizar el detalle, en el que mostraremos la información de la celda y podremos realizar la modificación de su texto. Lo hemos llamado “DetailViewController“.

La estructura de ficheros que tendrá la aplicación es la que vemos en la siguiente imagen.

Abrimos el fichero “AppDelegate.m” para editarlo. Queremos que la aplicación se abra en la interfaz del listado y, cuando pulsemos una celda, realice una transición hacia el detalle.

Para conseguir este primer requisito, lo primero que haremos será importar “ListViewController.h“.

Creamos un objeto de la clase “ListViewController” y creamos otro de la clase “UINavigationController“, que será el encargado de realizar la transición. En la declaración del objeto “UINavigationController“, utilizaremos el objeto de “ListViewController” para igualarlo al método “initWithRootViewController“.

Igualamos, en la propiedad “rootViewController” de “window“, el objeto de “UINavigationController“.

Vamos a empezar haciendo el detalle para ver qué es lo que necesitamos en el listado.

Primero editamos el fichero “DetailViewController.h“.

Lo primero que hay que hacer es crear el “@protocol“. Lo llamamos “DetailDelegate” y le decimos que la clase que soporte este delegado tiene que contener implementado, de manera opcional “@optional“, el método “nameDidChange“.

Dentro de “@interface” crearemos la propiedades de “DetailViewController“: “delegate” y “cellName“. Además, crearemos un “IBOutlet” para el “UITextField” de la interfaz y un “IBAction” para el botón que cambia el nombre de la celda.

En el fichero “DetailViewController.m” hacemos “@synthesize” de las propiedades declaradas en “DetailViewController.h” y programamos el “IBAction“.

En el método “viewDidLoad“, cambiamos el título de la interfaz y el texto del “UITextField“.

El “IBAction” se encargará de cambiar el nombre de la celda. Para ello, trabajamos con el método que ha de tener la clase que soporta el protocolo. También vuelve a la interfaz de la lista.

Una vez hecho el detalle, vamos a hacer el listado.

Editamos el fichero “ListViewController.h“.

Haremos que “ListViewController” soporte el delegado de detalle “<DetailDelegate>” y creamos dos propiedades: cells y selectIndex.

Por último, vamos a editar el fichero “ListViewController.m“.

Lo primero que haremos es “@synthesize” de las propiedades declaradas en “ListViewController.h“.

Creamos el método “didReceiveMemoryWarning” que va a controlar posibles avisos de memoria.

Editamos el método “viewDidLoad” en el que cambiaremos el “title” de la interfaz y rellenaremos “cells” con información.

En el método “numberOfSectionsInTableView“, hacemos que devuelva 1 y, en el método “numberOfRowsInSection“, que devuelva el contador de “cells“.

Editamos el método “cellForRowAtIndexPath” para que, el “textLabel” de cada celda, coja el texto de cada uno de los valores de “cells“.

En el método “didSelectRowAtIndexPath” es donde crearemos el objeto de “DetailViewController” e igualaremos el delegado de “DetailViewController” con “self“. Es lo más importante del ejercicio.

Por último, creamos el método encargado de cambiar el nombre de la celda.

Sólo queda enlazar todos los “IBOutlets” y “IBActions” a sus correspondientes elementos de la interfaz.

Ejecutamos la aplicación y probamos que todo funciona correctamente.

Con la solución del ejercicio propuesto damos por terminada la Clase 5 del Curso de Programación iOS de iPhone4Spain.

Un saludo!!!

Leer Mas

23

Abr

Curso de Programación iOS. Clase 5: listado y detalle con patrón delegado

Mario Sevilla,

23 de Abril de 2012 a las 23:11

Curso de Programación iOS. Clase 5: listado y detalle con patrón delegado

Bienvenidos a la Clase 5 del Curso de Programación iOS de iPhone4Spain.

En esta clase, veremos cómo pasar información entre distintas escenas a través del patrón “delegado” (delegate). La utilización de este patrón nos ayudará a, en un momento dado, reorganizar las escenas sin que esto suponga algo muy laborioso ya que el patrón “delegado“ hace que el padre sólo contenga aquellos métodos que el hijo necesita.El patrón “delegado” hace el hijo no tenga que incluir(con “import”) la cabecera del padre. Es esto lo que hace al patrón “delegado” algo muy útil para este tipo de aplicaciones.

El ejemplo que vamos a explicar en esta clase, consiste en una “UITableView” en la que tendremos acceso a un “UIView” donde se mostrará el detalle de la celda seleccionada. Para hacerlo un poco más complejo, veremos cómo cargar datos en la “UITableView” desde un “NSMutableArray”.

Creamos un proyecto “Empty Application“.

Lo vamos a llamar “Clase5”.

Ahora vamos a añadir, en el proyecto, dos ficheros con sus correspondientes interfaces de usuario.

El primer fichero va a ser del tipo “Objective-C class” y de la subclase “UITableViewController“.

Lo vamos a llamar “ListViewController“. Va a ser la lista de elementos.

También seleccionamos “With XIB for user interface” para que se generen las interfaces.

El segundo fichero que vamos a insertar va a ser “Objective-C class” pero, en este caso, va a ser subclase de “UIViewController“.

Lo hemos llamado “DetailViewController“. Es el detalle de cada elemento de la lista.

Como siempre solemos hacer, agrupamos todos los ficheros insertados, en carpetas.

En la siguiente imagen podemos ver cómo tiene que ser la estructura de nuestro proyecto.

Vamos a pasar ya a la programación de los ficheros.

Abrimos el fichero “AppDelegate.h”. Creamos el objeto instanciado de la clase “ListViewController” y un objeto “UINavigationController” el cual lo inicializamos con “initWithRootViewController” para que “ListViewController” sea la escena que se abra cuando arranquemos la aplicación.

Vamos a empezar a realizar el detalle para declarar el patrón “delegado” y los demás componentes que nos hará falta.

Seleccionamos “DetailViewController.xib” y añadimos los componentes que vamos a utilizar para mostrar la información. Añadimos dos “UILabel” en el que mostraremos el nombre del campo y el titulo de la celda seleccionada anteriormente. Además agregaremos un “UIButton” que va a realizar la misma función volver que realiza el “Navigation Item” que aparece en la “Navigation Bar” pero nos servirá para ver la instrucción que realiza internamente el “Navigation Item”.

Abrimos el fichero “DetailViewController.h” y añadimos lo siguiente:

Declaramos el protocolo “DetailDelegate”. En él se pueden declarar funciones que puede o tiene que llevar la clase padre de “DetailViewController”, en este caso “ListViewController”. Como “ListViewController” no tiene que hacer ninguna funcionalidad lo dejaremos vacío.

Dentro de “@interface DetailViewController” declaramos dos propiedades: La primera es un “NSString” que se llamará “cellName” que se encargará de guardar el nombre de la celda y la segunda es el propio “delegate”. También dentro de “@interface DetailViewController” declaramos el “IBOutlet” del “UILabel” que contendrá el título de la celda y un “IBAction” llamado “returnButton“, que se encargará de hacer la funcionalidad del botón cuando éste sea pulsado.

Una vez hecho el paso anterior, el siguientes es abrir el fichero “DetailViewController.m” y hacer “@synthesize”  de todos los objetos declarados en el “DetailViewController.h” para que el compilador genere el código para crear los métodos accesorios para sus propiedades.

Cuando entremos al detalle de una celda de “ListViewController” mostramos su nombre en el “title” de la escena y también en el “label” que hemos declarado antes.

Lo último que hay que programar en el “DetailViewController.m” es la funcionalidad del botón que tiene la escena. El botón lo que va a hacer es volver a “ListViewController” con el método de la clase “UINavigationController” “popViewControllerAnimated”.

Una vez realizada toda la programación de “DetailViewController” vamos a empezar a hacer la programación de “ListViewController”.

Abrimos el fichero “ListViewController.h” y añadimos “<DetailDelegate>” en la declaración de la “@interface” para que el compilador sepa que la “@interface” soporta el delegado de “DetailViewController”.  Para ello, tenemos que importar “DetailViewController.h”.

Lo siguiente es declarar el “NSMutableArray” que contendrá la información de las celdas y un “int” en el que captaremos el índice de la celda seleccionada.

Ahora volvemos a abrir “DetailViewController.xib” y realizamos los enlaces de los “IBOutlet” y “IBAction” con los diferentes objetos declarados en la escena, tal y como lo hemos hecho en clases anteriores del Curso de Programación iOS de iPhone4Spain.

Una vez hecho el paso anterior, abrimos el fichero “ListViewController.m”. Primero hacemos el “@synthesize” de las “@property” anteriormente declaradas.

Buscamos el método “viewDidLoad” y rellenamos el objeto “cells” con la información deseada. En este ejemplo, vamos a escribir el texto “Celda ” y el número correspondiente a esa celda. El método quedará como vemos en la siguiente imagen.

Hay que tener en cuenta que no estamos insertando nada en la “UITableView”, sino que estamos insertando la información en la lista que tenemos en memoria (“NSMutableArray”), por lo que en pantalla no aparecerán los datos si ejecutamos la aplicación. Es un ejemplo similar al que tendríamos si tuviésemos una base de datos.

Ahora vamos a insertar en la “UITableView” los datos asignados, anteriormente, a la “NSMutableArray”. Para hacer esto, hay que modificar 3 métodos:

  • - numberOfSectionsInTableView: En él indicamos el número de secciones que vamos a tener en nuestro listado.
  • - numberOfRowInSection: En este método vamos a indicar el número de filas que tendrá una sección.
  • - cellForRowAtIndexPath: Es el método donde configuraremos la fila en cuestión para que se muestre la información deseada.

Como vemos en la imagen anterior, en el método “cellForRowAtIndexPath” es donde modificamos el contenido del “UITableView”. Con la instrucción “cell.textLabel.text = [self.cells objcectAtIndex:indexPath.row]”, se selecciona cada celda de “cells” con el índice “indexPath.row” y lo insertamos en la propiedad “text” del “textLabel” del objeto “cell”.

Por último, nos queda llamar a la escena “DetailViewController” cuando seleccionamos una fila del ”UITableView”.

Nos dirigimos al método “didSelectedRowAtIndexPath” y simplemente creamos una instancia de “DetailViewController”, asignamos la información de la celda seleccionada, indicamos el índice de la celda seleccionada, igualamos el delegate a self y hacemos “pushViewControler” para pasar a “DetailViewController”.

Por último, ejecutamos la aplicación y comprobamos que funciona correctamente.

El ejercicio propuesto para esta semana consta de un listado y un detalle como el que hemos realizado hoy, pero en el detalle vamos a tener que poder modificar el texto de la celda seleccionada.

El ejercicio propuesto es algo difícil pero hay que intentarlo.

El viernes 27 de abril publicaremos la solución del ejercicio.

Un saludo!!!

Leer Mas

20

Abr

Curso de Programación iOS. Clase 4: solución y explicación del ejercicio propuesto

Mario Sevilla,

20 de Abril de 2012 a las 23:10

Curso de Programación iOS. Clase 4: solución y explicación del ejercicio propuesto

Bienvenidos a la solución y explicación del ejercicio propuesto de la Clase 4 del Curso de Programación iOS de iPhone4Spain.

Vamos a enseñar cómo hacer un listado con el componente “TableViewController“.

Como dijimos en la Clase 4, es un componente muy utilizado en las aplicaciones que contienen listados.Empezamos la explicación creando un proyecto nuevo. “File -> New -> Project…“.

Seleccionamos “Empty Application“.

Nombramos el proyecto. Nosotros le hemos puesto el nombre de “EjercicioClase4“.

Ahora vamos a añadir una clase “UITableViewController”  en la que vamos a mostrar el listado.

Añadimos los ficheros.

Seleccionamos “Objective-C class“.

Elegimos “UITableViewController” en el apartado “Subclass of“.

Marcamos “With XIB for user interface” para que, a la vez, cree el fichero .xib con la interfaz de usuario.

Por último, le damos un nombre. Nosotros lo hemos llamado “ListViewController“.

Agrupamos todos los fichero creados en carpetas para tener ordenado el proyecto.

Editamos, ahora, el fichero “AppDelegate.m” para que arranque la aplicación en el listado.

Importamos “ListViewController“. Buscamos el método “didFinishLaunchingWithOptions” en el que creamos un objecto de la clase “ListViewController” y lo asignamos a la propiedad “rootViewController” de “window“.

Ahora, vamos a editar el fichero “ListViewController.m“.

Buscamos los métodos “numberOfSectionsInTableView“, “numberOfRowsInSection” y “cellForRowAtIndexPath

Editamos estos métodos para que el listado cumpla con los requisitos del enunciado.

Ejecutamos y comprobamos que funciona correctamente.

Con la solución del ejercicio propuesto damos por terminada la Clase 4 del Curso de Programación iOS de iPhone4Spain.

Siguiente clase: Clase 5, listado y detalle con patrón delegado.

Un saludo!!!

Leer Mas

16

Abr

Curso de Programación iOS. Clase 4: introducción a TableViewController

Mario Sevilla,

16 de Abril de 2012 a las 20:09

Curso de Programación iOS. Clase 4: introducción a TableViewController

Bienvenidos a la Clase 4 del Curso de Programación iOS de iPhone4Spain.

En esta clase vamos a hacer una introducción a la utilización del “TableViewController“, uno de los componentes más importantes y más utilizados en la aplicaciones iOS. A lo largo del curso profundizaremos más en utilidades y propiedades de este componente.Este componente se utiliza para crear listados de elementos. Sin ir más lejos podemos ver el ejemplo en la AppStore, donde tendremos listados de los tipo de aplicaciones que hay.

Empezamos ya con la clase creando un proyecto nuevo. “File -> New -> Project…“. Seleccionamos una “Empty Application”.

Nombramos el proyecto. Nuestro proyecto lo hemos llamado “Clase 4“.

Una vez creado el proyecto, vamos a añadir un nuevo fichero de la clase “UITableViewController” con el que crearemos el listado.

Primero, pulsamos el botón derecho en la carpeta del proyecto y pulsamos “New File…

Seleccionamos “Objective-C class“.

En el siguiente paso nombramos a la clase. Nosotros la hemos llamado “ListViewController“.

Seleccionamos que es subclase de “UITableViewController” y marcamos “With XIB for user interface“.

Agrupamos los ficheros en carpetas con el nombre de la clase para tener el proyecto ordenado.

Una vez añadido la “ListViewController” vamos a hacer que la aplicación arranque en la escena asociada. Para ello, como siempre, editamos el fichero “AppDelegate.m“.

Importamos “ListViewController.h“, creamos un objeto de “ListViewController” y lo asignamos a la propiedad “rootViewController” de “window“.

Ahora abrimos el fichero “ListViewController.m” y vamos a observar los métodos “numberOfSectionsInTableView“,  ”numberOfRowsInSection” y “cellForRowAtIndexPath“.

En “numberOfSectionsInTableView” es el método donde indicamos el número de secciones que va a tener el “TableViewController“. En “numberOfRowsInSection” indicamos el número de filas que tendrá el componente. Es importante quitar los #warning una vez modificamos los métodos.

El “TableViewController” de la aplicación va a tener una sección y doce filas.

Además, el texto que va a tener cada celda es “Celdas“. Para ello, modificamos el método “cellForRowAtIndexPath“.

También, hay que comprobar que “cell” sea igual a “nil” e inicializar “cell“, sino dará error al ejecutar la aplicación.

Ejecutamos y probamos el funcionamiento de la aplicación. Podéis poner un “breakpoint” en el método “cellForRowAtIndexPath” para ver cómo se comporta cuando se ejecuta.

La aplicación mostrará el “UITableViewController” con doce filas en las que el “textLabel” tendrá escrito “Celdas

La aplicación que vamos a proponer esta semana ha de tener 25 filas en las que mostraremos el número de celda y el índice que tiene. Para ver el índice utilizaremos una variable que recibe el método, “indexPath“.

Ya está disponible la solución al ejercicio de esta clase: Solución.

Siguiente clase: Clase 5, listado y detalle con patrón delegado.

Un saludo!!!

Leer Mas

14

Abr

Curso de Programación iOS. Clase 3: solución y explicación del ejercicio propuesto

Mario Sevilla,

14 de Abril de 2012 a las 14:36

Curso de Programación iOS. Clase 3: solución y explicación del ejercicio propuesto

Bienvenidos a la solución y explicación del ejercicio propuesto en la Clase 3 del Curso de Programación iOS de iPhone4Spain.

Hoy explicaremos la realización del ejercicio propuesto en la Clase 3, en la que vimos cómo realizar una aplicación con diferentes categorías utilizando el popular componente “TabBarController“. Vimos cómo añadir imágenes en el “TabBarController” y cambiar el título que aparece debajo de la imagen.El ejercicio propuesto en la Clase 3 es muy parecido al de la explicación por lo que, al igual que el ejercicio propuesto de la Clase 2 del Curso de Programación iOS de iPhone4Spain, no hay que buscar información adicional para realizarlo.

Empezamos creando un proyecto nuevo, “File -> New -> Project…“. Seleccionamos “Empty Application“.

Le ponemos nombre al proyecto. Nosotros lo hemos llamado “EjercicioClase3“.

Agregamos todos los ficheros que necesitamos para hacer la aplicación. Les hemos llamado “HomeViewController“, “ChatViewController” y “AppleViewController“.

Para agregar los ficheros, pulsamos el botón derecho del ratón dentro de la carpeta “EjercicioClase3“.

Seleccionamos “Objective-C class“.

Nombramos los ficheros.

Agrupamos en carpetas todos los ficheros relacionados para tener ordenado el proyecto.

La estructura del proyecto ha de ser la siguiente.

Vamos ya a editar el fichero “AppDelegate.m“, como hicimos en la Clase 3, para crear el “UITabBarController” por código y hacer que “rootViewController” se ejecute en la escena que queremos.

Insertamos al proyecto las imágenes que queremos que lleven los botones del “TabBarController“. El tamaño aproximado de las imágenes es 30×30. Modificad el tamaño si veis que no se consigue cuadrar dentro del cuadro correspondiente. Las imágenes serán con formato .png con fondo transparente.

Nosotros hemos subido al proyecto 3 imágenes: “home.png“, “chat.png” y “apple.png

Seleccionamos la imagen y quedará insertada en la correspondiente carpeta.

Modificamos el método “initWithNibName” de los ficheros “HomeViewController.m“, “ChatViewController.m” y “AppleViewController.m” para que las escenas tengan título e imagen en el “TabBarController“.

Por último, vamos a cambiar el color de fondo de las interfaces para ver el cambio entre las escenas.

Probamos la aplicación y vemos su correcto funcionamiento.

Ya damos por terminada la Clase 3.

Siguiente clase: Clase 4, introducción a TableViewController.

Un saludo!!!

Leer Mas

10

Abr

Curso de Programación iOS. Clase 3: secciones con tabBarController

Mario Sevilla,

10 de Abril de 2012 a las 17:44

Curso de Programación iOS. Clase 3: secciones con tabBarController

Bienvenidos a la Clase 3 del Curso de Programación de iPhone4Spain.

En la clase de hoy veremos cómo separar escenas según su categoría. Para ello, vamos a utilizar el conocido componente “tabBarController”.

Este componente es utilizado en la “App Store“, entre otras aplicaciones, y dá un aspecto integrado a todas las aplicaciones que realicemos.En el ejercicio, que vamos a realizar a continuación, podemos ampliarlo con ejercicios vistos en anteriores clases del Curso de Programación iOS de iPhone4Spain.

Empezamos, como siempre, creando un nuevo proyecto. “File -> New -> Project…”. Seleccionamos un proyecto “Empty Application”.

Le damos un nombre. Nosotros le hemos llamado “Clase3” y lo guardamos en el directorio que nos convenga.

Ahora, crearemos los ficheros de las clases que contendrán las escenas: “FirstScene” y “SecondScene”.

Agregamos un nuevo fichero al proyecto.

Seleccionamos “Ojective-C class”.

Le damos un nombre y marcamos la opción “With XIB for user interface”.

Recordad agrupar los ficheros generados en una carpeta, dentro del proyecto, para tenerlo más organizado.

Abrimos el fichero “AppDelegate.m” para crear el “tabBarController” y enlazarlo con el inicio de la aplicación.

Antes que nada, en el fichero “AppDelegate.m“, importaremos las clases creadas en el paso anterior, “FirstViewController” y “SecondViewController“.

Creamos un objeto de la clase “FirstViewController” y otro “SecondViewController“.

También creamos un objeto de la clase “UITabBarController” que es el que utilizaremos para separar por categorías nuestra aplicación.

Una vez hecho lo anterior, creamos un objeto de “NSArray” que inicializaremos con los objectos de “FirsViewController” y “SecondViewController“.

Por último, asignamos el objeto “NSArray” a “tabBarController” con el método “setViewControllers” y a la propiedad “rootViewController” de “window” le asignamos el “tabBarController“.

Vamos a ponerle imágenes a los botones del “tabBarController“.

Hay que saber que las imágenes que hay que añadir para el “tabBarController“, tienen que ser de fondo transparente para que el propio componente se encargue de dar el color si está pulsado o no.

Primero hay que agregar las imágenes al proyecto. Pulsamos con el botón derecho del ratón sobre la carpeta de la clase donde queremos agregar la imagen y elegimos “Add Files to “Clase3″…“.

Seleccionamos la imagen que queremos y pulsamos “Add

Para hacer que se cargue la imagen en el botón correspondiente del “tabBarController“, hay que programarlo ya que la carga se hará de forma dinámica.

Vamos a ver cómo sería en “FirstViewController“. El proceso hay que repetirlo para “SecondViewController“.

Abrimos el fichero “FirstViewController.m” y accedemos a la imagen del “tabBarController” mediante “self.tabBarItem.image“. Con el método “imageNamed” de la clase “UIImage” decimos el nombre de la imagen que tenemos agregada al proyecto.

Además de cargar la imagen, vamos a cambiar el titulo de la escena. Todo se hace en el método “initWithNibName“.

Por último, cambiamos el color de fondo de las escenas.

Sólo queda ejecutar la aplicación y comprobar que funciona correctamente.

El ejercicio que vamos a proponer para esta semana no es más que hacer el mismo que hemos realizado en la explicación de la Clase 3 pero con tres escenas. La dificultad del ejercicio propuesto no es la programación sino en conseguir que se vean bien las imágenes que insertemos en el proyecto. Intentad que sean lo más parecidas a las de la siguiente imagen.

Como podéis ver, estamos obteniendo conocimientos para poder hacer aplicaciones que se asemejan mucho a las que podéis comprar en la “App Store“. Seguiremos viendo, en las próximas clases, más componentes que sirven para contextualizar, aún más, nuestras aplicaciones.

Ya está disponible la solución al ejercicio de esta clase: Solución.

Siguiente clase: Clase 4, introducción a TableViewController.

Un saludo!!!

Leer Mas

6

Abr

Curso de Programación iOS. Clase 2: solución y explicación del ejercicio propuesto

Mario Sevilla,

6 de Abril de 2012 a las 20:50

Curso de Programación iOS. Clase 2: solución y explicación del ejercicio propuesto

Bienvenidos a la solución y explicación del ejercicio propuesto en la Clase 2 del Curso de Programación de iPhone4Spain.

El ejercicio propuesto de la Clase 2 del Curso de Programación de iPhone4Spain es muy simple y se puede realizar con la explicación de la clase, sin buscar información adicional.

Os recordamos que, en el ejercicio de la Clase 2, vemos cómo realizar transiciones con “pushViewController“.

Lo primero que haremos, como siempre, es crear un proyecto nuevo, “File -> New -> Project“. Seleccionamos “Empty Application“.

Le escribimos un nombre al proyecto. Nosotros lo hemos nombrado “EjercicioClase2“.

Ahora, agregamos tres ficheros “Objective-C class“: “MainViewController“, “GreenViewController” y “YellowViewController” con sus correspondientes interfaces.

Nombramos los ficheros y marcamos la opción “With XIB for user interface“.

Y los agrupamos por carpetas para tener el proyecto ordenado.

El proyecto debe tener esta estructura de ficheros.

Abrimos el fichero “AppDelegate.m” para editarlo.

Lo primero que haremos en el fichero es importar “MainViewController.h” para poder realizar objetos.

En el método “didFinishLaunchingWithOptions” creamos un objeto “MainViewController“.

Como ya comentamos en la Clase 2 del Curso de Programación de iPhone4Spain, hay que declarar un objeto “UINavigationController” para que se encargue de realizar la transición entre escenas. En la declaración del objeto “UINavigationController” asignamos “mainViewController” mediante el método “initWithRootViewController“.

Por último, vamos a hacer que arranque la aplicación con “mainViewController“. Para ello, asignamos, con el método “rootViewController” de la clase “window“, al objeto “navigationController“.

El siguiente paso es editar el fichero “MainViewController.h“, en el que declararemos los “IBAction” necesarios para acceder a las escenas.

Van a ser dos “IBAction“. Nosotros les hemos llamado “greenScene” y “yellowScene“.

Accedemos en al fichero “MainViewController.m” y lo editamos.

Importamos “GreenViewController.h” y “YellowViewController.h” para poder hacer objetos de esas clases y, en el método “viewDidLoad” modificamos el “title“.

En el fichero “MainViewController.m“, también vamos a hacer la programación de los “IBAction” que hemos declarado en el fichero “MainViewController.h“.

Los métodos “IBAction” se encargarán de crear objetos, tanto de “GreenViewController” como de “YellowViewController“. Una vez creados los objetos los asignaremos a “navigationController” con el método “pushViewController“.

Ahora, sólo queda realizar las interfaces.

En “MainViewController.xib” vamos a agregar dos botones. Uno para acceder a “GreenViewController” y otro para acceder a “YellowViewController“. Los botones los enlazaremos con los “IBAction” como vimos en la Clase 2 del Curso de Programación de iPhone4Spain.

Ahora tanto en “GreenViewController” como en “YellowViewController” cambiamos el color de fondo.

El último paso es ejecutar la aplicación y ver que funciona correctamente.

Con esta explicación damos por concluida la Clase 2 del Curso de Programación de iPhone4Spain. Poco a poco, vamos viendo conceptos básicos de cómo hacer una aplicación iOS. Conforme vayamos viendo nuevos conceptos, podremos hacer aplicaciones más complejas.

Siguiente clase: Clase 3, secciones con tabBarController.

Un saludo!!!

Leer Mas

2

Abr

Curso de Programación iOS. Clase 2: transición con pushViewController

Mario Sevilla,

2 de Abril de 2012 a las 19:30

Curso de Programación iOS. Clase 2: transición con pushViewController

Bienvenidos a la Clase 2 del Curso de programación iOS de iPhone4Spain.

En esta clase vamos a aprender a hacer transiciones “pushViewController” entre diferentes escenas de nuestra aplicación.

La transición “pushViewController” es muy común en las aplicaciones iOS. Se suele utilizar, sobre todo, para mostrar el detalle de una fila en un listado. Los listados(“TableView“) los veremos en la Clase 4.Vamos ya a empezar la explicación de cómo hacer transiciones con “pushViewController“. Podéis combinar el ejercicio de hoy con ejercicios anteriores o ampliarlo, añadiendo componentes o funcionalidades.

Como siempre, empezamos creando un nuevo proyecto, New -> Project -> Empty Application. Le ponemos un nombre, nosotros le hemos puesto “Clase2“.

Una vez creado el proyecto, agregamos dos ficheros. Uno va a ser para la primera escena y otro para la segunda.

Ambos ficheros van a ser “Objective-C class“.

A la primera escena la vamos a llamar “MainViewController” y a la segunda “SecondViewController“. Acordaos de agregar los ficheros generados en carpetas para tener el proyecto ordenado.

La estructura de ficheros del proyecto será tendrá que ser como el que vemos en la siguiente imagen.

Abrimos y editamos el fichero “AppDelegate.m“.

Importamos “MainViewController.h” para poder hacer referencia a la clase. Creamos un objeto de la clase “MainViewContoller“.

Ahora vamos a crear un objeto de la clase “UINavigationController” asignando el objeto de “MainViewController“. Para ello, utilizaremos la propiedad “initWithRootViewController“.

El objeto de “UINavigationController” es el encargado de hacer las transiciones entre escenas. Como vamos a ver, a lo largo de la clase, es muy sencillo hacer este tipo de transiciones y, además, le dá dinamismo a la aplicación.

Vamos a editar el fichero “MainViewController.h“. Lo único que hay que hacer en este fichero es declarar un “IBAction” que nosotros hemos llamado “pushButton“.

En el fichero “MainViewController.h” implementamos el “IBAction” que hemos declarado en “MainViewController.h“.

Antes que nada importamos “SecondViewController” y, en el método “viewDidLoad“, hemos modificado el “title” de “MainViewController“.

El “IBAction” será el encargado de llamar a la siguiente escena. Dentro del método, declararemos un objeto de la clase “SecondViewController“, le cambiamos el title y decimos que el “navigationController” haga “pushViewController” con el objeto de “SecondViewController“. También le decimos que, cuando haga la transición, haga la animación.

Los fichero de “SecondViewController” no los vamos a editar porque no va a hacer ningún tipo de función.

Por último, modificaremos las interfaces.

En la interfaz de “MainViewController” vamos a agregar un “Round Rect Button” y lo enlazaremos con “File´s Owner“. Para enlazar el “Round Rect Button” con el “IBAction“, hay que combinar la tecla “Ctrl“ y el botón derecho del ratón sobre el “Round Rect Button” y arrastramos hasta “File´s Owner” al igual que vimos en la Clase 1 del Curso de Programación de iPhone4Spain. Seleccionamos “pushButton” de la lista.

En la interfaz de “SecondViewController” cambiamos el color de fondo.

Ahora sólo queda ejecutar la aplicación y comprobar que funciona correctamente.

Pulsamos el botón y vemos que hace correctamente la transición.

El ejercicio que proponemos en esta clase es una aplicación que tendrá tres escenas.

Una principal que contendrá dos botones.

Si pulsamos el botón con el texto “Verde“, se mostrará la escena con fondo verde. Si pulsamos el botón con el texto “Amarillo“, mostraremos la escena con el fondo amarillo.

Ya está disponible la solución al ejercicio de esta clase: Solución.

Siguiente clase: Clase 3, secciones con tabBarController

Un saludo.

Leer Mas

30

Mar

Curso de Programación iOS. Clase 1: solución y explicación del ejercicio propuesto

Mario Sevilla,

30 de Marzo de 2012 a las 20:25

Curso de Programación iOS. Clase 1: solución y explicación del ejercicio propuesto

Hoy vamos a ver la solución del ejercicio propuesto en la Clase 1 del Curso de Programación iOS: cómo capturar eventos generados por el usuario.

Nos centraremos en explicar para qué se utilizan los objetos y porque programamos las cosas de la manera que lo hacemos. Vamos a tratar las clases de los viernes como un refuerzo a las clases de los lunes. De esta manera veremos más casos en los que podéis encontrar alguna duda. Empezamos la solución y explicación del ejercicio creando un nuevo proyecto vacío “Empty Application“. Nosotros lo hemos llamado “EjercicioClase1“.

Añadimos al proyecto un nuevo fichero.

Seleccionamos una “Objective-C class“. En el paso siguiente, le escribimos un nombre y marcamos la opción “With XIB for user interface“.

Introducimos los ficheros generados en una carpeta con el nombre que le hemos puesto a la Clase.

Lo primero que vamos a hacer programar el fichero “AppDelegate.m” para que la aplicación arranque desde la interfaz que hemos agregado. Para ello, como vimos en la Clase 1 del Curso de Programación iOS, abrimos “AppDelegate.m“, agregamos #import “MainViewController.h” en la cabecera para tener acceso a la clase que hemos creado. Una vez hecho el paso anterior, buscamos el método “didFinishLaunchingWithOptions” y creamos un objeto de la clase “MainViewController” que igualaremos a la propiedad “rootViewController” de “window“.

 

Ahora vamos a añadir otro fichero de “Objective-C class“. Le ponemos de nombre “Constants” y va a ser subclase de “NSObject“. Evidentemente no va a tener interfaz, de hecho, no nos da la posibilidad de seleccionar “With XIB for user interface“. También lo insertaremos en una carpeta para tener el proyecto lo más organizado posible.

Lo vamos a utilizar para programar las constantes de nuestra aplicación. Es una metodología que nos insisten mucho los profesores y que los alumnos solemos pasar por alto, pero como en este curso queremos programar de la manera más correcta posible, nosotros intentaremos hacer buenas prácticas de programación.

El proyecto va a tener la siguiente estructura de ficheros.

Vamos a editar ahora el fichero “Constants.h“. En él vamos a declarar las constantes que vamos a utilizar. En esta aplicación sólo va a tener un “NSString” como constante.

Declaramos la constante con las siguientes instrucciones, “extern(Indica que la declaración hace referencia a un elemento ya existente definido o asignado en otra unidad de compilación) NSString(Es el tipo de objeto que estamos declarando) * const(Indicamos que es constante) CONST_STR(Nombre que hemos puesto a la constante)”.

Editamos, ahora, el fichero “Constants.m“. En él, simplemente, le asignamos el valor a la constante.

Abrimos y editamos “MainViewController.h“.

Lo primero que haremos será crear un contador, con el que contaremos las veces que el usuario pulsa el botón “Incrementar“.

También crearemos un “IBOutlet” con el que accederemos al “Label” que mostrará el contador.

Por último, crearemos dos “IBAction“. Uno para incrementar el contador, que lo hemos llamado “incCounter“, y otro para poner a 0 el contador, que lo hemos llamado “resetCounter“.

Y el último fichero a programar es “MainViewController.m“. En él lo primero que haremos será importar “Constants.h” y el “@synthesize” del “IBOutlet” que hemos declarado en el fichero “MainViewController.h“.

Ahora hay que implementar los “IBAction” declarados en “MainViewController.h“. También, hay que buscar el método “viewDidLoad” para mostrar la primera vez el contador y el texto.

La clase “NSString” tiene un método llamado “stringWithFormat” que permite introducir el formato que queramos al texto del “Label“. Es muy útil para mostrar variables numéricas en textos. En nuestro caso, el “Label” muestra “Pulsaciones: ” y el contador de pulsaciones. Para mostrar el contador, la constante tiene “%d” en el lugar que queremos mostrar la variable “counter

Por último, abrimos el fichero “MainViewController.xib” para agregar los componentes “Label” y “Round Rect Button” que necesitamos en la aplicación y los enlazamos con los “IBAction” e “IBOutlet” correspondientes.

Como ya explicamos en la Clase 1 del Curso de Programación iOS, hay que tener cuidado cuando se enlacen los componentes con los “IBOutlet” o “IBAction“.

Primero vamos a enlazar el “IBOutlet“. Pulsamos el botón izquierdo del ratón junto con la tecla Ctrl del teclado sobre “File’s Owner” y arrastramos hasta el “Label“. Seleccionamos el “infoLabel“.

Ahora enlazamos los “IBAction“. Hacemos la combinación de teclas anterior, pero ahora en sentido contrario.

Pulsamos el botón incrementar y arrastramos hasta “File’s Owner“. Seleccionamos “incCounter“.

Hacemos lo mismo con el botón “Resetear” y seleccionamos “resetCounter“.

Sólo queda ejecutar la aplicación y ver que funciona correctamente.

Con esto damos por concluida la Clase 1 del Curso de Programación iOS. Esperamos que todos hayáis tenido bien el ejercicio o, por lo menos, que lo hayáis intentado. Si tenéis alguna pregunta, duda o algo que sugerirnos o corregir, podéis usar tanto el sistema de comentarios que tenéis debajo de la entrada, o podéis mencionarnos en twitter @iPhone4Spain .

Siguiente clase: Clase 2, transición con pushViewController

¡¡Un saludo!!

Leer Mas

26

Mar

Curso de Programación iOS. Clase 1: cómo capturar eventos generados por el usuario

Mario Sevilla,

26 de Marzo de 2012 a las 20:44

Curso de Programación iOS. Clase 1: cómo capturar eventos generados por el usuario

Bienvenidos a la Clase 1 del Curso de Programación iOS de iPhone4Spain.

En la clase de hoy vamos a ver cómo realizar acciones con botones y explicaremos conceptos básicos que servirán en futuras aplicaciones. Volveremos a ver pasos ya realizados en la Introducción a Xcode porque no queremos hacer que tengáis que estar mirando constantemente la clase anterior para ver cómo se hacía cada uno de los pasos que no os acordéis. Conforme avance el curso iremos quitando pasos vistos con anterioridad.Cuando terminéis la realización del ejercicio que explicaremos en la clase, podréis hacer una aplicación que reaccione a cualquier acción que el usuario haga en la escena que estéis mostrando por pantalla.

Vamos a empezar ya a hacer el proyecto de la Clase 1. En esta clase vamos a trabajar sobre una aplicación que mostrará en un label “iPhone4Spain” y, cuando pulsemos un botón, el texto cambiará y mostrará “Curso Programación iOS“.  Con ello, abrimos Xcode y empezamos la acción. Como ya vimos en la Introducción a Xcode, para hacer un nuevo proyecto iremos al menú “File->New->Project…” y seleccionaremos “Empty Application“.

El siguiente paso es nombrar el proyecto. Nosotros le hemos puesto “Clase1″. La aplicación también será Universal (funciona tanto en iPhone como en iPad).

Ahora añadiremos una clase “UIViewController” a nuestro proyecto.

Seleccionaremos “Objective-C class” y pasaremos al siguiente paso, en el que nos pedirá el nombre que queremos dar a la clase y el tipo de clase de la que va a heredar. Como hemos dicho antes, queremos que sea una subclase de “UIViewController” y la vamos a nombrar “MainViewController“. Seleccionaremos “With XIB for user interface” para que se genere la clase con el fichero de la interfaz.

Insertaremos los ficheros generados en una carpeta que se llame igual que la clase, “MainViewController”, para organizar mejor el proyecto.

Tenemos que decirle a Xcode que la aplicación arranque en la escena “MainViewController“. Para ello, editaremos el fichero “AppDelegate.m“. Dentro del método “didFinishLaunchingWithOptions” igualaremos la propiedad “rootViewController” de la clase “window” a un objeto instanciado de la clase “MainViewController“. Como podemos ver los métodos tienen nombres muy significativos. Eso es debido a que dichos métodos se ejecutan cuando su propio nombre indica.

 

Para entender mejor lo que vamos a realizar, antes de nada vamos a abrir el fichero “MainViewController.xib” y agregamos un “Label” y un “Round Rect Button“. Al “Label” le cambiamos el texto por “iPhone4Spain” y al “Round Rect Button” le escribimos “Pulsar“. Ahora ya tenemos noción de los objetos que tenemos en la parte visual de nuestra aplicación.

Luego volveremos a “MainViewController.xib” porque, para que la aplicación funcione correctamente, hay que realizar un paso importante.

Editaremos, ahora, el fichero “MainViewController.h“. Lo primero que tenemos que pensar es “¿Qué necesitamos para que nuestra aplicación funcione?” El razonamiento es sencillo, en la parte visual (“MainViewController.xib“), cambiaremos la propiedad de un “UILabel” cuando el “UIButton” sea pulsado. Por lo tanto, la respuesta va a ser también sencilla. Para cambiar las propiedades de cualquier objeto visual utilizaremos “IBOutlet” y para capturar el evento de un botón cuando éste es pulsado, deslizado, etc, utilizaremos “IBAction“. Haremos la declaración del “IBOutlet” de la siguiente manera: @property porque va a ser una propiedad de clase” (nonatomic, strong)explicaremos en posteriores clases lo que significa IBOutlet UILabel *nombreLabel. El “IBAction” también necesita ser declarado en este fichero. Le pondremos “pushButton“, aunque podéis llamarlo como queráis. Vamos a ver cómo quedaría en la aplicación que estamos desarrollando.

Abrimos el fichero “MainViewController.m” para editarlo. En él programaremos los getters y setters del “@property” utilizado para el “IBOutlet” y programaremos el “IBAction“. Para hacer los getter y setters del “@property” simplemente tenemos que utilizar “@synthesize nombreDeLaProperty“.

En el mismo fichero, “MainViewController.m” programaremos el “IBAction” que se ejecutará cuando el “UIButton” lance el evento que nosotros le digamos. En este ejercicios queremos que se modifique el texto del “Label“.

Si nos fijamos en el código, los string tienen un formato distinto al que se suele ver en otros lenguajes de programación como C++, @”texto”. La propiedad del “UILabel“, tag es un entero que con el que podemos identificar objetos visuales. En este caso lo utilizamos para saber el estado del “UILabel“.

La parte de programación de esta aplicación ya está terminada. Como podéis observar no ha habido que hacer grandes trozos de código. Tampoco es que haga demasiado la aplicación pero os podéis hacer una idea de que en este lenguaje de programación, junto con Xcode, facilitan mucho la labor del programador. El concepto puede chocar un poco a gente que esté habituada a programar para .Net u otras plataformas de desarrollo, pero en cuanto te acostumbras a las herramientas es realmente intuitivo hacer las cosas.

Ahora toca hacer una parte muy importante, muy fácil y muy rara, enlazar el “IBOutlet” al “Label” de la vista y el “IBAction” al “Round Rect Button“.

Empezamos con el “IBOutlet“. Mantenemos pulsado la tecla “Crtl” del teclado, pinchamos con el botón derecho del ratón en el “File’s Owner” que podemos encontrar en el “Placeholders” y arrastramos hasta el “UILabel“, la linea azul que se despliega. Seleccionamos “displayLabel“, que es el “IBOutlet” que hemos creado anteriormente.

En la captura que mostramos no aparece la linea azul que une “File’s Owner” con el “UILabel“.

Por último, enlazamos el “Round Rect Button” con “File’s Owner“, haciendo la combinación de tecla y ratón que hemos hecho anteriormente, y seleccionamos “pushButton“. Haciéndolo de este modo, se enlazará con el evento por defecto del componente. En el caso del “Round Rect Button“el evento por defecto es “Touch Up Inside“.

Investigad sobre los posibles eventos y probadlos. Podéis ver la lista de eventos disponibles pulsando sobre el objeto con el botón derecho del ratón.

Sólo queda ver que no hay ningún error, probar la aplicación y ver que funciona correctamente. Pulsamos el botón “Run” y se abrirá el “Simulador iOS“.

Vemos que arranca la aplicación en “MainViewController” como hemos dicho al principio.

Comprobamos que el botón “Pulsar” modifica el texto correctamente.

La aplicación está completamente termina y funcionando correctamente. Con esto hemos terminado la clase de hoy.

A partir de ahora, os vamos a proponer un ejercicio al final de cada clase. El ejercicio guardará relación con la clase explicada y también requerirá de conocimientos explicados en anteriores clases del curso. Las clases se publicarán los lunes y la explicación/solución de los ejercicios propuestos se publicarán los viernes.

El ejercicio propuesto de hoy es una aplicación con dos botones(“Round Rect Button“) y una etiqueta(“Label“). Uno de los botones incrementará un contador que mostraremos en la etiqueta y el otro botón se encargará de poner el contador a cero. Os ponemos una captura de pantalla de cómo sería la aplicación.

Para hacer un poco más fácil la realización del ejercicio, vamos a explicar cómo realizar un contador y os diremos qué método utilizar para mostrar el formato deseado en una etiqueta.

Para realizar un contador hay que crear una variable de tipo int en la “@interface” del “UIViewController“. Sé que puede, al principio, resultar saber cómo hacerlo, pero si buscáis ayuda por internet no tendréis ningún problema en dar con la solución.

El método que hay que utilizar para poder mostrar texto con el formato requerido es “stringWithFormat” de la clase “NSString“. Buscad información de cómo utilizar correctamente el método.

Este viernes, día 30 de marzo, publicaremos la explicación de cómo realizar el ejercicio propuesto y colgaremos el proyecto para que podáis ver el código con más detalle.

Ya está disponible la solución al ejercicio de esta clase: Solución.

Siguiente clase: Clase 2, transición con pushViewController

Leer Mas

23

Mar

Curso de Programación iOS. Clase 0: introducción a Xcode.

Mario Sevilla,

23 de Marzo de 2012 a las 20:45

Curso de Programación iOS. Clase 0: introducción a Xcode.

Bienvenidos al Curso de Programación iOS de iPhone4Spain. Durante las próximas semanas vamos a publicar una serie de clases en las que os vamos a mostrar cómo programar aplicaciones en el sistema operativo iOS, utilizado en los dispositivos móviles de Apple (iPhone, iPad y iPod Touch).

El curso constará de 8 clases y está orientado a gente que quiere iniciarse en la programación de aplicaciones iOS y que tiene ciertos conocimientos de programación. En este curso se podrá programar una aplicación desde la primera clase.La herramienta que vamos a utilizar para el desarrollo de aplicaciones iOS es Xcode y el lenguaje de programación es Objective-C. Sólo podemos utilizar Xcode en un Macintosh. La versión que vamos a utilizar en el curso es la 4.3.2 y para esta versión necesitamos OS X 10.7 Lion. Mac OS X sólo se puede instalar en ordenadores Macintosh.

Xcode ha evolucionado de forma muy notable en los últimos meses. Desde la versión 4 de Xcode, Interface Builder se ha integrado dentro del mismo Xcode haciendo que la programación sea más intuitiva y cómoda.

No sólo ha evolucionado en la parte visual en las últimas versiones de Xcode, sino que la programación también ha sufrido cambios. Uno de los más importantes ha sido la entrada del Grand Central Dispatch. Grand Central Dispatch es una tecnología, desarrollada por Apple, que gestiona los hilos de ejecución de las aplicaciones de forma totalmente transparente tanto para los usuarios como para los programadores. De esta manera la ejecución de la aplicación está optimizada.

Vamos a pasar ya a la acción. Para empezar, tenemos que descargar e instalar la herramienta Xcode que podéis encontrar en el enlace. Los pasos de la instalación son muy sencillos, simplemente ejecutamos el archivo descargado y arrastramos la aplicación en la carpeta Aplicaciones de nuestro Mac.

Una vez instalado Xcode, abrimos el programa y creamos un proyecto nuevo en Xcode. Para ello, accedemos a File -> New ->New Project.

Seleccionamos “Empty Application“, así crearemos un proyecto vacío. De esta manera no tenemos nada predefinido, aunque veremos todas las opciones de las que disponemos.

Nombramos el proyecto y seguimos al siguiente paso, en el que seleccionaremos el fichero donde queremos guardar el proyecto.

Una vez hecho el paso anterior, Xcode nos mostrará la pantalla con el resumen de la configuración de nuestra aplicación. En esta pantalla podemos, entre otras cosas, decir con qué orientación queremos ejecutar nuestra aplicación.

Ahora añadimos una clase a nuestra aplicación. Necesitamos que la clase tenga una interfaz.

Seleccionamos una clase de Objective-C.

A continuación, le damos un nombre a la clase y, como lo que necesitamos es una clase que sea una pantalla en la que podamos agregar controles, en “Subclass of” seleccionamos “UIViewController“. Además, marcamos la opción “With XIB for user interface” para que también se genere un fichero .xib que representará la vista de la interfaz. Por último seleccionaremos, en el paso siguiente, el destino de dicha clase. Evidentemente, tendrá que ser ubicado en el fichero del proyecto.

Agrupamos la clase en una carpeta para tener el proyecto más organizado.

Todos los pasos anteriores son los que vamos a seguir siempre a la hora de hacer cualquier proyecto.

Para iniciar la ejecución de la aplicación en la escena que hemos creado junto la clase, tenemos que editar el fichero “AppDelegate.m“, escribiendo lo que podemos ver en la siguiente imagen.

Lo primero que tenemos que hacer es importar la clase “MainViewController.h“. Una vez importada, creamos un objeto de la clase y se lo asignamos a la propidad “rootViewController” de “window“.

Seleccionamos el fichero “MainViewController.xib” y añadimos un “Label”. Después, hacemos doble click en él y escribimos “Hola Mundo”.

Por último, vamos a ejecutar la aplicación. Pulsamos el botón “Run” y vemos como arranca el “Simulador iOS”. Instantes después sale nuestra aplicación en la que podemos ver el “Label” con el texto introducido.

En la “Clase 0” no vamos a publicar un ejercicio debido a que es una pequeña explicación del entorno en el que vamos a trabajar y son cosas que vamos a repetir en las próximas sesiones del curso.

Espero que podáis seguir el curso sin ningún problema y que también os sea de gran ayuda todas las explicaciones que vamos a dar.

Siguiente, Clase 1: cómo capturar eventos generados por el usuario.

Agradecemos a Mio Research Labs por su colaboración activa en el curso.

Leer Mas

25

Feb

Apple establece un nuevo record de ingresos

Mario Sevilla,

25 de Febrero de 2012 a las 12:42

Apple establece un nuevo record de ingresos

La compañía de Cupertino establece un nuevo record de ingresos trimestrales y ganancias en el año 2012. Supera los $46 mil millones en total y más de $13 mil millones en ganancias equivalentes a aproximadamente la mitad de sus beneficios anuales. Apple prácticamente dobla los ingresos obtenidos el año anterior a estas alturas, $26 mil millones en total y $6 millones en ganancias.

También ha publicado que, Apple, ha[...] vendido 15.4 millones de iPad(+38% respecto a 2011), 15.4 millones de iPod(+133% respecto a 2011), 5.2 millones de Macintosh(+6% respecto a 2011) y 37 millones de iPhone(+117% respecto a 2011).

Sin duda alguna, los números hablan solos y se ve que la compañía está haciendo, de manera brillante su trabajo.

Este año va a ser uno de los más importantes para Apple con la salida al mercado del nuevo iPad, el rumor cada vez más extendido de la iTV y el cambio de diseño que van a sufrir todos los productos que Apple comercializa.

Leer Mas

7

Feb

Ya tenemos ganadores de iSorteo

Mario Sevilla,

7 de Febrero de 2012 a las 11:09

Ya tenemos ganadores de iSorteo

El primer iSorteo realizado durante el día de ayer, ya tiene ganadores. Hay que dar las gracias a todos nuestros lectores por la grandísima participación que ha tenido iSorteo. Debido al gran éxito cosechado, vamos a seguir con esta iniciativa.

Próximamente, os avisaremos con más ediciones de iSorteo. Vamos a contar con más códigos para diferentes aplicaciones.

Esperemos que este sea el inicio de[...] un referente de nuestro blog y, vosotros los lectores, os sintáis premiados por vuestra fidelidad.

Sin más dilación, vamos a nombrar a los afortunados que han ganado los código del juego “The Passenger“.

- Diego Alatriste @BinomioKarmesi

- creativesut @creativesut

- Paloma Díez @dmpaloma

Enhorabuena a los premiados y, a los no premiados, suerte para los próximos sorteos!!!

Leer Mas

Página 1 de 3123

iPhone4Spain en Google+

Añádenos a tus círculos

Publicidad

Blogs de interés en español

Interesting around the world