Note: This example doesn’t have anything related to the Qt 4.5 Cocoa Support.

Run the Qt4 Server, and the Cocoa Application (Remember to change the SERVER_HOST in AppController.m) and try to send some binary data. The Qt Server will receive this data it will resend you. Protocol is Very easy 1 byte of Data Type (Int8, Int16, ..) and Data. Remember that Intel arch is Little Endian.

Note: This is just a “Draft” a “non complete” example only to give the idea on how it works.

The Source Code is available here: Qt/Cocoa DataStream Source Code.

Joel asked me to revise the Sidebar, allowing to add/remove and do other operation at any time.

I’ve rewritten all the code of the Sidebar, and I’ve added a couple of new features, like the default action handler and obviously the ability to add, remove items and badges at any time.

All the past features, like Drag & Drop are still present, but there’s something else to do to improve it. If You’ve suggestions, patches or something else post a comment or send me a mail!

The Source Code is Available Here: Cocoa Sidebar 2 Source Code.

Update 10 March 2008 – Source Updated with Fixes.

You can find the source code here: Drag & Drop Test Source Code.

The interesting part of this example is How to manage WebKit content, and how to add something dynamically.

I use webView:decidePolicyForNavigationAction:request:frame:decisionListener: of WebPolicyDelegate Protocol to handle my custom requests, in this way…

- (void)webView:(WebView *)sender
    decidePolicyForNavigationAction:(NSDictionary *)actionInformation
   request:(NSURLRequest *)request frame:(WebFrame *)frame
   decisionListener:(id)listener
{
    if ([[[request URL] path] isEqualToString:@"PATH to Handle"]) {
        [listener ignore];
        // Handle Request
    } else {
         [listener use];
    }
}

…Then with a little bit of JavaScript I’ll set my dynamic content loaded from Database or somewhere else.

NSArray *args = [NSArray arrayWithObjects:@"Item1Content",
                                  @"Hi, I'm Test 1 Content", nil];
[[webKit windowScriptObject] callWebScriptMethod:@"fillElement"
                               withArguments:args];

The fillElement method is a simple JS function like this document.getElementById(elem).innerHTML = data;

Here you can find the Source Code.

Cocoa Sidebar

You can find the example Source Code Here.

And below you can see hot to add folders, nodes and set badges.

- (void)populateOutlineContents:(id)inObject {
  NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];

  [sidebar addRootFolder:@"1" name:@"DEVICES"];
  [sidebar addChild:@"1.1" name:@"Machintosh HD"
               icon:[NSImage imageNamed:NSImageNameComputer]
             action:@selector(buttonPres:) target:self];

  [sidebar addRootFolder:@"2" name:@"PLACES"];
  [sidebar addChild:@"2.1"
                url:NSHomeDirectory()
             action:@selector(buttonPres:) target:self];

  [sidebar addRootFolder:@"3" name:@"OTHER."];
  [sidebar addChild:@"3.1" name:@"Bonjour"
               icon:[NSImage imageNamed:NSImageNameBonjour]
             action:@selector(buttonPres:) target:self];
  [sidebar addChild:@"3.2" name:@"Users"
               icon:[NSImage imageNamed:NSImageNameUserGroup]
             action:@selector(buttonPres:) target:self];

  [sidebar clearSelection];

  // Add Badge to Node with Key
  [sidebar setBadge:@"2.1" count:5];
  [sidebar setBadge:@"3.2" count:7];

  [pool release];
}

- (void)buttonPres:(id)sender {
  NSLog(@"Button Press %@", [sender nodeTitle]);
}

I’ve made a simple example that you can see below where I’ve used custom NSView that draws an Image and a Bezier Path with some text inside, and around the Bezier Path there’s a Shadow.

Cocoa Drawing Example

…And this is the drawRect method source code of the custom NSView.

- (void)drawRect:(NSRect)frameRect {
  [NSGraphicsContext saveGraphicsState];

  [[NSColor colorWithCalibratedRed:0.64 green:0.66 blue:0.71 alpha:1.0] set];
  NSRectFill(frameRect);

  /* Draw Shadow */
  NSShadow *shadow = [[NSShadow alloc] init];
  [shadow setShadowColor:[[NSColor blackColor] colorWithAlphaComponent:0.5]];
  [shadow setShadowOffset:NSMakeSize(4.0, -4.0)];
  [shadow setShadowBlurRadius:3.0];
  [shadow set];

  /* Draw Control */
  NSRect myRect = NSMakeRect(80, 50, frameRect.size.width - 120, 60);
  NSBezierPath *path = [NSBezierPath bezierPath];
  [path setLineJoinStyle:NSRoundLineJoinStyle];
  [path appendBezierPathWithRoundedRect:myRect xRadius:8.0 yRadius:8.0];    

  [path moveToPoint:NSMakePoint(80, 75)];
  [path lineToPoint:NSMakePoint(65, 85)];
  [path lineToPoint:NSMakePoint(80, 95)];

  NSColor *startingColor = [NSColor colorWithCalibratedRed:0.90
                                             green:0.92 blue:0.85 alpha:1.0];
  NSColor *endingColor = [NSColor colorWithCalibratedRed:0.81
                                           green:0.83 blue:0.76 alpha:1.0];
  NSGradient *gradient = [[[NSGradient alloc] initWithStartingColor:startingColor
                                 endingColor:endingColor] autorelease];
  [path fill];
  [gradient drawInBezierPath:path angle:90];

  [NSGraphicsContext restoreGraphicsState];

  [shadow release];

  NSImage *image = [NSImage imageNamed:NSImageNameUser];
  [image drawInRect:NSMakeRect(15, 50, 50, 50) fromRect:NSZeroRect
                operation:NSCompositeSourceOver fraction:1.0];

  NSString *string = [NSString stringWithString:@"Text\nMore Text"];
  [string drawInRect:NSMakeRect(90, 60, frameRect.size.width - 140, 45)
                        withAttributes:nil];
}

Cocoa Filterbar Demo

Below, I’ve added a movie… but it doesn’t [sizeToFit] the page… so here is the link of Cocoa Filterbar Demo. And here you can find the Cocoa Filterbar Souce.

Example: Cocoa Horizontal Box

This is the HBox Source…

@interface HBox : NSView {
    NSUInteger hspace;
}

@property (readwrite, assign) NSUInteger space;

- (id)initWithFrame:(NSRect)frameRect;

- (void)clearItems;

- (void)addItem:(NSControl *)itemView;
- (void)removeItemAtIndex:(NSUInteger)index;

- (void)moveItem:(NSView *)view space:(NSInteger)space;
- (void)moveItems:(NSInteger) space fromIndex:(NSUInteger)index;
@end

@implementation HBox

@synthesize space = hspace;

- (id)initWithFrame:(NSRect)frameRect {
    if ((self = [super initWithFrame:frameRect])) {
        hspace = 4;
    }
    return self;
}

- (void)dealloc {
    [super dealloc];
}

- (void)clearItems {
    NSArray *subviewArray = [self subviews];
    NSUInteger subviewCount = [subviewArray count];

    while (subviewCount-- > 0) {
        NSView *view = [subviewArray objectAtIndex:0];
        [view removeFromSuperview];
        [view release];
    }

    [self setNeedsDisplay:YES];
}

- (void)removeItemAtIndex:(NSUInteger)index {
    NSView *view = [[self subviews] objectAtIndex:index];
    int viewWidth = -1 * [view frame].size.width - hspace;
    [view removeFromSuperview];
    [view release];

    [self moveItems:viewWidth fromIndex:index];
    [self setNeedsDisplay:YES];
}

- (void)moveItem:(NSView *)view space:(NSInteger)space {
    NSRect rect = [view frame];
    rect.origin.x += space;
    [view setFrame:rect];
}

- (void)moveItems:(NSInteger) space fromIndex:(NSUInteger)index {
    NSArray *subviewArray = [self subviews];
    NSUInteger subviewCount = [subviewArray count];

    for (; index < subviewCount; ++index)
        [self moveItem:[subviewArray objectAtIndex:index] space:space];
}

- (void)addItem:(NSControl *)itemView {
    [itemView sizeToFit];

    NSRect itemFrame = [itemView frame];
    NSView *lastView = [[self subviews] lastObject];
    if (lastView != nil) {
        itemFrame.origin.x = [lastView frame].origin.x +
                             [lastView frame].size.width +
                             hspace;
    } else {
        itemFrame.origin.x = [self bounds].origin.x + hspace;
    }
    itemFrame.origin.y = [self bounds].origin.y;
    [itemView setFrame:itemFrame];

    [self addSubview:itemView];
    [self setNeedsDisplay:YES];
}

@end

And This is a simple “Main” to test the HBox.

- (NSTextField *)createTextField:(NSString *)text {
    NSTextField *field = [[NSTextField alloc] init];
    [field setStringValue:text];
    return [field retain];
}

- (NSButton *)createButton:(NSString *)caption {
    NSButton *button = [[NSButton alloc] init];
    [button setBezelStyle:NSRecessedBezelStyle];
    [button setButtonType:NSPushOnPushOffButton];
    [[button cell] setHighlightsBy:(NSCellIsBordered | NSCellIsInsetButton)];
    [button setShowsBorderOnlyWhileMouseInside:YES];
    [button setButtonType:NSOnOffButton];
    [button setTitle:caption];

    return [button retain];
}

