Web Browser or how to use the UIWebView (Part 3/3)

Hi!

This is the third and last tutorial of this series.
I’m very sorry, that you had to wait for this tutorial so long, but I had very much trouble in school.

In this tutorial we’ll put the finishing touches on our web browser.
We have to make the following things :
– Add support for landscape mode (You’ll learn the use of springs).
– Add the zoom function.
– Add the bookmarks feature (We’ll save them in the NSUserDefaults).

If you don’t already have it, download the Explorer Project Version 2 we’ve been making in this tutorial series so far, which we’ll be using as a starting point.

Ok.
Let’s start with the most simple task.

The Zoom-Function

Go to the ExplorerViewController.m file and scroll to the viewDidLoad method.
Paste in this line :

webView.scalesPageToFit = true;

Now open the ExplorerViewController.xib and click on the view.
Make sure, that the multiple touch checkbox is checked :

Now save everything, go to Xcode and test it.
If you are in the simulator and press the alt-button, you can test the pinch zoom gesture.

Support for all Orientations

If you want to support all orientations in an app you have to make sure all the controls on your view are resized correctly.
Go to the shouldAutoRotate method in the ExplorerViewController and uncomment it.
Make sure it returns true, to support all orientations.

It should look like this :

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation {
return true;
}

Now run the app.
If you press cmd+-> or cmd+<- (-> = right arrow | <- = left arrow) you can rotate the iPhone by 90 degrees.
Test it – you’ll see, that the controls are not resized correctly and we have to work it out so that they are resized correctly.

Wrong resizing of the view :

To solve this problem we have to open the ExplorerViewController.xib file and go to the Size Inspector :

To the right you can see something, that is called “Springs and Struts”.
These springs and struts are responsible for autosizing the view.

Let’s set them to get the right resizing of our view.
Click on the webView and set the springs and struts to this state :
We tell it to keep the relative position to all edges and to resize the height and the width of the webView.

Then click on the urlField and set the springs and struts to this state :
Here we tell the urlField to keep the relative position to the top, the left and the right edge. We also tell it to resize the width of it, but not the height.

Now save everything and go back to Xcode.
Run your project and rotate your iPhone.
The autosizing should be fine now, like in this picture :

Adding Bookmarks To The List And Saving Them

Now we can go and tackle the last big function, that has been planned for this tutorial series – the bookmarks list.

First you have to make a small change to the user interface.
Open the ExplorerViewController.xib file and add an UIBarButtonItem left to the bookmarks-button and set the identifier to “Add”.

Then we have to make an IBAction for this new button.
Go to the ExplorerViewController.h file and declare this method :

-(IBAction)addBookmarkButtonTapped;

Then go to the ExplorerViewController.m file and paste in this code :

-(IBAction)addBookmarkButtonTapped {
UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:[[[[self webView]request] URL] absoluteString] delegate:self cancelButtonTitle:@"Cancel" destructiveButtonTitle:nil otherButtonTitles:@"Add", nil];
[actionSheet showInView:self.view];
[actionSheet release];
}

If the user taps the addBookmarksButton an UIActionSheet shall appear with the options “Add” and “Cancel”.

Now we have to implement the UIActionSheetDelegate.
Go to the ExplorerViewController.h file and put “UIActionSheetDelegate”, without the “”, besides the other delegates.

Now go back to the .m file and paste in this code :

