Making a news display with Cappuccino

Desktop developers have to make a few adjustments when moving to web development. Most of the mainstream programming languages for creating desktop applications are object oriented, while JavaScript is a prototype based language, and GUI toolkits like WinForms, QT and Cocoa don't share much in common with HTML. In short, jumping from the desktop to the web requires learning a whole new platform.

Cappuccino is a project that aims to provide desktop developers, especially those familiar with Objective-C and Cocoa, a familiar platform on which to build web applications. It introduces a new language called Objective-J, which is JavaScript with the Objective-C syntax, and creates a class library similar to Cocoa.

In this article we will look at creating a simple Cappuccino news display application. If you have never used Objective-C before I would recommend that you take a look at the Objective-J tutorial to get a feel for the Objective-J syntax, but I'll give a brief breakdown of the code syntax as we work through the application.

This application will modify the standard template that is included in the Cappuccino starter package, which you can download from here.

Extract the starter package and open up the AppController.j file. This file contains the code that we will modify to create the news display. The other files of the starter package do not need to be modified.

The following code defines a new Objective-J class:

@implementation AppController : CPObject

{

// member variables go here

}

@end

Here we have defined a class called AppController which extends the CPObject class. This style of class definition and inheritance is much the same as Objective-C, C++, Java, C# etc. While it is possible to use JavaScript as an object oriented language, Objective-J will be more familiar to programmers of more common desktop languages.

The AppController class from the starter pack does not define any member variables. Add the following code to define some member variables.

@implementation AppController : CPObject

{

CPWindow window;

CPView contentView;

CPImageView background;

CPTimer timer;

CPInteger currentDisplay;

}

The window variable references the CPWindow that is going to be the top level container to which all other controls are added.

The contentView variable is a reference to the content view contained in the window. This is where we will add our buttons and images.

The background variable references the CPImageView that will display the images that make up our news.

The timer variable will be used to execute events to a schedule, allowing our news display to cycle through the news items.

The currentDisplay variable keeps a track of the news item that is currently being displayed.