Building a COCOA application: The Basics

In this tutorial we are going to learn building a basic application in cocoa. Before building the application I assume that the reader is familiar with the following:

Prerequisites

• Familiarity with XCode.
• Basic knowledge of Objective-C (Data Types, messages, properties etc..)
• Introductory knowledge of cocoa ( XIB/NIB Files, Outlets, Actions etc.. )
• Knowledge of MVC (Mode-View-Controller) architecture ( You can get familiar with MVC here )

Setting Up The Development Environment

Here is what we are going to use for this tutorial:

• Operating System:  Mac OS X ( Lion - Version 10.7.3 )
• XCode: XCode 4.2
• GCC: GCC 4.2

Lets Begin

Before starting with the development lets see what are we going to build today and the major steps that we are going to perform during the whole development process. Below is the goal we want to achieve today.

We would be creating and application "USD Converter". The user will provide the exchange rate for USD and the number or dollars to convert. As the user press "Convert" button, the application would multiply the exchange rate with number of dollars to provide the amount in other currency in the third text box.

The major steps we are going to follow are:

1. Create the View for the application.
2. Implement the Model (business logic) for our application.
3. Create a Controller class.
4. Connect Controller and View.

Create View for the Application

So lets begin by creating a new XCode project as shown below:

We will be selecting to create a Cocoa Application. Once we have created the project we will have to open the Xib file.

Now Xib file will be containing the view of our application. Below is the step by step procedure to create the View for our application:

Steps:

1. Open the xib file using Xcode 4.2
   
2. Click on the "Window" object so as to display the window as it would look in our application.
       
3. Drag a new "Label" object from the object library and place it at appropriate position in the window.
           
4. Drag a "Text Field" object from the object library and position it in front of the label applied in step 3.
       
5. As shown in steps 3 and 4,  add another pair of label and text field object as shown in image below
      
6. Add a "Horizontal Line" object so as to separate out the upper and lower region of the window (just for the sake of beautification)
    
7. Add another set of label and text field object below the horizontal line similar to step 5.
     
8. Add a "Push Button" object from object library to be used as the "Convert" button.
    
9. Set the initialFirstResponder outlet of the window. The initialFirstResponder outlet defines on which  control the cursor will be when the application loads initially.
   
10. Set "nextKeyView" outlet for each of the Text Field. The "nextKeyView" outlet defines on which control the cursor move next, when the user presses the <TAB> key.
    
11. Similarly set the nextKeyView of the 2nd text field to the 3rd text field.

AND.....

Now we have the view for our application.

Implementing the Model

Now we have the view but we still need to write the business logic behind our application. We will write this business logic in the model class. So now lets begin with the implementing the model class:

• Add new Objective-C class to your project and name it as modelClass. This will add two files, modelClass.h and  modelClass.m file.
• Now lets analyze what do we need in our modelClass: When the "Convert" button is pressed we would want our model class to get two float values corresponding to "Exchange Rate per USD" and "Dollars to convert"and return a float value containing the value corresponding to "Amount in other currency".
• So below is the code for modelClass.h file:
  
  #import <Foundation/Foundation.h>
  
  
  @interface modelClass : NSObject{
      float convertedAmount;  //variable to hold the converted amount
  }
  @property (readonly) float convertedAmount;
  //method to convert USD to other currency
  -(float)convertCurrency:(float)USD:(float)exchangeRate; 
  @end
  
  
  
  
• We have declared a method "convertCurrency" which would take the number of dollars to convert and the exchange rate as arguments and return the float value of the converted amount.
• Now lets see the implementation file modelClass.m : 
  
  #import "modelClass.h"
  
  
  @implementation modelClass
  @synthesize convertedAmount;
  -(float)convertCurrency:(float)USD:(float)exchangeRate{
      convertedAmount = USD * exchangeRate;
      return convertedAmount;
  }
  @end
  
  
• Above is the implementation of the convertCurrency method. As we can see, this method calculates the converted value by multiplying its arguments and sets the result in variable convertedAmount and returns the same.

So, now we have the view as well as the model for our application. Now all we need to complete our application is the controller, which we will come to know below.

Creating the Controller Class

Once we have the view and the model, they must be connected, and this connection is taken care by the controller class. We will add a new class to our project namely "controllerClass"whose code is shown below:

controllerClass.h

#import <Foundation/Foundation.h>

#import "modelClass.h"

@interface controllerClass : NSObject{

    modelClass *modelObject;

    IBOutlet NSTextField *exchangeRateField;

    IBOutlet NSTextField *dollarsToConvertField;

    IBOutlet NSTextField *finalAmountField;

}

-(id)init;

-(IBAction)convertAction:(id)sender;

@end

controllerClass.m

#import "controllerClass.h"

@implementation controllerClass

-(id)init{

    self = [super init];

    modelObject = [[modelClass alloc]init];

    return self;

}

-(IBAction)convertAction:(id)sender{

    float exchangeRate,dollars,finalAmount;

    exchangeRate = [exchangeRateField floatValue]; //Get value from text field

    dollars = [dollarsToConvertField floatValue];  //Get value from text field

    //call method from modelClass to calculate final amount

    finalAmount = [modelObject convertCurrency:dollars :exchangeRate]; 

    [finalAmountField setFloatValue:finalAmount];  //Set the final amount in text field

}

@end

• As we can see above in the controllerClass.h file, we will need to have 3 outlets -  each corresponding to a text field in view and we would need 1 action corresponding to the convert button.
• When the user presses the Convert button, it would call the -(IBAction)convertAction:(id)sender action, which will read values from text fields and call the method of "modelClass" so as to convert the value into the other currency. So, the controllerClass would need an object of modelClass (as can be seen in the code above).

Connect the View with the Controller

Now lets see how will we connect the view with the controller. To accomplish this follow the below mentioned steps:

1. Open the Xib file with Xcode 4.2.
2. Drag-Drop the "Object" from the object library to the left pane of the interface builder as shown in the image below.
   
   
3. Select the newly added object from the left pane and click on the  "Identity Inspector" on the right top and change the "Class" of the object to "controllerClass" as shown in image below. Now, the object you added in step 2 belongs to the class controllerClass.
   
   
4. Right Click on the object of controllerClass, it will show the outlets and actions you defined in controllerClass.
   
   
5. Connect the outlets to corresponding text fields and the action to the Convert button.

And now your application is all set to go. 

Build and Run it and have fun with your first cocoa creation.