Cocoa: Drag & Drop

Today a simple example of Drag & Drop with Cocoa and NSView. The screenshot below shows two groups. In the first one, you can drop the photos on your filesystem, taken from Desktop or Finder. In the second group, you can only drop the first group image.

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

Cocoa: VBox View and NSScrollView

Following the post of yesterday, today I've implemented a simple VBoxView (Vertical Box Layout) that allow you to lines up NSViews vertically.

Here you can find the example Source Code.

Cocoa: Drawing Images, Texts and Shadows

Today I'm playing a bit with Quartz and Cocoa Drawing system (that is based on Quartz).

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.

...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 Control

This morning I've created this FilterBar (take a look at the picture below). You can add custom NSView and you can manage you groups with delegates.

so here is the link of Cocoa Filterbar Demo. And here you can find the Cocoa Filterbar Souce.

Cocoa: Horizontal Box

It's a couple of days that I'm searching for something like QHBoxLayout (Qt Horizonal Box Layout) in Cocoa. There's NSMatrix that do something like this... but it uses NSCell and it sets the same size for all the cells, so this is not what I want. My solution is a simple NSView subclass...

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.

Cocoa: Image Pattern as NSView Background

I Really like Apple Mail Note Editor, and today I've tried to do something like notes of Mail.app

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.