I thought I would do a quick post on how I achieved the “overlaying” NSOutlineView effect within Caffeinated.

Im not going to provide source, meerly the thought process behind it. So here it goes.

Its made up of 2 NSOutlineViews, one embedded within the others NSScrollView. The main NSOutlineView has a custom cell at the top of it which is the same height as the overlaying NSOutlineView. Due to the fact the overlaying NSOutlineView is wrapped within a NSScrollView, you must subclass its scrollview to forward the scrolling events on to its superview – superview, so 2 levels up the display list. Another problem will occur when the main NSScrollView redisplays the main NSOutlineView, this will cause the cells within the main NSOutlineView to draw over the top of the overlaying NSOutlineView. To get around this problem we observe the main NSScrollView for its scrolling notification and redraw the overlaying NSOutlineView when it has been posted.

Another thing you will notice is the shadow and the indent lines. This is meerly produced by subclassing the NSOutlineView class and overriding its drawRect methods and drawing the indent lines. How the shadow works is just by drawing an image below the overlaying NSOutlineView, with custom methods in the delegate, you can easily turn the shadow on and off.

Next part is overriding the keyboard events within the NSOutlineView, so that both of the views act as one when reaching the first and last item within them and selecting the appropriate view. Its actually pretty simple once you get your head around the concept. It does require you to type a fair bit of code, but its worth it ;)

Hope this helps anyone.

Its really simple to use, to run your own code / class, you ust subclass NSOperation and have a method called main which doesn’t return anything, so … – (void)main {}. main will get invoked when the item gets called, once all your code has done what it was set out to do, you simple have to perform a selector on the main thread and do what ever you like.

All that said and done, its pretty god damn awesome!, if you haven’t had a look at it yet, its worth a go :D.

The problem is, Internet Explorer ( bless its cotton socks ) doesn’t like you loading the same swf file into the document dynamically over and over again. It will meerly use a cached file, so whatever you inject into the Flash movie when its loaded is stored and IE will constantly use this movie until you close the browser.

The solution? Very simple…meery wack a timestamp on the end of the file you wish to include…like this :

'mymovie.swf?time=' + new Date().getTime();

Thus Internet Explorer will think its a completely new file and load that bad boy in again!

Once again IE has made me spend endless hours on pointless bulls**t.

Heres the header file :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

@interface GGImageLoader : NSObject {
 
	NSURLConnection * connection;
 
	NSURL * url;
 
	NSMutableData * mutData;
 
	UIImage * image;
 
	id delegate;
 
}
 
@property ( nonatomic, retain ) UIImage * image;
 
- (id)initWithURL:(NSURL *)aURL;
- (void)setDelegate:(id)anObject;
- (void)load;
 
@end
 
@protocol GGImageLoaderProtocol
 
@required
- (void)imageLoader:(GGImageLoader *)loader
	   didLoadImage:(UIImage *)anImage;
 
@optional
- (void)imageLoader:(GGImageLoader *)loader
	didReceiveError:(NSError *)anError;
 
@end

and heres the main file :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

#import "GGImageLoader.h"
 
 
@implementation GGImageLoader
 
@synthesize image;
 
- (void)dealloc
{
	[super dealloc];
	[url release];
	[connection release];
	[mutData release];
	[image release];
}
 
- (id)initWithURL:(NSURL *)aURL
{
	url = [aURL retain];
	return self;
}
 
- (void)setDelegate:(id)anObject
{
	delegate = anObject;
}
 
