Thursday, January 12, 2012

Learning Objective C - Part 2

Topics Covered

In this post, I will be making notes/pointers on following topics

  • How to add a UI element to Interface Builder.
  • How to declare controller variables of type IBOutlet, and IBAction
  • @property and @synthesize

 

Here is a link to first part of this post : Learning Objective C - Part 1

 

Once we create an iOS project in Xcode, we will be presented with couple of files, as shown in the following screen shot.

 

FileList

The files which end with ".storyboard" file names form the UI components of the application. (Atleast, that is my understanding as of now… will change this post if I find otherwise).  As the name indicates, the one with _iPhone will be the iPhone UI, and the one with _iPad will be the iPad UI. At this time, I think we will have to create separate UI for these different devices, but we can link these UI elements to the same code/objects that we create in our application. This gives us the flexibility of tailoring our UI to different device sizes, which will result in a better app experience for the end user.

It is now time to add several UI elements into the application. You can select UI elements from object library, and adjust their properties. Here is an example of an iPhone Screen.

NewImage

In the above example, I have added a text box, and a button. There is also a label, which is invisible here.

The text box, and the label forms the outlets here. We will handle the button through actions.

 

Declare Controller variable types for IBOutlet and IBAction

Because we are following MVC architecture, we will be going through the controller to perform something in the application from the UI layer (View). Inorder to achieve this, following steps have to be done

  • Declare appropriate variables in Controller object to hold reference of these UI elements
  • Create "Getters" and "Setters" for these variables in controller. This will allow the UI layer (View) to access these objects.
  • Link the actual UI Objects to these variables.

Below is the code which does all the above.

#import <UIKit/UIKit.h>

 

@interface BasicViewController : UIViewController

{

IBOutlet UITextField *txtName;

IBOutlet UILabel *lblMessage;

}

 

@property(nonatomic, retain) IBOutlet UITextField *txtName;

@property(nonatomic, retain) IBOutlet UILabel *lblMessage;

 

-(IBAction) doSomething;

-(IBAction)makeKeyboardGoAway;

 

@end

 

In the above code, we declare the text and label objects using IBOutlet. Remember that we have not linked them to the UI yet.

The @property declaration indicates to the compiler that the attributes txtName and lblMessage needs to be treated as properties, and we will need to generate "Getters" and "Setters" to access these. Later, we will use "@synthesize" in the ".m" file to generate these properties.

@implementation BasicViewController

 

@synthesize txtName;

@synthesize lblMessage;

 

-(IBAction)makeKeyboardGoAway

{

[txtName resignFirstResponder];

}

 

 

-(IBAction)doSomething

{

[txtName resignFirstResponder];

NSString *msg = [[NSString alloc] initWithFormat:@"Hello %@",txtName.text];

 

lblMessage.text = msg;

 

 

}

 

The method declarations indicate actions that can be linked to different events.

Once these outlets and actions are in place, it will show up in the popup .

Xcode

No comments: