XCode 4 IPhone Mountains of the USA Tutorial: Lesson 1 – Setup the App

|| Overview || Lesson 2 ==>

This is the first lesson for our Mountains of the USA tutorial. The basic goal for this lesson is to create a NavigationController to manage the two screens.

We will not create the second screen where we will show the map for the mountain but we are set up to add the screen in a future lesson.

Also we are going to add a search button plus the method to handle the touch up inside event for the search button. We will test that code out before going on to the next lesson using NSLog to the console window.

Source Download
Completed XCode 4 Project

Resources
A source that is very helpful in creating this tutorial is Beginning iPhone 4 Development: Exploring the iOS SDK.
Step 1: Create a Window-Based Application Project

To start off create a Window-Based Application project for IPhone in XCode. This is a bare bones template.

You will add the UINavigationController in the next step.

I named my project USAMountainsTutorial01.

Choose IPhone and we are not using Core Data or Include Unit Tests so uncheck if necessary.

Company identifier can be anything for testing in the simulator but will need a proper identifier from your Apple developer account to test on an IPhone. This is beyond the scope of this tutorial so we will just use the simulator. However sound advice is to test on all target devices often. I have tested all these tutorials on my Verizon IPhone 4.

Step 2: Create UIViewController for the Main View

The next step is to add a UIViewController. In the project navigator, select the project group name with the folder icon and choose File and then New File… with the main or shortcut menu.

You will see this choose a template dialog window. Select the UIViewController and choose Next.

Leave the subclass as UIViewController. Uncheck “Targeted for IPad” and check “With XIB for user interface”. Choose Next.

I named the file MainViewController and placed it in the folder for the project and in the group created by XCode 4. Both are named USAMountainTutorial01. Note the “Add to targets:” bears the same name USAMountainTutorial01 and we leave that checked. Targets represent the data for where the app will run and the default will handle the simulator for us.

If your new files end up in a different place than you expect, you can move files with drag and drop in the project navigator pane.

[ad name=”Google Adsense”]
Step 3: MainViewController.h

Select the MainCiewController.h in the project navigation window on the left.

Add line 5 to define the IBAction startSearch method you will use for your Search button.

#import <UIKit/UIKit.h>
@interface MainViewController : UIViewController
{
}
-(IBAction) startSearch:(id)sender;
@end

Step 4: MainViewController.m – Add the startSearch method
Select the MainViewController.m in the project navigation window on the left and add lines 33 and 49 to 53.
Line 33 provide a dynamic updating of the top navigation bar for the UINavigationController. An alternative is to set this in the UI properties for this view.
An output to the console window using NSLog on line 52 is all we need for the search button at this point.
Line 49 is a way to provide navigation in your code window. XCode 4 provides a navigation bar above the code and the these pragma marks will appear in the list. As code builds up, you can put related coded together under a pragma mark and use the navigation bar to quickly locate the code versus scrolling. I like to have a pragma mark for the IBAction methods because often I am thinking what happened when the user did this or that in the UI and so all the code is in that one group. We will add more pragma marks for the table view, network communication and XML parsing in later tutorials.
#import "MainViewController.h"

@implementation MainViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)dealloc
{
    [super dealloc];
}

- (void)didReceiveMemoryWarning
{
    // Releases the view if it doesn't have a superview.
    [super didReceiveMemoryWarning];

    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    [self setTitle:@"USA Mountains Lesson 1"];
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
}

- (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation
{
    // Return YES for supported orientations
    return (interfaceOrientation == UIInterfaceOrientationPortrait);
}

#pragma mark - UI Interface
-(IBAction) startSearch:(id)sender
{
    NSLog(@"startSearch");
}

@end

Step 5: USAMountainsTutorial01AppDelegate.h – Add the UINavigationController Object
Now you can update the application delegate header to work for a Navigation Controller by adding line 7 shown below. The object name is navController and we will see that when we tie it in using the Interface Builder.
#import <UIKit/UIKit.h>

@interface USAMountainsTutorial01AppDelegate : NSObject <UIApplicationDelegate> {

}
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UINavigationController *navController;
@end

Step 6: USAMountainsTutorial01AppDelegate.m – Add the navController object to the Application Window
For the implementation, add the highlighted lines 4 and 9 below. Simply put, the root controller for the application window will be our navController object.
The above steps were done first so we work on the application interface so these names startSearch and navController will be available to connect.
#import <UIKit/UIKit.h>

@synthesize window=_window;
@synthesize navController=_navController;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.
    self.window.rootViewController = self.navController;

    [self.window makeKeyAndVisible];
    return YES;
}

- (void)dealloc
{
    [_window release];
    [_navController release];
    [super dealloc];
}

Step 7: MainWindow.xib.m – Add a NavigationController Object
Open the MainWindow.xib file and drag a Navigation Controller object from the object library to the design window. I like placing it to the left but you can place it anywhere.

This is how the interface window will appear.

Step 8: MainWindow.xib.m – Set Navigation Controller View to MainViewController
Select the View object in the Navigation Controller:

Open the Identity Inspector and change the class from UIViewController to MainViewController. MainViewContoller is a subclass of UIViewController when you created it in Step 2.

Step 9: MainWindow.xib.m – Connect the NavigationController Object To The Application Delegate
Show the Utilities panel on right which is a small group of icons labeled View on the top right corner of XCode 4.
Click the Connections Inspector in Utilities and the NavigationController icon in the related files panel on left. Now you can drag from the “New Referencing Outlet” to the USAMountainTutorial01AppDelegate icon in the related files panel on left and unclick over it. Then select navController which is the name we gave our NavigationController in the USAMountainTutorial01AppDelegate.
Here is what the Connections Inspector with the NavigationController selected looks like if you succeeded.

Step 10: MainViewController.xib – Add the Search Button
Find the Round Rect Button icon in the objects panel in bottom right.

Drag from the objects window a Round Rect Button to the view.

You can select the Search button. Then select the Attributes inspector in the top right row of icons and change the title to Search. You could also do that by clicking into the button.
Then select the Size Inspector in the top right row of icons to match my size and position which x=20, y=60, Width=280 and Height=32.
[ad name=”Google Adsense”]

Step 11: MainViewController.xib – Connect Search Button to the startSearch Method
Select the Connections Inspector in the top right row of icons and drag from the Touch Up Inside to the File Owner’s Icon in the Files panel on the left. Release the mouse and select the startSearch method. This is what the Connections Inspector for the Search button looks like when you are done.

Step 12: Test In The IPhone Simulator
Now you can test using the Simulator. Use the mouse to click the Search Button to simulate a Touch Up Inside and at the bottom middle of XCode the Console window will show the startSearch method we added in step 4 on line 52 has executed.

|| Overview || Lesson 2 ==>