Edadmovil

Welcome to a new age!

Agenda

ANÁLISIS PREVIO

Queremos una agenda de contactos telefónicos como proyecto final personal de la asignatura. Para ello utilizaremos los conocimientos adquiridos a lo largo del curso y otras lecciones autodidacticas necesarias para llevar a cabo dicha tarea.

Usaremos una clase para definir el contacto, tres para las vistas y dos más para las celdas necesarias en el programa.

CLASES

  • Contacto. En ella están definidos los atributos nombre y número, y el método que los inicializa.
  • RootViewController. Hereda de UITableView. Es la clase que desarrolla la vista principal de la agenda; desde aquí veremos a todos nuestros contactos, cada no será una celda de la tabla. Será una tabla estilo plain.
  • FormularioViewController. Hereda de UIView. Se ejecuta cuando queremos añadir un contacto desde RootViewController. Nos muestra dos Text Field para rellenar los datos del contacto, definidos en la clase Contacto.
  • DetalleViewController. Hereda de UITableView. Una vez tenemos un contacto en el array datosContactos de RootViewController, podemos acceder a sus atributos en DetalleViewController. Será una tabla con dos secciones y una fila por sección, de estilo grouped.
  • CeldaPersonalizada. Hereda de UITableViewCell. Ejercen de las celdas pertenecientes a la tabla de RootViewController. Tiene una etiqueta donde veremos en nombre del contacto.
  • CeldaDel. Al igual que la anterior, hereda de UITableViewCell. Se trata de una celda que alojará el botón de borrado en DetalleViewController.

VISTAS

Nada más entrar a la aplicación, encontraremos la agenda vacía. Queremos que en esta vista sea donde después se muestren todos nuestros contactos por orden alfabético.

Cuando queramos añadir un contacto se debe abrir otra vista donde poder rellenar sus datos. Al añadir el contacto, volveremos a la primera vista.

Ya desde la vista principal, pulsando en un contacto se nos debe de abrir otra vista, donde podremos ver todos los detalles del contacto, además de poder borrarlo.

Vamos a ver cada una de ellas en detalle.

  • Vista RootViewController.Como se puede observar en la imagen de la derecha, la vista principal de la agenda aparece vacía nada más ejecutar el programa.Aparece un botón +, el cual al ser pulsado deberá llevarnos hasta la vista de FormularioViewController donde añadir contactos.A la izquierda vemos un objeto añadido. La celda pertenece a la clase CeldaPersonalizada. Tiene una UImageView, que contiene la imagen de la agenda; y una UILabel, que mostrará el nombre del contacto.

      

  • Vista FormularioViewController.Esta vista contiene dos campos Text Field y dos botones. El primer campo es para añadir el nombre, y el segundo para asignarle un número.
    Si pulsamos Cancel, volveremos a la vista principal, hayamos introducido datos o no. No se habrá añadido ningún contacto, obviamente.
    El otro botón, Save, guarda los datos del contacto y nos devuelve a la vista RootViewController, ya con el contacto añadido como vimos en la anterior imagen.En caso de que alguno de los dos campos esté vacío, al pulsar Save el programa nos mostrará una alerta y nos volverá a traer a FormularioViewController para que terminemos de añadir el contacto.

  

  • DetalleViewController.Una vez tenemos algún contacto añadido, se mostrarán organizados alfabéticamente en la vista principal. Si queremos ver el contacto con su número de teléfono hemos de pulsar encima de él. Así llegaremos a DetalleViewController.
    Como vemos a la derecha, en esta vista tenemos todos los detalles del contacto.
    La sección 2 de la tabla contiene una celda de la clase CeldaDel, y nos muestra el botón de borrado del contacto. Una vez éste sea pulsado, el contacto se eliminará de la agenda y seremos devueltos a la vista de RootViewController.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: