SAP Help Basic step by step instructions on creating your fist navigation based iphone app









Iphone Navigation based application to display simple list linked to second View

These steps build on the basic navigation iPhone app and shows how to add a second view. This second view is displayed when a selection is made from the root list screen.

Step 1 - Create the basic navigation-based application
Implemetment the following steps describing how to create a basic Navigation-based iPhone app

Step 2 - Start the interface builder for MainWindow.xib
Find the MainWindow.xib file in the root directory and double click on it, this will open up the Interface Builder. Now chose the menu option File->New and select the view icon from the template menu, ensuring that the 'Cocoa Touch' icon is also selected on the left.


Step 3 - Add a label to the View
Drag the label element from the library window and give it some text such as 'Second View'. If the library window is not already displayed it can be accessed via menu option Tools->Library.


Step 4 - Save the new View
Next step is to save the newly created view ensuring that it is stored in the correct project folder, which it almost never defaults too. First enter the name as View2 and change the folder to Nb_List or what ever you called your project. I have found the best way to do this is to use the search box and select the correct folder from the results.


Now press save.


You should get a popup asking you to add the view to the project, tick the checkbox and press the add button.


Step 5 - Create a view controller
Now we need to create a view controller to allow our code access the new view (View2). To do this leave the interface builder and return to xcode. Now select menu option File->New File, select the 'UIViewController subclass' icon and press next. Call is something like View2ViewController, you can actually call it anything but as the root view is called RootViewController it make sense to stick with this naming convension. Also ensure the create View2ViewController.h box is checked and press Finish.


Step 6 - Organise files
At this point the .m and .h files have probably been created in the Resources folder so feel free to move them into the Classes folder along with all the other .h and .m files.

Step 7 - Reference and Declare a variable for the new view within your root view
Right its time to do a bit of coding, not too much though so dont panic:-). First open the RootViewController.h file which should look somthing like this.

Now add the following code which first imports the View2 controller into the root controller and then declares a variable of type View2ViewController.

//
#import <UIKiT/UIKit.h>
#import "View2ViewController.h"

@interface RootViewController : UITableViewController {
	View2ViewController *view2VC;
}

@property(nonatomic,retain) View2ViewController *view2VC;

@end


Step 8 - Update RootViewController.m to call new view
Next open the RootViewController.m file and add the synthesize command directly under the @implementation statement. This creates the getter and setter methods for the property we declared in the .h file.

@implementation RootViewController
@synthesize view2VC;

Next find the 'didSelectRowAtIndexPath' function. This is where the user action of selecting a particular row is processed i.e. what action to do next or which view to display. Once you have found this function you need to first remove the /* and the */ to un comment it


Now add the below code to it. indexPath.row references the actual line the user clicks on so if you want this to work for multiple lines you need to add the same entry for each line of the navigation list, remembering that it starts at 0. i.e. first line is indexPath.row == 0 and second line is indexPath.row == 1 etc...

// 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 alloc] initWithNibName:@"AnotherView" bundle:nil];
	if (indexPath.row == 0) {
		
   	  if(self.view2VC == nil) {
		View2ViewController *View2 =
                  [[View2ViewController alloc] initWithNibName:@"View2" bundle:[NSBundle mainBundle]];
		self.view2VC = View2;
		[View2 release];	
	  }
     	  [self.navigationController pushViewController:self.view2VC animated:YES];
	}	
	// [anotherViewController release];
}



Step 9 - Connect code to view
Double click on the View.xib file to open up the interface builder for this view. Select the File's Owner icon and choose menu option Tools->Identity Inspector.


Step 10 - Associate class with view
Select the newly created class (View2ViewCOntroller) from the dropdown box.


Step 11 - Create View connection
Click on the view(View2) to select it and go to menu option Tools->Connections Inspector. Now click the circle next to New Referencing Outlet, drag it to the File's Owner and let go.


The word 'view' should appear as an option, click this!


The referencing outlet should be created.


Step 12 - Save, Build and run
Right that's it. Simply save everything and Click 'Build and Go' and your App should be displayed as below. I.e. when you click on the first entry in the list 'Entry 1' the second view should be displayed.


Step 13 - Default back button
When you run the application as it stands you may notice that you can click on the left hand side of the top blue bar and it will return to the previous page.


Not very user friendly you might say but the clever bit comes if the previous page had a title, it will then create a default back button using the title for the previous page, so lets give it a try! Within the RootViewController.m file find the viewDidLoad function and change it so that it looks like this.

- (void)viewDidLoad {
    [super viewDidLoad];

    // Uncomment the following line to display an Edit button in the navigation bar f..
    // self.navigationItem.rightBarButtonItem = self.editButtonItem;
	self.title = @"Example List";
}



Step 14 - Save, Build and run
Save everything and Click 'Build and Go' again and notice the differences. The first one should be that there is now a tile on the first screen (root view)


Then when you select an item you should notice the automatically created back button