I’ve uploaded an example Three20 project that demonstrates a very simple JSON datasource. You can grab the code here. It’s assumed that Three20 lives at ../three20 relative to the project root and that you’ve got Stig Brautaset’s JSON framework installed in your ~/Library directory as explained on the Google Code wiki.
There isn’t much to the example – just a single controller and datasource. It’s pretty straightforward to bolt on additional functionality like a “load more” button (just read the TTCatalog and Three20 source) and hook into the other nice table features Three20 offers out of the box. Until better docs are available, hopefully this example can serve as a starting point for your own experimentation. Feedback is welcome!
Some screenshots so you know what you’re getting…first, the controller (registered as a datasource delegate) gets a notification that the datasource is in a loading state – this view is then automatically shown by the framework:
Second, the data has been loaded and the datasource has notified the controller that it’s ready. The controller then retrieves data from the datasource and displays it:
(I’m using a feed provided by the Yahoo Image Search Service API: here’s the raw JSON.)
Update, October 3 9:30 AM EDT
It’s come to my attention that some people are still using this code – please don’t! It was based on three20 as it existed back in March/April 2009 and is now very much out-of-date. If you’re looking for current and correct three20 sample code, Keith Lazuka’s github has what you need. Thanks!
20 Comments
Thank you so much for a great tutorial
I was looking for starting point and your post was right on spot 
Thanks once again and looking for more
Hi,
I try to do the same thing with TTThumbsViewController but couldnot get any success. What I want is to load the image thumbs but clicking on it, I dont want to navigate at all.
Can you please guide me.
regards,
Hi Adeem -
Check out the TTThumbsViewControllerDelegate protocol. It defines two selectors that should help you:
- (void)thumbsViewController:(TTThumbsViewController*)controller didSelectPhoto:(id<TTPhoto>)photo;
- (BOOL)thumbsViewController:(TTThumbsViewController*)controller
shouldNavigateToPhoto:(id<TTPhoto>)photo;
Any ideas on how to do this with TTSectionedDataSource?
Hi Ben. After changing ExampleJsonDataSource to extend from TTSectionedDataSource, you might try something like this in requestDidFinishLoad:request –
[_items release];
_items = [[NSMutableArray alloc] init];
[_sections release];
_sections = [[NSMutableArray alloc] init];
for(NSDictionary *result in results) {
[_sections addObject:@"Section Header"];
[_items addObject:[NSArray arrayWithObject:[[[TTIconTableField alloc]
initWithText:[result objectForKey:@"Title"]
url:nil
image:[result objectForKey:@"Url"]
defaultImage:[UIImage imageNamed:@"none-supply-your-own.png"]] autorelease]]];
}
Another thanks. Three20 is such a great framework and it’s a shame that Joe doesn’t have time to write documentation right now.
Have you tried to implement any animations using Three20? I’m curious as to the best way to go about scaling/transforming the custom views.
Hi Mark. Quick note:
Joe’s refactoring a lot of the Three20 codebase. You need to change you delegate methods to work with the current version on GitHub. It’s simple stuff, but will probably leave newbies scratching their heads fora while.
Change stuff like
[self dataSourceDidStartLoad];
to
[self didStartLoad];
Thanks again,
mg
Hi mg –
Thanks for your comments! Haven’t had to do any animations (my work has been pretty mundane business-app-type stuff of late) on three20 views, so unfortunately I can’t help you much there. Please feel free to drop a comment if you do come across any good articles about that, as I’d be interested to read them myself.
I’m glad you mentioned Joe’s most recent changes…I’m aware of them and have actually been porting over parts of the app I’m working on at the moment to use the latest and greatest (am really liking the new TTNavigator bits so far). This is a good reminder for me to get off my ass and fix the example code on the blog and in the project zip – I’ll try to get to that soon.
I’ll let you know if I figure anything out for the animations. Here’s one more small fix when you get the chance:
In the viewController, createDataSource doesn’t need to call
[dataSource load:TTURLRequestCachePolicyNoCache nextPage:NO];
It’s done automagically. Otherwise you get twice as many elements.
Thanks for the heads-up…although the refactoring is moving so quickly that I think even your last fix suggestion is out of date (assuming I read the diffs correctly from this commit an hour ago)
http://github.com/joehewitt/three20/commit/122b14a4662a51ed508d543747b26b6f1d8da79f
Yeah I just noticed that too… ugh.
It took me a little while, but shifting to a separate Model and DataSource makes sense from a lot of standpoints. And *especially* if you’re trying to curate two types of data in one table view. Also uploading the info easier.
At second thought, you might want to let three20 cool off before updating the sample code.
I’m having a hard time getting the project to build.
The file it’s pointing me at for throwing the errors is inside the UIKit framework: UILocalizedIndexedCollation.h
Any ideas?
Here’s the error log:
Building target “Three20JsonExample” of project “Three20JsonExample” with configuration “Debug” — (3 errors)
[lots of build output snipped --mark]
/System/Library/Frameworks/UIKit.framework/Headers/UILocalizedIndexedCollation.h:23: fatal error: method definition not in @implementation context
Build failed (3 errors)
Thanks!!!
Hi Justin -
Three20’s just gone through a pretty significant refactoring since I posted my example code, which is probably why you’re seeing all those errors. I need to update the example project (been busy with work recently, which has unfortunately delayed the process) to reflect the latest and greatest code – I’ll keep you posted.
Thanks for the response, Mark. I’m using an older build of Three20 for backwards compatibility to OS 2.2. I thought this example might still work in this scenario, or it might be a quick fix. Guess I’ll reverse engineer your code for instructional purposes and try to get it working on my own.
Three20JsonExample/Classes/ExampleJsonDataSource.m:68: error:
‘TTIconTableField’ undeclared (first use in this function)
Help!Your example don’t work…
iphone simulator 3.0
Hi Alex – Per the previous comments here, I need to update the example code to reflect all the changes that have been made to three20 recently, including the *TableField –> *TableItem refactoring (which is what it looks like you tripped up on).
look like [self.items addObject:[[[TTIconTableItem alloc] ??or not?
Hi Alex -
Check out http://github.com/joehewitt/three20/commit/6b4f116f355cb759f70d2f9d8035df0bbfe84493
ok.Thanks.and last
how update this lines:
[self didStartLoad];
Three20JsonExample/Classes/ExampleJsonDataSource.m:76: warning: no ‘-initWithText:url:image:defaultImage:’ method found
[self dataSourceDidFinishLoad];
[self dataSourceDidFailLoadWithError:error];
[self dataSourceDidCancelLoad];
???
Until I get around to updating my sample code, I recommend checking out Keith Lazuka’s example project here instead: http://github.com/klazuka/TTRemoteExamples/tree/master
One Trackback
[...] April 11 10:30 AM EDT I’ve added a new post with a downloadable example project and (finally) cleaned up the above code. I apologize for previous typos; I really should make sure [...]