Let’s start out by opening up XCode and creating a new window based application from the standard iphone OS templates. Save the file to wherever you save your iphone files to and create.

Once you create and save your new window-based application, open up the classes and resources folders in the XCode folder explorer. Open up the ViewDemoAppDelegate.h and insert the following code…

//
//  ViewDemoAppDelegate.h
//  ViewDemo
//
//  Created by Mark Hazlett on 10-03-26.
//  Copyright Code Perspective 2010. All rights reserved.
//
 
#import <UIKit/UIKit.h>
@interface ViewDemoAppDelegate : NSObject
{
    UIWindow *window;
    UINavigationController *navController;
}
 
@property (nonatomic, retain) IBOutlet UIWindow *window;
 
@end

All we’re doing here is creating a UINavigationController object so that we can access it in our application delegate implementation file. Let’s go ahead and open up our ViewDemoAppDelegate.m and add the following code to the application did finish launching method.

- (void)applicationDidFinishLaunching:(UIApplication *)application
{
	//Allocate and instatiate a new UINavigationController Object
	navController = [[UINavigationController alloc] init];
 
	//Allocate and initialize a First View Controller Object
	FirstViewController *firstViewController = [[FirstViewController alloc]init];
 
	//Push the first view controller onto the view controller stack without animation
	[navController pushViewController:firstViewController animated:NO];
 
	//Some memory management
	[firstViewController release];
 
	//Make it visible
	[window	addSubview:navController.view];
 
    // Override point for customization after application launch
    [window makeKeyAndVisible];
}

The first thing we’re doing in this function is instantiating the UINavigationController that we declared in our header. We pass it an alloc and init to allocate the appropriate amount of memory for it as well as an init to initialize it properly. The next thing we’re going to do is create a new FirstViewController object. Now you may be asking what a FirstViewController object is? That’s because we haven’t created it yet. So let’s go ahead and go to “File > New File” and add a new file that’s of the type UIViewController subclass. Make sure you check the little check box that says “With XIB for user interface”. This will give you an XIB file to work with instead of producing your interface programmatically. Now that we have our FirstViewControllerObject the only thing we have to do is import the header into the ViewDemoAppDelegate. So make sure to declare #import “FirstViewController.h” at the top of your code. Now onto the rest of the code in our application did finish launching method. The first thing we do with our allocated view controller is push it onto the navigation stack. Now because this is our first view we’re pushing onto the navigation stack we want to make sure to pass “NO” to the animated parameter because we don’t want to animate the root view when it’s pushed onto the stack. Now for some memory management. Once the FirstViewController is pushed onto the navigation stack the retain count on the object moves up to 2, therefore we can perform a release on the FirstViewController object so that the retain count stays at 1. Last thing we do in this method is add the view so our window so that it’s actually visible when we load the application.

Now we’re going to get into some interface builder stuff. Let’s start by opening up our FirstViewController.xib file in Interface Builder(or by just double clicking on it). You should see just a plain white view. Now in order to transition between views we need a button to press to actually transition between views. So let’s go ahead and add a UIButton to the view. Label the button anything you would like to to transition between views. Go ahead and save that file for now(we’ll come back to it later to connect the pointers). Next we’re going to create a new file in our project that’s a subclass of UIViewController. Again we’re going to make sure that “use XIB for user interface” is selected and press create. We’re going to name this view controller “SecondViewController” as it’s the one that we transition to from pressing the button on our first view controller. Once you create the new View Controller you should see it appear on the left hand side in your package explorer. Let’s go into our FirstViewController.h and add the following code.

#import <UIKit/UIKit.h>
@interface FirstViewController : UIViewController
{
	IBOutlet UIButton *transitionButton;
}
 
- (IBAction) pushViewContoller:(id) send;
 
@end

All we do here is create an IBOutlet for the UIButton we added to the XIB file and call it transition button. Then we create an IBAction method that will get called whenever the user presses inside the UIButton. Let’s open up our FirstViewController.m implementation file and implement the IBAction method like so…

#import "FirstViewController.h"
#import "SecondViewController.h"
 
@implementation FirstViewController
 
- (IBAction) pushViewContoller:(id) send
{
	//Allocate and instantiate the second view controller object
	SecondViewController *secondView = [[SecondViewController alloc] init];
 
	//Push the secondViewController onto the navigation stack
	[self.navigationController pushViewController:secondView animated:YES];
 
	//Some memory management
	[secondView release];
}

Now as you can see, we first provide our implementation with an import of the SecondViewController.h that we created earlier. We then proceed to allocate and instantiate our SecondViewController object. This time we’re going to push it onto our navigation stack and passing the YES parameter to our animated option because this time we do want it to be be animated when we press the button. After that we just provide some basic memory management to bring the retain count of the SecondViewController object back down to 1. That’s al the necessary code we need right now, however if you run this program right now you’ll notice that if you press the button on the first view controller it won’t really do anything. So let’s open back up our FirstViewController.xib file and hook up our IBOutlet and IBAction to our button that we created. After you’re finished hooking up these actions in the File’s owner connections inspector, the file’s owner connections inspector should look something like this..

Now you should be able to run the application and press the button and see the transition to the second view controller(which will be blank unless you added something to the nib) and press the back button in the navigation controller and transition back to the first screen.

If you’re having some troubles, here is the project and all the code. Download

Also again, if you have any questions feel free to leave them in the comments section.

However, Cocos2D now sports a fancy shell script to get some Cocos2D templates up and running directly in Xcode with all the files pre-configured to start. To install these templates all you have to do is navigate to the cocos2D root directory on your filesystem using the terminal and then run this command.

./install_template.sh

You can then open Xcode and you should see the following screen ready to use.

1. Mac running the latest version of xcode – This can be found on your install disc for leopard or snow leopard.

2. Latest version of the iphone SDK – This can be found at developer.apple.com

Now we can get started. Once you have xcode and the iphone SDK installed, open up xcode(Macintosh HD > developer > Applications). Once you have xcode installed, from the menu bar select file > new project. You should see a windows like the this one.

Select window based application from the iphone application option on the left hand side of the window. Once you select the window based application, xcode will prompt you to save the project. I named my project “LabelTester” and saved it under my personal iphone projects directory. Once you save the project, an xcode window should open up and look something like this.

You should see a combination of files here in the browser in the code browser. The first should be the CoreGraphics.framework. This is just a set of files provided by Apple that have all the code relevant to the core graphics libraries in Cocoa. The second is the foundation.framework. This is the library set for the foundation framework which is basically all the classes like NSArray, NSString and other foundation objects. The next item should be LabelTester.plist. The plist, or preference list, is a set of XML attributes that control how the application is handled. For the sake of this tutorial, you won’t need to open the plist. The next item should be the LabelTester.app file, which is the executable for your application. Once your application is deployed, all files and resources in your project will be located inside your app’s .app file. The next file is the LabelTester.pch file. This file is the prefix header for your application. The LabelTesterAppDelegate.h file is the next file in the list. This file is the header file for your application delegate. This is the starting for your application, the app delegate is what’s run by your main.m file when you app is launched. The .h file is of course the header file, which is basically the interface file that the .m file will implement. The next file is of course the LabelTesterAppDelegate.m. This file is the implementation file for the app delegate header. Next is the main.m file. This file is the application launcher for your app. It basically runs the app delegate. The next file is the Main Window.xib file. Anything with a nib/xib file extension is classified as an interface builder file and you open these files in the Interface builder application. Finally, the UIKit.framework. This library is used to correspond to all the UI elements on the iphone(text fields, buttons, etc).

Let’s start by opening up our Main Window.xib to setup our interface. Start by dragging a button from the libraries window onto your main View. Rename that button by double clicking on the button and change it to say “Update Label!”. Next, grab a text field and drag it just above the button. Expand the text field to fit the majority of the screen. Select the textfield and go into the attributes tab and enter into the placeholder field, “Enter Text to update Label”. Once that’s finished, drag a label onto the main window and change the text from “label” to “Label to Update”. Once that’s done you can save the interface builder file by pressing (command + s) and switch your view back to your xcode project.

Open up the LabelTesterAppDelegate.h file and change the file to reflect the following code.

#import 
 
@interface LabelTesterAppDelegate : NSObject
{
    UIWindow *window;
	IBOutlet UITextField *textField;
	IBOutlet UIButton *button;
	IBOutlet UILabel *label;
	IBAction *updateButtonPressed;
}
 
@property (nonatomic, retain) IBOutlet UIWindow *window;
@property (nonatomic, retain) IBOutlet UITextField *textField;
@property (nonatomic, retain) IBOutlet UILabel *label;
 
-(IBAction)updateButtonpressed:(id) sender;
 
@end

The first lines inside the curly braces will declare variables that we will be hooking up in Interface builder later. After the curly braces are closed, we have these property tags. These will allow us to have access to the objects and their data in the implementation file. After that we have an IBAction method declaration. This will eventually be hooked up to our button to run every time that our button is pressed. You can think of an IBAction method as an event handler in OBjective-C. Now let’s move onto our LabelTesterAppDelegate.m file and add the following method directly below out import statement.

#import "LabelTesterAppDelegate.h"
 
@implementation LabelTesterAppDelegate
 
@synthesize window;
@synthesize textField;
@synthesize label;
 
-(IBAction)updateButtonpressed:(id) sender
{
	//allocate a string and initialize it with the data from the text field
	NSString *string = textField.text;
 
	label.text = string;
}

Basically what we’re doing here is just creating that IBAction method that we declared in our interface file. Inside that method, we allocate a string to the value of our textField.text and then set the label equal to the string that we get from the textfield. That’s all the code we’ll need for now. Don’t forget to synthesize your objects below the implementation declaration in order to have access to the data you want. If you try and run this now, the application will run but will not function because the pointers in Interface Builder are not hooked up. So let’s go ahead and do that next. Save all your xcode files and open back up your Main Window.xib file in Interface Builder.

In order to setup a pointer in Interface builder, start by clicking on the application delegate and then the connections manager should appear. Beside each of the items that you created you should see a tiny circle. For each, click on the circle and drag the pointer to each of the elements in your window. This will create a pointer to that element. Now click on the button and then open it’s connection manager. Find the “touch up inside” connection and drag that pointer to the “file’s owner” section in the library and select “updateButtonPressed” when it appears. Once this is completed, you should see the connection screen look something like this.

That’s all folks, now if you run the application and enter some text into the text field, it will update the label to whatever text you entered. To download the whole project click here.

Cheers everyone and stay tuned for part 2!

To enable the web inspector in safari, open up a terminal window(Mac HD > Applications > Utilities > Terminal) and type the following line…

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

Restart Safari and the web inspector is now enabled.

To use the safari web inspector, right click on any element in a web page and choose “inspect element”. This will bring up a section in the bottom of your browser with the web inspector.

Cheers

2. Eclipse- Eclipse is the ideal application for java development on Mac OS X. With the amount of features that eclipse offers, it’s almost impossible to skip this application if you do any level of java development. The “intellisense” that eclipse includes while you’re coding is unprecedented.

3. Photoshop/ Gimp – This is a must have for any type of website development/interface development. Whether it’s doing website mockups or drawing new buttons for your application, this is a must have.

4. Coda – I can’t speak enough good things about coda. This application has exceeded my expectations in every way possible. Whether it’s through the handy “sites” feature, or connecting to a server using the built in console, this is by far the best web development app for Mac OS X. Well worth the 100 bucks!

5.uTorrent – A very simple torrent application. Extremely easy to use and very efficient. Having the ability to select which files you want to download and which you don’t is a huge bonus.

6. Adium – A very powerful messenger application for Mac OS X. From IRC plugins, to customizing the look and feel, Adium can pretty much do it all.

7. Jing – This screen capture application hides almost out of sight in your menu bar but packs some powerful features. Jing has the ability to capture screen casts of your applications in action as well as screen shots. Great App!

8. QT Creator – From the designer’s of the famous UI toolkit QT comes their first IDE. QT Creator is a fantastic IDE for developing QT Apps. From the WYSIWYG editor to the syntax editor, great app all around.

9. Prism – Pretty cool new(ish) app from Mozilla. This application allows you to capture sites like gmail and make them into a desktop application so you don’t have to open a browser every time you want to say check your email.

10. iStat Menu’s – This light-weight app will allow you to truly track your applications performance and see if you potentially have a memory leak in your app. Has a separate monitor for each CPU to allow the user to see what’s going on in each CPU at any given time. A must have even for non-developers.

11. XMind – This extremely powerful mind-mapping tool is great for those pre-alpha stages of development. Getting as many ideas down as quick as possible is extremely easy for this application to handle. The application is based on the eclipse platform and is very solid.

12. Virtual Box – This open source application is great for testing applications in numerous environments. Test run your apps on Linux, Windows, BSD and more.

13. VmWare Fusion – This is a must have for all developers but especially for those doing web development with coda. Allows you to run windows applications natively on Mac OS X. Another great app for testing in multiple environments as well.

Cheers