Brew up a Rich Web Application with Cappuccino

Brew up a Rich
Web Application
with Cappuccino
Howard M. Lewis Ship
TWD Consulting
hlship@comcast.net
1 © 2009 Howard Lewis Ship

Three 'C's,
Two 'P's,
One 'N'

Agenda
• Why Cappuccino?
• Getting Started
• Objective-J
• Running as a Web App
• Window Resizing &
Remote Communication
• Cappuccino Pitfalls


Why Cappuccino?


❝If you need web applications that offer
the same user experience as a desktop
app would, then Cappuccino is for you. If
you truly believe that the classic web
development "components" - the usual
HTML/CSS/Javascript horror shop -
simply stinks, then you are going to be
delighted about Cappuccino, too.❞

Holger Jahn

Getting Started


Download
http://cappuccino.org/download/

Click Here


Install Tools
sudo ./install-tools


Tools Install
• Pre-Requisites

• Mac or Linux Helps!

• Cygwin for Windows

• Ruby & Rake

•cd Tools ; sudo ./install-tools

• Tools & Frameworks installed to /usr/local/share

• Must add /usr/local/share/bin to $PATH


Create Example
capp gen example


Generated Files

Info.plist Application startup information

main.j main() method for application

AppController.j Application controller (builds initial UI)

index.html Launches application

index-debug.html Launches application (debug mode)

Rakeﬁle Rake build ﬁle

Frameworks Copy of /usr/local/share/objj/lib/Frameworks

Resources Resources (images, etc.) available to application


Configuration
/*
* AppController.j
* example
*
* Created by You on July 14, 2009.
* Copyright 2009, Your Company All rights
reserved.
*/

• capp config key value Stored in ~/.cappconfig
• user.name
• user.email
• organization.name
• organization.email
• organization.url
• organization.identifier


View Example App


Objective-J


Lineage


Objective-C

+ =

Preprocessor


Objective-J Syntax
Java Syntax Objective-J Syntax

window.orderFront(); [window orderFront];

icon.moveToXY(100, 200); [icon moveToX:100 Y:200];

method moveToX:Y:


new JFrame(); [[CPWindow alloc] init];

new JFrame("Toolbox"); [[CPWindow alloc] initWithTitle:"Toolbox"];

Class name
Class method


this.setNeedsDisplay(true); [self setNeedsDisplay:YES];

Cheat Sheet: this ➠ self, true ➠ YES, false ➠ NO, null ➠ nil 19 © 2009 Howard Lewis Ship

Deﬁning Classes
Base class
PageView.j

@import <AppKit/CPView.j>

@implementation PageView : CPView
{
CALayer _rootLayer;
}

// Methods defined here

@end

Convention: instance variables
start with underscore


Deﬁning Methods
- for instance method type of parameter
+ for class method
PageView.j

- (id)initWithFrame:(CGRect)aFrame
{
self = [super initWithFrame:aFrame];

if (self)
Return type {
_rootLayer = [CALayer layer];
[self setWantsLayer:YES];
[self setLayer:_rootLayer];
[_rootLayer setBackgroundColor:[CPColor whiteColor]];
[_rootLayer setNeedsDisplay];
}

return self;
}


No
Namespaces

Cappuccino User Interfaces

M
ac
O
nl
y
UI Object properties and connections

+ =
Controller Class Interface Builder File Running User Interface

[CPBundle loadCibNamed:owner:loadDelegate:]
Instantiates & connects


Actions and Outlets

triggerClicked:

AppController

@implementation AppController : CPObject
{
CPWindow theWindow;
CPTextField outputField;
}

…

- (void)triggerClicked:(id)sender
{
[outputField setObjectValue:"You clicked it!"];
}

@end


capp gen BasicControls -t NibApplication


Be 1
N

ta 5
ov
http://280atlas.com/


Running as a Web App
Using Maven & Jetty


Creating a Web App
• mvn archetype:generate
• #18 (basic web application)
• Edit pom.xml:
<plugins>
<plugin>
<groupId>org.mortbay.jetty</groupId>
<artifactId>jetty-maven-plugin</artifactId>
<configuration>
<requestLog implementation="org.eclipse.jetty.server.NCSARequestLog">
<append>true</append>
</requestLog>
</configuration>
</plugin>
</plugins>

• capp gen src/main/webapp/app
• mvn jetty:run
• Open http://localhost:8080/app


Creating a simple calculator


Cappuccino Classes
CPObject

CPResponder
undoManager : CPUndoManager
menu : CPMenu
nextResponder : CPResponder

CPView CPWindow
hidden : BOOL fullBridge : BOOL
frame : CGRect
- addSubview:CPView : void
level : int
- display : void
visible : BOOL
contentView : CPView
backgroundColor : CPColor
hasShadow : BOOL
title : CPString
CPControl

CPPanel


Cappuccino Classes
CPControl
action : SEL
target: id
enabled : BOOL
highlighted : BOOL
objectValue : id
ﬂoatValue: ﬂoat
doubleValue : double
intValue : int
- initWithFrame:CGFrame : CPControl

CPButton CPTextField

