Programando Apps para iOS

Practica 1 (app para Ipad:Programar para dispositivos iOS)
Ing. Honoria Reyes Macedo

Requisitos

Disco de Arranque: Macintosh

Sistema Operativo: OS X

ID de Programación: XCode

Lenguaje de Programación: Objective-C

 (Objective-C es lenguaje C puro)

Introduccion:

Las clases en Objective-C se dividen en dos archivos (archivo.h para el encabezado y archivo.m  para la implementación)

1.- Crear el proyecto

1.1 Abrir la Mac App Store desde el Dock(Barra inferior de la Mac)

1.2 Seleccionar el icono de Xcode Si todavia no se ha descargado seleccionar “obtener”, si no tiene la leyenda “obtener” esta listo para abrir

1.3 Crear un proyecto Nuevo xcode  + Single View Applicaction

1.4 Poner características al proyecto

nombre: Pract1_NombreEquipo,

lenguaje:  Objective-C

Dispositivo: iPad

Guardar en la carpeta deseada

2.- Agregar Pantalla principal

         a) Seleccionar Main.storyboard (Se puede trabajar en el archivo.xib)

Nota: Si no existe en la barra lateral izquierda, crearla:

a) Agregar un guión grafico (Main.storyboard)

                          File + new + File --> En iOS + User interface --> Seleccionar Storyboard

                          b) Ponerla como principal:

- Seleccionar en la barra lateral izquierda el nombre del proyecto

           - Posicionarse en el menu de la parte central + info

- Escribir en Main storyboard file base name:  Main

                         

3.- Agregar objetos a la pantalla principal Main.storyboard

          Desde la barra lateral derecha en  Show de object library

a) Agregar Label, --> Arrastrar el objeto a la parte central de storyboard (Poner el Nombre del Sistema y el Equipo  que lo crea)

b) Arrastrar 2 objetos Button

c) Arrastrar textfield

  -Desde la barra lateral derecha + Show the Attributes inspector

En placeholder=Introduce tu texto aqui  

4.- Personalizar los objetos creados (color, tamaño)

- Desde la barra lateral derecha en Show the Attributes inspector

5.- Declarar los objetos y las acciones en el encabezado:

En ViewController.h declarar las acciones:

en interface

{   

UIlabel *label;

UITextField *textField;

}

@property (nonatomic, strong) IBOutput UIlabel *label;;

@property (nonatomic, strong) IBOutput  UITextField *textField;

-(IBAction)cambiarTexto:(id)sender;

-(IBAction)ponerNuestroTexto:(id)sender;

6.- Poner el contenido de las acciones en la implementacion

         En ViewController.m

         a) Primero sintetizar los objetos

                 @synthesize  label, textField;

         b) En viewDidLoad

                  self.label.text = @"Estoy probando Hola Mundo";

         c) antes de viewDidLoad implementar las acciones:

-(IBAction)cambiarTexto:(id)sender{

self.label.text = @"Cambio valor con el boton";

}

-(IBAction)ponerNuestroTexto:(id)sender{

self.label.text = self.textField.text;

[self.textField resignFirstResponder];

}

7.- Relacionar las acciones hacia la vista main

         a) Activar el icono File´s Owner en la pantalla central

         b) Desde la barra lateral derecha seleccionar el menu Connections

Arrastrar desde outlets(parte derecha) --> label hacia la etiqueta de main.Storyboard(label)

Arrastrar desde outlets(parte derecha) --> textField  hacia la etiqueta de main.Storyboard(textField)

Arrastrar desde Received Actions --> cambiarTexto( seleccionando touch up inside ) hacia el boton

Arrastrar desde Received Actions --> ponerNuestroTexto ( seleccionando touch up inside ) hacia el Segundo botón

8.- Construir y correr la aplicacion

         Desde el menu

                 Product + Build --> Para construir

                 Product + Run --> Para correr

---------- ----- Continuando con la Práctica ---- ---- -----------

9.- Agregar objetos a la pantalla principal

          Desde la barra lateral derecha en parte inferior desde Show de object library

- Agregar 4 botones: Arrastrar “Button”

10.- Agregar pantalla nueva

a) En la parte blanca del lienzo

         Crear una vista nueva

         - En nuestra carpeta del proyect --> seleccionar con mouse derecho (new File)

         - Escoger en iOS + Cocoa Touch + UIViewController subclass

 class: Vista2ViewCont

 Subclass of: UIViewController

                 Dejar seleccionado: With XIB for user interface

11.- Declarar las acciones en el encabezado:

En ViewController.h declarar las acciones:

                 -(IBAction)transicion1:(id)sender;

                 -(IBAction)transicion2:(id)sender;

                 -(IBAction)transicion3:(id)sender;

                 -(IBAction)transicion4:(id)sender;

12.- Poner el contenido de las acciones en la implementacion

        a) En ViewController.m se debe importar la vista

                 #import “Vista2ViewCont.h”

            En ViewController.m

                 Después de implementation poner las acciones que nos lleven a la vista creada:

                

                 -(IBAction)transicion1:(id)sender{

                 Vista2ViewCont *vista2 = [[Vista2ViewCont alloc] initWithNibName:nil bundle:nil];

                          vista2.modalTransitionStyle= UIModalTransitionStyleCoverVertical;

                          [self presentModalViewController:vista2 animated:YES];

                 }

                 -(IBAction)transicion2:(id)sender{

                 Vista2ViewCont *vista2 = [[Vista2ViewCont alloc] initWithNibName:nil bundle:nil];

                          vista2.modalTransitionStyle= UIModalTransitionStyleCrossDissolve;

                          [self presentModalViewController:vista2 animated:YES];

                 }

                 -(IBAction)transicion3:(id)sender{

                 Vista2ViewCont *vista2 = [[Vista2ViewCont alloc] initWithNibName:nil bundle:nil];

                          vista2.modalTransitionStyle= UIModalTransitionStyleFlipHorizontal;

                          [self presentModalViewController:vista2 animated:YES];

                 }

                 -(IBAction)transicion4:(id)sender{

                 Vista2ViewCont *vista2 = [[Vista2ViewCont alloc] initWithNibName:nil bundle:nil];

                          vista2.modalTransitionStyle= UIModalTransitionStylePartialCurl;

                          [self presentModalViewController:vista2 animated:YES];

                 }

13.- Relacionar las acciones hacia la vista main

                         

                 a) Activar el icono File´s Owner en la pantalla central

                 b) Desde la barra lateral derecha seleccionar el menu Connections y en Received Actions

                                   - Arrastrar cada transición a cada botón  (seleccionando "touch up inside")

14.- Agregar la acción de regresar en la vista creada “Vista2ViewCont”

                 a) en la vista nueva Vista2ViewCont.h declarer el objeto entre las llaves de la interfaz

                          -(IBAction)regresar:(id)sender;

                 b) Implementar en Vista2ViewCont.m

                          #import “ViewController.h”

        

                          Después de la implementación agregar la acción:

                          -(IBAction)regresar:(id)sender{

                                   [self dismissModalViewControllerAnimated:YES];

                          }      

                 c) En Vista2ViewCont.xib o main

                          a) Agregar el objeto Button y ponerle “Regresar”

                          b) Activar File´s Owner en la pantalla central

                          c) Desde la parte lateral derecha seleccionar Connections + Received Actions

                                   - Arrastrar la transición al botón  (seleccionando touch up inside)

15.- Construir y correr la aplicacion

         Desde el menu

                 Product + Build --> Para construir

                 Product + Run --> Para correr