Jump to content

Cocoa Tutorial


  • Please log in to reply
32 replies to this topic

#1
Korrupted

Korrupted

    Wandering Samurai

  • Retired
  • 1,623 posts
  • Location:Wandering the world over.
  • Interests:Mac<br />Laptops
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.
Posted Image

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

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.
Posted Image


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.
Posted Image

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

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:
Posted Image

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

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
Posted Image

2. Help Menu
Posted Image

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:
Posted Image

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:
Posted Image

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:

Posted Image

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

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

Posted Image

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

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:

#2
Korrupted

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:
Posted Image

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:
Posted Image

This is the final product, or mine anyway :)
Posted Image

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



#3
SaberSHO

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

#4
Korrupted

Korrupted

    Wandering Samurai

  • Retired
  • 1,623 posts
  • Location:Wandering the world over.
  • Interests:Mac<br />Laptops
Thanks for your feedback. :o

#5
SnipinTerminator

SnipinTerminator

    InsanelyMac Protégé

  • Members
  • PipPip
  • 60 posts
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

#6
Sherry Haibara

Sherry Haibara

    InsanelyMac Legend

  • Members
  • PipPipPipPipPipPipPip
  • 699 posts
You can get it on Apple Developer Site, http://developer.app...tools/download/, XCode 2.2.1 :D
You need a free Apple Developer Connection's registration :)
Sherry Haibara

#7
seero

seero

    InsanelyMac Geek

  • Members
  • PipPipPip
  • 133 posts
  • Gender:Male
  • Location:France
Good tutorial. Thanks u, DaxTsurugi !

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

#8
Korrupted

Korrupted

    Wandering Samurai

  • Retired
  • 1,623 posts
  • Location:Wandering the world over.
  • Interests:Mac<br />Laptops
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.

#9
trav1085

trav1085

    ハーカー

  • Members
  • PipPipPipPipPipPip
  • 401 posts
  • Gender:Male
  • Location:Canada
  • Interests:Computers, hacking, system security, programming, apache, webserver, macs, pc, osx86, vista, dos...
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

#10
Lermex

Lermex

    InsanelyMac Protégé

  • Members
  • Pip
  • 15 posts
  • Gender:Male
  • Location:Kiev, Ukraine
Good tutorial.
Thank you.

#11
Jeezoflip

Jeezoflip

    InsanelyMac Legend

  • Members
  • PipPipPipPipPipPipPip
  • 651 posts
  • Interests:Computers of course!
haha, nice. I love the way you circle your stuff.

#12
Urbz

Urbz

    La cr�me de la cr�me...(?)

  • Retired Developers
  • 837 posts
  • Gender:Male
  • Location:Montreal, QC, Canada
I think this tutorial is great, it shows you how easy building an interface can be, even for pople who know little about coding.

#13
RedSun76

RedSun76

    InsanelyMac Protégé

  • Members
  • Pip
  • 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?

#14
nickg331

nickg331

    InsanelyMac Geek

  • Members
  • PipPipPipPip
  • 180 posts
nice tutorial
apple provides some nice, but not very thorough tutorials
i suggest "cocoa programming for mac osx", by aaron hillegrass

#15
Markandeya

Markandeya

    InsanelyMac Protégé

  • Members
  • Pip
  • 35 posts
  • Gender:Male
  • Location:Guildford
  • Interests:Network,Programming,Linux,Basketball,MuayThai,Mac
Thanks. I've just started to learn how to use xcode. That really helped.

#16
JCC

JCC

    InsanelyMac Protégé

  • Members
  • Pip
  • 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?

#17
Airfly

Airfly

    InsanelyMac Protégé

  • Members
  • PipPip
  • 72 posts
Thx! I'm a beginner of Xcode. :blush:

#18
vic-2012

vic-2012

    InsanelyMac Protégé

  • Just Joined
  • Pip
  • 1 posts
  • Gender:Male
  • Location:33025
:tomato: 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:

#19
.ark

.ark

    InsanelyMac Protégé

  • Members
  • Pip
  • 19 posts
#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 )

#20
Kane Adams

Kane Adams

    Leave my Sig alone.

  • Members
  • PipPipPipPipPipPipPip
  • 543 posts
  • Gender:Male
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





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

© 2014 InsanelyMac  |   News  |   Forum  |   Downloads  |   OSx86 Wiki  |   Mac Netbook  |   PHP hosting by CatN  |   Designed by Ed Gain  |   Logo by irfan  |   Privacy Policy