In this article we walk you through building the most simple of applications: one with a few buttons with a "liquid" layout.  We'll show you how to set their font sizes, positions, and a few other properties.

Setup

Before we begin you'll need to set up an application.  You can follow the directions in the Cappuccino Setup tutorial and use either the "capp" tool or download the statup kit.  Either way we'll assume you have a working application.  Open up the AppController.j file and you should see this:

@import <Foundation/CPObject.j>

@implementation AppController : CPObject
{
}

- (void)applicationDidFinishLaunching:(CPNotification)aNotification
{
var theWindow = [[CPWindow alloc] initWithContentRect:CGRectMakeZero() 
styleMask:CPBorderlessBridgeWindowMask];
var contentView = [theWindow contentView];

var label = [[CPTextField alloc] initWithFrame:CGRectMakeZero()];
[label setStringValue:@"Hello World!"];
[label setFont:[CPFont boldSystemFontOfSize:24.0]];
[label sizeToFit];
[label setAutoresizingMask:CPViewMinXMargin | CPViewMaxXMargin | 
CPViewMinYMargin | CPViewMaxYMargin];
[label setCenter:[contentView center]];
[contentView addSubview:label];

[theWindow orderFront:self];
}

@end

The above code will produce the standard "Hello World!" output.  We'll change it to add a few buttons.  They won't do anything for now, we'll hook them up later.  First we'll add the left button.  Add the following after the line "[contentView addSubview:label];"

var leftButton   = [[CPButton alloc] initWithFrame:CGRectMakeZero()]; 
[leftButton setTitle:"Left"];
[leftButton setFont:[CPFont boldFontWithName:@"Helvetica" size:18.0]]; 
[leftButton sizeToFit];
[contentView addSubview:leftButton];

There isn't much surprising here.  The button is created with the "CPButton alloc" line and places it at the location specified in the upper left at (0,0) (via the CGRectMakeZero function).  The critical piece of code here is the line "[leftButton sizeToFit];".  This tells the button to resize itself to fit the label, in effect overriding the size (but not position) given in the "initWithFrame" call.

Right Alignment

We can now add the right button.  Add the following after "[contentView addSubview:leftButton];"

var rightLocation = CGRectMake(CPRectGetWidth(bounds)-65, 0, 65, 24);
var rightButton   = [[CPButton alloc] initWithFrame:rightLocation]; 
[rightButton setTitle:"Right"];
[rightButton setFont:[CPFont boldFontWithName:@"Helvetica" size:18.0]]; 
[rightButton setAutoresizingMask:CPViewMinXMargin];
[contentView addSubview:rightButton];

The code for this button is rather similar to the left button, with the critical line: "[rightButton setAutoresizingMask:CPViewMinXMargin];".  This is the code required to force the button to remain "attached" to the right-hand side of the window.  These are explained in much more detail in the tutorial at the Cappuccino layout tutorial but in essence the CPViewMinXMargin indicates that the area to the left of the button will stretch and shrink as the window size is changed, effectively keeping the button bound to the right-hand side.

Hint

Be careful here.  You need to specify the starting position when you're using the setAutoresizingMask.  Notice that the  left button was initialized with a location/size of zero (via CGRectMakeZero).  That works for the left button which we want to set at (0,0) anyway and whose size we're going to change via sizeToFit.  But you cannot use that if you want to align right since you need to specify the position to hold.  We did this in the initialization line (line 1) when we specified the starting location (here at x=CPRectGetWidth(bounds)).  Now when we specify the resizing mask we have a location to be held.

One additional not-so-obvious issue: we specified a size for the button, especially the width (here 65 pixels in line 1).  We did that since we need to know how big the button is so we can shift it off the edge.  Since the location of the upper left corner of the button is specified we need to specify a starting location smaller than the window size.  Here we use CPRectGetWidth(bounds)-65 since we know the button is 65 pixels wide.  If we later used sizeToFit the button would change size and would no longer be snug against the right-hand side.

Center Alignment

You can probably guess how this is done.  It's actually the same way as the right align.  Add the following after "[contentView addSubview:rightButton];":

var centerLocation = CGRectMake((CPRectGetWidth(bounds)-65)/2, 0, 65, 24);
var centerButton   = [[CPButton alloc] initWithFrame:centerLocation]; 
[centerButton setTitle:"Center"];
[centerButton setFont:[CPFont boldFontWithName:@"Helvetica" size:18.0]]; 
[centerButton sizeToFit];
[centerButton setAutoresizingMask:CPViewMinXMargin | CPViewMaxXMargin];
[contentView addSubview:centerButton];

Here again we specify the width in the initialization and don't use sizeToFit.

Hint

You need to specify both the CPViewMinXMargin and CPViewMaxXMargin masks to keep the button centered.  If you specify only CPViewMinXMargin the button will "drift" since it stays a fixed distance from the right-hand side.

Danger

Buttons seem to behave rather strangely when you specify absolute vertical sizes larger than "expected".  Consider this code

@import <Foundation/CPObject.j>

@implementation AppController : CPObject
{
}

- (void)applicationDidFinishLaunching:(CPNotification)aNotification
{
var theWindow   = [[CPWindow alloc] initWithContentRect:CGRectMakeZero()
styleMask:CPBorderlessBridgeWindowMask];
var contentView = [theWindow contentView];
var bounds      = [contentView bounds];

var location1 = CGRectMake(0, 0, 100, 24);
var button1 = [[CPButton alloc] initWithFrame:location1]; 
[button1 setTitle:"Button 1"];
[button1 setFont:[CPFont boldFontWithName:@"Helvetica" size:18.0]]; 
[contentView addSubview:button1];

var location2 = CGRectMake(150, 0, 100, 40);
var button2   = [[CPButton alloc] initWithFrame:location2]; 
[button2 setTitle:"Button 2"];
[button2 setFont:[CPFont boldFontWithName:@"Helvetica" size:18.0]]; 
[contentView addSubview:button2];

var location3 = CGRectMake(300, 0, 100, 65);
var button3   = [[CPButton alloc] initWithFrame:location3]; 
[button3 setTitle:"Button 3"];
[button3 setFont:[CPFont boldFontWithName:@"Helvetica" size:18.0]]; 
[contentView addSubview:button3];

[theWindow orderFront:self];
}

@end

Here we create three buttons at fixed locations with fixed sizes.    The resulting applications looks like this:

Notice how the left-most button looks good since we carefully picked the right vertical size (24 pixels for 18 point font).  The second and third buttons have larger vertical sizes (40 and 65 pixels respectively).  You can see the rendering is not right.  Be careful when you set the vertical sizes.