Cocoa Tutorial

[Korrupted]

I decided to write a little tutorial on how to make a little program for OS X, just for fun. No coding is required for this program; the Interface Builder will provide all the code for us.

 

NOTE: This tutorial will be divided into two large posts.

 

NOTE: I won't be describing how to setup XCode. That should be pretty self explanitory, especially for anyone who's used a computer extensively.

 

You can get Apple's XCode from Apple Developer Connection.

You can also get it from the OS X 10.4.3 DVD.

 

This program, Slider, will consist of a simple window with a slider bar in the middle, and a textbox on the bottom, which shows the current number where the slider is resting on. Simple, no?

 

1. Make a New Project.

First, open XCode in /Developers/ . Next, File-> New Project.

 

Scroll down a bit in the Applications list to find "Cocoa Application." Press next.

 

In the Project Name box, type "Slider"(without the quotes). After, choose where you want to store the project's source code, then press Finish.

 

 

2. Learning how to use Interface Builder.

Interface Builder is what developers use to quickly make a User Interface for the user to interact with the program. It is simple to use once you get the hang of it. To open it, simply double click MainMenu.nib in your project screen.

 

After launching, you will see something like this(Thumbnailed to cut down on page size):

 

To change the size of your window, simply click it to give it focus, then grab the bottom right corner and drag it to your heart's content. In my project, I made it look something like this:

 

Now, let's do a few aesthetic parts with our program, namely renaming the menu bar from New App to Slider.

First, give focus to the menu bar of our program by clicking the window entitled: "MainMenu.nib (English) - Main Menu".

 

OK. To change where it says NewApplication, simply double click it, then type in Slider.

 

After, click it ONCE to open its menu. Change all instances of New Application to Slider by double clicking them, while leaving in the other words such as "Quit", or "About". Also, change the help menu to say Slider as well.

If done correctly, you should have these two shots:

 

1. Main Menu

 

2. Help Menu

 

Now that that's taken care of, let's actually design what our interface will look like. First, click this tab on the

Cocoa-Controls window, if you have not already:

 

Next, click on the slider in the middle, and drag it(while holding the mouse button down) to somewhere in your interface.

For me: here is where I placed it:

 

Now let's resize the slider so it fits the size of our window. Select the slider by clicking it, then grab one of the circular corners and then hold down the mouse button; drag the mouse to whatever width you want the slider to be. Here's what mind ended up looking like:

 

 

^I apologize for the crappy text editing there; I was in a rush to get to class.

 

After that, click the text tab, the one to the right of the buttons/sliders tab, and then drag a text box(the one under System Font Text) onto your interface whereever you want:

 

Now click the slider, HOLD ctrl, and HOLD down the mouse button, and then DRAG a line down to the text box:

 

 

When the Inspector pops up, choose takeIntValueFrom, on the Target/Actions tab, then press connect, and close it:

 

When you finish this, save your interface, and quit Interface Builder. Next, compile your program(run and build button), and be amazed as your program reports what percent the slider sits on when you stop moving it!

[Korrupted]

A few aesthetic things I did to mine afterward:

 

1. Make the Slider have tick marks so you have an idea of what percent you are on:

Open Interface Builder, and go to Tools -> Show Inspector.

Click on your slider, then in inspector, choose attributes from the top middle drop list if it isn't chosen aready, and then in the Number Of Markers box: input however many tick marks you want. I input 10 Also I chose to place the tick marks below my slider bar:

 

2. Make the textbox constantly update by telling the Slider to continuously send its action.

In the picture above, follow the directions to get back to the inspector, if you closed it, then check "Continuously send action while sliding." This will make it so that when you are sliding the Slider, it will update the box every time you move it, so you always know what number it lies on.

 

3. Change the window title:

 

This is the final product, or mine anyway

 

Comments, questions, concerns? Criticism is welcome as long as it is constructive(i.e no IT SUCKS OMG).

 

EDIT: The GIMP tips would also be VERY welcome; I want to learn how to image edit better!

 

 

EDIT 2: Forgot to include the source. Enjoy(I uploaded it)!

Slider.zip

[SaberSHO]

Thank you for taking the time to make this post DaxTsuragi. I think its very well laid out and all the pictures would be really helpful for beginnners. I myself did not know how to change the window title. Thanks we need more people like you writing guides

-SaberSHO

[Korrupted]

Thanks for your feedback.

[SnipinTerminator]

Thanks for the guide!

 

--> But where can I get Xcode? It isn't in my developer folder... I'm running OSX 10.4.6

 

