The idea here is to parse the XML response from a Wunderground Data Feed Web Service, which provides information for current weather conditions. The conceptual part of target XML follows. More details about XML and available weather API can be found on the Wunderground Data Feed site.
<current_observation>
<credit>Weather Underground NOAA Weather Station</credit>
<credit_URL>http://wunderground.com/</credit_URL>
<image>
<url>http://icons.wunderground.com/graphics/wu2/logo_130x80.png</url>
<title>Weather Underground</title>
<link>http://wunderground.com/</link>
</image>
+<display_location></display_location>
+<observation_location></observation_location>
<station_id>KSFO</station_id>
<observation_time>Last Updated on July 14, 9:56 AM PDT</observation_time>
...
<local_time>July 14, 10:01 AM PDT</local_time>
...
<local_epoch>1247590877</local_epoch>
<weather>fog</weather>
<temperature_string>52 F (11 C)</temperature_string>
<temp_f>52</temp_f>
<temp_c>11</temp_c>
<relative_humidity>76%</relative_humidity>
...
<icon>fog</icon>
...
</current_observation>
For processing this XML we decided to use DOM parser for the following reasons:
The DOM presents an XML document as a tree-structure. The parser creates a tree object out of the document. The user accesses data by traversing the tree. The API allows for constructing, accessing and manipulating the structure and content of XML documents (Figure 2).
For our implementation we use a very simple and effective parser - XMLTreeParser/XMLTreeNode. The implementation consists of two classes: XMLTreeParser and XMLTreeNode. It uses NSXMLParser to read the document and for every one <element> tag creates a XMLTreeNode object. That way, it creates the tree that contains nodes of type XMLTreeNode.
To create a parser, simply instantiate the XMLTreeParser class:
XMLTreeParser* parser = [[XMLTreeParser alloc] init];
After that start parsing – call the parse method and provide the XML data:
<strong>XMLTreeNode* root = [parser parse:xmlData];
Now you can traverse through the tree manually looking for things.
NSArray* items = [stuffindChildren:@"icon"];
The DOM model is easiest to understand. On Figure 3, a basic architecture of an XML application using DOM is presented:
So here’s what happens: A parser reads the XML file and builds a DOM document to match the XML file. From that point until a save is performed, all interaction between the application and XML hits the DOM document rather than the corresponding XML file. It’s interesting to note that almost all XML parsers use SAX. Before you build a DOM document you must detect events such as the start of an element (start tag encountered), end of an element (end tag encountered) and/or a new attribute (name followed by equal sign followed by quoted string encountered). DOM can be thought of as an extra abstraction to lessen the programmer’s workload, at the expense of memory usage.
Modifications are made directly to the DOM document. Elements can be added, deleted, renamed, and rearranged. Text nodes can be added, delete,d or changed. Elements can be moved either within the same level, or promoted or demoted to different levels.
Choosing the appropriate pattern is a critical step. The Dynamic Document architectural pattern was used in our case. This pattern contains XML not typed by DTD or schema, but follows assessors for underlying program objects. It allows for unlimited extension by multiple, uncoordinated parties at the cost of lack of type-checking, and it’s simple to implement.
The DOM API is used to read information from an XML document. There is an easier way of getting around using DOM for modifying and saving the XML data — creating an object model for the information in the document. You can create this object model by giving it a DOM object that holds all the XML document information. That is, the XML document should be mapped to an object model.
Figure 4 shows how to map the Current Observation XML document to a set of related classes (object model). The <current_observation> element is mapped to the CurrentObservation class; the <display_location> element is mapped to the DisplayLocation class. The <observation_location> element is mapped to the ObservationLocation class. Single elements (without sub elements or others attributes) are mapped to the parent element class properties. Each class can be instantiated using a method or Factory implementation by providing a part of XML tree, with root – class element. In this the exampleinit method was used -(id)initWithData:(NSData *)data;.
Here is a partial code listing from CurrentObservation.h:
@interface WUCurrWeather : NSObject {
NSString *credit;
...
Image *image;
DisplayLocation *displayLocation;
...
NSString *icon;
...
}
@property(nonatomic, retain) NSString *credit;
@property(nonatomic, retain) Image *image;
@property(nonatomic, retain) DisplayLocation *displayLocation;
...
@property(nonatomic, retain) NSString *icon;
...
- (id)initWithData:(NSData *)data;
-(NSString *)description;
@end;
@interface Image : NSObject {
NSString *url;
NSString *title;
NSString *link;
}
@property(nonatomic, retain) NSString *url;
@property(nonatomic, retain) NSString *title;
@property(nonatomic, retain) NSString *link;
- (id)initWidthData:(XMLTreeNode *)root;
- (NSString *) description;
@end
Below is an example of a View Based iPhone Application that calls a Wunderground Data Feed Web Service to get current weather conditions. The update button repeats the call and refreshes the screen when new data arrives. The screenshots below visualize the application’s behavior:
![]() |
![]() |
![]() |
In the provided source code you can find all these steps implemented.
Existing APIs for XML processing fall into two categories:
Cocoa offers a “complete” XML parser with the NSXML family of classes.
In the spirit of small and simple, iPhone developers have the NSXMLParser class to use. Because NSXMLParser only generates messages for a delegate, and doesn’t store data about the XML tree, it requires less memory and is better for accessing small pieces of data or parsing large XML documents. The basic operation of the NSXMLParser class will not be covered here. This is well documented in the Apple Programming Guide.
For devices like iPhone where memory usage is critical, using tree parser is not recommended. I guess that is why Apple doesn’t provide NSXMLDocument on iPhone/iPod touch. However, the model of event parsing may not be acceptable by your code. NSXMLParser is probably adequate, but it is not going to handle all your XML parsing needs. The biggest problem with this type of streaming parser is that you lose the structure of your data; your call-backs do not provide any context or hierarchy. Because of the above mentioned or by some other reason like often changing XML format [1] you may need to use something like DOM model implementation.
Well, if you’re going to need to parse very large XML documents, then you should probably consider NSXMLParser. What “very large” means depends a lot on the available memory you have to work with? The model of iPhone and the memory already in use by your app may prevent you from being able to use DOM model.
While DOM model usage may seem easier, NSXMLParser really excels in situations where you’re loading in many instances of the same kind of data, such as an address book or twitter feed. However, if memory is not an issue, I would recommend DOM model. It makes it easy to access the data you want and also allows you to manipulate the tree.
Our work will start with a little change in calling load method of the UIWebView instance. Instead of loadRequest
[[webView graphWebView] loadRequest:requestObj];
we use the loadHTMLString method, providing an NSString object that contains HTML code of our page as a parameter:
[[webView graphWebView] loadHTMLString:htmlPageStr baseURL:baseURL];
To get this page to load resources and styles correctly, you have to set up the right URL:
On the following reference[2] you can find a short and clear revision of the problem of displaying local images in a UIWebView. To use relative paths or files in UIWebView, you have to load the HTML into the view with the correct baseURL parameter. The following example shows how to do this:
NSString *path = [[NSBundle mainBundle] bundlePath]; NSURL *baseURL = [NSURL fileURLWithPath:path];
And then call load method of UIWebView provide above NSURL parameter:
[[webView graphWebView] loadHTMLString:pageStr baseURL:baseURL];
A short explanation: An NSBundle object represents a location in the file system that groups code and resources that can be used in a program. mainBundle method returns the NSBundleobject that corresponds to the directory where the current application executable is located. bundlePath instance method of NSBundle returns the full pathname of the receiver’s bundle directory. NSURL class is used to create an object which will hold the URL information. It provides a way to manipulate URLs and the resources they reference. loadHTMLString method of UIWebView has parameter baseURL that accept an NSURL object instead of a pathname as the file reference. Giving the above baseURL to UIWebView, you can refer to your bundle’s resources directory like this:
<img src="myimage.png">
Or from within CSS like this:
background-image: url(loading.gif)
It’s important to note that resources (images, CSS and JavaScript Files) inside your application bundle are at the root of the bundle, even if you place them in an separate group (folder) in your project.
Giving the correct URL to UIWebView will allow you to refer to local resources in your page, but it does not work in all cases. If you want to use JavaScipt, some additional settings have to be done.
Now you can use generic HTML technique to add CSS and JavaScript to the web page and displaying in a UIWebView.
<link href="default.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="showhide.js"></script>
Do not forget to add your CSS and Javascript files to the xCode project (if you are using external files).
Some additional actions have to be taken before starting your application and using JavaScript functions.[3]
XCode setup (*.js) javascript as some type of source code needs to be compiled in the application. We would like to include it as a resource so I’ve solved it by doing two things:
The Apple dev forums has a posted solution. [4] You need to do two things – select the .js file in your project, and turn off the checkbox that indicates that it is compiled (the “bullseye” column). If you don’t do this, you’ll get a warning in your build log about being unable to compile the file (which should be your first warning – always try to figure out and and correct any and all warnings that appear in your build).
In our example we need to figure out a transparent background for UIWebView. On the parent View Container we have additional controls (buttons, labels) and already defined background. The following code will set this:
[[webView graphWebView] setBackgroundColor:[UIColor clearColor]];</code> [[webView graphWebView] setOpaque:NO];
MentorMateDemoJS is a simple application example which uses the settings described above. It is a view-based application that shows a graphical representation of some data. Application behavior consists of a predefined call with formatted data to Vvidget Service[5] for graph generation. The service returns an image that is loaded in UIWebView Design Resource. The update button is added to resend the graph request and update view.
The Problem: Graph image requires some time for loading.
Our Decision: Notify user of graph loading process by showing a progress bar during load time.
To achieve this, we use UIWebView with local resource of two JavaScript functions. One to show/hide notification messages and the other to visualize a progress bar during loading time. In the provided sources you can find all these steps implemented.
Sources of the example iPhone application