TweetFollow Us on Twitter

Finishing Our First Cocoa App

Volume Number: 20 (2004)
Issue Number: 4
Column Tag: Programming

Getting Started

by Dave Mark

Finishing Our First Cocoa App

In last month's column, I told you about my fabulous trip to Big Nerd Ranch for some down home Cocoa training with Aaron Hillegass and crew. We then started on our first in a series of Cocoa programs. We used Xcode to create a new project (named RandomApp), then used Interface Builder to edit the nib file and create the RandomApp user interface.

Figure 1 shows the final configuration of the window we laid out in Interface Builder. The top button is used to seed the random number generator. Press the second button to generate a new random number. The new number is displayed in the text field below the two buttons. In Figure 1, the text field is selected and the blue, dashed lines show the window was being resized to leave the proper amount of space below the text field and to the right of the two buttons and the text field.


Figure 1. The final window, showing two buttons and a text field.

Once the window was laid out to our satisfaction, we selected Test Interface from Interface Builder's File menu to take the interface for a test drive.

So what's next? Aha! Glad you asked...

What's Next

Unless you've been patiently waiting with both Xcode and Interface Builder running in the background, chances are good that you saved last month's efforts and have since quit both apps.

OK, let's get back to work.

Launch Xcode and open last month's Xcode project. I saved my copy in my Documents/Projects/ directory in a subdirectory named RandomApp. Find and launch RandomApp.xcode.

When the project window appears, open the triangle to the left of the NIB Files group to reveal the project's nib file, MainMenu.nib. Double click on the nib file to open it in Interface Builder.

Outlets and Actions

Your next task is to create a subclass of NSObject that we'll use to respond to clicks in the Seed Generator and Generate Random Number buttons. The class will also modify the text field to display the newly generated random number when the Generate Random Number button is pressed.

The methods we create to respond to the button clicks are called actions. We'll create a unique action that we'll associate with each button.

We'll also need an instance variable that points to the text field so we can change it from the method tied to the Generate Random Number button. This kind of object pointer is known as an outlet.

When you start a new program, you'll almost always be thinking in terms of actions and outlets. This might be a little fuzzy, but hopefully by the time you get RandomApp up and running, this will be a bit clearer.

Let's start by creating our new class. You'll do this in the main Interface Builder window. The folks at Big Nerd Ranch like to refer to this window as the "doc" window. Cool with me. The doc window is shown in Figure 2. Don't worry too much about what all the different icons mean. We'll explore them all in future columns.


Figure 2. Interface Builder's "doc window".

For now, click on the doc window's Classes tab. If you don't see NSObject in the leftmost pane (See Figure 3), scroll to the left using the scrollbar at the bottom of the doc window. Click on NSObject to select it. NSObject is the root class for all Cocoa classes. Note that all classes start with a capital letter. When you create your class, you'll follow this convention.


Figure 3. The NSObject class selected in the Classes tab of the doc window.

To create your NSObject subclass, select Subclass NSObject from Interface Builder's Classes menu. A new class will appear in the second pane. Change the name to Foo, then hit return to lock in the name change. The name Foo should appear immediately after FirstResponder in the second column.

Now let's add our outlet and actions to our new Foo class.

With the Foo class name selected in the second column of the doc window, select Show Info from the Tools menu to bring up the inspector window. As you can see in Figure 4, the inspector currently shows 0 outlets and 0 actions for the Foo class. We'll start off by adding an outlet.


Figure 4. The inspector, showing 0 outlets and 0 actions for the Foo class.

Remember, an outlet is an instance variable that is a pointer to an object. Instead of doing all the work in code, we're going to use the point-and-click power of Interface Builder to add the class, then add the outlet instance variable and action methods to the Foo class and, ultimately, to generate the source code files that implement the Foo class to the Xcode project. Once you get used to this process, you'll never want to create classes from scratch again. Incredibly powerful stuff.

To add an outlet to Foo, click on the Add button in the lower-right corner of the inspector window (Figure 4). Be sure that the Outlets tab is selected or you'll be adding an action instead. Once you click the Add button, a new outlet will appear. Name the outlet textField, then set the outlet's type to NSTextField using the popup menu in the second column. Basically, you've just told Interface Builder to add an instance variable to the Foo class with the name textField and the type NSTextField. You've used the interface to do this instead of typing the source by hand.


Figure 5. Set the outlet's type to NSTextField from the popup menu.

