Capitulo 2 - Chapter 2 - TipCalculator

Hola amigos, aqui tenemos el segundo capitulo del Curso espero que lo disfruten .

Algo que les recomiendo es que escriban el codigo por ustedes mismos en vez de usar la funcion de copiar y pegar. Esto les ayudara a entender exactamente lo que estan haciendo si tiene una pregunta dejen su comentario por favor y tambien delen rate al video y comentarios

Gracias

Calculadora de Propinas ( Tip Calculator )

La Aplicación que vamos a construir continuación calcula y muestra la propina de que deja en un restaurante de acuerdo al monto total.

La aplicación calculara el 10%, 15% y 20%. El usuario también podrá especificar un porcentaje modificado al mover el Slider ( Resbalador).

La aplicación usa varias características de object-oriented Objective-C incluyendo declaración de clases conocidas como interfaces in Objetive-C.

Vas a aprender también palabras claves básicas de Objective-C y sintaxis al momento de que escribas el código y este responda cuando el programa interactúe al momento de usar el GUI.

Revisión de la Tecnología usada en esta aplicación

En este siguiente capitulo introduciré algunas capacidades de Objective-C incluyendo objetos(Objects), clases(Classes), interfaces (Interfaces) y herencias(inheritance ).

El código de Objective-C requiere varios tipos de datos ( Data Type), Operadores (Operators), control de declaraciones( Control Statements) y palabras claves (Keywords). Tu vas a declarar variables (Variables) que correspondan al componente GUI. Tu vas a declarar e implementar métodos, vas usar mensajes para invocar los métodos de un objeto.

Para armar el evento vamos a necesitar agarrar y arrastrar las habilidades de Interface Interface Builder a la conexión de cada componente GUI y el método debe responder a las acciones de los eventos.

Construyendo la Aplicación.

1. Abrir Xcode

2. Seleccionar Window-based Aplicacion temple

3. Ir a carpeta Resource y dar doble click en el file MainWindow.xib, esto abrirá el programa Interface Builder.

4. Ahora agarrar y arrastrar un Text Field de la ventana library hacia la ventana Window.

5. Selecciona tu Text Field y ve a la ventana Inspector.

6. En la propiedad del texto la dejamos en 0.00

7. Quita el Check (Palomilla) de la caja Clear When Editing Begins

8. Ahora localiza la propiedad Keyboard debajo de Text Input Traits, esta propiedad muestra el Number Pad ya que lo único que necesitamos son dígitos

9. Luego agarramos y arrastramos un Label de la ventana de Library en la ventana de la aplicación, le damos doble click al label para cambiar el texto y ponen Total Bill ( Cuenta Total )

10. Pueden ajustar el tamaño del label de acuerdo a su gusto y podrán notar que habrán líneas cortadas al momento de mover el label esto les indicara la posición que esta ocupando el Babel

11. Agarramos y arrastramos 3 labels mas debajo de el Text Field con los nombres de 10%, 15% y 20%.

12. Seleccionar el primer Text Field que crearon y presionar Command+ D, esto duplicara el Text Field, creen 6 y colóquenlas debajo de los Labels: 10%, 15% y 20% como muestra el video

13. Seleccionar los nuevos Text Fields ir a la ventana Inspector bajar hasta la propiedad Control y quitar el Check de la opción Enabled. Le daremos Atributo de Text 0.00

14. Duplicar el primer Label 2 veces y colocar cada uno a lado de las dos filas un Label con el nombre de Tip y el otro Total.

15. Agarrar y arrastra un nuevo Label debajo del tercer label como esta mostrado en el video, luego cambiamos el atributo del label a 15%.

16. Ahora crearemos un Slider ( Delizante ) con el cual el usuario tendra la capacidad de cambiar el porcentaje de Tip(Propinas) que se otorgara, agarramos y arrastramos desde la Library ( El Slider sera la barrita con el circulo al centro), este lo ubicamos al lado izquierdo del Label 15%.

17. Seleccionamos el Slider y vamos a la ventana del Inspector y donde dice Minimum a 0.00, Maximum a 0.30 e Initial a 0.15

18. Ahora que el Slider esta configurado agregamos un nuevo label a la derecha de el Slider con la Propiedad “Custom”.

19. Para Completar nuestra aplicación necesitamos agregar 2 Labels y Text Fields debajo del Slider, Primero el Label con el atributo de Tip, luego creamos un Text Field junto a el , ahora un nuevo Text Field, Un nuevo Label con el atributo de Total y un Nuevo Label.

Estos son los paso para crear la Interface de la Aplicación. La aflicción esta creada pero ahora tenemos que darle funcionabilidad.

Para esto necesitaremos escribir cierto código en Xcode, es preferible que el codigo lo escriban ustedes en vez de cortar y pegar ya que de esa forma se ira familiarizando con el.

Dandole Funcionalidad a la aplicacion

1. Ahora regresamos a Xcode y vamos a File, New File , Aquí Estara remarcado Cocoa Touch Class, junto a ese estara un File llamado Objective-C , ese va a ser el que vamos a escoger ese y nos aseguramos que dejajo de el este en la subclass este como NSObject.

