Now that you have the screen setup, you need to make your controls available to your code-behind page. To do this, you need to add outlets. When we add outlets, MonoDevelop will create properties for them, which makes them available in the code, just like when you create controls in ASP.NET or a WPF application, etc. The difference here is that with CocoaTouch, those properties aren't created until you expose the controls through outlets.
To add the outlets, go to the Library Window, select the Classes tab at the top, and then from the drop down, select MainNavigationView. Then select the Outlets tab down below. Click the + button, which will add an outlet, then double click on it to rename it. Make the following outlets:
- btnLocalBrowser
- btnWebBrowser
- navMain
Your Library Window should now look like this:
Next, we have to wire those outlets up to our controls. In the Document Window make sure that File's Owner is selected. File's Owner represents the file or class that "owns" this xib file. In this case it is our MainNavigationView class, which is what we created our outlets in.
To wire up our outlets, drag them from the Connections Inspector Window onto the item you want to wire them up to as shown here:
You can drag them onto either the control in the Document Window, or the designer window.
At this point, the first screen finished in Interface Builder. Save your work and go back to MonoDevelop.
Add another View Interface Definition with Controller, like before, but name it "WebBrowserView." This is the screen that will be the web browser.
After you've created it, double-click on it to open it up in Interface Builder, and let's create put our controls onto it.
First, since this is going to be under a Navigation Controller, let's have Interface Builder simulate the top bar space being taken up by the navigation. To do this, view the Attributes Inspector and under Simulated Interface Elements, change the Top Bar to "Navigation Bar:"
Next, drag some Rounded Rect Button controls and a Text Field to our view, to create the browser navigation bar, change the buttons' label text and resize the controls so it looks approximately like this:
Once you've got that together, add a Web View:
Resize it so that it takes up the rest of the view:
Next, add an Activity Indicator control (later, we'll set this to animate when pages are loading):
In the Attributes Inspector, set the Busy Indicator to Hide When Stopped, so that it'll only show up when we tell it to animate:
Also, since we're making a web browser, let's modify the keyboard to make it easier for our users to enter in URLs. Select the text field and in the Attributes Inspector class, change the Keyboard to "URL," and change the Return Key to Go:
Once you have all the controls on there, we're going to create outlets for them, just as we did for the other screen. Make sure that your WebBrowserView class is selected in the Library Window and create the following outlets:
- btnBack
- btnForward
- btnGo
- btnStop
- imgBusy
- txtAddress
- webMain
Your class should now look like this:
Then wire them up to the appropriate controls:
- btnBack to "<" Button
- btnForward to ">" Button
- btnGo to "Go" Button
- btnStop to "x" Button
- imgBusy to the Busy Indicator
- txtAddress to the Text Field
- webMain to the Web View Control
Your connections should look like this:
All right, we're all finished up with Interface Builder for our Web Browser screen. Let's go write some code. Save your work and switch back to MonoDevelop.
