Atlas: Your First Tutorial

Alex R. Young





cappuccino ui

Atlas: Your First Tutorial

Posted by Alex R. Young on .

cappuccino ui

Atlas: Your First Tutorial

Posted by Alex R. Young 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.