-(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex {
if (buttonIndex == 0) {
NSMutableArray *bookmarks = [[[NSUserDefaults standardUserDefaults] arrayForKey:@"Bookmarks"] mutableCopy];
if (!bookmarks) {
bookmarks = [[NSMutableArray alloc] init];
}
[bookmarks addObject:[[[[self webView]request] URL] absoluteString]];
[[NSUserDefaults standardUserDefaults] setObject:bookmarks forKey:@"Bookmarks"];
[bookmarks release];
}
}

As I said at the top of this tutorial, I wanted to save the bookmarks in an array and persist the array in the NSUserDefaults.
Here is what we do in this method :
1. If the buttonIndex is 0, means : if it is the “Add”-button, then we want the following code to be executed.
2. We read the array with the bookmarks from the standardUserDefaults and store it in a mutable array. It is important, that we make a mutable copy of this array, because everything we read from the NSUserDefaults is immutable.
3. We check to see if the bookmarks array is nil. If yes we create a new array.
4. We add the url of our current website to the bookmarks array.
5. We save the bookmarks array in the NSUserDefaults.
6. We release the memory used for the bookmarks array.

Showing The Bookmarks List in an UITableView

The next thing we have to do is a new view, that will show the bookmarks in an UITableView.

Right-Click on the group “Classes” and add a new file.
Choose the UIViewController file and name it “BookmarksViewController”.

Now open the BookmarksViewController.xib file and design the user interface like this :

You need a UITableView and a UIToolbar with a UIBarButtonItem and a flexible space.

Now go to the BookmarksViewController.h file and replace the content of it with this :

#import <UIKit/UIKit.h>

@class ExplorerViewController;
@interface BookmarksViewController : UIViewController <UITableViewDelegate, UITableViewDataSource>{
NSMutableArray *bookmarks;
ExplorerViewController *explorerView;
}

@property (nonatomic, retain) NSMutableArray *bookmarks;
@property (nonatomic, retain) ExplorerViewController *explorerView;

-(IBAction)cancelButtonTapped;

@end

What we do here is :
We declare a mutableArray for the bookmarks – it has to be mutable, because we want the delete function to work.
We also declare a reference to an ExplorerViewController. We need this, because we need to have access to our UIWebView on the ExplorerViewController.
If you don’t know what the @class ExplorerViewController means :
This is a forward declaration. If you want to use a class in the header file (.h file), that has to be imported, you shouldn’t import it in the header file, but you should do it in the implementation file (.m file). The @class statement tells the compiler, that the File for this class will be imported in the implementation file.
We also need an action for our cancelButton;
In the BookmarksViewController we want to make use of the UITableViewDelegate and the UITableViewDataSource.

Now go to the BookMarksViewController.m file and import the ExplorerViewController :

#import "ExplorerViewController.h"

Then synthesize the properties :

@synthesize bookmarks, explorerView;

Now let’s implement the action for the cancelButton :

-(IBAction)cancelButtonTapped {
[self.parentViewController dismissModalViewControllerAnimated:true];
}

Because we will show the BookmarksViewController as a modal ViewController we need to make use of the dismissModalViewController method to dismiss it.

Now let’s implement the UITableViewDataSource :

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
return 1;
}

-(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
return [bookmarks count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
static NSString *cellIdentifier = @"Cell";

UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];
if (cell == nil) {
cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:cellIdentifier] autorelease];
}

cell.textLabel.text = [bookmarks objectAtIndex:indexPath.row];

return cell;
}

The first method requests the number of sections in this tableView – we return 1, because we want to have only one section.
The next method wants to know how many rows in the sections are – we pass back the number of bookmarks in the array.
The last method in this codeblock is a standard method for setting up tableViewCells. In a future tutorial about TableViews I will explain this method in detail, but for now you only should know, that we set the text of every cell to the link of each bookmark.

If the user taps on a row in the tableView the view should disappear and the UIWebView should load the link he tapped.

To respond on clicks on row in a tableView, we need to implement the UITableViewDelegate :

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
explorerView.urlField.text = [bookmarks objectAtIndex:indexPath.row];
[explorerView textFieldShouldReturn:explorerView.urlField];
[self.parentViewController dismissModalViewControllerAnimated:true];
}

In this method we set the text of the urlField in our explorerView to the link, that has been tapped and then we simulate a return click on the keyboard to make the webView load the link.
At the end of this method we dismiss this view.

Now go to the dealloc method and paste in this code :

// e.g. self.myOutlet = nil;
[explorerView release];
explorerView = nil;
[bookmarks release];
bookmarks = nil;

Now scroll to the viewDidLoad method and paste in this code :

bookmarks = [[[NSUserDefaults standardUserDefaults] arrayForKey:@"Bookmarks"] mutableCopy];

In this line we load the bookmarks from the NSUserDefaults into the bookmarks array.

Now go to the Interface Builder and connect the action of the cancelButton with the selector of the cancelButton and the delegate and dataSource of the tableView with the File’s Owner.

Save everything in the Interface Builder and go back to ExplorerViewController.h file.
Declare this method in it :

-(IBAction)bookmarksButtonTapped;

Then go to the ExplorerViewController.m file and import the BookMarksViewController :

