Introduction to MonoTouch Storyboard Tab Bar Controller with Navigation Controller Part 2 of 2

In Part 1 of my blog posting I explained how to get a Storyboard Tab Bar Controller app up and running in MonoDevelop.  If you haven't read Part 1 yet - I highly recommend you do so your not lost.

For those of you that like Screen Casts - I've uploaded video on how to do these steps here.

In this posting I'm going to explain how to get a Navigation Controller added to the test project along with adding three new views hooked into the Navigation Controller to go back and fourth between.  This is along posting like the prior blog post so I recommend getting some lunch and a soda prior to reading this.

In MonoDevelop I'm going to add three new ViewController classes.  I'm going name them Page1ViewController, Page2ViewController, and Page3ViewController.  I'm going to use the same method as described in the previous posting using File -> New -> File from the MonoDevelop toolbar and selecting MonoTouch and iPhoneViewController.  Next to do some spring cleaning I'm removing the extra XIB files Page1ViewController.XIB, Page2ViewController.XIB, and Page3ViewController.XIB.   Finally I'm going to modify the Constructor method signature for these three new classes to add my integer pointer to the signature.  You should have something in your project similar to what's displayed in Figure 1.

Figure 1:  Page3ViewController constructor signature modified

Make sure you modified all three's Constructor signatures before moving on.  Now that we have some View Controllers for our new views let's add them to our GUI.  To do this we need to open our StoryBoard up in XCode's Interface Builder by double clicking on the MainStoryBoard.storyboard file.

There are several ways to do the next few steps, I'm going to use the way I used to do this using Interface Builder 3.0 prior to it's marriage to Xcode.  While I'm sure someone will argue there are more efficient ways to do this in Xcode 4.0, this is the way I'm comfortable doing it.

In XCode I'm gong to drag out a new ViewController from the toolbox located in the lower right hand corner.  I should now have an empty ViewController window in my GUI designer with no lines drawn to it, etc.   In Figure 2 I highlighted the new ViewController along with where it shows up on the left hand side of the GUI Design area.

Figure 2:  New ViewController added to the GUI design area highlighted

Next I'm going to change the new ViewController's class to inherit from Page1ViewController.  This should be familiar as I went over this in the previous blog post.  With the ViewController highlighted I'm going to select the identity inspector in the upper right hand corner of XCode and under Custom Class I'm going to select Page1ViewController from the pull down list as shown in Figure 3.

Figure 3:  Setting ViewController class to Page1ViewController from the identity inspector

We now have a Page1ViewController out in our GUI area not connected to anything (no lines drawn to it).  I would like to have Page1ViewController be the first view that links to Page2ViewController and Page3ViewController.  We need a Navigation Controller to do this.  Select Page1ViewController in the GUI design area.  It's critical to make sure it's the only thing selected (it should be highlighted in blue).  Next select Editor ->  Embed In -> Navigation Controller from the Xcode Toolbar menu as shown in Figure 4.

Figure 4: Embedding Page1ViewController into a Navigation Controller

It's slick - you should see a Navigation Controller pop out with some cool Core Animation and it should now be hooked into Page1ViewController.  On top of this we now have a Navigation Bar at the top of both the Navigation Controller and Page1ViewController as shown in Figure 5.

Figure 5:  new Navigation Controller hooked to Page1ViewController

Now it would be nice if our Tab Bar would show up on our Navigation Controller and Page1ViewController views.  To do this we need to configure them to include the Tab Bar in there view.  This will reserve the area on the View so we don't drag any controls into the View in that area by accident.  Select Page1ViewController and select the Attribute inspector from the upper right hand part of Xcode.   From the list of Attributes change the Bottom Bar to Tab Bar from the pull down list.  It will change the bottom of the view to a black Tab Bar strip.  Repeat this step for the Navigation Controller so it also has it's Bottom Bar attribute set to Tab Bar.

Figure 6:  switching the Bottom Bar attribute to Tab Bar on Page1ViewController

Currently our Navigation Controller is NOT connect to our Tab Bar Controller.  Because of this, if we were to Save and try to build this application we can't access the Navigation Controller or Page1ViewController.  To fix this we need to connect our Navigation Controller to the Tab Bar Controller.  Select the Tab Bar Controller in the GUI Designer area  (make sure it's hight lighted blue) and control drag from the Tab Bar Controller to the Navigation Controller.  Select View Controller under Relationship Segue from the pop-up window as shown in Figure 7.

Figure 7:  connecting the Tab Bar Controller to the Navigation Controller

