Lesson 3. This will explain further some of the UI functionality and hints and tips for programming. It will cover delegates and utilising user input in order to provide a web browser.
Hopefully after the last tutorial you have had the opportunity to try out different colour schemes and widgets. There are some hints that you may have discovered whilst doing so.
When you start typing method names within XCode you may have noticed that the word will automatically be completed for you. For example typing IB should result in XCode completing the word IBAction. If, however you then types an O it should complete IBOutlet. Typing a tab once the correct method is written for you makes for quicker, and safer syntax, programming.
In addition if you want to perform an action against a variable, such as change its colour, pressing the esc key will present you with the correct options for that variable. For example in our previous tutorial we wrote
myLabel.text = @”Hello world”;
If you were to type myLabel.
and then press the esc key you should be presented with a list of suitable options.
One of those options is textColor. In order to set the colour of the text a method needs to be called for the colour.
myLabel.textColor = [
If the method information is not known turning on the XCode Quick Help can be useful (found under Help menu bar). This will create a small popup window that will contain hyperlinks when appropriate to allow you to find further information. Typing in the above code with the help enabled should give you the following text:-
Selecting the hyperlink within this text will display the declaration for textcolor
@property(nonatomic,retain) UIColor *textColor; // default is nil (text draws black)
Don’t worry about the @property element yet we will cover that shortly. The symbol declaration UIColor *textColor;
tells us the method needs to be
myLabel.textColor = [UIColor
Typing a space after UIColor will change the quick help text to give you some information about UIColor.
Pressing the esc key again at this point will give the options for what colour can be used. For example the following line could be written
myLabel.textColor = [UIColor orangeColor];
This should change your text colour to be orange. Compile and run it to see what happens. Try other text affects to see what else can be achieved utilising the esc key and Quick Help to guide you.
The @Property Declaration
As shown above the help on textColor took us to a declaration displaying @property.
@property(nonatomic,retain) UIColor *textColor;
This allows a user to be able to declare variables and utilise them without having to declare set and get operations. Enabling the ‘.’ notation to be used to access elements.
The property of the variable can be declared as nonatomic or atomic. Where atomic is for thread safe variables, i.e., variables that need to be semaphore protected, be able to run without any interruptions. They can also be declared as retain, meaning the memory allocated for the variable should be retained and not released once out of scope. A property of readonly could also be declared preventing a user from making changes to the variable. The fill list of property options can be found in the Definition.
In order to take advantage of this functionality the following declaration is required in the ViewController.h file as follows:-
@property (nonatomic, retain) IBOutlet UILabel* myLabel;
This is declared outside of the member variables but before the end of the class. The declarations for myLabel, myTextField and myButton from our previous tutorial should therefore look like this:-
@interface myViewController : UIViewController
{
UIButton* myButton;
UITextField* myTextField;
UILabel* myLabel;
}
@property (nonatomic, retain) IBOutlet UIButton* myButton;
@property (nonatomic, retain) IBOutlet UITextField* myTextField;
@property (nonatomic, retain) IBOutlet UILabel* myLabel;
-(IBAction) myButtonPressed;
@end
Within the implementation section, in the myViewController.m file we need to tell the Objective C compiler to auto generate or synthesise the getter and setter methods.
#import “myViewController.h”
@implementation myViewController
@synthesize myButton;
@synthesize myTextField;
@synthesize myLabel;
Perform a Build and Run on the resulting code to ensure no errors have been introduced.
Web Browser
In order to add a web browser to our UI a declaration needs adding into myViewController.h. Add a declaration in the same way as the other widgets. Add the widget itself onto the view and @synthesise the variable in myViewController.m.
Remember to make sure your variable names match up, save your code and view before running, and reload all class files as necessary.
When you Build and Run you should find there is no web page displayed, just an empty box, because there is no web address for it to go to.
We will now allow the user to specify the address by typing it into myTextField.
Delegates
You may have noticed after the last tutorial that we didn’t cover what would happen if you typed something into the text box. If you tried it you should have seen that as you selected the box the keyboard appeared at the bottom of the screen thus allowing you to type. However you would also have noticed it never disappeared. Selecting the return key did nothing.
In order to utilise the text box and provide the correct actions for the return key the myViewController class implements the UITextFieldDelegate protocol.Delegates are objective C’s way of implementing ‘interfaces’. See this article for more details on protocols.
To utilise a text string delegate it needs to be added as part of the interface declaration within myViewController.h
@interface myViewController : UIViewController
Then a method needs to be implemented to remove the keyboard once the return key is clicked.
– (BOOL)textFieldShouldReturn:(UITextField *)textField
{
[textField resignFirstResponder];
return YES;
}
The line [textField resignFirstResponder]; basically gives up the current focus.
In addition we have to set myTextField delegate to point to the current instance of the myViewController class. To do this we have to uncomment the implementation of viewDidLoad, automatically created for us by XCode.
// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
– (void)viewDidLoad
{
myTextField.delegate = self;
[super viewDidLoad];
}
Perform a Build and Run. You should notice that the return key now makes the on screen keyboard disappear.
Controlling the Web UI With the Text String
In order to let the text input control the web the string needs to be extracted. For greater visibility we will break it down into the component parts. First of all declare a string that will come into affect when buttonPressed. Lets call it httpString.
NSString *httpString = [[NSString alloc] initWithString:myTextField.text ];
As can be seen the declared variable requires memory to be allocated for it and the initWithString method called to initialise it with the value of the text in the text field. Then perform a URL request using the declared string by creating another local variable for the request (req).
NSURLRequest* req = [[NSURLRequest alloc] initWithURL:[[NSURL alloc] initWithString:httpString]];
This will create the req variable and initialise the URL with the given string. Now use the request on the web view.
[myWebView loadRequest:req];
It would also be helpful for the user to see the site they requested rather than Hello world so lets change myLabel to the input string.
myLabel.text = myTextField.text;
Although the above code is correct it would force the user to input http for every web address. To prevent this the following declaration is preferred.
NSString* httpString = [[NSString alloc] initWithFormat:@”http://%@”,myTextField.text];
This prepends http:// onto the front of the entered text so for example www.bbc.co.uk becomes http://www.bbc.co.uk.
Perform a Build and Run again and input a valid web address in the text box to see the results.
Next Tutorial
Now try and change the code to go to the web address just on the return key, thus making buttonPressed redundant. Also look at adding forward and back buttons, (hint look at the View ‘Received Actions‘). In the next tutorial we will look at table views and navigation controllers.
Recent Comments