Create a view

August 4, 2008    Intro Programming

So today we will create our first view. This takes over where Create a new class left off. So you can grab the source code from there if you need to. I also edited the arrows for the rows by following this tutorial I created.

Also in the DataController.m class I am changing the names to something more meaningful.

[menuArray addObject:[NSDictionary dictionaryWithObjectsAndKeys:
                          NSLocalizedString(@"Browse", @""), @"title",

    [menuArray addObject:[NSDictionary dictionaryWithObjectsAndKeys:
                          NSLocalizedString(@"Options", @""), @"title",

Now we want to create a new view. So double click on RootViewController.xib and it will launch IB (Interface Builder). We don’t need to edit or change anything here, it was just a quick way of loading IB up. So now lets go to File -> New and choose a View.

Now to make things simple, make sure the Library is opened by choosing Tools -> Library. Then select the Inputs & Values and drag a label over to the view and drop it there. So now our view looks like this

Now we want to save the view as a .xib file which for some reason Apple calls a NIB. I don’t know why the file extension is different.

So choose File -> Save. I am doing this just for the Browse option, so I am calling this the BrowseView. Make sure you save it in the directory that you use for your project. If you do it will prompt you if you want to add it to the project and make sure you do.

Now if you view Xcode it will save it in the right hand panel of the left hand menu. I like to drag the BrowseView.xib into the Resources directory.

Now we need to add a new controller to the project. Remember in MVC every view must have a controller. A controller will show the view and handle everything that is on the view. So if you add a button, the controller will handle what that button does when someone clicks it.

So in Xcode choose File -> New File and select the UIViewController subclass. You will want to give it the name of BrowseViewController.m

Now that the new class is in your project lets write some code!

Open up DataController.m and look for the createData function. Now we listed 2 nils in our dictionary, we want to change this but just for browse right now. So now the createData looks like this.

-(void) createData {
    menuArray = [[NSMutableArray alloc] init];

    BrowseViewController *controller = [[BrowseViewController alloc] initWithNibName:@"BrowseView" bundle:nil];
    [menuArray addObject:[NSDictionary dictionaryWithObjectsAndKeys:
                          NSLocalizedString(@"Browse", @""), @"title",
                          controller, @"view",
    [controller release];

    [menuArray addObject:[NSDictionary dictionaryWithObjectsAndKeys:
                          NSLocalizedString(@"Options", @""), @"title",

So you can see above we init the browseController

In the same file we need to include the new controller so at top put

#import "BrowseViewController.h"

Open up RootViewController.h

We want to import the new class we just created. So you want to top to look like

#import "DataController.h"
#import "BrowseViewController.h"

Now we need to init the controller in the class So your class declaration should look like this with the new BrowseViewController in it.

@interface RootViewController : UITableViewController {
    DataController *dataController;
    BrowseViewController *bvController;  // added this

@property (nonatomic, retain) DataController *dataController;
@property (nonatomic, retain) BrowseViewController *bvController;  // added this


Now open up RootViewController.m and add a synthesize for the new controller.

@synthesize dataController, bvController;

Now look for the function didSelectRowAtIndexPath. It should be blank now make i look like this

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
     // Navigation logic
     NSDictionary *itemAtIndex = (NSDictionary *)[dataController getItem:indexPath.row];

     if ([itemAtIndex objectForKey:@"view"] != nil) {
         self.bvController = [itemAtIndex objectForKey:@"view"];

         [self.navigationController pushViewController:self.bvController animated:YES];

So there we check if the view is nil, if it is not nil then load the view. So when we are ready to build our application we can click browse and it will go to that view but if we click options it does nothing.

Now we want to release the memory

- (void)dealloc {
    [dataController release];
    [bvController release];  // added this
    [super dealloc];

Now that all the code is done, we have to connect things in IB. So double click on the BrowseView.xib file and IB will launch. Now make sure you have the File’s Owner selected and in the Class Identity (Tools -> Identities Inspector) make sure the class is BrowseViewController is selected. It should be listed in the drop down.

Now select the View and make sure View Connections is open (Tools -> Connections Inspector)

You will just see this

So click on the circle on the left of New Referencing Outlet and hold the click down. As you move your mouse around move your mouse over the File’s Owner

So when you release the mouse over File’s Owner. A box will popup to choose View. Make sure you click on the View. So now it will look like this

Now save your xib. File -> Save and in Xcode build and go. So the main screen looks like

If you click on browse you should get

Still nothing happens if we click on Options which is what we wanted. As always you can grab the source here.

comments powered by Disqus