- (void)load
{
	// SHOW NETWORK INDICATOR
 
	[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
 
	// SET UP THE REQUEST
 
	NSURLRequest * request = [[[NSURLRequest alloc] initWithURL:url] autorelease];
 
	// SET UP THE CONNECTION
 
	connection = [[NSURLConnection alloc] initWithRequest:request
												 delegate:self];
 
	// NEW MUT DATA
 
	mutData = [[NSMutableData new] retain];
 
}
 
- (void)connection:(NSURLConnection *)connection
  didFailWithError:(NSError *)error
{
	if( [delegate respondsToSelector:@selector(imageLoader:didReceieveError:)] )
	{
		[delegate imageLoader:self
			  didReceiveError:error];
	}
}
 
- (void)connection:(NSURLConnection *)connection
	didReceiveData:(NSData *)data
{
 
	// APPEND THE DATA
 
	[mutData appendData:data];
}
 
- (void)connectionDidFinishLoading:(NSURLConnection *)aConnection
{
 
	// ONCE LOADED HIDE NETWORK INDICATOR
 
	[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
 
	// RELEASE THE CONNECTION
 
	[connection release];
 
	// CREATE NEW UIIMAGE FROM THE DATA
 
	image = [[[UIImage alloc] initWithData:mutData] retain];
 
	if( [delegate respondsToSelector:@selector(imageLoader:didLoadImage:)] )
	{
		[delegate imageLoader:self
				 didLoadImage:image];
	}
 
}
 
@end

Its pretty self explanatory, meerly do the following to get it to work..

1
2
3

GGImageLoader * imageLoader = [[[GGImageLoader alloc] initWithURL:[NSURL URLWithString:@"myimageurlhere"]] retain];
[imageLoader setDelegate:self];
[imageLoader load];

The class also has delegate methods and a protocol to follow, so we know when the image has loaded, you can use the GGImageLoaderProtocol in your header file if you like.

1
2
3
4
5
6
7
8
9

- (void)imageLoader:(GGImageLoader *)imageLoader didReceieveError:(NSError *)anError
{
}
 
- (void)imageLoader:(GGImageLoader *)imageLoader didLoadImage:(UIImage *)anImage
{
	// BE SURE TO RELEASE THE IMAGE LOADER
	[imageLoader release];
}

and thats about it, hope its helps some people out!

If ive made a mistake anywhere in this please say, it was a rush post!

1. The function

Simply use this function I created :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

<?php
function ember_thumbs( $options = null )
{
 
	# ARE THERE OPTIONS?
	
	if( !$options )
		return;
 
	$feed = 'http://emberapp.com/'.urlencode( $options['username'] ).'/images.rss';
 
	# CREATE NEW DOM DOCUMENT FOR EASE OF PARSING THE FEED
	
	$dom = new DOMDocument;
 
	# LOAD THE FEED
	
	$dom->loadXML( file_get_contents( $feed ) );
 
	# GRAB THE ITEMS FROM THE FEED
	
	$images = $dom->getElementsByTagName( 'item' );
 
	$imgs = array();
 
	# LOOP THROUGH EACH OF THE ITEMS
	
	foreach( $images as $image )
	{	
 
		# TEMP ARRAY
		
		$t = array();
 
		# LOOP THROUGH EACH CHILD NODE
		
		foreach( $image->childNodes as $child )
		{
 
			# IF THE CHILD HAS ATTRIBUTES, SUCH AS THE media:thumbnail TAG
		
			if ( $child->hasAttributes() ) 
			{
				$t[$child->nodeName] = array();
				$t[$child->nodeName]['nodeValue'] = $child->nodeValue;
				$attributes = $child->attributes;
				foreach( $attributes as $at => $att )
					$t[$child->nodeName][$at] = $att->nodeValue;
			} else
				$t[$child->nodeName] = $child->nodeValue;
		}
 
		# PUSH THE TEMP ARRAY INTO THE OVERALL ARRAY
		
		array_push( $imgs, $t );
	}
 
	# CONSTRUCT A STRING
	
	foreach( $imgs as $image )
		if( $i++ < $options['limit'] )
			$string .= '<a class="ember_image" href="'.$image['link'].'" title="'.$image['title'].'"><img src="'.$image['media:thumbnail']['url'].'" width="'.$options['size'].'" height="'.$options['size'].'" /></a>';
 
	# CLEAR FROM MEMORY
	
	unset( $temp );
 
	# RETURN THE STRING
	
	return $string;
 
}
?>

2. Using the function

To use the function, simply parse in an array of options, which are :

• username
• limit
• size

For example :

1
2
3
4
5
6
7

<?php 
	echo ember_thumbs( array(
		'username' => 'curthard89',
		'limit' => 6,
		'size' => 92
	));
?>

Username being your username, limit being how many thumbs you want to display and size is the width and height of the image, once thats done, style till your heart is content.

If you have any questions or mods or anything be sure to leave a comment!

Its been a hell of along time since I posted anything on this blog. I wanted to post something a few days back and really hated the look and feel of the site…so I totally went and did it, I totally scrapped the other one and thus this new site was born. Although it says development blog at the top, this site will consist of geeky tutorials aswell, from the depths of the languages such as COCOA, ActionScript, JavaScript, PHP and anything else that seems to crop into my head. I plan on putting a tutorial on this site every week, or really anything thats rather geeky that I stumble across or have the urge to tell people about.