2. Con esto se habran creado dos archivos en el Xcode/Resources los cuales tendran el nombre de Controller.h y Controller.m, pero los movemos a clases( CLasses)
3. Abrimos el archivo Controller.h y escribimos el codigo que se encuentra adjuntado en el blog.
4. Vamos a Interface Builder a la ventana Library y escogemos un objeto llamado Object. Este no es un Componente GUI por lo tanto no va a ir a la ventana de la aplicacion si no que va a ir a la ventana MainWindow.xib. ( Esta Mostrado en el video
5. Seleccionamos el nuevo objeto creado en la ventana y abrimos la ventana Inspector para cambiar la clase de NSObject a Controller.
6. Despues cambiamos a Connections Tab, aqui veran los Outels y las accion.
7. Van a conectar los Outlets con sus respectivos objeto como esta mostrado en el video
8. Selecionamos ahora el Text Field en la parte superior de la aplicacion y vamos a Atribute Window y damos click en el el Connection Tab, aqui vamos a la opcion de events( Eventos es lo que vamos a usar para decirle a la aplicacion que hacer cuando el usuario seleccione el Text Field) vas a seleccionar el evento Editing Changed y desde el circulo arrastramos hasta el MainWindow Object( Mostrado en el video) dice Controller en el MainWindow.xib
9. Ahora vamos a colocar el segundo pedazo de codigo en el archivo Controller.m en la carpeta Classesc de Xcode

Les voy a explicar que significa el paso 8 y nueve.

Lo que estos dos pasos hacen es que al momento de que el usuario seleciona el text field o el Slider un mensaje es enviado al Objeto Controller para que ejecuete el metodo CalculateTip:

Codigo de la clase Controller.h

// Fig. #.#: Controller.h

// Controller class for the Tip Calculator app.

// Methods defined in Controller.m.

#import

@interface Controller : NSObject

{

// outlets

IBOutlet UITextField *billField;

IBOutlet UITextField *tipFieldTen;

IBOutlet UITextField *tipFieldFifteen;

IBOutlet UITextField *tipFieldTwenty;

IBOutlet UITextField *tipFieldCustom;

IBOutlet UITextField *totalFieldTen;

IBOutlet UITextField *totalFieldFifteen;

IBOutlet UITextField *totalFieldTwenty;

IBOutlet UITextField *totalFieldCustom;

IBOutlet UILabel *customPercentLabel;

IBOutlet UISlider *customPercentSlider;

NSString *billTotal; // string for the "Bill Total" field

} // end instance variable declarations

- (IBAction)calculateTip:(id)sender; // calculates the tips

@end

Codigo de la clase Controller.m

// Controller.m

// Controller class for the tip calculator app.

#import "Controller.h"

@implementation Controller // begin implementation of Controller

// called after all the GUI elements have been loaded

- (void)awakeFromNib

{

[billField becomeFirstResponder]; // display keyboard for billField

} // end method awakeFromNib

// called when the user touches a key or button

- (IBAction)calculateTip:(id)sender

{

static BOOL toggle = YES; // was this method trigger by the user?

// the user touched the keypad or moved the Slider

if (toggle)

{

toggle = NO; // this method will next be called programmatically

// retrieve the string in billField

NSString *billFieldText = billField.text;

// convert billFieldText to a float

float newTotal = [billFieldText floatValue];

// retrieve the slider value (between 0 and 0.3)

float customTipPercent = customPercentSlider.value;

// determine if billField generated the event

if (sender == billField)

{

// delete key pressed

if (billFieldText.length < billTotal.length)

billTotal = [NSString stringWithFormat:@"%.02f",

newTotal / 10];

else // new digit entered

billTotal = [NSString stringWithFormat:@"%.02f",

newTotal * 10];

// update billField with the properly formatted number

billField.text = billTotal;

// update newTotal with the new value

newTotal = [billTotal floatValue];

// calculate the tips for 10, 15 and 20%

float tenTip = newTotal * 0.10;

float fifteenTip = newTotal * 0.15;

float twentyTip = newTotal * 0.20;

// set the values for the "Tip" fields

tipFieldTen.text = [NSString stringWithFormat:@"%.02f", tenTip];

tipFieldFifteen.text =

[NSString stringWithFormat:@"%.02f", fifteenTip];

tipFieldTwenty.text =

[NSString stringWithFormat:@"%.02f", twentyTip];

// set the values for the "Total" fields

totalFieldTen.text =

[NSString stringWithFormat:@"%.02f", newTotal + tenTip];

totalFieldFifteen.text =

[NSString stringWithFormat:@"%.02f", newTotal + fifteenTip];

totalFieldTwenty.text =

[NSString stringWithFormat:@"%.02f", newTotal + twentyTip];

} // end if

// determine if customPercentSlider generated the event

else if (sender == customPercentSlider)

{

// the "Custom" slider was moved

// round the value to a whole number

int percentage = (int)(customTipPercent * 100);

// update the label with the new percentage followed by %

customPercentLabel.text =

[NSString stringWithFormat:@"%i%%", percentage];

// convert percentage back to float and assign to Slider's value

float newSliderValue = ((float) percentage) / 100;

customPercentSlider.value = newSliderValue;

// slider Thumb moved; update customTipPercent

customTipPercent = newSliderValue;

} // end else

// calculate customTip

float customTip = customTipPercent * newTotal;

// update tipFieldCustom with the new custom tip value

tipFieldCustom.text = [NSString stringWithFormat:@"%.02f",

customTip];

// update totalFieldCustom

totalFieldCustom.text =

[NSString stringWithFormat:@"%.02f", customTip + newTotal];

} // end if

else // the method was called programmatically

{

toggle = YES; // the method will next be called by user interaction

}

} // end method calculateTip:

@end // Controller's implementation