So many ways!

There are several ways to get images onto your display. The two I find I’m using the most are calling an image from the web, and using an image from your resource directory. Below are two snippets that I find useful to have within your snippet collection.

Snippet 1: Getting an image from the web

• The image link I’ll be using in the first example is: http://farm5.static.flickr.com/4098/4911106000_9c3a16bb59.jpg

// ----------------------- .h ------------------------
...
UIImageView *imgHolder;
...
@property(nonatomic, retain) IBOutlet UIImageView *imgHolder;

// ----------------------- .m ------------------------
// PART 1 - update url of path to the image
// PART 2 - update the variable reference to the UIImageView object
// -----------------------------------------------

// ===== PART 1 =====
NSString *imgURLpath = @"http://farm5.static.flickr.com/4098/4911106000_9c3a16bb59.jpg";
UIImage *imgURL = [[UIImage imageWithData: [NSData dataWithContentsOfURL: [NSURL URLWithString: imgURLpath]]] retain];

if (imgURL != nil) { // Image was loaded successfully.
	// ===== PART 2 =====
	[imgHolder setImage:imgURL];
	// ===== PART 2 =====
	[imgHolder setUserInteractionEnabled:NO];
	[imgURL release]; // Release the image now that we have a UIImageView that contains it.
}

Snippet 2: Getting an image from the resource folder

• The image I’ll be using is:



• The image above will need to be added to your applications resource folder. Note: Don’t forget to check off “Copy items to destination group’s folder. Unless that’s not your style”

	// ----------------------- .h ------------------------
	...
	UIImageView *imgHolder;
	...
	@property(nonatomic, retain) IBOutlet UIImageView *imgHolder;

	// ----------------------- .m ------------------------
	// PART 1 - create an image object
	// PART 2 - update the variable reference to the UIImageView object
	// -----------------------------------------------

	// ===== PART 1 =====
	// note: the image in use should be in your resource folder
	NSString *imgName = @"4911106000_9c3a16bb59.jpg";
	UIImage *myImg = [UIImage imageNamed:imgName];

	if (myImg != nil) { // Image was loaded successfully.
		// ===== PART 2 =====
		[imgHolder setImage:myImg];
		// ===== PART 2 =====
		[imgHolder setUserInteractionEnabled:NO];
		[myImg release]; // Release the image now that we have a UIImageView that contains it.
	}
	

Learning Objective-C coupled with the Interface Builder, I found that using a UIImageHolder, or UITextLabel, or even the UIScrollBar came more and more simple each time I used them. I had my laptop with a full battery, a fresh piece of paper to scribble on and I was ready to tackle a Navigation-based Application.

Now this wasn’t a hard feat, but it wasn’t an one easy either. I feel I have a good foot in the door with this, but far from a “pro” status.

Why so simple?

I wanted to keep things simple here. The basis for this tutorial is to quickly show how to build a Navigation-based Application that does no more than load a view when clicking on a cell.

I’m not sure if this is the best way to do it, and in more complex projects this may not prove to be resourceful. However for getting started, for me this did the trick!

Step 1

Go ahead and create a new Table View Application within xCode

Step 2

Create a few controller classes for our views to work with. For this tutorial I created three.

1. SubViewControllerOne
2. SubViewControllerTwo
3. SubViewControllerThree

note: that you need both .m and .h files

Next create the nib, or view files to work along with the controllers

1. SubViewOne.xib
2. SubViewTwo.xib
3. SubViewThree.xib

I understand that at the time when creating a controller, you also have the option to create a nib file at the sime time. I choose not to do this because of how Xcode names it’s nibs. for example “SubViewControllerOne” controller would have a nib file called “SubViewControllerOne” which is fine, however because my controller contains the word “controller” that could lead to confusion down the road. It also doesnt stick the nib file in the Resource folder but rather the class folder. There is no right or wrong answer here, just whatever makes you sleep better at night I suppose.

By now your classes and resource folder should look like the following

note: I subgrouped my sub view controllers. Again personal preference.

Step 3

We need to link our nib files to their controllers, so open up each nib file and assign the File Owner to the correct controller

Then ctrl+click on the File Owner delegate and drag the blue line to the view - to link up the view.

While we’re at it we might as well put a label on our view so we know that indeed the view is being loaded.

Step 3

Rinse and repeat step 2 for the other two nib files

Step 4

