Click here to Skip to main content
Click here to Skip to main content

iPhone Images from URL using XML File

, 8 May 2010 CPOL
Rate this:
Please Sign up or sign in to vote.
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

History

  • 8th May, 2010: Initial post

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

SureshAddaguduru
Architect articledean.com, conveygreetings.com
United States United States
10+Years of experience in Software Development, Project Management, with proficiency in Development and maintenance
of Mobile Computing, Banking, Commercial, Web –Based and Desktop Applications.
 
Expertise in C#, .NET, MFC, eVc++, VC++ 6.0, VB 6.0, VBA,J2EE with struts framework, Mobile VB 4.0 (App Forge), eVB, VC-COM, TCP/IP socket Programming with ATL, Visual Studo 2005 & 2008, IIS and SQL-Server 2005, Perl and Shell scripting.
 
Expertise in RIM BlackBerry JDE, Good understanding of J2EE struts framework, with Oracle J-Developer, IBM Rational Software Architect, and Macro Vision InstallShield 12.
 
In- depth understanding of C++ TRUESPEECH, PCM, Real Audio, Video Codec’s, Audio Conferencing (VoIP), Video Conferencing in VC++, MFC, OOPS, SDLC, N-Tier Architecture with Client Server Technologies, Web Technologies.
 
Good Experience on ASP.NET, AJAX, VB.NET, Flash, Win32 API, Oracle 8i and SQL-Server 2005.

Comments and Discussions

 
GeneralMy vote of 3 PinmemberMedo_Omar26-May-14 11:32 
GeneralMy vote of 2 Pinmembertystent10-May-10 12:47 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141223.1 | Last Updated 8 May 2010
Article Copyright 2010 by SureshAddaguduru
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid