Cocoa Is My Girlfriend Cocoa Touch Tutorial: iPhone Application E...

http://www.cimgf.com/2008/10/01/cocoa-touch-tutorial-iphone-applica...

Cocoa Touch Tutorial: iPhone Application Example

by Matt Long | October 01st, 2008 Similar to one of my first blog posts on building a basic application for Mac OS X using xcode 3.0, I am going to explain for beginning iPhone/iPod Touch developers how to build the most basic Cocoa Touch application using Interface Builder and an application delegate in xcode 3.1. This tutorial post is really to provide a quick how-to. I wont go into any depth explaining why things are done the way they are done, but this should help you get up and running with your first application pretty quickly so that you too can clog the App Store with useless superfluous apps (kidding just kidding). If you are a visual learner, it may be helpful to you to instead watch a video presentation of this tutorial. Ive posted it on the site, but youll have to click the link to see my Cocoa Touch Video Tutorial. Understanding Cocoa programming is much simpler if you learn MVC, Model, View, Controller. You can probably step through code examples and figure some things out without learning MVC, but I wouldnt recommend it. Go Google it and read up on it. I will say as an introduction to MVC for those who are not familiar that it should probably be called (Model <--> Controller <--> View) or (View <--> Controller <--> Model) as the controller always sits between the other two. Your controller is either telling your model to update its data or it is telling the view to update its display. Thats the crux of the whole paradigm. The details run much deeper, but thats how I will nutshell it for you.

Create Your Application

Lets get started. Create a Cocoa Application using the following steps: 1. Select File > New Project, under the iPhone OS templates choose Window-Based Application in the ensuing dialog. Click Choose

2. Enter Basic iPhone App as the project name. Click Save You should see a project workspace like the following:

1 de 5

12/04/2010 09:25

Cocoa Is My Girlfriend Cocoa Touch Tutorial: iPhone Application E...

http://www.cimgf.com/2008/10/01/cocoa-touch-tutorial-iphone-applica...

The next thing you should do is create a class to act as your controller or delegate.

Delegate == Controller
The words delegate and controller can be used synonymously. Youll see later that we delegate the work of the different controls we create in Interface Builder to a delegate or controller class. In the iPhone template projects, this application delegate is created for you. Our app delegate has been named Basic_iPhone_AppAppDelegate. In our app delegate class we need to add what Cocoa developers refer to as outlets and actions. I could spend an entire post explaining these two things in depth, but for the sake of brevity and walking you through the steps to build your first application, the definition will have to suffice. Outlets represent controls in your user interface that can have some action performed upon them. Action are functions in your code that are connected to controls in your user interface such as a button or a drop down list. When connected to a button for instance, the action code will be run when the user clicks the button. In xcode, open your app delegate header file Basic_iPhone_AppAppDelegate.h. Add an outlet for the text field and the label below the window outlet as in the following snippet:
1 @interface Basic_iPhone_AppAppDelegate : NSObject <UIApplicationDelegate> { 2 IBOutlet UIWindow *window; 3 IBOutlet UITextField *textField; 4 IBOutlet UILabel *label; 5}

You will also want to add an action that will be performed when our button is clicked. Add that below the property for our window:
1 2 3 4 5 6 7 8 9 @interface Basic_iPhone_AppAppDelegate : NSObject <UIApplicationDelegate> { IBOutlet UIWindow *window; IBOutlet UITextField *textField; IBOutlet UILabel *label; } @property (nonatomic, retain) UIWindow *window; - (IBAction)click:(id)sender;

Now switch over to the implementation file, Basic_iPhone_AppAppDelegate.m. Add the click: action below our applicationDidFinishLaunching: function:
1 - (void)applicationDidFinishLaunching:(UIApplication *)application { 2 // Override point for customization after app launch 3 4 [window makeKeyAndVisible]; 2 de 5 12/04/2010 09:25

Cocoa Is My Girlfriend Cocoa Touch Tutorial: iPhone Application E... 4 5 6 7 8 9 10 [window makeKeyAndVisible]; } - (IBAction)click:(id)sender; { }

http://www.cimgf.com/2008/10/01/cocoa-touch-tutorial-iphone-applica...

We will actually add some code to do something in the click: action handler, but first we need to hook it up to the user interface in Interface Builder.

Interface Builder And Controller/Delegate Implementation

Now that youve specified the outletsa UITextField and a UILabel and an action called click:, you will see these items available for connecting to the UI in Interface builder. Lets open Interface Builder and make the connections we need using the following steps: 1. In your xcode workspace, expand the folder in the tree view called Resources and double click the file called MainMenu.xib. Note:: A .xib is a .nib that uses XML for the internal data structure. This will open the xib file in Interface Builder 2. Once Interface Builder loads, you will notice that there is an object representation of our app delegate in the MainWindow.xib window. This is the object you will use to create connections for

your actions and outlets.

Design The User Interface

Now you need to add the controls to the main window in Interface Builder and then we can connect the action and outlet accordingly. To finish the interface, complete the following steps: 1. Make sure that the Object Library is open by selecting Tools | Library from the menu in Interface Builder. 2. Drag a TextField, a Label, and a Button to the main window so that the user interface looks like the screenshot below:

3 de 5

12/04/2010 09:25

Cocoa Is My Girlfriend Cocoa Touch Tutorial: iPhone Application E...

http://www.cimgf.com/2008/10/01/cocoa-touch-tutorial-iphone-applica...

3. Control-Click and drag from the Button to your app delegate object in the MainWindow.xib window.

A pop-up will display. Select click: 4. Control-Click the app delegate object and drag it to the text field in the main window.

A pop-up will display. Select textField 5. Control-Click the app delegate object and drag it to the label in the main window.

4 de 5

12/04/2010 09:25

Cocoa Is My Girlfriend Cocoa Touch Tutorial: iPhone Application E...

http://www.cimgf.com/2008/10/01/cocoa-touch-tutorial-iphone-applica...

A pop-up will display. Select label Thats it for Interface Builder. You can quit interface builder and return to xcode. We have one more piece of code to add and then our application will be finished.

Finishing Up
When the button is clicked, it will simply grab the text from the text field and place it into the label. Thats all the application does. Heres the code you need. Just make your implementation of the click: action in the Basic_iPhone_AppAppDelegate.m file look like this:
1 - (IBAction)click:(id)sender; 2{ 3 [label setText:[textField text]]; 4}

Notice we are grabbing the text from the text field, and setting the text in our label with it. Now all you need to do is click Build and Go. When the application runs the iPhone Simulator will be started. You will see the application load. Type some text into the text field and click the Change button. You will see the label update with the text from the text field.

Next Steps
This tutorial has just scratched the surface. Its is intended to get you going quickly. For a more in-depth path to gaining a deeper understanding of iPhone development, take a look at Apples, Your First iPhone Application. You will need to log in with your ADC account to see the article, but it is definitely worth while.

Conclusion
The limit with iPhone development is really just your imagination. It is an extremely fun platform to develop on and the resulting applications are very rewarding. Have fun with it and learn as much as you can. Just do me a favor and dont clog the App Store with any more flashlight apps or tip calculators Seriously ;-) . Until next time.

5 de 5

12/04/2010 09:25