Now let's add a couple of actions. Click on the Actions tab and click the Add button. Name the new action seed:, being sure to include the trailing colon. The colon is actually part of an Objective C method name. Note that by convention, Objective C method names always start with a lower case letter (as opposed to class names which, as mentioned, start with an upper case letter).

Next, add a second method. Call it generate: (yup, remember the colon). When you are done, your inspector window should look like the one shown in Figure 6.

    If you find your inspector window getting out of sync, it might be because you have clicked on a different Interface Builder object. The inspector always reports on the currently selected object. Click on a window, the inspector shows the window's properties. If you do get lost, go back to the doc window, click on the Classes tab, scroll all the way to the left, then click on the NSObject class, then on the Foo subclass. The title of the inspector window should now be Foo Class Info. If the contents of the window do not match Figure 6, be sure to select Attributes from the popup menu at the top of the inspector window.


Figure 6. The inspector window showing my two actions.

Generate the Source Files

You've now laid out the pieces that make up your Foo class. You've got a pointer to an NSTextField, as well as a pair of methods you'll want called when the user clicks the Seed Generator or Generate Random Number buttons.

Your next step is to generate the source code that defines the Foo class and add that source code to your Xcode project. Fortunately, Interface Builder can do all this for you with one menu selection.

Make sure that the Foo class name is selected in the second column of the doc window. Now, select Create Files for Foo from the Classes menu. A sheet will appear (See Figure 7) that asks you where you'd like to save the files, what type of files to create, and to which target to add the files. Unless you've done some monkeying around, the defaults will probably be just fine. You'll save the files in your main project directory (mine is called RandomApp). You'll want to create both a Foo.h and a Foo.m file. Foo.h is the include file that contains your class declaration. Foo.m contains the actual class definition (the seed: and generate: source code, for example).

The target is the specific Xcode build you want these source files to be part of. Since we only have one target, this is an easy choice. Make sure the RandomApp checkbox is checked.


Figure 7. Saving the Foo class files.

Click the Choose button to add the source files to your project. Notice that two new source code file names appear in your Xcode project window in the Groups & Files pane. Typically, the two names will be appended to the list in the Other Sources group (See Figure 8). Feel free to drag them into another group or subgroup as you like.


Figure 8. The files Foo.h and Foo.m are added to the Groups & Files list.

Create and Connect a Foo Instance

Before we edit the source code, there's just one more task ahead of us. We need to create an instance of the Foo class, then connect the outlet and actions to the appropriate objects. This will become clearer in a moment.

Go back into Interface Builder.

In the doc window, click on the Foo class name in the second column. Select Instantiate Foo from the Classes menu. To see your new object, click on the Instances tab in the doc window.

As you can see in Figure 9, a new icon has appeared. In the doc window. Note the tiny explamation point in the lower left corner of the Foo icon. If you hover your cursor over the exclamation point, a tool-tip will appear saying "Unconnected outlet(s) (textField)." We've declared an outlet named textField but we haven't connected it to a text field. Let's fix that.


Figure 9. The Foo instance in the doc window. Note the message about Unconnected outlet(s).

Control-drag from the Foo instance to the text field below the two buttons in our application window. As you can see in Figure 10, when you start the control-drag, a little square will appear in the Foo icon, then a line will follow your cursor as you drag to the text field. Once the text field is highlighted with a surrounding rectangle, you can release the mouse button.

To complete the connection, click the Connect button in the lower-right corner of the inspector window.

The purpose of this connection is to fill the Foo object's textField instance variable with a pointer to the window's text field so we can modify the contents of the text field in our source code.


Figure 10. Control drag from Foo to the text field below our two buttons.

Our next step is to connect each of our two buttons to the appropriate method using the same technique.

Control-drag from the Generate Random Number button to the Foo instance. In the inspector window, you should see a list of Foo methods to choose from. Click on generate: and then click the Connect button (See Figure 11). You can also double-click on generate: instead.

If your inspector window gets out of sync, be sure that Connections is selected from the popup at the top of the window, then make sure that the Target/Action tab is selected. Finally, be sure that you dragged from the Seed Generator button to the Foo instance.

Next, let's connect the Seed Generator button to the seed: action. Control-click from the Seed Generator button to the Foo instance in the doc window. Next, select seed: and click the Connect button.


Figure 11. Click the Connect button to connect the Generate Random Number button to the generate: method.

That's it! Save your changes. This last step is very important as we are going to switch over to Xcode and we want to be sure we are dealing with the latest version of the .nib file.

Editing Your Source Code

In most programming projects, editing the source code is by far the biggest step to building your project. Because of the power of Interface Builder and the reusability of all the existing Cocoa objects, our source code changes will be pretty minimal.

