Create a Web View

UPDATED for Xcode 5 and iOS7!

If your app is dependent on web content, there are a couple ways you can go about outputting that content. JSON Parsing and Web Views. We’ll be covering JSON Parsing in a later tutorial. Also, be sure to check out the continuation of this tutorial where I explain how to add a Loading Label when a web page loads.

A web view displays a website on the device’s screen. Mobile Safari is a prime example. Safari uses all kinds of bars and buttons to interact with the view. We’re not going to go into that much detail…yet. For now, we’re just going to display a web page.

Let’s begin. Unlike in the first tutorial of this series, Creating a Splash Screen, we’re actually going to be writing code in this one.

(Note: In future tutorials, we will be adding more functionality to our apps.)

1. Create a new Single View Application.

Create New Project

Single View Application

2. Name it WebView. Also select Universal, check Use Storyboard and Use Automatic Reference Counting.

WebView

Storyboard is a new way to layout you app all in one file rather than using multiple XIB files. If you do not check Use Storyboard, it’ll use the old fashioned XIBs.

Automatic Reference Counting will make it so you don’t have to manually Release or Deallocate objects in your code. It’s all done for you automatically.

3. Choose a location, and click Create.

Save Location

You’ll notice in the list of files on the left that we have (2) files called ViewController. However, they each have a different extention: .h and .m.

The .h file is the Header file (the file that tells the app what we’re going to do).

The .m file is the Implementation file (the file that does the things the header said we were going to do).

We also have (2) .storyboard files. One called Main_iPhone.storyboard, for laying out the iPhone view, and Main_iPad.storyboard, for laying out the iPad view.

4. Click on Main_iPhone.storyboard.

Click Main_iPhone.storyboard

You’ll see this to the right:

iPhone Storyboard

5. Set your buttons on the top-right so they look like this.

Screen Shot 2013-10-04 at 4.09.47 PM

On the right-bottom of Xcode, you will see a list of Objects.

Screen Shot 2013-10-04 at 4.10.42 PM

6. Scroll down until you find the Web View object.

Screen Shot 2013-10-04 at 4.11.54 PM

7. Click and drag the Web View object to our View.

Drag Web View

8. If you do not see this bar (View Controller Scene) on the left side of the edit area,

Screen Shot 2013-10-04 at 4.13.16 PM

Then click this little arrow near the bottom of your screen.

Screen Shot 2013-10-04 at 4.13.29 PM

9. In the View Controller Scene, click on Web View.

Screen Shot 2013-10-04 at 4.13.16 PM

10. At the top of the right bar, make it look like this.

Screen Shot 2013-10-04 at 4.14.59 PM

Scales Page To Fit will automatically scale the website that is inserted into the view to show the entire site rather than a zoomed in view.

Everything in the Detection section with scan the site for Links (opens a new page), Addresses (opens Maps), Phone Numbers (calls the number), and Events (adds to Calendar).

11. Repeat steps 6. thru 10. for the MainStoryboard_iPad.storyboard file. The iPad editor could be rather large, but you can zoom out my click the magnifying glass with the minus symbol on the bottom right of the editor screen.

Screen Shot 2013-10-04 at 4.16.00 PM

Next, I’m going to give you a shortcut on linking objects to your code that will save you tons of time for this and future projects.

12. Set your buttons on the top-right so they look like this.

Screen Shot 2013-10-04 at 4.16.53 PM

13. On the left bar, click on MainStoryboard_iPhone.storyboard.

Click Main_iPhone.storyboard

You should now see the iPhone edit screen on the left and the ViewController.h file on the right.

Screen Shot 2013-10-04 at 4.19.56 PM

14. While holding down the Control key, click and drag the Web View from the View Controller Scene to the ViewController.h edit screen, placing it just below the @interface line.

Drag to .h

When you release, you should see this box.

Outlet Box

15. In the name section, type in viewWeb (this could be anything you like), then click Connect.

Fill Out Fields Outlet Box

The following line of code will automatically be added in the .h file. Several other lines are automatically added to the .m file as well.

Property Added

Now we need to link the Web View on the iPad.

16. On the left bar, click on MainStoryboard_iPad.storyboard.

17. We’re going to click and drag the web view to the ViewController.h file just like we did last time, but instead of creating a new line, we going to drag to the existing line.

Drag Web View to .h

And iPad is now linked. So let’s finally write some code.

18. Change the buttons at the top right to look like this.

Standard Button Config

19. In the File View, click on ViewController.m.

Click on ViewController.m

20. In the viewDidLoad method, add the following code (in blue). The http://conecode.com can be any website you’d like.

- (void)viewDidLoad {
    [super viewDidLoad];
    NSString *fullURL = @"http://conecode.com";
    NSURL *url = [NSURL URLWithString:fullURL];
    NSURLRequest *requestObj = [NSURLRequest requestWithURL:url];
    [_viewWeb loadRequest:requestObj];
}

NSString *fullURL = @”http://conecode.com”; We’re making a string called fullURL and setting it to the website we want our web view to load. But right now, the program thinks it’s just a bunch of text. (note the @ symbol before the quotes. You need this any time you’re setting a string with quotes.)

NSURL *url = [NSURL URLWithString:fullURL]; This tells the program that the text is actually a web address, or URL. It is now a URL object called url.

NSURLRequest *requestObj = [NSURLRequest requestWithURL:url]; This tells the program what we’re going to do with the URL object. We’re going to request the URL. It is now a request object called requestObj.

[_viewWeb loadRequest:requestObj]; Finally, we’re going to load the request into our Web View that we called viewWeb earlier.

That’s it, we’re done.

21. Now just test it by selecting iPad Simulator and then the Run button. And the same with iPhone Simulator.

Finished Product

Short and simple. In future posts, we will be adding more features to all the apps in this series of tutorials. Please let us know in the comments how things are working out for you and whether or not these tutorials are giving you a better understanding of iOS development.

You can download the source code here:  WebView Source Code