Lesson 2. This will continue the tutorial by adding some functionality behind the buttons created in lesson 1.
Adding Functionality Behind The Buttons
Now we need to add some functionality so that the buttons actually have an impact.
The View represents the UI (User Interface) on which widgets (e.g. buttons, text boxes, maps etc) are placed. With each UI element there is an associated Action and Outlet.
The IBOutlet allows each widget to be declared and associated with a variable. To associate an IBOutlet with a widget code needs to be added into the ViewController header file.
Within XCode open your ViewController.h file. The following code will be seen:-
@interface jane_testViewController : UIViewController
{
}
@end
This is the declaration of your class. Member variables, including IBOutlets, are declared within the brackets, and actions and other methods, are declared outside of the curly brackets, but before the @end which is the end of the class declaration.
Therefore within the brackets you need to declare the IBOutlets as follows:-
@interface jane_testViewController : UIViewController
{
IBOutlet UIButton* myButton;
IBOutlet UITextField* myTextField;
IBOutlet UILabel* myLabel;
}
The code above is setting the button (UIButton) as myButton, the TextField as myTextField and the label as myLabel.
Prior to the end of the class you declare the IBAction. The IBActions, called on receipt of an event, are defined using ‘-(IBAction) actionName;’ as follows:-
-(IBAction) buttonPressed;
@end
The IBOutlets are just placeholders until the variables are associated with the UI elements using Interface Builder. However because we have changed the class we first of all need to save the changes and Reload All Class Files, (found under the File menu option in Interface Builder).
We link the Variables with the UI elements by first selecting the File’s Owner (literally the file .m/.h that defines the class controlling this view). The ViewController Connections tab on the Inspector should then show the UI elements for which variables have been added. It is then simply a matter of joining the two together as shown:-
In a similar way we can link actions to events. This can be done by right clicking on the File’s Owner. Then drag from the Received Actions buttonPressed to the button widget.
After selecting the button widget the event options will be displayed. Selecting the Touch Up Inside event will create a linkage between the event and the action such that when a user presses the button the method buttonPressed is called.
Alternatively the action can be linked to the event by selecting the Button widget from the Inspector window as we did with the variables.
Now the Method defined in the ViewController.h file needs to be implemented in the ViewController.m file. Opening the .m file from the .h can be achieved by selecting the Counterpart tool.
This allows you to toggle between the .h and the .m file and can be found on the XCode toolbar.
Opening the .m file you will see the following:-
#import “jane_testViewController.h”
@implementation jane_testViewController
// Lots of commented code already added automatically
@end
You need to add the method implementation prior to the end of the class implementation denoted by @end.
-(IBAction) buttonPressed
{
myLabel.text = @”Hello world”;
}
Now comple and run.
On the simulator press the button
Whahay we’ve written our first hello world!
Next Tutorial
Now try adding different widgets and labels. In the next tutorial we will look at creating a web browser on our UI.
Recent Comments