Construir una aplicación presentación de diapositivas de iOS para el iPad

Usar XML, XCode y las APIs de iOS

Aprenda a construir una aplicación de presentación de diapositivas de iOS a medida que avanza en el proceso paso a paso en este artículo. La aplicación de ejemplo se comunicará con un servidor web para recuperar una definición de presentación de diapositivas de XML y mostrar las imágenes contenidas en la presentación de diapositivas.

Jack D. Herrington, Senior Software Engineer, Leverage Software Inc.

Photo of Jack HerringtonA senior software engineer with more than 20 years of experience, Jack Herrington is the author of three books: Code Generation in Action, Podcasting Hacks, and PHP Hacks. He is also the author of more than 30 articles.



09-04-2012

Introducción

Acrónimos de uso frecuente

  • IDE: Entorno de Desarrollo Integrado
  • iOS: Sistema operativo móvil de Apple
  • OS X: Sistema operativo de Apple para computadores de Macintosh

No es un misterio el por qué escribir aplicaciones para un dispositivo de iOS, como el iPad o iPhone, es una actividad muy popular: los dispositivos son geniales y fáciles de usar. Con millones de usuarios, los dispositivos son muy lucrativos para el desarrollo de aplicaciones. Las personas disfrutan viendo sus fotografías en la hermosa visualización de los iPads y los iPhones.

En este artículo, aprenda a compilar una aplicación de presentación de diapositivas fotográficas de iOS desde cero. Pondrá algo de código XML y fotografías en el servidor, compilará la aplicación de iOS y un visor de imágenes, obtendrá el XML y hará la animación de la presentación de diapositivas.

Construyendo el fondo

El fondo de la aplicación de presentación de diapositivas de ejemplo es en realidad sólo un archivo XML que puede soltar en su servidor. El Listado 1 muestra el XML de ejemplo, con algunas imágenes de muestra.

Listado 1. photos.xml
<photos>
<photo url="http://localhost/photos/CRW_0675.jpg" />
<photo url="http://localhost/photos/CRW_1488.jpg" />
<photo url="http://localhost/photos/CRW_3273.jpg" />
<photo url="http://localhost/photos/CRW_3296.jpg" />
<photo url="http://localhost/photos/CRW_3303.jpg" />
<photo url="http://localhost/photos/CRW_3359.jpg" />
<photo url="http://localhost/photos/CRW_3445.jpg" />
<photo url="http://localhost/photos/CRW_3752.jpg" />
<photo url="http://localhost/photos/CRW_3754.jpg" />
<photo url="http://localhost/photos/CRW_4525.jpg" />
<photo url="http://localhost/photos/CRW_4547.jpg" />
<photo url="http://localhost/photos/CRW_4700.jpg" />
<photo url="http://localhost/photos/CRW_4860.jpg" />
</photos>

El XML es notablemente simple. La etiqueta <photos> contiene múltiples etiquetas <photo>. Cada etiqueta <photo> tiene el URL de la imagen que desea visualizar. El URL necesita ser completamente calificado y absoluto; la aplicación de cliente se cargará directamente en el URL—no mediante algún tipo de navegador que maneje URLs relativos.

Para completar el fondo, modifique el XML para que incluya referencias a sus fotografías y suba ese XML a una ubicación conocida en su servidor. Si todo sale de acuerdo con lo planificado, debe poder navegar hacia el XML usando Safari (o cualquier navegador que usted elija) y ver algo como la Figura 1.

Figura 1. XML en el servidor
XML en el servidor

La Figura 1 muestra el XML del Listado 1 formateado como texto. El resultado será distinto de navegador a navegador, ya que esto es solo XML simple (y no hay un estándar entre los navegadores).

Para probar que los URLs sean correctos:

  1. Seleccione uno de los URLs.
  2. Cópielo y péguelo en el área de URL del navegador.
  3. Presione la tecla Return .

Debe ver algo similar a la Figura 2.

Figura 2. Una de las fotografías en el servidor
Una de las fotografías en el servidor

Una fotografía, ubicada en el servidor, es referenciada por uno de los URLs en el XML. Si no ve el XML, o no ve las fotografías, entonces necesita verificar su configuración del servidor web y sus URLs. Si no puede ver una fotografía en el navegador, entonces su nueva aplicación de iOS no puede verla tampoco.


Compilando la aplicación de presentación de diapositivas de cliente

Después de que el servidor es configurado y las fotografías son subidas, puede comenzar a compilar la aplicación de iOS. La primera etapa es instalar Apple Developer Tools (vea Recursos para obtener un enlace). Si usted es:

  • Pre-Lion, necesita descargar las herramientas de desarrollador de Apple Developer Site (vea Recursos para obtener un enlace).
  • Usuario de Lion, puede usar Mac App Store para descargar las herramientas (vea Recursos para obtener un enlace).

