In this blog, we’ll learn how to use a UITextField in conjunction with a UIWebView to create a very simple web browser application. Using this technique as a foundation, you can build rather powerful web – based applications. So, let’s get started!
Open Xcode, and choose “Create a new Xcode project” from the welcome screen. In the next screen, choose the Single View Application template. Name your project “SimpleBrowser” and choose options as shown:
Click Next, choose a location to save the project, and Click Create. Once the project has been created, select the MainStoryboard.storyboard file. Drag a UILabel, UITextField, and UIWebView to the View as shown:
Open the ViewController.h file, and make the changes as shown:
@interface ViewController : UIViewController
@property (nonatomic, strong) IBOutlet UITextField *address;
@property (nonatomic, strong) IBOutlet UIWebView *browser;
– (IBAction)addressEntered:(UITextField *)sender;
@end
We’ve added two properties, a UITextField named address, and a UIWebView named browser. Both of these properties are designated as IBOutlets, which means that they will be wired up to controls in our view. We’ve also added an action method (addressEntered:) that will also be wired up to a control.
Next, open up the ViewController.m file, and make the following changes:
@interface ViewController ()
@end
@implementation ViewController
@synthesize address;
@synthesize browser;
– (IBAction) addressEntered:(UITextField *)sender
{
NSURL *url = [NSURL URLWithString:sender.text];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.browser loadRequest:request];
self.browser.scalesPageToFit = YES;
[sender resignFirstResponder];
}
– (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}
…
As is usually the case with properties declared in the .h file, we first synthesize them here. Next comes the implementation of the addressEntered: method. Notice that the sender of the event that triggers this method is a UITextField: the same text field we dragged to the view in the MainStoryboard.storyboard file earlier. In this method, we obtain the text from the sender, and make it into an NSURL object called url. Then we create an NSURLRequest object called request, using the url we just created.
The next step is to load the NSURLRequest into the browser using the loadRequest: method of UIWebView. This will load the web site specified into the web view. We make an attempt to scale the page to fit in the browser view; some pages can be scaled, others cannot. If the page cannot be scaled, this line will fail silently.
The last step in the method is to call resignFirstResponder on the sender. This will hide the keyboard associated with the text field, so the browser will not be obscured. All that now remains is to wire up the properties and the method to their corresponding controls.
Re – open the MainStoryboard.storyboard file, and right – click the View Controller object. Drag from the circle to the right of the address outlet to the UITextField, and from the circle to the right of the browser outlet to the UIWebView. Also drag from the circle to the right of the addressEntered received action to the UITextField; in the resulting popup, choose Did End On Exit. Finally, in the Attributes inspector for the text field, set the Return Key type to “Done,” as shown:
With all of the controls wired up, we should now be able to run the application successfully. Do so, and in the text field, enter http://www.google.com (for example). Note that this simple browser requires a well formed URL to be entered: we cannot just enter “google.com” for example: the full string must be present.
Since a UIWebView is scrollable, it is possible to
use drag and swipe gestures to scroll a web page both horizontally and vertically with no additional coding. Also, if the web page is resizable, pinch gestures may be used to do so.
Take a look at the class reference for the UIWebView, and have fun enhancing this very simple browser application.