Objective J - Getting started tutorial

One of my goals for the year is to learn Objective J. It is an intriguing project for me as it combines two languages I already know: Objective C and Javascript. Personally I prefer the flexibility of Javascript, which becomes even more appealing when combined with the syntactically concise jQuery. I will try to document my journey into discovering and learning Objective J and hopefully provider other newcomers some help on getting started.

The first step is to become familiar with the Objective J language. If you find your self having trouble following the guide or am not too sure about the syntax of Objective J I would recommending reading some ultra basic Objective C primers. Once you feel like you have a grasp on the basic concepts of the language guide scan through the starter tutorial to see how it can be used.

If you want to try the tutorial I would recommend downloading the starter pack. The starter package contains all the files you need to get started. Although Cappuccino is designed to enable the coding of web applications the starter package does not need a server such as Apache to run.

If you are more serious about development, download and install the Cappuccino developer tools. The tools are geared more towards a *nix work environment and contain syntax highlighting files for SubEthaEdit, Coda, Textmate, and ViM. The tools also contain a couple of command line tools to help you manage and develop in Objective J.

I installed the vim syntax coloring rules as as well as the steam project manager and the objj command line interpreter. From what I've read from the documentation steam allows creation of a template application as well as doing code packing/minifying (through the option build) when it is ready for release. I have already used steam to set up my first tutorial project, which can be achieved by typing steam myproject in the command line, but I am still not sure how to use objj.

Steam generated all the basic files I found in the starter package although it is more convenient since it does not include documentation and the NewApplication folder, which would normally have to be renamed. For the rest of this guide I will walk through my experience with the starter tutorial. My first step in trying to understand the code is to comment blocks of code that I can identify in the default AppController.j file.

The code is pretty self explanatory. If my comments aren't enough, try reading the original document. Loading it in Firefox gives me the expected "Hello World" message. I have also enabled Firebug so I can see just what the basic program is doing.

The good news is my commenting did not affect the program's operation by introducing unexpected errors. As the screenshot above shows, AppController.j and main.j will trigger a number of imports, which are re-tried until import is successful. This shows that the file import library is both fast and error tolerant.

The next step is to go through the tutorial and add my first GUI element: the button. The start tutorial provides all the code required to get a button on the screen and attach an event to it. I typed it all out myself just to reinforce my memory with the classes and methods being introduced.

To add a button the first step is to create a new button object and add it to the view. I have decided to break up the starter package's code so that each line is easier to understand. To get all button on the screen you really only need 3 statements. You can see them on line 21.

To better understand the initWithFrame method, I looked at the documentation that came with the start package. It can be found in Classes->CPButton. Once you reload your application you should see the button rendered nicely in the middle of the page. Without the extra code in the original tutorial, which I will add later, you will find that clicking the button will have no effect and resizing the window will cause the button to no longer be centered in the window.

The centering code can be inserted anywhere, as all objects are added by reference, although I added it above the setTitle method call, just like in the tutorial. The code you need to add for dynamic centering is:

[button setAutoresizingMask:CPViewMinXMargin | CPViewMaxXMargin | CPViewMinYMargin | CPViewMaxYMargin];
The next step is hooking up the click event. This can be achieved by adding the following lines (again, just above setTitle).

[button setTarget:self];
[button setAction:@selector(swap:)];

Then, just above @end, insert the function being called. Because Objective J does not treat functions like just any other object the way Javascript does, the syntax @selector is used to make reference to a function. Because I wanted to explore as much about the workings of Objective J as I can, I once again deviated from the original tutorial and did a log (Firebug required) on the sender object using the code below.

- (void)swap:(id)sender {

The result produced when the button is clicked show that sender is a <CPButton 0x000144> __address=324 isa=Object _subviews=[1] _tag=-1 This is similar to what one would expect when checking this in a jQuery click event handler. The remainder of the tutorial is pretty straight forward. The label variable is turned into a class variable by declaring it in @implementation AppController and the swap method's contents are replaced with something more visually responsive. The final code is:

That is basically the whole starter package tutorial. It has shown quite a few native functions. It has also shown me some of the limitations of the API documentation. I wanted to understand the commands used for CGRectMake but could not find a class for it as all classes were CP...; it turns out in CPWindow the file CoreGraphics/CGGeometry.h is included, which defines CGRectMake parameters as (x, y, width, height).

For me the tutorial was quite a lot to take in. Even for myself, who has worked with Objective C in the past, it took some adjusting to. The main benefit I am seeing though is the clear object pattern that is being applied and the much more intuitive instance management through setTarget and setAction. I am hoping to learn a lot more through other tutorials.


16am said...

Hey! This is amazing! Exactly what I was looking for..
I want to learn Cappucino and Objective-j! That's even if I am not so familiar as you are with other languages (I do css and js basically)
Anyway.. That was really helpful to get an idea and the path to follow!

Post a Comment