Let's take a look at Foo.h.

Find Foo.h in the Groups & Files pane. Click on it. If the source code does not appear in an editing pane, select Show Embedded Editor from the View menu.

Here's the source code that Interface Builder placed in Foo.h:

/* Foo */
#import <Cocoa/Cocoa.h>
@interface Foo : NSObject
{
    IBOutlet NSTextField *textField;
}
- (IBAction)generate:(id)sender;
- (IBAction)seed:(id)sender;
@end

The #import statement is basically a #include that avoids the recursive effects of including a file that includes you.

The @interface statement declares the Foo class as a subclass of NSObject. There is a single instance variable, textField. Instance variables are declared inside the curly braces, Methods are declared after the curly braces and before the @end statement.

You don't need to change a line of this code. Interface Builder did all the work for you. Let's edit Foo.m, where the real action is. Here's what Foo.m looks like before you change it:

#import "Foo.h"
@implementation Foo
- (IBAction)generate:(id)sender
{
}
- (IBAction)seed:(id)sender
{
}
@end

Here's the edited version:

#import "Foo.h"
@implementation Foo
- (IBAction)generate:(id)sender
{
   int generated;
   
   generated = (random() % 100) + 1;
   
   [textField setIntValue:generated];
}
- (IBAction)seed:(id)sender
{
   srandom( time( NULL ) );
   [textField setStringValue:@"Generator seeded"];
}
- (void)awakeFromNib
{
   [textField setStringValue:@"Seed the Generator!!!"];
}
@end

Basically, you are adding 3 lines to the generate: method, 2 lines to the seed: method, and the 4 lines that make up the awakeFromNib: method. I added awakeFromNib: so the text field would have a reasonable setting at startup.

Don't worry too much about the code itself. The key here is that with 9 pretty simple lines of code and some time invested in Interface Builder, we've created a running application that does something interesting.

Build and run the application by selecting Build and Run from the Build menu. Figure 12 shows RandomApp when it starts up. Click the Seed Generator button, then click Generate Random Number to start generating random numbers. Hey, it works!


Figure 12. RandomApp in action.

Some Ramblings Before I Go

Some unrelated blathering before I leave. Sort of a static blog, if you will.

Deneen and I just got a Prius. To me, this is the car of the future. Today. I really, really love this car. It is a hybrid vehicle with a gas engine and an electric motor. The Prius switches between the two as needed. Gets extremely high gas mileage and has very low emissions. Worth checking out.

If you get a sec, go to http://www.spiderworks.com and check out my new project. It consumes me.

Also, I want to stand up on my chair and applaud O'Reilly for publishing Wil Wheaton's short story collection, Dancing Barefoot. I love that they did this. Wil Wheaton is an actor, played Wesley Crusher in a past life and, most importantly, has an exceptionally entertaining web site:

http://www.wilwheaton.net

Check out the site, check out the book.

Oh Yeah - WWDC is Just Around the Corner

Can you believe it? WWDC is just a couple of months away. Just like last year, this year's Worldwide Developers Conference will be in San Francisco from June 28th through July 2nd. Apple has reported that they have close to 10 million active Mac OS X users and over 10,000 native Mac OS X applications. These numbers show incredible adoption growth since last year's conference and that's good news for developers.

This year's conference offers 7 tracks: Application Technologies, Development Tools, Enterprise IT, Graphics and Media, Hardware Technologies, OS Foundations, and QuickTime Digital Media. Look for the QuickTime track to mix in integration of Pro Apps (DVD Studio Pro, for example) and to cover creation of audio loops for Soundtrack, GarageBand, Logic, etc. This one is definitely on my short list!

Read all about the conference here:

http://developer.apple.com/wwdc/features.html

Note that there is a discount if you buy your ticket by April 30th.

Till Next Month...

I am having a great time writing about Cocoa. Expect this nonsense to continue. If you insist on homework, find the Property List Editor (/Developer/Applications/Utilities/) and use it to open (a copy of) your .nib file. Fascinating.

See you in the future...


Dave Mark is a long-time Mac developer and author and has written a number of books on Macintosh development, including Learn C on the Macintosh, Learn C++ on the Macintosh, and The Macintosh Programming Primer series. Dave's been busy lately cooking up his next concoction. Want a peek? http://www.spiderworks.com.

 

Community Search:
MacTech Search:

Software Updates via MacUpdate