title : CPString editable : BOOL
secure: BOOL
- sizeToFit : void bezeled : BOOL
+ buttonWithTitle:CPString : CPButton
+ labelWithTitle:CPString : CPTextField


Adding Controls

AppController.j

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

_display = [CPTextField labelWithTitle:"(placeholder)"];
[_display setBezeled:YES];
[_display sizeToFit];

[contentView addSubview:_display];

[theWindow orderFront:self];
}


Utility Methods

AppController.j

- (void)add:(CPView)subview
{
[_contentView addSubview:subview];
}

- (CPButton)makeButton:value at:(CGRect)frame
{
var button = [[CPButton alloc] initWithFrame:frame];

[button setTitle:value.toString()];

[self add:button];

return button;
}


More Controls
AppController.j

_display = [CPTextField labelWithTitle:"(placeholder)"];
[_display setFrame:CGRectMake(5, 5, 180, 30)]

[self add:_display];

[self makeButton:7 at:CGRectMake(5, 35, 40, 25)];
[self makeButton:"*" at:CGRectMake(140, 35, 40, 25)];

[self makeButton:"-" at:CGRectMake(140, 65, 40, 25)];

[self makeButton:"+" at:CGRectMake(140, 95, 40, 25)];

[self makeButton:"." at:CGRectMake(95, 125, 40, 25)];
[self makeButton:"=" at:CGRectMake(140, 125, 40, 25)];


Local vars have no type

- (CPButton)makeDigit:(int)value at:(CGRect)frame
{
Should be var CPButton button = [self makeButton:value at:frame
action:@selector(digit:)];

[button setTag:value];

return button;
}


Local vars have no type

- (CPButton)makeDigit:(int)value at:(CGRect)frame
{
Should be var CPButton button = [self makeButton:value at:frame
action:@selector(digit:)];

[button setTag:value];

return button;
}

Not helpful!

Client Exception — Safari


Fleshed-Out Calculator
AppController.j

_display = [CPTextField labelWithTitle:""];
[_display setAlignment:CPRightTextAlignment];


[self makeButton:"C" atX:0 y:0 action:@selector(clear:)];

[self makeButton:"/" atX:3 y:0 action:@selector(div:)];
[self makeButton:"*" atX:3 y:1 action:@selector(mult:)];
[self makeButton:"-" atX:3 y:2 action:@selector(minus:)];
[self makeButton:"+" atX:3 y:3 action:@selector(plus:)];

[self makeDigit:7 atX:0 y:1];

…

[[self makeButton:"=" atX:3 y:4 action:@selector(compute:)]
setDefaultButton:YES];


Utility Methods
AppController.j

- (CPButton)makeButton:(id)value atX:(int)x y:(int)y action:(SEL)action
{
var frame = CGRectMake(45 * x + 5, 30 * y + 35, 40, 24);
var button = [[CPButton alloc] initWithFrame:frame];

[button setTitle:value.toString()];

[button setTarget:self];
[button setAction:action];

[self add:button];

return button;
}

- (CPButton)makeDigit:(id)value atX:(int)x y:(int)y
{
return [self makeButton:value atX:x y:y action:@selector(digit:)];
}


Action Methods
@selector(digit:)

AppController.j

- (void)digit:(CPButton)source
{
var digit = [source title];

if (_value == "" && digit == "0") return;

_value = _sign + _value + digit;
_sign = "";

[_display setStringValue:_value];
}

- (void)clear:(id)source
{
[self reset];
}


Nesting Controllers


HUD Panel


Main UI

Top level window
AppController.j

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

var button = [CPButton buttonWithTitle:@"Calculator"];

[button setFrameOrigin:CGPointMake(60, 40)];

[contentView addSubview:button];

[button setTarget:self];
[button setAction:@selector(raiseCalculatorPanel:)];

[window orderFront:self];
}


Creating CalcController

AppController.j

…
@import "CalcController.j"

@implementation AppController : CPObject
{
CalcController _calcController;
}

…

- (void)raiseCalculatorPanel:(id)sender
{
if (_calcController == nil)
_calcController = [[CalcController alloc] init];

[_calcController show];
}

@end


CalcController UI
CalcController.j

- (id)init
{
self = [super init];

_panel = [[CPPanel alloc] initWithContentRect:CGRectMake(20, 30, 184, 184)
styleMask:CPHUDBackgroundWindowMask | CPClosableWindowMask];

_contentView = [_panel contentView];

[_panel setTitle:"Calculator"];

_display = [CPTextField labelWithTitle:""];
[_display setAlignment:CPRightTextAlignment];


[self makeButton:"C" atX:0 y:0 action:@selector(clear:)];

…

return self;
}


Window Resizing &
Remote Communication

Twitter Panel UI
TwitterController.j

_panel = [[CPPanel alloc] initWithContentRect:CGRectMake(20, 30, 245, 184)
styleMask:CPHUDBackgroundWindowMask | CPClosableWindowMask | CPResizableWindowMask];

[_panel setTitle:@"Twitter"];

var label = [CPTextField labelWithTitle:"User:"];
[label setFrame:CGRectMake(3, 7, 50, 24)];
[label setTextColor:[CPColor whiteColor]];