Después de que instale las herramientas de desarrollador, ejecute el entorno de XCode, que es el IDE de Apple para desarrollo de iOS y Mac OS X. En el entorno de XCode, seleccione la opción de menú New Project. Debe ver la primera página del asistente de aplicación que usará para compilar aplicaciones de iOS o Mac OS X, como en la Figura 3.

Figura 3. Asistente de aplicación
Asistente de aplicación

Puede elegir de entre varias plantillas de aplicación distintas. Para este ejemplo, seleccione View-based Application y haga clic en Next. Debe ver la página final del asistente, como en la Figura 4.

Figura 4. Opciones de proyecto
Opciones de proyecto

En la segunda página del asistente, nombre su aplicación y seleccione la familia de dispositivos predeterminada (iPad o iPhone). El Nombre de Producto de la aplicación de ejemplo es slideshow. El valor en el campo Company Identifier indica que la aplicación se encuentra en namespace com.jherrington . (Por supuesto, puede elegir el nombre e identificador de compañía que usted desee.) Elija iPad para Device Family y haga clic en Next.

El proyecto se ha creado. En este punto siempre es mejor seleccionar el botón grande Play en la parte superior izquierda de la interfaz para ejecutar su aplicación por primera vez. Esta etapa compila todo y presenta el emulador de iPad.


Añadiendo la vista de imagen

La siguiente etapa es añadir la vista de imagen para mostrar las imágenes. La infraestructura de iOS viene con un conjunto enriquecido de controles incorporados que puede usar para compilar su aplicación. Para el ejemplo, usará el control UIImageView. Con UIImageView puede visualizar imágenes que son compiladas en la aplicación almacenadas localmente en el dispositivo o, como en el ejemplo, descargadas de un website.

Para añadir UIImageView, abra el archivo slideshowControllerView.XIB, que es el archivo de definición de la interfaz de usuario para slideshowControllerView. Con el XIB abierto, vaya a la paleta de objetos y seleccione Image View, como en la Figura 5.

Figura 5. Añadir un objeto UIImageView al controlador de vista XIB
Añadir un objeto UIImageView al controlador de vista XIB

Con Image View seleccionado, arrástrelo y suéltelo en slideshowControllerView. Normalmente el IDE escala automáticamente el control para ajustarse al espacio disponible. Si no lo hace, simplemente arrastre el control para ajustar su tamaño hasta que llene toda el área de visualización.

Después de que el control esté en la vista, establezca algunos de los parámetros para obtener la sensación óptima para la aplicación. La Figura 6 muestra los valores en la pantalla de atributos para el control Image View.

Figura 6. Configurar UIImageView
Configurar UIImageView

Las dos modificaciones que necesita hacer son en Mode y en Background. Establezca Mode como Aspect Fit de forma que la imagen sea escalada pero conserve la relación del aspecto original. Si no usa Aspect Fit, sus imágenes se estirarán y escalarán para coincidir con el área de visualización de la vista de imagen—y eso puede llegar a verse un poco extraño.

Ya que la imagen no siempre se ajusta al área disponible, también necesita establecer el atributo Background en Dark Text Color o usar el selector de color para seleccionar un negro profundo. De forma predeterminada, este valor es el blanco. La mayoría de las fotografías no se ven bien cuando están delimitadas en un blanco brillante.

Salve el archivo XIB y muévase hacia el archivo SlideshowViewController.h. Haga la pequeña modificación en el Listado 2.

Listado 2. SlideshowViewController.h
#import <UIKit/UIKit.h>

@interface slideshowViewController : UIViewController {
    IBOutlet UIImageView *imgView;
}

@end

Necesita añadir una Toma de Alimentación a slideshowViewController que permita que el control definido en el XIB se conecte a la clase del controlador de vista.

Después de que se añade la toma de alimentación, regrese al archivo XIB, seleccione UIImageView y use el inspector de conexiones para enganchar el objeto UIImageView a la variable imgView en la clase slideshowViewController .

Después de que se hace esa conexión, haga las modificaciones de código a la misma clase del controlador de vista de la presentación de diapositivas para cargar una imagen. El Listado 3 muestra la primera versión completa de la clase.

Listado 3. SlideshowViewController.m
#import "slideshowViewController.h"

@implementation slideshowViewController

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];

    NSURL *imageURL = [NSURL URLWithString:@"http://localhost/photos/CRW_0675.jpg"];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    UIImage *image = [UIImage imageWithData:imageData];
    [imgView setImage:image];
}

