Perhaps the most typical network task performed by many network
applications is to load a web page.
The functionality of
Safari’s WebKit engine is available to you in the form of the UIWebView.
What we did
Created an application that loaded web pages.
- Open Xcode:
- Create a new Project (⌘+⇧+N). Make it a View-based
Application
- Name it Browser
- Open BrowserViewController.h and add pointers for IBOutlets
for urlField (a UITextField) and webView (a UIWebView). - This application brings up the keyboard. You will
be managing a text field and you will want to dismiss the keyboard when the user either clicks a done button or presses return.To dismiss the keyboard, you need to tell the text field to give up its role
as the first responder, meaning the component that initially receives
the user input.
[nameField resignFirstResponder];If you look up the documentation for UITextField, you’ll see that it has a delegate property
that is defined by the UITextFieldDelegate protocol, a defined group of
related methods.
Look up this protocol and you’ll see it has numerous
methods that alert the delegate of events relating to the text field. One
of them is textFieldShouldReturn, which looks like what you need in order
to know when the user has tapped return.Add
the UITextFieldDelegate protocol declaration too.
@interface BrowserViewController : UIViewController <UITextFieldDelegate>{ - Add an instance
method to handle the clicking of the go button. It will be of type IBAction Name it handleGoTapped.Pass it (id)senderInstance methods follow the closed curly brace and precede the @end
- Open the BrowserViewController nib in IB and create the User Interface.
- A textField
- A webView
- A GO button
Add a Placeholder in the textField so that the user knows to type http:// and set the keyboard to URL (⌘+1)
- Make the connections.
(control-click the text field to expose its outlets, and connect
its Delegate to File’s Owner.) - Open up BrowserViewController.m. You’ll need to define the method to get the URL from
the text field and have the web view load that site; this method will be
called when the user clicks the Go button or when they hit Return
on the pop-up keyboard.When the go button is pressed:
- Close the keyboard by calling resignFirstResponder on
urlField - Call loadURL on self
- Close the keyboard by calling resignFirstResponder on
- To create the loadURL method
-
Create a pointer named url of type NSURL and set it to:
[[NSURL alloc] initWithString: urlField.text] - Create a pointer named request
of type NSURLRequest and set it to
[[NSURLRequest alloc] initWithURL: url] - Call loadRequest on webView and pass it request
- Release request
- Release url
-
Create a pointer named url of type NSURL and set it to:
- Add the following method:
-(BOOL)textFieldShouldReturn:(UITextField *)textField {}
- Inside the method:
- Test if the textField equals the urlField
- Close the keyboard with resignFirstResponder
- Call loadURL on self
- Outside of the conditional, return YES
- Implement autoroatation
-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
return ((interfaceOrientation == UIInterfaceOrientationPortrait) ||
(interfaceOrientation == UIInterfaceOrientationLandscapeLeft) ||
(interfaceOrientation == UIInterfaceOrientationLandscapeRight) ||
(interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown));
} - Save, Build and Run
- Enter a url to test
- The most obvious thing lacking from
the example is the usual forward and back buttons. You can
implement them with the UIWebView’s goForward and goBack methods. Provide a delegate that implements the UIWebViewDelegate.
Part 2
All the substantial work in this application is done
by the UIWebView. Once you’ve loaded the page, this view — backed
by the WebKit engine for rendering HTML, interpreting JavaScript, and
handling the network communication — does all the work for handling your web interactions, including submitting forms, navigating to new
pages, running client-side browser apps, etc.
Even if you’re not planning on developing a browser, the UIWebView
has other compelling uses. While UIKit doesn’t provide a styled text
component for iPhone apps, you can style HTML to your heart’s content
with CSS, and put that styled HTML into a UIWebView. In fact, this is
an excellent way to provide an about screen for your application, as
you can provide links to your application’s home page, e-mails for tech
support, or even dialable phone number links, all by just authoring
HTML.
To do this, instead of loading a page from the web, you can include
your HTML, CSS, and images in the application bundle, and then find
them inside the bundle. Making a URL from a path in the bundle is just
a matter of converting the path string to an NSURL:
- Create a web page named mywebpage.html or use index.html
- In the
<head></head>section add the following:
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<meta name="apple-mobile-web-app-capable" content="yes" /> - Set css body margin to zero
- Add the web page to your project. CTRL+click on Resources. Copy the file to your project.
- Create an application like you made in part 1, Name it Browser2.
- This application is the same as the previous except for the loadURLmethod. Create the IBOutlets and IBAction in the header file
- Open Browser2ViewController.xib create a text filed, web view and button. Make connections and CTRL+click on the textField and link it to the FIle Owner’s delegate.
- Open the Inspector and in the Text Field set the Text to webpage:
-
This application is the same as the previous except for the loadURLmethod. Open Browser2ViewController.m file and define the IBAction method and then create the loadURLmethod
//fill in the blank with a keyword to show your page
//I did webpage:
NSRange range = [urlField.text rangeOfString: @"______:"];
NSURL *url = NULL;
if (range.location == 0) {
// find the about page in bundleNSString *myPath =
//fill in the blank with the name of your page
[[NSBundle mainBundle] pathForResource:@"______"
ofType:@"html"];
url = [[NSURL alloc] initFileURLWithPath: myPath];
} else {
url = [[NSURL alloc] initWithString: urlField.text];
}
if (url != NULL) {
NSURLRequest *request = [[NSURLRequest alloc] initWithURL: url];
[webView loadRequest: request];
[request release];
[url release];}
- Add the following method:
- (BOOL)textFieldShouldReturn:(UITextField *)textField {}
- Inside the method:
- Test if the textField equals the urlField
- Close the keyboard with resignFirstResponder
- Call loadURL on self
- Outside of the conditional, return YES
- Implement autoroatation
-(BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
return ((interfaceOrientation == UIInterfaceOrientationPortrait) ||
(interfaceOrientation == UIInterfaceOrientationLandscapeLeft) ||
(interfaceOrientation == UIInterfaceOrientationLandscapeRight) ||
(interfaceOrientation == UIInterfaceOrientationPortraitUpsideDown));
} - Save, Build and Run
- Modify the loadURL method so that if the urlField is empty or if the urlField contains the text webpage:, your page gets loaded.
- Add the ability to go forward and back