...thanks

[Ai Haibara]

You can get it on Apple Developer Site, http://developer.apple.com/tools/download/, XCode 2.2.1

You need a free Apple Developer Connection's registration

Sherry Haibara

[seero]

Good tutorial. Thanks u, DaxTsurugi !

 

Someone knows websites with short exemples of cocoa applications ? (with src)

[Korrupted]

I uploaded the source to my program/tutorial in the second post. Also added where to get XCode. Thanks to Sherry Haibara for the link.

[trav1085]

Great tutorial! For those of you who can't create it or are having troubles, download mine here if you want (x86 Hackintosh Version). It uses the Metal theme.

 

Download as 1MB Disk Image

[Lermex]

Good tutorial.

Thank you.

[Jeezoflip]

haha, nice. I love the way you circle your stuff.

[Urbz]

I think this tutorial is great, it shows you how easy building an interface can be, even for pople who know little about coding.

[RedSun76]

Thanks for the tutorial, I have been interested in getting into stuff like this for awhile and you made yours really easy to understand. Anyone know where else I can get my hands on some other tutorials?

[nickg331]

nice tutorial

apple provides some nice, but not very thorough tutorials

i suggest "cocoa programming for mac osx", by aaron hillegrass

[Markandeya]

Thanks. I've just started to learn how to use xcode. That really helped.

[JCC]

For various reasons I have to ask the next question how can you make a cocoa application WITHOUT the interface builder? That is sort of cheating since you need to include the nib in some form. I want to know how to make a real window and widgets using ObjC or C without using a GUI to construct it. Any advice?

[Airfly]

Thx! I'm a beginner of Xcode.

[vic-2012]

Hi there I'm new at programming with mac's, well I tried this tutorial and and error keeps poping out:

 

******************************************************************************

 

Uncaught Exception:

*** -[PBXToolbar _notificationPostingEnabled]: selector not recognized [self = 0x15ca4ed0]

 

Stack Backtrace:

The stack backtrace has been logged to the console.

*******************************************************************************

 

it does this after I tried to create a cocoa application, and I typed Slider.

 

How can I uninstall Xcode and installed it again.

maybe this would solve my problem.

 

can anybody help me please!!!!

[.ark]

 #include <QApplication>
int main()
{
  return qApp.exec();
}

 

Easy windows in C or C++ using Qt.

Possibly Objective-C also, I haven't tried it yet. I'm too used to doing my own memory management.

 

The only thing I don't like about XCode is that there's no way to associate other file types (like .ui ). However, you can just right-( or alt-) click on them, and open them in Finder, and you can associate them in Finder instead.

(note: .ui is for QT's user interface file, for use with QT Designer )

[Kane Adams]

Thank you for the little cocoa tutorial ,

I'll be getting my first Mac this week and looking forward to doing some programming with it.

Looking forward to learning more on these forums.

 

Rudolph

[Neilis]

Very, very cool. I'm new to the Mac platform but have developed with Borland C++ Builder and MS Visual Basic before, but Xcode and it's associated tools left me puzzled when I tried them. This is just the sort of thing I need to get a good feel for how to get a working interface created .

[socal swimmer]

hey

 

that looks like a good tutorial. I don't want to hijack this thread, only add more useful information. i too have been learning cocoa recently. Here are a couple sites that I found useful:

 

a long series of articles, covering many important aspects of cocoa: http://www.macdevcenter.com/pub/ct/37 . the bottom ones are the oldest, and the most basic.

 

smaller site, also helpful: http://cocoadevcentral.com/

 

anyway, i hope these help others as much as they helped me.

 

btw, if i should post this in a separate thread, or forum, just tell me and i will (or mods can do it)

[stormj]

Would you mind taking a stab at updating this for xcode 3.0?

 

I'm fairly good with Cocoa, but I can't seem to get Interface Builder 3.0 to generate the source for my classes. I assume it instantiates when you drag one from the library over to your app window, but the generating source code step, I'm just not finding it.

 

The docs seem to imply that it should do it automatically (that would be nice) but it's not on mine, 9a559. Also, there is "Write Source Files..." but that makes files that are broken, and if you fix them, don't seem to operate.

 

I know it's some small simple thing I'm probably missing that Apple has made "easier."

 

Any ideas?

[ExpLoaDeD]

i have the same problem

[subnork]

You have to make the classes in Xcode, drag them into Interface Builder, then instantiate NSObject and set it's class to the header you just dragged in.