Atlas: Your First Tutorial

16 Nov 2009 | By Alex Young | Tags cappuccino ui

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 page

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 Browser.

Adding Interface Elements

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

Open Document.j and add these two lines after @implementation:

@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 takeStringURLFrom:.

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

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.

blog comments powered by Disqus