Basic Cappuccino Tutorial

I tried to give a lunchtime talk at NSConference today and it turned out to be a disaster :) All the stuff I wanted to show didn't work right, I wasn't prepared well enough, the projector was too dark and the resolution was too low. Oh well. So I'll just write down what I wanted to show:

I won't tell you how to set up the Cappuccino tools. Just look here and you'll be up and running.

Ok, first we want to do a simple NibApplication. You can actually design your Cappuccino UI in Interface Builder. So, run

capp gen --template NibApplication basicCapp
cd basicCapp

Then turn the xib file into a cib file that Cappuccino understands:

nib2cib Resources/MainMenu.xib Resources/MainMenu.cib

Now open index.html and you should see this:

Connect the nameTextField outlet to the text field and the button's action to the sayHi: action. Save the file.

Open the AppController.j file in the basicCapp directory and add the outlet and the action to make it look like this:


Now run nib2cib again:
nib2cib Resources/MainMenu.xib Resources/MainMenu.cib

And open index.html. You should be able to enter a name and click "Say Hi" and should be greeted by an ugly JavaScript alert box. Hurray!

Let's add some more stuff to the Nib. Open it again in Interface Builder and add another window to it. Set it to be visible at launch. Add a split view to it, set the resizing mask and add a text field to the left view and a webview to the right one. Connect the "takeStringURLFrom:" action of the text field to the webview. It should look something like this:
Run nib2cib again and open index.html. You should see 2 windows and be able to enter a URL in the textfield and have it load when you press enter:
Great! Now let's add a custom Framework and add it. Open MainMenu.xib in Interface Builder again and add yet another window to it. Add a text field and a custom view to it so it looks like this:


Add a "customView" outlet of type "NSView" to the AppController (in IB) and another action called "setLocation:" (don't forget the colon!). Connect it all up (AppController's customView outlet to the custom view and the text field's action to AppController's setLocation:). Save it and run nib2cib again.
Now get MapKit from github and copy it to the Frameworks directory inside the basicCapp dir:
cd basicCapp/Frameworks
git clone http://github.com/jfahrenkrug/MapKit.git

Now make AppController.j look like this:



Now you should have a 3rd window when you open index.html again. It should look like this and should let you add markers for locations that you search for:


See? It's all pretty easy! Now go ahead and build something great :)

---

Comments