Planet CakePHP

If you haven’t given Cappuccino a look, you ought to. It’s a JavaScript framework designed after Apple’s Cocoa framework for building web applications. You wouldn’t use Cappuccino to build informational web sites, or really anything other than a web app, but for web apps it rocks. All of the HTML, DOM, and JavaScript is abstracted out and substituted instead is one language that handles all the heavy lifting for you: Objective-J.
Objective-J is a superset of JavaScript much like Objective-C is to C. If you’re already familiar with Objective-C, you should find Objective-J a cinch. And if you’re like I was and come out of a PHP, HTML background, it’s still simple to learn (with a little bit of patience).
Cappuccino mainly runs as a client-side framework, meaning that most of the functionality and coding happens without talking to the server. This doesn’t mean that it can’t communicate with the server; on the contrary, it works like you’d expect with other JavaScript frameworks like JQuery or Prototype, but it does so with its own Objective-J flavor. The handling is superb, allowing you to essentially Cocoa-ify the web browser without worrying about cross-browser compatibility and lots of hard coding. When going back and forth between server-side scripting and Cappuccino, all you have to do is send data in JSON format and Cappuccino can handle the rest of your needs.
On the Server: CakePHP. In the browser: Cappuccino.
I wanted to combine the powers of Cappuccino and CakePHP, but it required a little bit of configuring to get it working correctly. I’ll outline the steps I took to get Cappuccino working with Cake. Let’s start with a basic Cake application running out of the box, no controllers or anything. I’m using the standard directory structure for a Cake app that’s running correctly.
Step 1: Load the Cappuccino Libraries. Once you’ve downloaded the Cappuccino starter package, you’ll see a folder called “NewApplication.” Rename this to “cappuccino” and copy it to the Cake app’s
1webroot/js
directory. All of your Cappuccino programming will happen in this folder. We just need to tell Cake to run the Cappuccino app.
Step 2: Create the Layout. Create
1views/layouts/default.ctp
and copy and paste the markup from the starter index.html file here. Select all in the
1webroot/js/cappuccino/index.html
file and paste it in this default layout file.
Step 3: Configure the Layout. You should notice a
1
area that contains a JavaScript environment variable named
1OBJJ_MAIN_FILE
. This main file won’t run out of the box now that we’re calling this view from within CakePHP. All we have to do is add the
1
tag and let Cake provide the correct path, and it should line all of the libraries up correctly. Replace the code within this script area with the following:

1231    var path = "<?=$html->url('/js/cappuccino/',true);?>";
2    document.write("<"+"/base>");
3    OBJJ_MAIN_FILE = "main.j";

Notice that on line 1, I use the HTML helper’s URL function to provide the path as an absolute URI. Line 2 addresses an IE inconsistency (any surprise there?) regarding the base tag. Line 3 is the same OBJJ_MAIN_FILE parameter that is included in the starter index.html Cappuccino file.
Step 4: Launch the App. Now just call your Cake application in the web browser, and you should see “Hello World” execute appropriately.
Adjusting this Setup
You may want to use Cappuccino in only some CakePHP actions. If that’s the case, then create a different layout file, something like
1cappuccino.ctp
, then call this layout only in the actions that you want to use Cappuccino. The following

1$this->layout = 'cappuccino';

is used in the controller actions to then switch to this Cappuccino-based layout.
Remember that Cappuccino will come first in the code hierarchy now that we’ve got it installed. In other words, if you want Cake to provide content for these Cappuccino views, you’ll need to get Cappuccino first to run GET or POST requests using Cake routes. Then, you’ll need to change your output from HTML to JSON when talking back, unless you have segments of your Cappuccino app that are meant to display HTML output. But that’s a subject for another day. Take a look at Nice Panorama’s Tutorial Demos to get a sense of what I mean by this.