How to load a local. CSS File & JavaScript resources using IPhone UIWebView Class

This post would cover the basic setup and creation of an application with Web content for IPhone that would load local CSS f Iles and some useful JavaScript functions. Most of these hints I found partially in different blogs and forums listed in the reference section. Collect all them together. You can use the following technique-to-create a more attractive application design.

Creating an application using UIWebView control isn't the focus of this post. Here is a helpful beginner's tutorial for creating an application using UIWebView. We assume that is already familiar with this topic.

UIWebView load

Our work would start with a little change in calling load method of the UIWebView instance. Instead of Loadrequest

1	[[webView graphwebview] loadrequest:requestobj];

We use the loadhtmlstring method, providing an NSString object, contains HTML code of our page as a Paramet Er

1	[[webView graphwebview] loadhtmlstring:htmlpagestr baseURL:BaseURL ];

To get this page to the load resources and styles correctly.

Initial loading screen with progress indicator

On the following reference[2] "can find a short and clear revision of the problem of displaying local images in a uiweb View using CSS. To use relative paths or files in UIWebView, you have to load the HTML into the view with the correct base URL parameter. The following example shows how to does this:

12	nsstring *path Span class= "Crayon-o" >= [[ nsbundle mainbundle bundlepath] nsurl *baseurl = [nsurl fileurlwithpath:< Span class= "crayon-v" >path];

And then call load method of UIWebView provide above Nsurl parameter:

1	[[webView graphwebview] loadhtmlstring:pagestr baseURL:BaseURL ];

A short Explanation:an nsbundle object represents a at the file system that groups code and resources T Hat can is used in a program. Mainbundlemethod returns the NSBundleobject that corresponds to the directory where the current appl Ication executable is located. Bundlepath instance method of NSBundle returns the full pathname of the receiver ' s bundle directory. Nsurlclass is used to create an object which would hold the URL information. It provides a-to manipulate URLs and the resources they reference. loadhtmlstringmethod of UIWebView have parameter base URL that is accept an Nsurl object instead of a Pathna Me as the file reference. Giving the above base URL to UIWebView, you can refer to your bundle's resources directory like this:

1	< IMG src="Myimage.png">

Or from the within CSS like this:

1	Background-image: url(loading. GIF)

It's important to note the resources (images, CSS and JavaScript Files) inside your application bundle is at the root of The bundle, even if you place them in a separate group (folder) in your project.

Giving the correct URL to UIWebView would allow you to refer to local resources on your page, but it does not work in all C ASEs. If you want to use Javascipt, some additional settings has the to is done.

Link CSS and JavaScript files

Second loading screen with progress indicator

Now you can use generic HTML technique to add CSS and JavaScript to the Web page and displaying in a uiwebview.

12	< Link href= "Default.css" rel= "stylesheet" Span class= "crayon-h" > type= "text/css" /&gt < Script Type="text/javascript" src="Showhide.js"> < /script>

Forget to add your CSS and Javascript files to the XCode project (if is using external files).

Some additional actions have the to is taken before starting your application and using JavaScript functions. [3]

XCode Setup (*.js) JavaScript as some type of source code needs to being compiled in the application. We would like to include it as a resource so I ' ve solved it by doing II things:

1. Select. js file and in the ' Detail ' view unselect the bullseye column indicating it is compiled code
2. In the "Groups & Files" View expand the "Targets" tree and expand the application then go to "Copy Bundle Resources" a nd drag the *.js files into it.

The Apple Dev Forums has a posted solution. [4] You need to does things–select the. js file in your project, and turn off the checkbox that's indicates that it's C Ompiled (the "Bullseye" column). If You don't do this, you'll get a warning in your build log on being unable to compile the file (which should is your First Warning–always try to figure out and and correct any and all warnings this appear in your build).

Set Transparent background color for UIWebView

Final screen with graph representation.

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. The following code would set this:

123	[[webView graphwebview] setbackgroundcolor:[uicolor Clearcolor] ]; < /Code> [[webView graphwebview] setopaque:NO];

Example

Mentormatedemojs is a simple application example which uses the settings described above. It's 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, 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 the graph loading process by showing a progress bar during load time.

To achieve the, we use the UIWebView with local resource of both 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

References

1. IPhone SDK articles, UIWebView Tutorial
2. IPhone Development Blog, uiwebview–loading External Images and CSS
3. StackOverflow, IPhone UIWebView Local resources using Javascript and handling on Orientationchange
4. Developer Forum, UIWebView and JavaScript

How to load a local. CSS File & JavaScript resources using IPhone UIWebView Class