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:
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.
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
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: DemoBrowser.zip
In this tutorial, you’ve seen how to:
- Add GUI elements to a window
- Handle resizing in an Atlas-based app
- 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.