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:
Set baseURL property of UIWebView to refer your bundle’s resources directory
On the following reference 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:
Or from within CSS like this:
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.
- Select .js file and in the “Detail” view unselect the bullseye column indicating it is compiled code
- In the “Groups & files” view expand the “Targets” tree and expand the application then go to “Copy Bundle Resources” and drag the *.js files into it.
The Apple dev forums has a posted solution.  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).
Set transparent background color for UIWebView
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 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.
- iPhone SDK Articles, UIWebView Tutorial, August 19, 2008
- iPhone Development Blog, UIWebView – Loading External Images and CSS, February, 2009