How to Add the Weather View Controller to Your iOS App
How to Add a Background Image to Your iOS App
How to Add a Toolbar to Your iOS App

How to Manage Links in a Web View in Your iOS App

An interesting thing about views in your iOS app that does (or can) load real web content into your app instead of using a browser — is that the links are live and users can follow those links from that view if you let them.

After the user is at the weather website, the user might want to look at the NWS New York, NY link in the upper-left corner. If the user were to follow that link, though, he wouldn’t have a way to get back to the originating page.

Hmm.

To be able to navigate back to the originating view, you need to create another button and label it Back to Weather (or whatever the previous controller is) so that the user knows that she can use it to get back to the previous view. Creating this button is pretty easy to do.

image0.jpg

Maybe, you don’t want to have that button pop up when the user is at the originating web page because, at that point, there’s no going back. So, how do you keep track of who’s where in the whole navigational link structure? Here, you're assisted by two web view delegate methods, webView:shouldStartLoadWithRequest:navigationType : and webViewDidFinishLoad:.

webView:shouldStartLoadWithRequest:navigationType: is a UIWebView delegate method. It’s called before a web view begins loading content to see whether the user wants the load to proceed.

First, adopt the UIWebView protocol by adding the bolded code to WeatherController.h.

#import "DetailViewController.h"
@interface WeatherController : DetailViewController
<UIWebViewDelegate>
@property (weak, nonatomic)
IBOutlet UIWebView *weatherView;
–d

Remember that when you adopt a delegate protocol, the compiler will then check to make sure that all required methods are in fact there and that all types are correct — so do it!

Next, add this code to WeatherController.m .

- (BOOL)webView:(UIWebView *)webView
shouldStartLoadWithRequest:
(NSURLRequest *)request navigationType:
(UIWebViewNavigationType)navigationType {
if (navigationType ==
UIWebViewNavigationTypeLinkClicked){
if ([[UIDevice currentDevice]
userInterfaceIdiom] == UIUserInterfaceIdiomPad) {
if (![self.toolbar.items
containsObject:self.backButton])
{ NSMutableArray *itemsArray =
[self.toolbar.items mutableCopy]; [itemsArray addObject:self.backButton ];
[self.toolbar setItems:itemsArray animated:NO];
}
else {
self.navigationItem.rightBarButtonItem =
self.backButton;
}
}
return YES;
}

Early on, you check to see whether the user has touched an embedded link. (You have to see whether a link is clicked because this message is sent to the delegate under several different circumstances.)

if (navigationType == UIwebViewNavigationTypeLinkClicked){

Then, you check to see if you're on an iPad or not. If you're on an iPad, you'll be using a toolbar, but on an iPhone, you'll use a navigation bar.

if ([[UIDevice currentDevice]  userInterfaceIdiom] == UIUserInterfaceIdiomPad) {

If you're on an iPad and the user has clicked a link, you want to have a Back button so that the user can get back. If there's one there, you don't want to add a second. So you look at the items array in the toolbar to see if self.backButton is already there.

if (![self.toolbar.items  containsObject: self.backButton])

If there isn't a Back button there, add it with the standard code for doing this: you copy the toolbar's itms array into a mutable array called itemsArray. Then you add the Back button to it and replace the toolbar's array with the mutable items array.

{ NSMutableArray *itemsArray = [self.toolbar.items  mutableCopy]; 
[itemsArray addObject:self.backButton ];
[self.toolbar setItems:itemsArray animated:NO];}

Next, add the goBack: method to the file WeatherController.m. This is the message sent when the Back to Whatever button is tapped.

- (void)goBack:(id)sender {
[self.weatherView goBack];
}

Finally, you want to get rid of the Back to Whatever button when you’re displaying the original page. Here is the code to do that.

- (void)webViewDidFinishLoad:(UIWebView *) webView {
if ([self.weatherView canGoBack] == NO ) {
NSUInteger backButtonIndex = [self.toolbar.items
indexOfObject: self.backButton];
if (([[UIDevice currentDevice] userInterfaceIdiom]
== UIUserInterfaceIdiomPad) &&
(backButtonIndex != NSNotFound)
{
NSMutableArray *itemsArray =
[self.toolbar.items mutableCopy];
[itemsArray removeObject:self.backButton ];
[self.toolbar setItems:itemsArray animated:NO];
}
else {
self.navigationItem.rightBarButtonItem = nil;
}
}
}

The delegate is sent the webViewDidFinishLoad: message after the view has loaded. At this point, you check to see whether there’s anything to go back to (the web view keeps track of those sorts of things). If not, remove the button from the toolbar or Navigation bar.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
How to Create an iOS App
How to Add and Set Up the EventPageController in the MainStoryboard in Your iOS App
How to Use the Library Pane for iOS App Development
How to Customize Your iOS App Table View for the iPad
How to Use Inspector and Quick Help Pane for iOS App Development
Advertisement

Inside Dummies.com