Desarrollo de aplicaciones para dispositivos móviles:...

15
Desarrollo de aplicaciones para dispositivos móviles: Programación para iOS Luis Montesano

Transcript of Desarrollo de aplicaciones para dispositivos móviles:...

Page 1: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Desarrollo de aplicaciones para dispositivos móviles:

Programación para iOS

Luis Montesano ' Bob D/ Nvsjmmp

Page 2: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Índice de este fin de semana

•  Recopilación de lo visto sobre vistas/navegación

-  Repaso rápido Tab-bar, Navigation Controller, Table View, Personalizadas

-  Vistas “modales” y vistas “web” (navegador y mapas)

•  “Sensores” y hardware específico del iPhone: gestión de eventos

-  “predefinidos” del sistema

-  de localización y movimiento

Page 3: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Esquema general del “control” de la aplicación

Jerarquía de vistas ViewController

Page 4: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Esquema general

“CONTROLLER” (UIViewController y clases derivadas: TableView Controller,…)

• Controladores personalizados: “MyViewController”

•  “Contenedores” de controladores: Navigation (pilas); Tab Bar (conjuntos independientes de otros grupos de controladores);

• Controladores “modales”: rompen flujo de navegación de la aplicación temporalmente

Page 5: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Esquema general

“VIEW” (UIView y clases derivadas: UITableView, UIImageView, UIScrollView,…)

• Vistas Personalizadas

• UIWebView + UIMapView

Page 6: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Esquema general • Crear proyecto nuevo

-  Window-based: solo ventana “base”, ninguna “subview” añadida.

-  View-based, Navigation-based y Tab-based incluyen automáticamente una subview a la ventana principal inicializada de la manera correspondiente en cada caso

- (void)applicationDidFinishLaunching:(UIApplication *)application { !

//inicializar viewControllers ... !

ó [window addSubview:[(my)viewController view]]; !//inicializa por defecto el viewController con appNameViewController (UIView) en MainWindow.xib!

ó [window addSubview:[(my)navigationController view]]; !//inicializa por defecto con RootViewController (que es una tableView) en MainWindow.xib!

ó [window addSubview:[(my)tabBarController view]]; //LO MISMO QUE![window addSubview:(my)tabBarController.view]; !

[window makeKeyAndVisible]; !

Page 7: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Modal View Controller Cualquier controlador (o contenedor de controladores)

presentado “fuera” de orden (como “interrupción”)

MyModalViewController.m !

- (IBAction)devolverControl:(id)sender { ![self dismissModalViewControllerAnimated:YES]; } !

// “estilo” de presentación self.modalPresentationStyle = UIModalPresentationFullScreen; !// UIModalPresentationPageSheet UIModalPresentationFormSheet!

MyModalViewController *modalViewC =[[MyModalViewController alloc]initWithNibName:@"MyModalViewController" bundle:nil]; !

[self presentModalViewController:modalViewC animated:YES]; [modalViewC release];

Page 8: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Modal View Controller

DEMO

Page 9: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Vistas con contenido web

Page 10: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Mostrar contenido web Usamos UIWebView (subclase de UIView)

• Un navegador dentro de una “View”: no sólo HTML, también otros ficheros como PDF, imágenes,...

• Distintos contenidos:

cadena HTML local:

datos + MIME type:

URL remota:

• Permite: cargar y navegar, delegar parte de los controles, ejecutar JavaScript (5 sec. de ejecución y hasta 10 MB de memoria)

- (void)loadData:(NSData *)data MIMEType:(NSString *)MIMEType textEncodingName:(NSString *)encodingNamebaseURL:(NSURL *)baseURL;MIME: Multimedia Internet Mail Extensionmanera standard para denominar ciertos tipos de ficheros (PDF,...)NSURL: básicamente NSString, con un formato obligado, p.ej. “file://...” or “http://...”

- (void)loadHTMLString:(NSString *)string baseURL:(NSURL *)baseURL;

- (void)loadRequest:(NSURLRequest *)request;

Page 11: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

UIWebView

@property BOOL loading;

@property BOOL canGoBack;

@property BOOL canGoForward;

@property BOOL scalesPageToFit;

@property UIDataDetectorTypes dataDetectorTypes;

(UIDataDetectorTypePhoneNumber/Link/Address/CalendarEvent: abre automático lo que corresponda)

Capacidades de “browser”

- (void)reload;

- (void)stopLoading;

- (void)goBack;

- (void)goForward;

Mostrar contenido web

Page 12: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Usamos MKMapView (subclase de UIView)

• Muestra un mapa (googleMaps)

No hacer “subclass” the MKMapView!!

insertarlo tal cual y declarar quien es el delegado de esta “view”

Mostras mapas web: MAP KIT

Page 13: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Usamos MKMapView (subclase de UIView)

• Muestra un mapa (googleMaps)

• Con anotaciones, que se muestran con MKAnnotationView (e.g. MKPinAnnotationView, cualquier objeto puede ser una anotación siempre que implemente el protocolo MKAnnotation (tiene coordenadas y opcional título y subtítulo)

• Cada anotación: puede ventana/mensaje asociada al hacer click. Por defecto: título y subtítulo. Se pueden añadir elementos a los lados (aquí UIImageView a izq., UIButton a dch.)

Mostras mapas web: MAP KIT

Page 14: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

• MKMapView muy flexible:

-  configurar el tipo de mapa (@property MKMapType), mostrar posición de usuario (@property BOOL showsUserLocation),

-  controlar región de mapa mostrada (@property MKCoordinateRegion region),

-  pasar de latitud-longitud a posición de mapa, y viceversa ( -(CGPoint)convertCoordinate:(CLLocationCoordinate2D)coord

toPointToView:(UIView *)view;)

• MKAnnotationView: “view” que dibuja el “pin” de la anotación.

•  MKMapViewDelegate: manejar cambios en la región mostrada

•  MKReverseGeocoder(delegate): servicio (de google) para pasar de “geo”posición a “información semántica” (ciudad, calle,…)

Mostras mapas web: MAP KIT

Page 15: Desarrollo de aplicaciones para dispositivos móviles: …webdiis.unizar.es/~anacris/curso_ios/4.vistasModalesYweb.pdf · 2011-06-20 · Desarrollo de aplicaciones para dispositivos

Ejemplo Web&Maps

Mostras mapas web: MAP KIT