- (void)viewDidUnload
{
    [super viewDidUnload];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:
   (UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}

@end

El trabajo serio en la clase slideshowViewController es realizado en el método viewDidLoad , el cual ahora:

  • Carga los datos desde un URL.
  • Convierte eso en una imagen.
  • Usa el método setImage en la vista de imagen para mostrar la imagen.

En este punto, debe ejecutar la aplicación para probar si una imagen aparece. Debe ver algo similar a la Figura 7, la cual muestra una imagen mostrada en el emulador de iPad.

Figura 7. Primera imagen del servidor
Primera imagen del servidor

Si no ve la imagen, probablemente el problema esté sea con la llamada del método setImage para imgView. Verifique que el objeto UIImageView esté conectado apropiadamente a la variable imgView . Si la aplicación falla ante esto, tal vez no tenga el URL correcto o algo no esté correcto en el servidor.


Analizando el XML

Ahora que tiene una forma de mostrar las imágenes en un iPad, la siguiente etapa es cargar el XML para obtener una lista de todas las imágenes para mostrar. La infraestructura de iOS tiene un analizador de XML incorporado, así que simplemente necesita crear el objeto analizador y escuchar las devoluciones de llamada para las diversas etiquetas.

Extienda la misma clase con la interfaz de NSXMLParserDelegate , la cual le dice a la infraestructura de iOS que esta clase es capaz de recibir devoluciones de llamada desde el analizador de XML. También necesita añadir una matriz llamada photos que contiene la lista de URLs que son extraídos del XML. El Listado 4 muestra las actualizaciones.

Listado 4. SlideshowViewController.h con fotografías
#import <UIKit/UIKit.h>

@interface slideshowViewController : UIViewController<NSXMLParserDelegate> {
    IBOutlet UIImageView *imgView;
    NSMutableArray *photos;
}

@end

A medida que escribe más aplicaciones de iOS, encontrará que usa más y más delegados para conectarse a diversas APIs. Existen devoluciones de llamadas de datos para tablas, elementos de IU, devoluciones de llamada de GPS y más. Incluso puede crear sus propias interfaces personalizadas para sus propias bibliotecas.

Para usar el analizador de XML, extienda la clase del controlador de vista, como en el Listado 5.

Listado 5. SlideshowViewController.m con fotografías
- (void)viewDidLoad
{
    [super viewDidLoad];

    photos = [[NSMutableArray alloc] init];

    NSXMLParser *photoParser = [[[NSXMLParser alloc] 
       initWithContentsOfURL:
       [NSURL URLWithString:@"http://localhost/photos/index.xml"]] autorelease];
    [photoParser setDelegate:self];
    [photoParser parse];

    NSURL *imageURL = [NSURL URLWithString:[photos objectAtIndex:0]];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    UIImage *image = [UIImage imageWithData:imageData];
    [imgView setImage:image];
}

- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName 
   namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName 
   attributes:(NSDictionary *)attributeDict { 
    if ( [elementName isEqualToString:@"photo"]) {
        [photos addObject:[attributeDict objectForKey:@"url"]];
    }
}

La clase ahora crea un analizador en el método viewDidLoad y lo hace solicitar y analizar el XML desde el servidor. También establece el delegado para el analizador hacia él mismo, de forma que obtenga devoluciones de llamada.

En el ejemplo, desea escuchar la devolución de llamada de didStartElement que es desencadenada siempre que se encuentra una etiqueta. La función didStartElement después observa el nombre de la etiqueta para ver si es una etiqueta de fotografía. Si es así, didStartElement añade el valor del atributo url a la matriz de fotografías.

Después de que la matriz de fotografía está completa, el método viewDidLoad continúa y establece la imagen de la primera imagen en la matriz.

Ejecute la aplicación para probar su progreso. Debe ver que la primera imagen especificada en el XML aparece en el emulador. Si no ve la primera imagen, tal vez tenga un problema con el XML en el servidor. Establezca un punto de interrupción en el método didStartElement para ver si está siendo llamado. Si no es así, entonces no está recibiendo ningún XML válido de su servidor.


Animando la presentación de diapositivas

La etapa final es usar la matriz de fotografías para animar la presentación de diapositivas. Necesitará dos cosas:

  • Un temporizador
  • Una variable para alojar su ubicación actual en la presentación de diapositivas

Añada estos dos elementos a la definición de clase, como en el Listado 6.

Listado 6. SlideshowViewController.h completado
#import <UIKit/UIKit.h>

@interface slideshowViewController : UIViewController<NSXMLParserDelegate> {
    IBOutlet UIImageView *imgView;
    NSMutableArray *photos;
    NSTimer *timer;
    int currentImage;
}

@end

El temporizador es un objeto que activará eventos con un intervalo que usted especifique. La currentImage es simplemente un índice en la matriz de fotografías que usará para iterar a través de todas las imágenes.

El Listado 7 muestra la versión final del código de aplicación de la presentación de diapositivas.

Listado 7. SlideshowViewController.m completado
#import "slideshowViewController.h"

@implementation slideshowViewController

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];

    photos = [[NSMutableArray alloc] init];

    NSXMLParser *photoParser = [[[NSXMLParser alloc] 
      initWithContentsOfURL:[NSURL URLWithString:
      @"http://localhost/photos/index.xml"]] autorelease];
    [photoParser setDelegate:self];
    [photoParser parse];
    
    currentImage = 0;

    NSURL *imageURL = [NSURL URLWithString:[photos objectAtIndex:0]];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    [imgView setImage:[UIImage imageWithData:imageData]];

    timer = [NSTimer scheduledTimerWithTimeInterval: 5.0
                                             target: self
                                           selector: @selector(handleTimer:)
                                           userInfo: nil
                                            repeats: YES];
}