Alright with everything linked up and ready to go, we can dive into some code! Most of, if not all the programming we’re going to be using will be within the RootViewController class. Go ahead and open RootViewController.h

We’re not going to do a whole lot in here, however to load in and out different views, depending on the cell, I plan to store all this within an NSMutableArray that will hold a NSDictionary object. Let’s declare the NSMutable array within the RootViewController.h file.

Your RootViewController.h should now look like this

RootViewController.h

@interface RootViewController : UITableViewController {

	NSMutableArray *views;
}

@property(nonatomic, retain) IBOutlet NSMutableArray *views;

@end

Next head over to RootViewController.m and let’s add some code. First off it’s important we include all the view controllers we plan to use as well as synthesize the view object

#import "RootViewController.h"
#import "SubViewControllerOne.h"
#import "SubViewControllerTwo.h"
#import "SubViewControllerThree.h"

@implementation RootViewController
@synthesize views;

...

Next we call the

-(void) awakeFromNib {...}

function and start adding our NSDictionary objects to the view. The NSDictionary will hold to properites:

1. @title - Title you see at the top of the view
2. @controller - The controller object

-(void) awakeFromNib
{
	views = [[NSMutableArray alloobjc] init];

	// ============================== CELL 1 ==============================

	//init the view
	SubViewControllerOne *viewOne = [[SubViewControllerOne alloobjc] init];

	// value - key pairing
	[views addObject:[NSDictionary dictionaryWithObjectsAndKeys:
					  @"cell 1",	@"title",
					  viewOne,		@"controller",
					  nil]];

	[viewOne release];

	// ============================== CELL 2 ==============================

	//init the view
	SubViewControllerTwo *viewTwo = [[SubViewControllerTwo alloobjc] init];

	// value - key pairing
	[views addObject:[NSDictionary dictionaryWithObjectsAndKeys:
					  @"cell 2",	@"title",
					  viewTwo,		@"controller",
					  nil]];

	[viewTwo release];

	// ============================== CELL 3 ==============================

	//init the view
	SubViewControllerThree *viewThree = [[SubViewControllerThree alloobjc] init];

	// value - key pairing
	[views addObject:[NSDictionary dictionaryWithObjectsAndKeys:
					  @"cell 3",	@"title",
					  viewThree,	@"controller",
					  nil]];

	[viewThree release];
}

Step 4

Ok cool, we’re getting somewhere. We’ve now loaded our views array with Objects that will load a view as well as create a title, next we have to modify how many rows there will be, what the title is, and what view is loaded.

First start off by stating how many rows are within the table. Locate this function and modify it. All that’s going on is that you’re specifying how many objects are in your view array, which should equal the amount of rows needed.

// Customize the number of rows in the table view.
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    [views count];
}

Next let’s get the titles in place. Find this function and modify it

// Customize the appearance of table view cells.
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {

    static NSString *CellIdentifier = @"Cell";

    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[[UITableViewCell alloobjc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }

	// Configure the cell.
	cell.textLabel.text = [[views objectAtIndex:indexPath.row] objectForKey:@"title"]; 

    return cell;
}

And finally, let’s load in the appropriate view depending on the cell being clicked. Modify this function’

// Override to support row selection in the table view.
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {

    // Navigation logic may go here -- for example, create and push another view controller.
	// AnotherViewController *anotherViewController = [[AnotherViewController alloobjc] initWithNibName:@"AnotherView" bundle:nil];
	// [self.navigationController pushViewController:anotherViewController animated:YES];
	// [anotherViewController release];

	UIViewController *targetViewController = [[views objectAtIndex:indexPath.row] objectForKey:@"controller"];
	[self.navigationController pushViewController:targetViewController animated:YES];
}

Step 5

We’re almost there! Just one (well 3) minor things. It would be nice for the user to get back home. So let’s create the functionality for that. You will need to do this in all 3 of your viewController classes.

Open up SubViewControllerOne.m and replace the function as well as create the other function seen below

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
	self.navigationItem.rightBarButtonItem = [[[UIBarButtonItem alloobjc] initWithTitle:
	    @"HOME" style:UIBarButtonItemStylePlain
	    target:self
		action:@selector(goHome:)] autorelease]; //auto released memory

    [super viewDidLoad];
}

-(void)goHome:(id)sender{
	NSLog(@"Go Home!");
	[self.navigationController popToRootViewControllerAnimated:YES];
}

Be sure to do this in all three of your ViewControllers