How to Add and Set Up the EventPageController in the MainStoryboard in Your iOS App

By Jesse Feiler

You need a view controller to manage each view within the Page View controller in your iOS app. You can always add this view controller when you extend the storyboard.

To add the EventPageController to the storyboard, follow these steps:

1Add another view controller to the storyboard by dragging in a view controller from the Library pane and placing it next to the EventsController on the Canvas.

You don’t have to put it there, but doing so hints that a relationship may exist; it also makes it easier to draw that relationship if you want to do so — and you will want to do so in a moment.

2Open the Identity inspector in the Utility area using the Inspector selector bar, and in the Class drop-down menu in the Custom Class section, choose EventPageController.

This will replace the UIViewController.

3Switch to the Attributes inspector and use its text fields to give the controller the Title of Event Page.

Then add Event Page to the Identity inspector’s Storyboard ID field.

4Add a web view to the EventPageController by dragging in a web view from the Library pane and into the Event Page controller.

The Event Page view will be a web view because you’ll want it to download and then display an HTML page.

The UIViewWeb class provides a way to display HTML content and has the built-in functionality to download HTML content from the web.

5Click the Size inspector icon in the Inspector selector to open the Size inspector in the Utility area.

Set the X and Y origins to zero and 64 and then resize the web view to fill the view. The standard for iOS 7 is that views should appear through a translucent navigation bar dimly (iOS 7 takes care of this for you).

In this case, when the iPad split view controller is visible in the master view controller, a navigation bar is shown there (with the title), and it looks better to have that space visible in the detail view controller right next to it.

Depending on what is behind the translucent bar, the visual effect varies. When it’s a map that’s scrollable, in many ways each part of the map is the same so placing it behind the translucent bar is fine (and suggested).

When you’re loading a web page as in this case, you may not know what is going to be seen (the format of the weather page is not under your control, for example), and in a case such as that, place the web view lower down so it is not shown behind the navigation bar. That’s what happens here: 64 = status bar (20) + navigation bar (44).

The web view preview in Xcode.

6Drag in an Activity Indicator view from the Library pane and center it in the view.

Because these pages can be large and take some amount of time to download, you want to have some kind of Activity Indicator view to let the user know that the application is still running but busy, as opposed to frozen.

As you can see by looking at the Document Outline, both the web view and Activity Indicator view are siblings — and subviews of the view. It’s important that both are siblings, and that the Activity Indicator view is below the web view in order for it to display. (Remember the Last-One-In-Is-On-Top principle when it comes to subviews.) If that’s not the case, rearrange the views in the Document Outline.

7Switch to the Size inspector in the Utility area using the Inspector selector.

Then use Editor→Align→Horizontal Center in Container and Editor→Align→Vertical Center in Container to center the activity indicator.

8Close the Utility area and select the Assistant from the Editor selector in the toolbar.

If the EventPageController.m implementation file isn’t the one that’s displayed, go up to the Assistant’s Jump bar and select it.

9Control-drag from the web view in either the Canvas or the Document Outline to the EventPageController class extension and create an IBOutlet named eventDataView.

Control-drag from the Activity Indicator view to the EventPageController class extension at the top of the file and create an IBOutlet named activityIndicator.

10Working within the Document Outline, control-drag from the web view to the Event Page controller, and then select Delegate from the Outlets menu that appears.

This will make EventPageController the web view delegate.