#import "BookmarksViewController.h"

Now let’s implement the action we’ve just declared :

-(IBAction)bookmarksButtonTapped  {
BookmarksViewController *tempView = [[BookmarksViewController alloc] initWithNibName:@"BookmarksViewController" bundle:nil];
tempView.explorerView = self;
[self presentModalViewController:tempView animated:true];
[tempView release];
}

In this method we create a new BookMarksViewController and set the explorerView to the ExplorerViewController itself.
Then we show it as a modal ViewController and release it to save memory.

Now save everything and test it.

Deleting Bookmarks

Our internet browser has now a fully functional bookmarks feature……………………………………………………………..almost fully functional.

There’s one important function left in the bookmarksViewController – the delete function.

Go to the BookMarksViewController.m file and paste in this code :

-(void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
if (editingStyle == UITableViewCellEditingStyleDelete) {
[bookmarks removeObjectAtIndex:indexPath.row];
[tableView deleteRowsAtIndexPaths:[NSArray arrayWithObjects:indexPath, nil] withRowAnimation:UITableViewRowAnimationFade];
[[NSUserDefaults standardUserDefaults] setObject:bookmarks forKey:@"Bookmarks"];
}
}

This method is also part of the UITableViewDelegate.
I will explain this method in a future tutorial about UITableViews.
For now you should know :
If you swipe from right to left and delete the tableViewCell the bookmark will be removed and the cell too.
After that we save the new bookmarks array in the NSUserDefaults.

Save everything and test it.

Finishing Touches

Now there are only some finishing touches left to do.
Open the ExplorerViewController.xib file and click on the ActivityIndicatorView.
Make sure you check the checkbox Hide when stopped.
Then click on the urlField and set the clear button attribute to “Is always visible”.

Save everything.

Tutorial Ending

Congratulations !!!
The browser is complete.
Everything is working now.
The landscape and portrait support.
The bookmarks feature.
The zoom function.
Everything!

I hope you’ve enjoyed this tutorial series.
If you’ve liked or if you found an error or if you have a question please comment. I’m glad to hear your thoughts about this series.
If you want to, I can make a tutorial of how to add the tab feature to our browser.

Here is the complete Xcode project with all the code we’ve developed in this tutorial series : Explorer Project Final Version

Happy programming and god bless.
(Source: http://kaiengelhardt.com/2011/03/13/iphone-tutorial-33-web-browser-or-how-to-use-the-uiwebview/)

Web Browser or how to use the UIWebView (Part 2/3)

Hi!

This is the second tutorial of this series and we’ll add some functionality to our web browser, such as the back and forward function or the refresh function.
We’ll also add the autocorrection of URLs.

If you don’t already have it, download the Explorer Project we’ve been making in this tutorial series so far, which we’ll be using as a starting point.

Ok, let’s start!

If you didn’t open your project yet, open it!

Go Forward, Go Back and Refresh!

Go to the ExplorerViewController.h file and paste in this code under the properties :

-(IBAction)refreshWebView;
-(IBAction)goBack;
-(IBAction)goForward;
-(void)actualizeButtons;

Now we have to implement the methods we’ve just declared.
Go to the ExplorerViewController.m file and paste in this method :

-(void)actualizeButtons {
backButton.enabled = [webView canGoBack];
forwardButton.enabled = [webView canGoForward];
}

In these lines we are actualizing our controls.
The backButton should be disabled, if the webView can’t go back and the forwardButton too if the webView can’t go forward.

Now paste in these methods :

-(IBAction)refreshWebView {
if (refreshButton.style == UIBarButtonSystemItemStop) {
[webView stopLoading];
}else {
[webView reload];
}
}

-(IBAction)goBack {
[webView goBack];
[self actualizeButtons];
}

-(IBAction)goForward{
[webView goForward];
[self actualizeButtons];
}

Pretty straightforward, huh?

Now go to the Interface Builder and connect the selector of the goBackButton, the goForwardButton and the refreshButton with their corresponding actions in the File’s Owner.

Save everything in the Interface Builder, go back to Xcode and run your project.

The back and forward buttons should work and the refreshButton should refresh the web page.

Implementing the UIWebViewDelegate

The next step to improve our web-browser will be to implement the UIWebViewDelegate.
This delegate notifies us, when the webView starts loading a page, the loading of a page has been finished or an error occurred, while loading a page.

1. Go to the ExplorerViewController.h file and add this :

UIWebViewDelegate

right next to the UITextFieldDelegate inside the <> braces.
Here is how it should look like :

The UIWebViewDelegate has got 3 important methods :

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;
- (void)webViewDidFinishLoad:(UIWebView *)webView;
- (void)webViewDidStartLoad:(UIWebView *)webView;

Let’s implement them :

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {
[loadingActivity stopAnimating];
[refreshButton release];
refreshButton = nil;
refreshButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh target:self action:@selector(refreshWebView)];
navigationBar.topItem.rightBarButtonItem = refreshButton;
}

