Sat, June 06, 2009Intro to Cappuccino :: Quick and Dirty

I recently stumbled upon Cappuccino which is basically Objective-C (called Objective-J) and Cocoa ported to Javascript and the browser.

After much fumbling and finally adjusting to the right mind set, I have decided to write a brief tutorial on your first “Hello World” app in Cappuccino using a Cib file (basically Cappuccino’s version of a Nib file).

In this tutorial we will use Interface builder to design our UI and attach an event. Then I will show you how to make a button populate a text field with the words “Hello World.” So let’s get started.

First you will need to make sure you have Cappuccino installed, if not just visit this page for install/setup details:

http://wiki.github.com/280north/cappuccino/getting-and-building-the-source

Once you have everything setup, open up a terminal window and CD to your desktop. Once there run the following command: capp gen -t NibApplication CappApp

You will see a bunch of text scroll by then you will see a new folder on your desktop called: “CappApp.” Open this up in your favorite text editor (I’m using TextMate).

When you look at the file structure you will see a handful of files, the main ones we need are: AppController.j and Resources/MainMenu.Xib

First things first, let’s open MainMenu.xib in Interface Builder. When the file first loads you will see a text box and a slider:

Go a head and delete the 2 elements on the window, add a new button and a new text field, and change the text of the button to “Say Hi”

Now you will notice a little guy called App Controller. Click on that guy and move over to your Inspector. We are going to make some things here that will be the , sort of, glue for the app.

WIth App Controller selected, open up Identity Inspector (command 6), you will see an outlet theWindow, under that you will see a plus (+) simple, click that and let’s add a couple of items to represent our text field and button. First we will add the button, click the plus and type in ‘btn’ for the button name, and set the type to NSButton, then add ‘txt’ with type NSTextField.

Now in that same Identity Inspector (command 6) we are going to add an action to our little App Controller, click the plus (+) and add “btnClick” and let the type fall to “id”

Now hold down control and drag from App Controller to your button and you will get a little pop up, select btn from that pop up to attach your button to your App Controller:

Now do the exact same thing but Control Drag from your App Controller to your button and from that little pop up select txt, now your App Controller is connected to your text field.

We now need to attach our created action “btnClick” to the button. Just as we did before, we do here, but backwards. Control Drag from the button to the App Controller you will get the same type of pop up, simply select btnClick and your button will now be attached to your btnClick action.

We are now done with Interface Builder, make sure you save and exit. Now power up a terminal and cd to your project’s Resource directory (where MainMenu.xib and MainMenu.cib are).

Inside therminal (in that Resource directory) type: nib2cib MainMenu.xib and hit enter. This will generate your newly created UI. Once that is completely, we get to write some code. So move back to your editor and open up AppController.j. You will see:

Give that a change so it will look like:

Now we need to add our btnClick method (that we added to App Controller in Interface Builder). So add the following code at the end of the file (just above @end).

Once you have the code added, save AppController.j. Now you will want to open up index-debug.html (or index.html) and when you do, you will see your button and text box. If you click your button the text field will be populated with “hello world”

Well, that’s it. Using Interface Builder makes Cappuccino easy and a viable solution for web application development. I hope to have more written soon on this subject as I continue to learn and develop with Cappuccino.

You can download the example app here: http://wattz.net/zips/cappapp.zip

Thanks to everyone at 280North and I hope you enjoyed,

Wess “Wattz” Cope

@wattzilla

wess(at)wattz(dot).net