The JavaScript blog.


frameworks cappuccino github

GitHub Issues in Cappuccino

Posted on .

GitHub Issues built with Cappuccino looks
incredible. Not only that, it feels usable too -- details like inline
windows that can be moved around and keyboard shortcuts all work as
you'd expect.

What's amazing about this is it not only pushes client-side JavaScript
but it also uses Heroku's Node beta! The blog post on
Cappuccino.org has more details: GitHub Issues Cappuccino

280 North continue to embrace JavaScript for every aspect of their development cycle, yet there aren't that many apps
out there based on Cappuccino. I've never understood why it hasn't
caught on more, but I suspect Objective-J puts people off.

I make a large portion of my income from iPhone development, and I'm a
big believer of Objective-C, which means I'm comfortable with both
JavaScript and Objective-J. I think it's likely that once Mac and iPhone
developers are sold on Cappuccino and Atlas
we'll see lots of Cappuccino web apps cropping up.

If you've made any Cappuccino apps, open source or commercial, please
let me know in the comments and I'll write up a feature about them in
the future.


frameworks cappuccino

Cappuccino 0.8: Fully JavaScript

Posted on .

Cappuccino has been updated to 0.8. This version includes a table view implementation (which iPhone and Cocoa
developers will be all too familiar with), and other bug fixes and minor

The most exciting thing about this release is that the entire stack is
now JavaScript. That means the Cappuccino code has no external
dependencies -- it no-longer requires tools like Rake, opting instead
for JavaScript and Objective-J.

The Cappuccino blog has more details: Cappuccino


cappuccino ui

Atlas: Your First Tutorial

Posted on .

Atlas is a commercial tool built by 280North. Atlas is designed to build interfaces for applications built with Cappuccino.
Cappuccino is a web framework based on Cocoa (and GNUstep) -- this makes
it immediately familiar to iPhone and Mac developers. It uses the
Objective-J language, which is similar to Objective-C but built on top
of JavaScript.

The major draw of Atlas is it allows developers to build Desktop and
browser-based applications. Selecting "Native Desktop" from the build
options results in an executable. The interface isn't 100% native, but
it has been designed by Sofa who make
great Mac software.

Here's what the interface builder looks like:

Getting Atlas

The Atlas beta programme costs \$20. It's currently Mac only, and
joining the developer programme doesn't mean you get the full Atlas
application when it's finished -- the \$20 will be deducted from the
final price. So, if you'd like to follow along with this tutorial I
invite you to take a leap of faith.

  1. Sign up here
  2. Pay
  3. Download atlas from the downloads

If you're not comfortable with the terms of the beta programme, you can
still learn Cappuccino.

Creating a Project

This project is a quick demo of Atlas. It's a web browser (that runs
inside... a browser). It serves to demonstrate the fundamental features
of Atlas.

Once you've downloaded and started up Atlas, click New Project from
the file menu and select Document App.

This will display a new project:

If you select Build and Run you can see what a basic document-based
app looks like. Try switching between Native Desktop and Desktop

Adding Interface Elements

The browser app will have a URL field and browser body. In Objective-J,
these can be implemented with CPTextField and

Open Document.j and add these two lines after

@outlet CPWebView documentBody;
@outlet CPTextField address;

Save the file.

Next, open Resources by clicking on the disclosure triangle in the
file list. Click Document.cib. Atlas uses cib
files to store interface definitions.

Double click the Window icon at the bottom of the window. Click the
text that reads Document Contents and press backspace to delete it.

Look at the list of GUI widgets on the right-hand-side of the screen.
Find Web View -- it has a Safari-style icon, and drag it to the
window. If you resize it you'll see guidelines to help get it to the
right size. Next, drag in a Text Field, and a Standard Button. You
can double-click the button and change the text.

Interface Anchors and Resizing

Click the Test button and resize the window. You'll notice that your
carefully positioned GUI widgets don't resize correctly. Click Return
to Editor
to exit this mode.

Click the Text Field and select the Size tab at the bottom-right of
the screen. Notice that there are controls for the layout. Make it so
all of the middle lines are red. The Go button just needs the top and
right outer markers selected. The web view needs all of them. Press


Alt-click the File's Owner icon at the bottom of the screen and drag
to the web view, then select documentBody. This effectively
makes a connection between the GUI builder and your code.

Do the same for the address bar.

Now alt-click from the address bar to the web view and select

Finally, alt-click the go button, drag to the URL bar and select

Save the document and click Build and Run.

The Finished Result

This is what the finished result looks like:

You can download my version here:

In this tutorial, you've seen how to:

  1. Add GUI elements to a window
  2. Handle resizing in an Atlas-based app
  3. Make connections between code and the interface

Cappuccino and Objective-J have many other great features found in
Objective-C and Cocoa. If you're comfortable with Objective-C's object
model and concepts like delegates, you'll be able to build sophisticated
apps. There's also a network API so you can connect your applications to
your existing web services.