- (void)webViewDidFinishLoad:(UIWebView *)webView {
[loadingActivity stopAnimating];
[refreshButton release];
refreshButton = nil;
refreshButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemRefresh target:self action:@selector(refreshWebView)];
navigationBar.topItem.rightBarButtonItem = refreshButton;
urlField.text = [[[[self webView]request] URL] absoluteString];
[self actualizeButtons];
}

- (void)webViewDidStartLoad:(UIWebView *)webView {
[loadingActivity startAnimating];
[refreshButton release];
refreshButton = nil;
refreshButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemStop target:self action:@selector(refreshWebView)];
navigationBar.topItem.rightBarButtonItem = refreshButton;
}

As the webView starts loading a website we make the UIActivityIndicatorView start animating an change the style of the refreshButton to the UIBarButtonSystemItemStop.
As the webView stops loading or an error occurred while loading we make the UIActivityIndicatorView stop animating and change the style of the refreshButton to the UIBarButtonSystemItemRefresh.
In every step we actualize the back- and forwardButton.

Ok now switch over to the Interface Builder and connect the webView’s delegate with the File’s Owner.
Btw. you can click on the UIActivityIndicatorView and check the checkbox “Hide when stopped”.

Save your changes, go back to Xcode.

Now you can run your project and test it.

Tackling the URL Issues

Everything should work fine, but there are some minor issues we will be fixing now.
The first thing is, that if you are browsing and you are following a link to another website the text of the urlField is not actualized to the current URL.

Go to the webViewDidFinishLoad method and add this line at the bottom :

urlField.text = [[[[self webView]request] URL] absoluteString];

Now we have this and we can tackle the next thing : The http://-prefix issue

Go to the ExplorerViewController.h file and add this method declaration :

-(NSString*)repairURL:(NSString*)url;

Now go to the ExplorerViewController.m file and add the implementation of this method :

-(NSString*)repairURL:(NSString*)url{
int atemp = 0;
for(int i = 0;i<[url length];i++){
if([url characterAtIndex:i] == '.'){
atemp++;
}
}
if((atemp == 0)||([url characterAtIndex:[url length]-1]=='.')){
return url;
}
NSString *temp = @"";
if([url length] >=11)
temp  = [NSString stringWithFormat:@"%@",[url substringToIndex:11]];
NSString *temp2 = @"";
if(![temp isEqualToString:@"http://www."]){
for(int i = 0;i<[url length];i++){
if([url characterAtIndex:i] == '.'){
if(([url characterAtIndex:i-1] == 'w')||([url characterAtIndex:i-1] == 'W')){
temp2 = [url substringFromIndex:i+1];
}else{
temp2 = url;
}
break;
}
}
temp = [NSString stringWithFormat:@"%@%@",@"http://www.",temp2];
if ([[temp substringToIndex:18] isEqualToString:@"http://www.http://"]) {
temp = [temp substringFromIndex:11];
}
return temp;
}else{
return url;
}
}

Now you can go to the textFieldShouldReturn method and add the following line at the beginning :

urlField.text = [self repairURL:urlField.text];

Tutorial Ending

Now we have implemented the main features of our browser.
There is one button, that has no function until now – the bookmarks-button.
In the third and last tutorial of this series, we’ll add the feature of bookmarking websites and persisting them in the NSUserDefaults.

Here’s the sample project with all of the code we’ve implemented in this tutorial : Explorer Project Version 2

Happy programming and god bless.

(Source: http://kaiengelhardt.com/2011/02/26/iphone-tutorial-23-web-browser-or-how-to-use-the-uiwebview/)