- (void) handleTimer: (NSTimer *) timer {
    currentImage++;
    if ( currentImage >= photos.count )
        currentImage = 0;

    NSURL *imageURL = [NSURL URLWithString:[photos objectAtIndex:currentImage]];
    NSData *imageData = [NSData dataWithContentsOfURL:imageURL];
    [imgView setImage:[UIImage imageWithData:imageData]];
}

- (void)parser:(NSXMLParser *)parser didStartElement:(NSString *)elementName 
   namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName 
   attributes:(NSDictionary *)attributeDict { 
    if ( [elementName isEqualToString:@"photo"]) {
        [photos addObject:[attributeDict objectForKey:@"url"]];
    }
}

- (void)viewDidUnload
{
    [super viewDidUnload];
}

- (BOOL)shouldAutorotateToInterfaceOrientation:
     (UIInterfaceOrientation)interfaceOrientation
{
    return YES;
}

@end

Los dos nuevos elementos en el Listado 7 son la creación del temporizador en el método viewDidLoad y la adición del método handleTimer , que es llamado cuando el temporizador se activa. El método handleTimer simplemente incrementa currentImage, después le da la vuelta al índice si llega al final de la matriz. También usa la lógica estándar de captación de imágenes para obtener la imagen en el índice dado y mostrarla.

Los temporizadores tienen dos modos: pueden activarse una vez o pueden activarse continuamente. En el método viewDidLoad , el ejemplo especifica YES para las repeticiones, de forma que el método handleTimer es llamado una y otra vez durante toda la vida de la aplicación.


Conclusión

En este artículo, creó una aplicación básica de iOS. Ahora puede llevar la aplicación hacia varias direcciones distintas. La infraestructura de iOS CoreGraphics proporciona un conjunto enriquecido de transiciones que puede usar para animar el cambio entre las imágenes. Puede usar PHP en el fondo para generar el XML dinámicamente. O puede incluso usar la API de CoreAudio para poner algo de música durante toda la presentación de diapositivas.

Recursos

Aprender

Obtener los productos y tecnologías

Comentar

Comentarios

developerWorks: Ingrese

Los campos obligatorios están marcados con un asterisco (*).


¿Necesita un IBM ID?
¿Olvidó su IBM ID?


¿Olvidó su Password?
Cambie su Password

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


La primera vez que inicie sesión en developerWorks, se creará un perfil para usted. La información en su propio perfil (nombre, país/región y nombre de la empresa) se muestra al público y acompañará a cualquier contenido que publique, a menos que opte por la opción de ocultar el nombre de su empresa. Puede actualizar su cuenta de IBM en cualquier momento.

Toda la información enviada es segura.

Elija su nombre para mostrar



La primera vez que inicia sesión en developerWorks se crea un perfil para usted, teniendo que elegir un nombre para mostrar en el mismo. Este nombre acompañará el contenido que usted publique en developerWorks.

Por favor elija un nombre de 3 - 31 caracteres. Su nombre de usuario debe ser único en la comunidad developerWorks y debe ser distinto a su dirección de email por motivos de privacidad.

Los campos obligatorios están marcados con un asterisco (*).

(Por favor elija un nombre de 3 - 31 caracteres.)

Al hacer clic en Enviar, usted está de acuerdo con los términos y condiciones de developerWorks.

 


Toda la información enviada es segura.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=90
Zone=Linux
ArticleID=808663
ArticleTitle=Construir una aplicación presentación de diapositivas de iOS para el iPad
publish-date=04092012