iPhone Images from URL using XML File

Introduction

This article is about displaying images on iPhone from web using XML file as medium. In this article, we learn two things. So let’s deal with this article in two phases:

1. Parsing XML File in iPhone
2. Display images from Web URL

Parsing XML Files in iPhone (NSXML Library)

Apple has provided NSXMLParser for parsing XML files in iPhone project. This parser takes a web URL as input path (file should reside in the web) and parses the document. Delegate methods of the NSXMLParser do the remaining work for you.

The below three delegate methods of the NSXMLParser class are used to parse the XML files.

• didStartElement
• didEndElement
• foundCharacters

didStartElement

This method is sent by parser object to its delegate when it sees the starting tag of the given element. The syntax is as follows:

- (void)parser:(NSXMLParser*)parser didStartElement:(NSString *)
	elementName namespaceURI:(NSString  *)namespaceURI qualifiedName:
	(NSString *)qName attributes:(NSDictionary  *)attributeDict

didEndElement

This method is sent by parser object to its delegate when it sees the end tag of the given element. The syntax is as follows:

-(void)parser:(NSXMLParser*)parser didEndElement:(NSString *)elementName 
	namespaceURI:(NSString*)
namespaceURI qualifiedName:(NSString *)qName

foundCharacters

This method is sent by parser object to its delegate when it finds the characters between start tag and end tag of the given element. The syntax is as follows:

- (void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string

UIImage from URL

Displaying an image from the URL is a 3 step process:

1. Create an NSURL Object from web URL
2. Load the NSURL object with image data in NSData Object
3. Assign the image data NSData to the UIImage

NSURL *url = [NSURL 
URLWithString:@"www.ArticleDean.com\images\sample.jpg"];
NSData *data = [NSData dataWithContentsOfURL:url];
UIImage *image = [[UIImage alloc] intiWithData:data]; 

This is the minimum knowledge we need before we are going to the original application. Let’s start coding our application.

Step 1: Create a view based application, and name the project as XMLWebImages.

Step 2: Open XMLWebImagesViewController.h, add IBOutlet type object scrollView of UIScrollView. Synthesize the view object scrollView in XMLWebImagesViewController.m.

Step 3: Create a new class inherited from UIViewSubclass and name it as XMLWebView and add a UIImageView object as IBOutlet and call it imageView. Call getters and setters and synthesize imageView Object.

#import <UIKit/UIKit.h> 
@interface XMLWebImageViewController : UIViewController 
{
    IBOutlet UIScrollView *webScrollView;        
}
@property (nonatomic, retain) IBOutlet UIScrollView * webScrollView;
@synthesize scrollView;

Step 3: Create a new class inherited from UIViewSubclass and name it as XMLWebView and add a UIImageView object as IBOutlet and call it imageView. Call getters and setters and synthesize imageView Object.

@interface XMLWebView : UIView 
{ 
    IBOutlet UIImageView *imageView;
}
@property (nonatomic, retain) IBOutlet UIImageView *imageView;
@synthesize imageView; 

Step 4: Create a .XIB interface builder file and connect the imageView object to the XMLWebView in the document window to show our images.

Step 5: Create an XMLWebElement class inherited from NSObject to hold the UIImage object to hold the web images.

@interface XMLWebElement: NSObject 
{
 UIImage *imgXML;
}
@property (nonatomic, retain) UIImage * imgXML;
@end
@synthesize image;

Step 6: Now the time has come to start the parsing and take the images from XML residing in articledean.com. Open XMLWebImagesViewController.h file and create an object of NSXMLParser, and collections of XML items into an array of XMLWebElements and a temp XMLWebElement object.

@interface XMLWebImagesViewController: UIViewController 
{ 
    IBOutlet UIScrollView *scrollview;
    NSXMLParser *xmlParser;
    NSMutableString *currentNode;
    NSMutableArray *xmlElements;
    XMLWebElement *tempElement;
} 

Write setters and getters for this and synthesize these objects in XMLWebImagesViewController.m file.

Now in viewDidLoad method, allocate memory for xmlElements and assign the parser with the web XML file.

- (void)viewDidLoad
{ 
    [super viewDidLoad];
    xmlElements = [[NSMutableArray alloc] init];
    xmlParser = [[NSXMLParser alloc] initWithContentsOfURL:
	[NSURL URLWithString:@"http://www.articledean.com/images.xml"]];
    [xmlParser setDelegate:self]; 
    [xmlParser parse];
}

Now it's time to add delegate methods of NSXMLParser and I am introducing a sample XML file structure here.

<WebImages> 
   <image> 
        <URL>http://www.articledean.com/testimage1.jpg</URL>
   </image>
   <images> 
        <URL>http://www.articledean.com/testimage2.jpg</URL>
   </images>
</WebImages>

Now fill the delegate methods to retrieve the image URL from web and load the XMLWebElements array.

- (void)xmlParser:(NSXMLParser *)xmlParser didStartElement:
	(NSString *)elementName namespaceURI:(NSString *)namespaceURI 
	qualifiedName:(NSString *)qName attributes:(NSDictionary *)attributeDict
{
    if(![elementName compare:@"PictureInfo"])
    {
        tempElement = [[iCodeBlogXMLElement alloc] init];
    }

    else if(![elementName compare:@"imageURL"])
    {
        currentAttribute = [NSMutableString string];
    }

    else if(![elementName compare:@"imageTitle"])
    {
        currentAttribute = [NSMutableString string];
    }
}

- (void)parser:(NSXMLParser *)parser didEndElement:(NSString *)
    elementName namespaceURI:(NSString *)namespaceURI qualifiedName:(NSString *)qName
{
    if(![elementName compare:@"PictureInfo"])
    {
        [xmlElementObjects addObject:tempElement];
    }
    else if(![elementName compare:@"imageURL"])
    {
        NSURL *imageURL = [NSURL URLWithString:currentAttribute];
        NSData *data =  [NSData dataWithContentsOfURL:imageURL];
        UIImage *image = [[UIImage alloc] initWithData:data];
        [tempElement setImage:image];
    }
    else if(![elementName compare:@"imageTitle"])
    {
        NSLog(@"The image title is %@", currentAttribute);
        [tempElement setImageTitle:currentAttribute];
    }
    else if(![elementName compare:@"Pictures"])
    {
        [self layoutSubview];
    }
}

- (void)parser:(NSXMLParser *)parser foundCharacters:(NSString *)string
{
    if(self.currentAttribute)
    {
        [self.currentAttribute appendString:string];
    }
} 

We are almost done with the code. Remaining part is a cake walk. Now the arrays are filled with the images URLs. Traverse though the array and assign the images to UIView and display them in the scroll view.

References

• http://www.ArticleDean.com
• http://icodeblog.com

History

• 8^th May, 2010: Initial post