- (void)awakeFromNib {
    [box addItem:[self createTextField:@"Label 1"]];
    [box addItem:[self createButton:@"Button 1"]];
    [box removeItemAtIndex:0];
    [box addItem:[self createTextField:@"Label 2"]];
    [box addItem:[self createButton:@"Say"]];
}

Download Here the Test Cocoa HBox Source.

Quick Look Example

Here you can Find the source code example: TestQuickLook.zip

So, I don’t have some code to publish now, but i’ve made a couple of screenshots that contain some of Cocoa’s Controls.

Cocoa Controls

Ok… thanks for this Gallery, but it will be helpful have olso Objects Type….

Cocoa Controls - Interface Builder

And… last thing, different types of Windows.

Cocoa (HUD, Textured, Panel) Window

Cocoa System Status Bar

Something about Names… Apple HIG call this MenuBar part “MenuBar Extra” (See Apple HIG Part III – The Menu Bar and Its Menus) using Cocoa you can get it from NSStatusBar systemStatusBar.

Now the Example. As you can see in the picture we’ve our icon “M” with a Menu that do something…

Cocoa System Status Bar with Menu

When applicationDidFinishLaunching we initialize the NSStatusItem object we build the menu items and conntect with the related selector. In this example you can see the usage of NSWorkspace to run Application like finder and URL that will be opened with your default related app.

@interface TrayMenu : NSObject {
    @private
        NSStatusItem *_statusItem;
}
@end

@implementation TrayMenu

- (void) openWebsite:(id)sender {
  NSURL *url = [NSURL URLWithString:@"http://th30z.netsons.org"];
  [[NSWorkspace sharedWorkspace] openURL:url];
  [url release];
}

- (void) openFinder:(id)sender {
  [[NSWorkspace sharedWorkspace] launchApplication:@"Finder"];
}

- (void) actionQuit:(id)sender {
  [NSApp terminate:sender];
}

- (NSMenu *) createMenu {
  NSZone *menuZone = [NSMenu menuZone];
  NSMenu *menu = [[NSMenu allocWithZone:menuZone] init];
  NSMenuItem *menuItem;

  // Add To Items
  menuItem = [menu addItemWithTitle:@"Open Website"
                      action:@selector(openWebsite:)
                      keyEquivalent:@""];
  [menuItem setTarget:self];

  menuItem = [menu addItemWithTitle:@"Open Finder"
                      action:@selector(openFinder:)
                      keyEquivalent:@""];
  [menuItem setTarget:self];

  // Add Separator
  [menu addItem:[NSMenuItem separatorItem]];

  // Add Quit Action
  menuItem = [menu addItemWithTitle:@"Quit"
                      action:@selector(actionQuit:)
                      keyEquivalent:@""];
  [menuItem setToolTip:@"Click to Quit this App"];
  [menuItem setTarget:self];

  return menu;
}

- (void) applicationDidFinishLaunching:(NSNotification *)notification {
  NSMenu *menu = [self createMenu];

  _statusItem = [[[NSStatusBar systemStatusBar]
                  statusItemWithLength:NSSquareStatusItemLength] retain];
  [_statusItem setMenu:menu];
  [_statusItem setHighlightMode:YES];
  [_statusItem setToolTip:@"Test Tray"];
  [_statusItem setImage:[NSImage imageNamed:@"trayIcon"]];

  [menu release];
}

@end

int main(int argc, char *argv[]) {
    NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
    [NSApplication sharedApplication];

    TrayMenu *menu = [[TrayMenu alloc] init];
    [NSApp setDelegate:menu];
    [NSApp run];

    [pool release];
    return EXIT_SUCCESS;
}

Apple OS X Human Interface Guidelines

Reserved for use by Apple, the right side of the menu bar may contain items that provide feedback on and access to certain hardware or network settings. Menu bar extras display some type of status in the menu bar and have a menu to change settings. The icon for the battery strength indicator, for example, dynamically displays the current state of the battery for a portable computer, and the menu has common battery settings. Users can display or hide a menu bar extra in the appropriate preferences pane.

Important: Don’t create your own menu bar extras. Use the Dock menu functions to open a menu from your application’s icon in the Dock.

If there is not enough room in the menu bar to display all menus, menu bar extras are removed automatically by Mac OS X to make room for application menus, which take precedence. Because of this, and because users can choose to hide menu bar extras, you should not rely on their presence.

Mail uses html and css loaded into a WebView (WebKit) to render the background of the window. I’ve used a simple NSView, I’ve Inherited from it and I’ve added a couple of feature to render an image as background pattern. Below you can see the result and here you can Download the Source.

NSWindow with Image Pattern as Background