Using JQuery Mobile Inside A UIWebView
Contents
Introduction
Instead of using native UIViews to create a GUI for an iOS application, we can use JQuery Mobile to create a HTML5 app and use a single UIWebView to display our GUI. In fact, this technique is not limited to just JQuery Mobile, and you can use other HTML5 JavaScript/CSS frameworks as well.
The JQuery Mobile files used in this tutorial are the same as the one in my other JQuery Mobile Example. I recommend reading the notes on that page.
Create Folder References
First of all, I highly recommend adding your HTML5 resouce files as folder references in XCode. This will allow you to use relative paths in your HTML hyperlinks.
To do this just select the Create Folder References For Any Added Folders option as shown in the following image:
Loading the HTML into the UIWebView
Use the pathForResource method and the NSURLRequest class to load the initial HTML page.
NSString* htmlPath = [[NSBundle mainBundle] pathForResource:@"jquery-index" ofType:@"html" inDirectory:@"HTML5"];
if (htmlPath == nil) {
[self alert:@"Could not find jquery-index.html in resource bundle" title:nil];
return;
}
NSURL* htmlURL = [NSURL fileURLWithPath:htmlPath];
NSURLRequest* request = [NSURLRequest requestWithURL:htmlURL];
[self.webView loadRequest:request];
Download
The XCode source code is now hosted at Github at the following link. It includes all the Objective-C and JQuery Mobile source files.