This post answers the following questions:
- How do I show a Web page within an app?
- How can I have a Web browser without launching Safari?
- How can I use an image file from my app bundle inside a UIWebView?
If you’re looking to show HTML content within your app, you’ll be pleased to know that Apple makes things incredibly easy in this regard. The UIWebView object provides you with roughly the same functionality as the standard Safari browser without having to lift a finger.
To begin, either use Interface Builder (IB) to drag a UIWebView onto the desired view, or add it to your view in code:
UIWebView *wWw = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 460)];
This will add a full-screen UIWebView to the current view. If you added your view in code, don’t forget to release the object you just allocated when you’re done! You’ll also want to set the delegate for the UIWebView to the current view controller. What this does is it tells the UIWebView that whenever an event happens, it’s the current view controller that gets notified (this should probably be a default, but it’s not!). In IB, drag using the right mouse button from the UIWebView to the View Controller (File’s Owner) and select “delegate”…
…or in code:
wWw.delegate = self;
If you’re using IB, you’ll also need to set up an outlet (a variable that corresponds to your UIWebView instance). In the class definition, add in the following:
IBOutlet UIWebView *wWw;
…and then right drag from the View Controller to the UIWebView and select “wWw.”
Now that your Web view is present and all wired up, you probably want some content in it. You can load content from a local HTML string or from the Internet, both without much difficulty.
To load from an HTML string, you’re going to use the loadHTMLString: method, which looks like this:
[wWw loadHTMLString:@"<h1>Visit <a href='http://www.fourtentech.com'>FourTen</a> for mobile application development!</h1>" baseURL:nil];
If you’re simply trying to display HTML formatted content, you’re actually done! You can simply edit the HTML string as desired, and your markup will be displayed as it would in Safari.
If you want to embed images that you’ve put in your app bundle within your HTML, you’ll also need to set the baseURL. Normally when you go to a Web page, you type in an address, or click on a link that contains an address, and your browser “knows” where you are. If you were to type:
<img src='410logo.png' />
…in your HTML, your browser would know that you really want to show http://[server]/[current_dir]/410logo.png. When you’re loading an HTML string into a UIWebView, there’s no way for the UIWebView to know where it is unless you tell it, and if you want local images to show, you simply pass it the path of the local app bundle:
[wWw loadHTMLString:@"<center><img src='410logo.png' style='margin-top:150px;' /></center>" baseURL:[NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]]];
We’re all about succinct code here at FourTen, so we actually did several things in that one line above. We got the application bundle path using [[NSBundle mainBundle] bundlePath], and then we used that to create an NSURL object. That NSURL object becomes our new baseURL, and now, local images will show. The code above will get you:
To show a remote Web page, it’s just as easy, if not easier. You’ll need the following:
[wWw loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.fourtentech.com/"]]];
We’ve also done several things in this line: we created a NSURL from a string, used that to create an NSURLRequest, and fed that to loadRequest. As long as your device or simulator has Internet access, you’ll end up here:
This is a four-part series on the UIWebView — please check back for more if you’re looking to go deeper.
FourTen Technologies, Inc., is a leading US iPhone app development firm. For information on having FourTen build a custom mobile application for your company, visit www.fourtentech.com. Article written by Jonathan Corbett (President & CEO, FourTen). Contact: email@example.com.