How to Set Up a WeatherController in the Main_iPad.storyboard file for Your iOS App

By Jesse Feiler

You should add a new custom view controller to your iOS app before you proceed to these steps. You still need to tell the storyboard that you want it to load the new custom view controller rather than a UIViewController. Follow these steps:

1In the Project navigator, select Main_iPad.storyboard and, in the Document Outline, select View Controller – Weather in the View Controller – Weather Scene.

The Weather View controller is selected on the canvas.

2Open the Utility area and then click the Identity Inspector icon in the Inspector selector bar to open the Identity inspector in the Utility area. Choose WeatherController from the Class drop-down menu (replacing UIViewController) in the Custom Class section.

Doing so means that, when Weather is selected in the Master View controller, WeatherController will now be instantiated and initialized and will receive events from the user and connect the view to the model.

3Drag in a web view from the Utility area’s Library pane and position it to fill the Weather controller's view.

In iOS 7, part of the focus on content includes using the full screen. Make certain that the toolbar is translucent so that the web view can be seen dimly through it when the app runs.

You may want to use a UIWebView to display the weather information. This makes sense because you’ll be using a website to display the weather.

The UIWebView class provides a way to display HTML content. These views can be used as the Main view, or as a subview of another view; wherever they’re used, they can access websites.

4With the web view selected, use the Editor menu to pin it to the superview by choosing

Editor→Pin→Leading Space to Superview

Editor→Pin→Trailing Space to Superview

Editor→Pin→Top Space to Superview

Editor→Pin→Bottom Space to Superview

You need to set up two outlets: one to the web view so that WeatherController can tell the web view what website to load and a second one to the toolbar so it can place the button there.

5Close the Utility area.

Select the Assistant from the Editor selector in the Xcode toolbar.

6If the WeatherController.h file isn't the one that's displayed in the Assistant editor, go up to the Assistant’s Jump bar and select it.

Make sure you double-check this.

7Control-drag from the web view (either on the Canvas or in the Document Outline) to the WeatherController interface.

Create an IBOutlet named weatherView.

8Control-drag from the web view in the storyboard Canvas (or in the Document Outline) to the WeatherController object in the Document Outline and then choose Delegate from the Outlets menu that appears.

This illustrates what you can do with all this dragging either on the Canvas or in the Document Outline.

You must set WeatherController to be a delegate of the view, but you can do so either using code or using the storyboard steps described here. If you have a tendency to forget to connect the delegate, you may want to pick one technique to do consistently.

You still need to connect the toolbar to the DetailViewController, the WeatherController’s superclass. You take care of that in the next step.

9Select the Standard editor in the Editor selector on the toolbar, select Weather Controller in the Document Outline, and open the Connections inspector using the Inspector selector.

You could also right-click or Control-click WeatherController in the Document Outline to get a similar menu.

10Drag from the toolbar Outlet in the Connections inspector to the toolbar in the Document Outline.

You have to use the Document Outline because the web view is on top of the toolbar on the canvas so you can’t see it. You didn’t need to create the toolbar Outlet because it had already been created along with UIViewController. The idea here is that you can use the same click-and-drag technique you used to create an outlet to modify which object an existing outlet connects to.