How to display json image array in UITableView using multithreading? - iphone

Question

I have few images on my server whose names are stored in the phpmysql table. The table contains two fields: id and images. I have prepared a php to fetch the images in json encoded formatted as mentioned:
jsonFetch.php
<?php
$dbhost = "localhost";
$dbname = "userauth";
$dbuser = "root";
//$DB_Pass = "root";
$dbtable = "images";
#mysql_connect($dbhost, $dbuser);
$db = mysql_select_db($dbname);
$sql = "SELECT * FROM $dbtable";
$query = mysql_query($sql);
while($row = mysql_fetch_array($query))
{
$rows[] = array(
//"id" => $row[0],
"image" => $row[1]
//"description" => $row['description']);
);
}
$json = json_encode($rows);
$callback = $_GET['images'];
echo $callback.$json ;
//print_r($json);
?>
Now, when i hit the url, i am getting following response:
[{"image":"./95462"},{"image":"./8838upload_image.jpg"}{"image":"./43185upload_image.jpg"},{"image":"/17426upload_image.jpg"}]
I am getting json array as above.
The next step is to display the above array in multithreaded manner in UITableView.
I am getting the images from url when i hardcode them but when it comes to json parse, i am a noob. I have tried every possible manner in which json can be parsed so for you reference, i am posting the .m file. :
#import "json.h"
#interface profilePhotos(Private)
- (void) initialize;
- (void) loadImage:(id)arg;
- (void) updateTableView:(id)arg;
- (void) addImagesToQueue:(NSArray *)images;
- (void) addImagesToQueue:(NSArray *)arrayImages;
- (void) addImagesToQueue:(NSArray *)arrayDataFromServer;
- (void) showcommentView;
- (void) hidecommentView;
#end
#implementation profilePhotos
#synthesize photosTable;
#synthesize addPhotos;
#synthesize deletePhotos;
#synthesize back;
#synthesize imageQueue, loadedImages, imageLoaderOpQueue, commentView;
//#synthesize photosView;
-(void)initializeWith:(int)buttonTag{
tag = buttonTag;
NSLog(#"tag = %d", tag);
}
- (id) initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
if (!(self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil])) {
return self;
}
[self initialize];
return self;
}
- (void) awakeFromNib
{
NSLog(#"AsyncImageLoadingViewController::awakeFromNib called");
[super awakeFromNib];
[self initialize];
}
- (void) viewDidLoad
{
NSLog(#"AsyncImageLoadingViewController::viewDidLoad called");
[super viewDidLoad];
}
- (void) viewDidAppear:(BOOL)animated
{
NSLog(#"AsyncImageLoadingViewController::viewDidAppear called");
[super viewDidAppear:animated];
NSArray *images = [NSArray arrayWithObjects:
#"http://dl.dropbox.com/u/9234555/avatars/ava01.gif",
#"http://dl.dropbox.com/u/9234555/avatars/ava02.gif",
#"http://dl.dropbox.com/u/9234555/avatars/ava03.gif",
#"http://dl.dropbox.com/u/9234555/avatars/ava04.gif",
#"http://dl.dropbox.com/u/9234555/avatars/ava05.gif", nil];
[self addImagesToQueue:images];
NSLog(#"addImagesToQueue: %#",self);
}
#pragma mark -
#pragma mark Private Methods
/*!
#method
#abstract initializes class variables
*/
- (void) initialize
{
NSLog(#"AsyncImageLoadingViewController::initialize called");
NSMutableArray *a = [[NSMutableArray alloc] init];
self.imageQueue = a;
//[a release];
a = [[NSMutableArray alloc] init];
self.loadedImages = a;
//[a release];
NSOperationQueue *queue = [[NSOperationQueue alloc] init];
self.imageLoaderOpQueue = queue;
//[queue release];
}
/*!
#method
#abstract updates tableview for the newly downloaded image and scrolls the tableview to bottom
*/
- (void) updateTableView:(id)arg
{
NSLog(#"AsyncImageLoadingViewController::updateTableView called");
if ((arg == nil) || ([arg isKindOfClass:[UIImage class]] == NO)) {
return;
}
// store the newly downloaded image
[self.loadedImages addObject:arg];
//[arg release];
// refresh tableview
[self.photosTable reloadData];
// scroll to the last cell of the tableview
NSIndexPath *lastRow = [NSIndexPath indexPathForRow:([self.loadedImages count] - 1) inSection:0];
[self.photosTable scrollToRowAtIndexPath:lastRow
atScrollPosition:UITableViewScrollPositionBottom
animated:YES];
}
/*!
#method
#abstract downloads images, this is the method that dispatches tasks in the operation q ueue
*/
- (void) loadImage:(id)arg
{
NSLog(#"AsyncImageLoadingViewController::loadImage called");
if ((arg == nil) || ([arg isKindOfClass:[NSString class]] == NO)) {
return;
}
// create a local autorelease pool since this code runs not on main thread
//NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
// fetch the image
NSLog(#"AsyncImageLoadingViewController::loadImage - will download image: %#", arg);
NSData *data = [NSData dataWithContentsOfURL:[NSURL URLWithString:arg]];
UIImage *image = [UIImage imageWithData:data];
NSLog(#"image: %#",image);
// update tableview with the downloaded image on main thread
[self performSelectorOnMainThread:#selector(updateTableView:) withObject:image waitUntilDone:NO];
//[pool release];
}
/*!
#method
#abstract adds images to the queue and starts the operation queue to download them
*/
- (void) addImagesToQueue:(NSArray *)images
{
NSLog(#"AsyncImageLoadingViewController::addImagesToQueue called");
[self.imageQueue addObjectsFromArray:images];
NSLog(#"addImagesToQueue Array: %#", self);
// suspend the operation queue
[self.imageLoaderOpQueue setSuspended:YES];
// add tasks to the operation queue
for (NSString *imageUrl in self.imageQueue) {
NSInvocationOperation *op = [[NSInvocationOperation alloc] initWithTarget:self selector:#selector(loadImage:) object:imageUrl];
[self.imageLoaderOpQueue addOperation:op];
// [op release];
}
// clear items in the queue and resume the operation queue to start downloading images
[self.imageQueue removeAllObjects];
[self.imageLoaderOpQueue setSuspended:NO];
}
#pragma mark -
#pragma mark UITableViewDataSource Methods
- (NSInteger)tableView:(UITableView *)tableView
numberOfRowsInSection:(NSInteger)section
{
return [self.loadedImages count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView
cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = #"CellIdentifier";
cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil)
{
//cell = [[[UITableViewCell alloc] initWithStyle:UITableViewStyleGrouped reuseIdentifier:CellIdentifier] autorelease];
cell = [[UITableViewCell alloc] initWithStyle:UITableViewStyleGrouped reuseIdentifier:[NSString stringWithFormat:#"cellID%d",indexPath.row]];
cell.accessoryType =UITableViewCellAccessoryNone;
//cell.accessoryType =UITableViewCellAccessoryDisclosureIndicator;
}
for(UIView *subviews in cell.subviews)
[subviews removeFromSuperview];
UIImageView *photo;
photo=[[UIImageView alloc] init];
[photo setImage:[self.loadedImages objectAtIndex:indexPath.row]];
[photo setFrame:CGRectMake(0, 5, 150, 120)];
[cell addSubview:photo];
return cell;
}
-(void)aMethod:(UIButton *)sender{
//[sender tag];
NSIndexPath *indexPath = [photosTable indexPathForCell: (UITableViewCell*)[[sender superview]superview]];
NSLog(#"[sender tag] is %d",[sender tag]);
if([sender tag]==indexPath.row){
textField = (UITextField*)[cell viewWithTag:[sender tag]];
textField.hidden=NO;
}
//}
}
#pragma mark -
#pragma mark UITableViewDelegate Methods
-(void)tableView:(UITableView *)tableView
didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
[tableView deselectRowAtIndexPath:indexPath animated:YES];
}
- (void)didReceiveMemoryWarning
{
// Releases the view if it doesn't have a superview.
[super didReceiveMemoryWarning];
// Release any cached data, images, etc that aren't in use.
}
- (void)viewDidUnload{
// [self setPhotosView:nil];
[self setPhotosTable:nil];
[self setAddPhotos:nil];
[self setDeletePhotos:nil];
[self setBack:nil];
[super viewDidUnload];
// Release any retained subviews of the main view.
// e.g. self.myOutlet = nil;
}
- (BOOL)shouldAutorotateToInterfaceOrientation:( UIInterfaceOrientation)interfaceOrientation
{
// Return YES for supported orientations
return (interfaceOrientation == UIInterfaceOrientationPortrait);
}
I believe that something is needed to be done in viewDidAppear method but what is it i don't understand.
Kindly, help me out. I have tried every possible json method . May be i am making some errors in that but i am all the way frustrated. Please help me please.

Answer 1

Dude..use following reference and you will get tutorial as working demo..
images in UITableView using multithreading
See this reference if you are new in iOS. It's simple
Hope, this will help you...

Answer 2

i suggest you to use SDWebImage
Web Image
This library provides a category for UIImageVIew with support for remote images coming from the web.
It provides:
An UIImageView category adding web image and cache management to the Cocoa Touch framework
An asynchronous image downloader
An asynchronous memory + disk image caching with automatic cache expiration handling
A guarantee that the same URL won't be downloaded several times
A guarantee that bogus URLs won't be retried again and again
Performances!

Answer 3

Try it - https://github.com/rs/SDWebImage