Create a view

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",
						  nil,
						  nil]];

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

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",
						  nil]];
	[controller release];

	[menuArray addObject:[NSDictionary dictionaryWithObjectsAndKeys:
						  NSLocalizedString(@"Options", @""), @"title",
						  nil,
						  nil]];
}

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
#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

@end

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.

August 4, 2008 · Filed Under Uncategorized

Comments

14 Responses to “Create a view”

  1. Tyten on August 4th, 2008 3:55 pm

    Love what you are doing here, it’s a great help for the community … there are so little tutorials around.
    I also have one little question: How do you make “Options” link to another view, just like you did with “Browse”? I’ve also created the controllers for that View but it’s in the code I don’t realy know what to do …

  2. mikezupan on August 5th, 2008 10:02 am

    @Tyten

    You can just pretty much follow the same steps as I did here to make a new view for options.

    Where ever I did bvController do like ovController or such and set it up in the DataController.m to load the new controller.

  3. Tyten on August 5th, 2008 12:50 pm

    oh, waw, tried again and now it worked!
    Thanks!

  4. Strangeite on August 24th, 2008 9:19 pm

    I want to echo the statement that you are doing a wonderful thing for the community. I have been following these tutorials and they have been a godsend.

    I do have one question. In experimenting with different options I have “Option” opening into a new view that contains a table. However, for the life of me I can’t get the cells in the new table to populate. I have tried creating a new array within the controller for this new table. I have also tried creating an array within a NSObject subclass and then referencing it within the controller for the table.

    Any suggestions on where I am going wrong?

  5. mikezupan on August 25th, 2008 8:14 am

    It should be the same as the mainview to populate.

    My guess is that you aren’t setting the row count for the table in

    numberOfRowsInSection

    If you want you can show me code or such and I can take a look..

    hope it helps

  6. Strangeite on August 25th, 2008 9:20 am

    Thanks. Again, you have no idea how helpful your site is for noobs like me.

    This is the code for what I am calling HollywoodViewController.m hdController is for the HollywoodDataController which contains the array just like the original DataController.

    #import “HollywoodViewController.h”
    #import “HollywoodDataController.h”

    @implementation HollywoodViewController

    @synthesize hdController;

    - (void)viewDidLoad {
    // Add the following line if you want the list to be editable
    // self.navigationItem.leftBarButtonItem = self.editButtonItem;

    HollywoodDataController *hdcontroller = [[HollywoodDataController alloc] init];
    self.hdController = hdcontroller;
    [hdcontroller release];

    self.title = @”Stupid Hollywood Data”;

    }
    - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return 1;
    }

    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [hdController getCount];
    }

    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *MyIdentifier = @”MyIdentifier”;

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:MyIdentifier];
    if (cell == nil) {
    cell = [[[UITableViewCell alloc] initWithFrame:CGRectZero reuseIdentifier:MyIdentifier] autorelease];
    cell.accessoryType = UITableViewCellAccessoryDisclosureIndicator;
    }

    NSDictionary *itemAtIndex = (NSDictionary *)[hdController getItem:indexPath.row];
    cell.text = [itemAtIndex objectForKey:@"title"];

    // Set up the cell
    return cell;
    }

  7. Strangeite on August 25th, 2008 9:33 am

    Just occurred to me that showing you the HollywoodDataController would probably be helpful. Here it is.

    #import “HollywoodDataController.h”

    @implementation HollywoodDataController

    @synthesize hollywoodArray;

    - (id)init {
    if (self = [super init]) {
    [self createData];
    }
    return self;
    }

    -(NSInteger)getCount {
    return [hollywoodArray count];
    }

    - (id)getItem:(NSInteger)index {
    return [hollywoodArray objectAtIndex:index];
    }

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

    [hollywoodArray addObject:[NSDictionary dictionaryWithObjectsAndKeys:
    NSLocalizedString(@"Stupid Data 1", @""), @"title",
    nil,
    nil]];

    [hollywoodArray addObject:[NSDictionary dictionaryWithObjectsAndKeys:
    NSLocalizedString(@"Stupid Data 2", @""), @"title",
    nil,
    nil]];

    }
    @end

  8. mikezupan on August 25th, 2008 9:38 am

    Send me the project if you can at

    mike (at) zcentric.com

    I can take a look at it better that way.. I don’t see much there that is wrong

  9. Strangeite on August 25th, 2008 9:41 am

    I will. It will be sometime this afternoon before I will have the opportunity.

  10. Click a Cell | Iphone Noob on August 25th, 2008 1:51 pm

    [...] save the file and we need to create a new view. Follow the following entry for how to do that in IB. Just follow the IB sets, you can ignore the code, we will fill that in [...]

  11. Anup Kmakhalia on December 5th, 2008 6:02 am

    I want to make navigation table view for iPhone application, for example click below link to know what i want to make.
    (i e): http://joehewitt.com/files/iphone/navigation.html#_albums

    Can anybody tell me step by step.

    Thanks

  12. chase acton on March 4th, 2009 10:36 pm

    Hello i have tried for hours and cannot figure out how to make the options link to another view. Can you please explain so a noob like me can understand. Thanks, chaseacton@gmail.com

  13. fazzo on March 6th, 2009 3:27 pm

    Hello i have the same problem. I dont no how i make the options link to another view. Can you please help me?

    Thanks iiiforum@yahoo.de

  14. James on March 6th, 2009 10:01 pm

    Hi thank you so much for this tut. i couldnt find any other tut. that actually worked. I have a question, i created the table and made it so it goes to another view but now in the new view i want to make a info button that shows a alert box. Please get back to me soon.

Leave a Reply