Jump to content
  • Announcements

    • Allan

      Forum Rules   04/13/2018

      Hello folks! As some things are being fixed, we'll keep you updated. Per hour the Forum Rules don't have a dedicated "Tab", so here is the place that we have our Rules back. New Users Lounge > [READ] - InsanelyMac Forum Rules - The InsanelyMac Staff Team. 
Sign in to follow this  
Korrupted

Cocoa Tutorial

33 posts in this topic

Recommended Posts

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. :graduated:

 

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.

picture32cr.png

 

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

picture46ho.png

 

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.

picture56fy.png

 

 

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.

picture68bj.png

 

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

picture79ik.th.png

 

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:

picture86fi.png

 

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".

picture98zh.png

 

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

picture100qm.png

 

2. Help Menu

picture113vz.png

 

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:

picture121co.png

 

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:

picture135ko.th.png

 

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:

 

picture140se.png

 

^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:

picture12pk.png

 

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

 

pic998hw.png

 

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

picture45bh.png

 

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! :poster_oops:

Share this post


Link to post
Share on other sites

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:

pic1000qk.png

 

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:

pic1019mg.png

 

This is the final product, or mine anyway :)

picture107fg.png

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Good tutorial. Thanks u, DaxTsurugi !

 

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

:) 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!!!! :blink:

Share this post


Link to post
Share on other sites

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

 

Easy windows in C or C++ using Qt. :huh:

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 )

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 :).

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×