UIWebView and baseJS

As an iOS developer with a background in web development, I’ve decided to write a tutorial on UIWebView as first post to iDevBlogADay 

Imagine this, John Doe, aka Mr. ImBetterThanYou, challenges you to create an iOS view with the following requirements, in the shortest amount of time possible. Given a percentage value, display a progress bar and the string “Congratulation! You’ve completed X% of this tutorial!” The text must wrap naturally with the varying digits of the percentage. In addition, the word “congratulation” must be bolded, and the percentage must be green with larger font size.

Assuming you are up to the challenge, what would you do?

Back when I began iOS development, my immediate approach would have been to create several UILabel components, one for each font style, and position them adjacent to each other, based on where the previous one’s text end. As for the progress bar, I would use the UIProgressBar component and style it to look like the image above.

This is the slow approach. Not only does it take a very long time, but also the code is specific to the style. If John comes back and tells me that the word “you” should be underlined, I’ll have to create another UILabel and add it to my layout. A faster approach, hinted by this post’s title, is to use the UIWebView component. Here is a preview of the completed example:

I think it’s unnecessary to walk you through the code (download link below). I will, however, provide some tips to customizing your own UIWebView:

Javascript framework

Using a Javascript framework is not necessary, but it could make coding easier. If you decide to use one, check out baseJS. It’s a lightweight framework written specifically for the iOS platform. There is no cross-platform nor cross-browser code, so your page will load much faster than other frameworks.

Disable scrolling

Add the following lines to your document load event handler:

document.ontouchmove = function(event) { event.preventDefault(); };

This setups an event handler for ontouchmove and prevent its default behaviors.

Disable bounces

Disables the bouncing rubberband effect when the page is scrolled beyond its bounds.

// disable bounces for (id subview in webView_.subviews) if ([[subview class] isSubclassOfClass: [UIScrollView class]]) ((UIScrollView *)subview).bounces = NO;

Execute Javascript in UIWebView

Call stringByEvaluatingJavaScriptFromString with your script as the parameter. Here’s an example taken from the example project:

- (void)setPercent:(NSInteger)percent { NSString *javascript = [NSString stringWithFormat:@"ExampleApp.setPercent(%i)", percent]; [webView_ stringByEvaluatingJavaScriptFromString:javascript]; }

Call Objective-C from Javascript

Check out this post about how to properly call Objective-C from Javascript. Kyle Newsome had also posted an excellent tutorial demonstrating this technique.

Transparent UIWebView

Set the opaque and backgroundColor properties of UIWebView:

webView.opaque = NO; webView.backgroundColor = [UIColor clearColor];

And set the background-color property of the body element:

body { background-color: transparent; }

Disable selection

Add the following lines to your CSS style:

* { -webkit-touch-callout: none; // Disable selection/Copy of UIWebView -webkit-user-select: none; }

Disable all user interactions

If you want to disable all user interactions, including selection, copy, paste and clicks, simply set the userInteractionEnabled property to NO.

Source code

Source code may be downloaded here.