GraphicConverter 10.5.1 - $39.95
GraphicConverter is an all-purpose image-editing program that can import 200 different graphic-based formats, edit the image, and export it to any of 80 available file formats. The high-end editing... Read more
Delicious Library 3.7 - Import, browse a...
Delicious Library allows you to import, browse, and share all your books, movies, music, and video games with Delicious Library. Run your very own library from your home or office using our... Read more
Adobe Animate CC 2017 18.0.0.107 - Anima...
Animate CC 2018 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous Flash Professional customer). Animate CC 2018 (was Flash CC) lets you... Read more
Adobe After Effects CC 2018 15.0 - Creat...
After Effects CC 2018 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous After Effects customer). The new, more connected After Effects CC... Read more
Adobe Premiere Pro CC 2018 12.0.0 - Digi...
Premiere Pro CC 2018 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous Premiere Pro customer). Adobe Premiere Pro CC 2018 lets you edit... Read more
Alarm Clock Pro 10.3 - $19.95
Alarm Clock Pro isn't just an ordinary alarm clock. Use it to wake you up in the morning, send and compose e-mails, remind you of appointments, randomize the iTunes selection, control an internet... Read more
Adobe Lightroom 20170919-1412-ccb76bd] -...
Adobe Lightroom is available as part of Adobe Creative Cloud for as little as $9.99/month bundled with Photoshop CC as part of the photography package. Lightroom 6 is also available for purchase as a... Read more
Adobe Illustrator CC 2018 22.0.0 - Profe...
Illustrator CC 2018 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous Illustrator customer). Adobe Illustrator CC 2018 is the industry... Read more
Hopper Disassembler 4.3.0- - Binary disa...
Hopper Disassembler is a binary disassembler, decompiler, and debugger for 32- and 64-bit executables. It will let you disassemble any binary you want, and provide you all the information about its... Read more
Adobe InDesign CC 2018 13.0.0.125 - Prof...
InDesign CC 2018 is available as part of Adobe Creative Cloud for as little as $19.99/month (or $9.99/month if you're a previous InDesign customer). Adobe InDesign CC 2018 is part of Creative Cloud.... Read more

ICEY (Games)
ICEY 1.0 Device: iOS Universal Category: Games Price: $2.99, Version: 1.0 (iTunes) Description: ICEY is a 2D side-scrolling action game. As you follow the narrator's omnipresent voice, you will see through ICEY's eyes and learn the... | Read more »
The best new games we played this week -...
We've made it, folks. Another weekend is upon us. It's time to sit back and relax with the best new releases of the week. Puzzles, strategy RPGs, and arcade games abound this week. There's a lot of quality stuff to unpack this week, so let's hop... | Read more »
Wheels of Aurelia (Games)
Wheels of Aurelia 1.0.1 Device: iOS Universal Category: Games Price: $3.99, Version: 1.0.1 (iTunes) Description: | Read more »
Halcyon 6: Starbase Commander guide - ti...
Halcyon 6 is a well-loved indie RPG with stellar tactical combat and some pretty good writing, too. It's now landed on the App Store, so mobile fans, if you're itching for a good intergalactic adventure, here's your game. Being a strategy RPG, the... | Read more »
Game of Thrones: Conquest guide - how to...
Fans of base building games might be excited to know that yet another entry in the genre has materialized - Game of Thrones: Conquest. Yes, you can now join the many kingdoms of the famed book series, or create your own, as you try to conquer... | Read more »
Halcyon 6: Starbase Commander (Games)
Halcyon 6: Starbase Commander 1.4.2.0 Device: iOS Universal Category: Games Price: $6.99, Version: 1.4.2.0 (iTunes) Description: An epic space strategy RPG with base building, deep tactical combat, crew management, alien diplomacy,... | Read more »
Legacy of Discord celebrates its 1 year...
It’s been a thrilling first year for fans of Legacy of Discord, the stunning PvP dungeon-crawling ARPG from YOOZOO Games, and now it’s time to celebrate the game’s first anniversary. The developers are amping up the festivities with some exciting... | Read more »
3 reasons to play Thunder Armada - the n...
The bygone days of the Battleship board game might have past, but naval combat simulators still find an audience on mobile. Thunder Armada is Chinese developer Chyogames latest entry into the genre, drawing inspiration from the explosive exchanges... | Read more »
Experience a full 3D fantasy MMORPG, as...
Those hoping to sink their teeth into a meaty hack and slash RPG that encourages you to fight with others might want to check out EZFun’s new Eternity Guardians. Available to download for iOS and Android, Eternity Guardians is an MMORPG that lets... | Read more »
Warhammer Quest 2 (Games)
Warhammer Quest 2 1.0 Device: iOS Universal Category: Games Price: $4.99, Version: 1.0 (iTunes) Description: Dungeon adventures in the Warhammer World are back! | Read more »

Price Scanner via MacPrices.net

12″ iPad Pros on sale for $50 off MSRP, no ta...
Adorama has 12″ iPad Pros on sale today for $50 off MSRP. Shipping is free, and Adorama charges sales tax in NY & NJ only: – 12″ 64GB iPad Pro: $749, save $50 – 12″ 256GB iPad Pro: $899, save $50... Read more
9″ iPads on sale for $30 off, starting at $29...
MacMall has 9″ iPads on sale for $30 off including free shipping: – 9″ 32GB iPad: $299 – 9″ 128GB iPad: $399 Read more
Apple restocks full line of refurbished 13″ M...
Apple has restocked a full line of Apple Certified Refurbished 2017 13″ MacBook Pros for $200-$300 off MSRP. A standard Apple one-year warranty is included with each MacBook, and shipping is free.... Read more
13″ 3.1GHz/256GB MacBook Pro on sale for $167...
Amazon has the 2017 13″ 3.1GHz/256GB Space Gray MacBook Pro on sale today for $121 off MSRP including free shipping: – 13″ 3.1GHz/256GB Space Gray MacBook Pro (MPXV2LL/A): $1678 $121 off MSRP Keep an... Read more
13″ MacBook Pros on sale for up to $120 off M...
B&H Photo has 2017 13″ MacBook Pros in stock today and on sale for up to $120 off MSRP, each including free shipping plus NY & NJ sales tax only: – 13-inch 2.3GHz/128GB Space Gray MacBook... Read more
15″ MacBook Pros on sale for up to $200 off M...
B&H Photo has 15″ MacBook Pros on sale for up to $200 off MSRP. Shipping is free, and B&H charges sales tax in NY & NJ only: – 15″ 2.8GHz MacBook Pro Space Gray (MPTR2LL/A): $2249, $150... Read more
Roundup of Apple Certified Refurbished iMacs,...
Apple has a full line of Certified Refurbished 2017 21″ and 27″ iMacs available starting at $1019 and ranging up to $350 off original MSRP. Apple’s one-year warranty is standard, and shipping is free... Read more
Sale! 27″ 3.8GHz 5K iMac for $2098, save $201...
Amazon has the 27″ 3.8GHz 5K iMac (MNED2LL/A) on sale today for $2098 including free shipping. Their price is $201 off MSRP, and it’s the lowest price available for this model (Apple’s $1949... Read more
Sale! 10″ Apple WiFi iPad Pros for up to $100...
B&H Photo has 10.5″ WiFi iPad Pros in stock today and on sale for $50-$100 off MSRP. Each iPad includes free shipping, and B&H charges sales tax in NY & NJ only: – 10.5″ 64GB iPad Pro: $... Read more
Apple iMacs on sale for up to $130 off MSRP w...
B&H Photo has 21-inch and 27-inch iMacs in stock and on sale for up to $130 off MSRP including free shipping. B&H charges sales tax in NY & NJ only: – 27″ 3.8GHz iMac (MNED2LL/A): $2179 $... Read more

Jobs Board

Engineering Manager, *Apple* Retail Enginee...
# Engineering Manager, Apple Retail Engineering Job Number: 58139948 Santa Clara Valley, California, United States Posted: 20-Oct-2017 Weekly Hours: 40.00 **Job Read more
*Apple* Retail - Multiple Positions - Apple,...
Job Description: Sales Specialist - Retail Customer Service and Sales Transform Apple Store visitors into loyal Apple customers. When customers enter the store, Read more
Commerce Engineer, *Apple* Media Products -...
Commerce Engineer, Apple Media Products (New York City) Job Number: 113028813New York City, New York, United StatesPosted: Sep. 20, 2017Weekly Hours: 40.00 Job Read more
US- *Apple* Store Leader Program - Apple (Un...
US- Apple Store Leader Program Job Number: VariousUnited StatesPosted: Oct. 19, 2017Retail Store Job Summary Learn and grow as you explore the art of leadership at Read more
Product Manager - *Apple* Pay on the *Appl...
Job Summary Apple is looking for a talented product manager to drive the expansion of Apple Pay on the Apple Online Store. This position includes a unique Read more
All contents are Copyright 1984-2011 by Xplain Corporation. All rights reserved. Theme designed by Icreon.