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!

Posted 16 April 2006 - 04:00 AM

Korrupted

Wandering Samurai

Retired

1,623 posts

Location:Wandering the world over.

Interests:Mac<br />Laptops

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

Attached Files

Posted 16 April 2006 - 04:40 PM

SaberSHO

InsanelyMac Geek

Retired Developers

156 posts

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

Posted 20 January 2007 - 08:49 AM

RedSun76

InsanelyMac Protégé

Members

14 posts

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?

Posted 05 March 2007 - 12:22 PM

JCC

InsanelyMac Protégé

Members

11 posts

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?

Posted 10 April 2007 - 05:17 PM

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 )