As you probably figured out we now have a line drawn between the Tab Bar Controller and the Navigation Controller.  Xcode was nice enough to add a Tab Bar Item to our Tab Bar on our Navigation Controller called Item.  Let's change the name of it to "Foo" for our testing purposes.  To do this click on the Tool Bar item in the Navigation Controller.  From the Attributes inspector change the Title to Foo as shown in Figure 8.

Figure 8:  Changing Tool Bar Item title to Foo

I like to test my changes from time to time to make sure I didn't screw up anything in my application.  This is a great time to test all these changes before moving forward.  In Xcode use File -> Save and then XCode -> Quit Xcode to go back to MonoDevelop.  From MonoDevelop Star Debugging the project.  You should now have 4 Tool Bar items in the simulator including our new item named Foo.  When selecting our Foo item you will notice our new Page1ViewController pop's up and you can see a blank View with the Navigation Bar on it as shown in Figure 9.   This has all been done without writing any code so far to push or pop views from our View Controllers.  VERY COOL!!

Figure 9:  iPhone Simulator with new Page1ViewController's view selected

Now we are sure we are on the right track let's head back to Xcode and add in some more views to connect our Page2ViewController and Page3ViewController classes to.  Close the iPhone Simulator and double click on your MainStoryboard.board file to open it up in XCode's Interface Builder.

To keep track of which ViewController is which I recommend adding a title to the Navigation Bar on Page1ViewController.  To do this double click on the Navigation Bar and give it a title of Page 1.

Next let's drag two more ViewController objects onto the GUI Designer.  Now that we have two new ViewController objects we need to change there classes to be Page2ViewController and Page3ViewController so we can access any objects in there view's via code.  To do this select the first new ViewController and click the identity inspector and change the Custom Class drop down list and select Page2ViewController.  Rinse and repeat this step for the other one but this time select Page3ViewController. These are the same steps we did in Figure 3 of this posting.

Let's also add the Tab Bar  to Page2ViewController and Page3ViewController.  Again select each one and from the Attributes inspector change the Bottom Bar to Tab Bar.  This is the same steps we did in Figure 6 of this posting.

From here on is the meat of this posting - i.e. setting up the various views to "push" and "pop" between each other with NO CODE.

Let's add a button so we can forward between Page1ViewController and Page2ViewController.  From the Toolbox drag a Bar Button Item to the right hand corner of the Navigation Bar on Page1ViewController.  You should now have a button named Item in the Navigation Bar.  I recommend renaming that button to Page 2 as when we click on the button we want Page2ViewController's view to be displayed.  You can do this by double clicking on the Bar Button and renaming it Page 2.  At this point in time your Page1ViewController would look similar to Figure 10.

Figure 10:  Added new Bar Button to the Navigation Bar of Page1ViewController

This is the trickest part of the entire process.  We need to tell Page1ViewController when the Bar Button labeled Next is clicked we want to push Page2ViewController into View.  To do this, we need to make sure we have Bar Button labeled Next selected in the GUI Designer.  You should notice it is high lighted while the rest of the View Controller is dimmed.  Control drag from the Bar Button Next to Page2ViewController and let go of your mouse.  Select Push from the Manual Segue.  Page2ViewController is now connected to Page1ViewController.  You should also notice that Page2ViewController now has a Navigation Bar just like Page1ViewController (well minus the Bar Button).  Again all this without any code so far!

Let's change the Title of Page2ViewController to read "Page 2".  To do this double click on the Navigation Bar and add the text Page 2.  At this point in time my Xcode looks like Figure 11.

Figure 11:  Page2ViewController connected to Page1ViewController in Xcode

We are almost done.  Let's drag another Bar Button Item onto Page2ViewController in the upper right corner of the Navigation Bar.  Rename the button to Page 3.  Now as we did above let's Control drag from the new Bar Button labeled Page 3 to Page3ViewController and select Push from the Manual Segue.  We should now have a Navigation Bar on Page3ViewController.  Double click in the Navigation Bar of Page3ViewController and give it a label of Page 3 as shown in Figure 12.

Figure 12:  Page 3 Navigation Bar with all view connected



At this point in time we now have Page1ViewController connected to Page2ViewController and Page2ViewController connected to Page3ViewController.  To test select File -> Save in Xcode and then Xcode -> Quit Xcode from the Xcode Toolbar.  In MonoDevelop click Star without Debugging button on the toolbar.  The iPhone Emulator should appear.  Clicking on the 4th tab bar item labeled Foo will bring up our Page1ViewController.  By clicking on the Page 2 button we will switch to Page2ViewController.  By clicking the Page 3 button we will switch to Page3ViewController.

You can click back and forth and go between all the view's without having to have written a drop of code to Push and Pop from a Navigation Controller.  I hope you can see the advantages of Storyboard's and how they can save you in writing code which ultimately will make you more efficient 

-Costoda