_field = [CPTextField textFieldWithStringValue:"" placeholder:"Twitter User" width:200];

[_field setFrame:CGRectMake(40, 0, 200, 28)];
[_field setTarget:self];
[_field setAction:@selector(startSearch:)];

var scrollView = [[CPScrollView alloc] initWithFrame:CGRectMake(0, 32, 245, 160)];

[scrollView setAutohidesScrollers:YES];

var content = [_panel contentView];

[content addSubview:label];
[content addSubview:_field];
[content addSubview:scrollView];


Autoresize Flags
Containing CPView

CPViewMinYMargin

CPView

HeightSizable
CPViewMinXMargin CPViewMaxXMargin

CPView
CPViewWidthSizable

CPViewMaxYMargin


Autoresizing
TwitterController.j

[_panel setTitle:@"Twitter"];
[_panel setMinSize:CGSizeMake(245, 184)];

var label = [CPTextField labelWithTitle:"User:"];
[label setFrame:CGRectMake(3, 7, 50, 24)];
[label setTextColor:[CPColor whiteColor]];

_field = [CPTextField textFieldWithStringValue:"" placeholder:"Twitter User" width:200];

[_field setFrame:CGRectMake(40, 0, 200, 28)];
[_field setTarget:self];
[_field setAction:@selector(startSearch:)];
[_field setAutoresizingMask:CPViewWidthSizable];

var scrollView = [[CPScrollView alloc] initWithFrame:CGRectMake(0, 32, 245, 160)];

[scrollView setAutoresizingMask:CPViewWidthSizable | CPViewHeightSizable];

[scrollView setAutohidesScrollers:YES];
[scrollView setBackgroundColor:[CPColor whiteColor]];

Temporary


CPCollectionView

TwitterController.j

var itemPrototype = [[CPCollectionViewItem alloc] init];
[itemPrototype setView:[[TwitView alloc] init]];

_timelineView = [[CPCollectionView alloc]
initWithFrame:CGRectMake(0, 0, CGRectGetWidth(scrollViewBounds) - 2, 0)];
[_timelineView setItemPrototype:itemPrototype];
[_timelineView setDelegate:self];
[_timelineView setMaxNumberOfColumns:1];

[_timelineView setAutoresizingMask:CPViewWidthSizable];

[_scrollView setDocumentView:_timelineView];


JSON ➠ Image & Label
{
"title" : "Mmm - biscuits and gravy, in my hometown, with the woman I love.",
…
"user" : {
"profile_image_url" :
"http://a3.twimg.com/profile_images/71386417/scott_davis_2009_normal.jpg",
…
}
}

TwitView.j

- (void)setRepresentedObject:(JSONObject)obj
{
if (!_label)
{
…
}

[_imageView setImage:[[CPImage alloc]
initByReferencingFile:obj.user.profile_image_url
size:CPSizeMake(55, 55)]];
[_label setStringValue:obj.text];
}
@end


Sending the Search Request

Cached ﬁle (to avoid authentication)
TwitterController.j

- (void)startSearch:(id)sender
{
var url = "twitter/statuses/friends_timeline/" + [_field stringValue] + ".json";

var request = [CPURLRequest requestWithURL:url];
[CPURLConnection connectionWithRequest:request delegate:self];
}

Who to notify when data arrives


Handling the Response

TwitterController.j

- (void)connection:(CPURLConnection)connection didReceiveData:(CPString)data
{
var timeline = JSON.parse(data);

[_timelineView setContent:timeline];
}

- (void)connection:(CPURLConnection)connection didFailWithError:(CPString)error
{
CPLog.error(error);
}

TwitView.j

- (void)setRepresentedObject:(JSONObject)obj
{
...
}
@end


Cappuccino
Pitfalls

Documentation


Mac-Centric


Compilation
Exceptions


Client-Side Efﬁciency


Wrap Up


http://github.com/hlship/nfjs-cappuccino


http://cappuccino.org


Image Credits
© 2008 nalungaard
http://www.flickr.com/photos/nalundgaard/2587677285/
© 2005 Michael Sarver
http://www.flickr.com/photos/michaelsarver/44302391/
© 2007 Till Krech
http://www.flickr.com/photos/extranoise/487179535/
© 2009 Phill Davison
http://www.flickr.com/photos/phill_dvsn/3771462059/
© 2007 Howard Gees
http://www.flickr.com/photos/cyberslayer/952153409/
© 2006 Tyler Hawkins
http://www.flickr.com/photos/m4m/279364376/
© 2009 Harald
http://www.flickr.com/photos/haarald/3227728698/
© 2006 Brittney Bush Bollay
http://www.flickr.com/photos/tzofia/247056173/


Brew up a Rich Web Application with Cappuccino

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Destacado

Destacado (13)

Similar a Brew up a Rich Web Application with Cappuccino

Similar a Brew up a Rich Web Application with Cappuccino (20)

Más de Howard Lewis Ship

Más de Howard Lewis Ship (16)

Último

Último (20)

Brew up a Rich Web Application with Cappuccino