UIWebView Tips

iPhone SDK

UIWebView Tips

iPhone SDK

24/7 twenty-four seven
http://d.hatena.ne.jp/KishikawaKatsumi/

iPhone SDK

• touch •Subway Map
•LDR touch •MyWebClip
• •
•LCD Clock •

iPhone SDK

http://github.com/kishikawakatsumi

•hatena-touch •DescriptionBuilder
•ldr-touch •TiledLayerView
•tv-listings •UICCalendarPicker
•MapKit-Route-Directions
•FlipCardNavigationView
•PhotoFlipCardView

iPhone SDK

UIWebView Tips
• •UI UIWebView

•data URI scheme •
•UIWebView
•JavaScript
•JavaScript
•JavaScript

iPhone SDK
(1)

NSBundle *mainBundle = [NSBundle mainBundle];

NSString *path =
[mainBundle pathForResource:@"index.html"
ofType:nil
inDirectory:@"html"];

NSURL *fileURL = [NSURL fileURLWithPath:path];

[webView loadRequest:
[NSURLRequest requestWithURL:fileURL]];

iPhone SDK
(2)


NSString *path =
ofType:nil
NSString *htmlContents =
[NSString stringWithContentsOfURL:fileURL
encoding:NSUTF8StringEncoding
error:nil];

[webView
loadHTMLString: htmlContents baseURL:path];

iPhone SDK
OK

<script type="text/javascript" src="json2.js"></script>

NSString *path =
[[NSBundle mainBundle]
pathForResource:@"index" ofType:@"html"];

[webView loadRequest:
[NSURLRequest
requestWithURL:[NSURL fileURLWithPath:path]]];

iPhone SDK

Make Rule

iPhone SDK

NSString *path =
ofType:nil

iPhone SDK

<img src="img/menu_line.png" width="260" height="1">

iPhone SDK

•
• HTML

iPhone SDK

data URI scheme

• HTML

iPhone SDK
data URI scheme

<p>This is a data encoded image.</p>
<img src="data:image/jpeg;base64,/9j/
4AAQSkZJRgABAQEAYABgAAD/
2wBDAAEBAQEBAQEBAQEBAQEBAQICAQEBAQMCA
gICAwMEBAMDAwMEBAYFBAQFBAMDBQcFBQYGBg
YGBAUHBwcGBwYGBg
... +0lShKd4r3XzOLlePTXToYYHOc4w3C9WjTrzj
T5rcqlJKztdWTtZ9e5+p9FFFfsB8gf/2Q==" />

iPhone SDK

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

<style type="text/css">
body {
background-color: transparent;
}
</style>

iPhone SDK
JavaScript

- (void)webViewDidFinishLoad:(UIWebView *)webView {
self.title =
[webView
stringByEvaluatingJavaScriptFromString:@"document.title"];
}

iPhone SDK
in JavaScript

document.location = "app::" + "function::" + param1 + "::" + param2;

app::function::param1::param2

URL

iPhone SDK
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
navigationType:(UIWebViewNavigationType)navigationType {

NSString *requestString = [[request URL] absoluteString];

NSArray *params = [requestString componentsSeparatedByString:@"::"];

if ([params count] > 1 &&

[[params objectAtIndex:0] isEqualToString:@"app"]) {

if([[params objectAtIndex:1] isEqualToString:@"function"]) {

NSLog([params objectAtIndex:2]); // param1

NSLog([params objectAtIndex:3]); // param2

// Call your method in Objective-C method using the above...

}

return NO;

}

return YES; // Return YES to make sure regular navigation works as expected.
}

iPhone SDK
<script type="text/javascript">
separator = "::";
var directionsService = new google.maps.DirectionsService();

function route(request) {
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
document.location = "directions-v3" + separator + "route" +
separator + JSON.stringify(response);
}
});
}
</script>

NSLog(@"%@/%@", NSStringFromClass([self class]), NSStringFromSelector(_cmd));

iPhone SDK

NSString *function = [params objectAtIndex:0];

if ([params count] > 1 && [function isEqualToString:@"directions-v3"]) {
NSString *param1 = [params objectAtIndex:1];
if([param1 isEqualToString:@"route"]) {
id JSONValue = [[param2 stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]
JSONValue];
if (!JSONValue) {
if ([self.delegate respondsToSelector:@selector(goolgeMapsAPI:didFailWithMessage:)]) {
[(id<UICGoogleMapsAPIDelegate>)delegate goolgeMapsAPI:self didFailWithMessage:param2];
}
} else {
if ([self.delegate respondsToSelector:@selector(goolgeMapsAPI:didGetObject:)]) {
[(id<UICGoogleMapsAPIDelegate>)delegate goolgeMapsAPI:self didGetObject:JSONValue];
}
}
}
return NO;
}

return YES;
}

NSLog(@"%@/%@", NSStringFromClass([self class]), NSStringFromSelector(_cmd));

iPhone SDK

NSString *function = [params objectAtIndex:0];

if ([params count] > 1 && [function isEqualToString:@"directions-v3"]) {
if([param1 isEqualToString:@"route"]) {
id JSONValue = [[param2 stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding]
JSONValue];
if (!JSONValue) {
if ([self.delegate respondsToSelector:@selector(goolgeMapsAPI:didFailWithMessage:)]) {
[(id<UICGoogleMapsAPIDelegate>)delegate goolgeMapsAPI:self didFailWithMessage:param2];
}
} else {
if ([self.delegate respondsToSelector:@selector(goolgeMapsAPI:didGetObject:)]) {
[(id<UICGoogleMapsAPIDelegate>)delegate goolgeMapsAPI:self didGetObject:JSONValue];
}
}
}
return NO;
}
URL

return YES; JSON
}

iPhone SDK

• API (Google Maps API )

MapKit-Route-Directions

iPhone SDK
@interface UIWebView (JavaScriptDebug)
- (void)webView:(UIWebView *)sender
runJavaScriptAlertPanelWithMessage:(NSString *)message
initiatedByFrame:(WebFrame *)frame;
@end

@implementation UIWebView (JavaScriptDebug)

- (void)webView:(UIWebView *)sender
runJavaScriptAlertPanelWithMessage:(NSString *)message
initiatedByFrame:(WebFrame *)frame {
NSLog(@"alert: %@", message);
}

@end

alert(item["name"]);

iPhone SDK

• alert
•Unpublished API

iPhone SDK

UI UIWebView

• HTML + CSS +JavaScript

iPhone SDK

•
•
•
•
•

iPhone SDK
<div id="tag_price" class="float_l">${price}</div>

<div id="tag_info" class="float_r"><img src="img/menu_tag_info.png" alt="Info"
width="76" height="39"></div></div><div id="menu"><div class="text">$
{comment}</div>

<div class="bar"><img src="img/menu_line.png" width="260" height="1"></
div>
<div class="text">
<span class="blue"> </span> ${advantage}
</div>
<div class="bar"><img src="img/menu_line.png" width="260" height="1"></
div>
<div class="text">
<span class="blue"> </span> ${spec}

iPhone SDK
- (void)viewDidLoad {
[super viewDidLoad];

self.title = [NSString stringWithUTF8String:" "];

NSString *path = [mainBundle pathForResource:@"index.html" ofType:nil inDirectory:@"html"];
NSURL *fileURL = [NSURL fileURLWithPath:path];
NSString *htmlContents = [NSString stringWithContentsOfURL:fileURL encoding:NSUTF8StringEncoding error:nil];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${photo}" withString:@"photo.jpg"];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${name}" withString:[NSString stringWithUTF8String:"USB
USB "]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${price}" withString:[NSString stringWithUTF8String:"

950 "]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${comment}" withString:[NSString
stringWithUTF8String:"ReadyBoost USB "]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${advantage}" withString:[NSString
stringWithUTF8String:"Windows Vista ReadyBoost "]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${spec}" withString:[NSString stringWithUTF8String:"<br>
USB Ver.2.0 <br> USB A <br> DC 5V"]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${size}" withString:[NSString stringWithUTF8String:"2 GB "]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${color}" withString:[NSString stringWithUTF8String:" "]];
htmlContents = [htmlContents stringByReplacingOccurrencesOfString:@"${count}" withString:[NSString stringWithUTF8String:"1 "]];
[web loadHTMLString:htmlContents baseURL:fileURL];
}

iPhone SDK
CSS
<style type="text/css">
body {
-webkit-user-select: none;
-webkit-touch-callout: none;
}
</style>

JavaScript
<script type="text/javascript">
function OnLoad() {
document.documentElement.style.webkitTouchCallout = "none";
document.documentElement.style.webkitUserSelect = "none";
}
</script>
</head>
<body onload="OnLoad()">

iPhone SDK
CSS
-webkit-tap-highlight-color:rgba(163,215,112,0.70);

iPhone SDK

#import <Foundation/Foundation.h>

@interface FilteredWebCache : NSURLCache
{
}

@end

iPhone SDK
#import "FilteredWebCache.h"
#import "FilterManager.h"

@implementation FilteredWebCache

- (NSCachedURLResponse *)cachedResponseForRequest:(NSURLRequest *)request {
NSURL *URL = [request URL];
BOOL blockURL = [[FilterManager sharedFilterManager] shouldBlockURL:URL];
if (blockURL) {
LOG(@"!%@! was blocked.", URL);
NSURLResponse *response = [[NSURLResponse alloc] initWithURL:URL
MIMEType:@"text/plain"
expectedContentLength:1
textEncodingName:nil];

NSCachedURLResponse *cachedResponse =
[[NSCachedURLResponse alloc] initWithResponse:response
data:[NSData dataWithBytes:" " length:1]];

[super storeCachedResponse:cachedResponse forRequest:request];

[cachedResponse release];
[response release];
}
return [super cachedResponseForRequest:request];
}

iPhone SDK
- (void)viewDidLoad {
[super viewDidLoad];

NSArray *paths =
NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES);

NSString *documentDirectory = [paths objectAtIndex:0];

NSString *path = [documentDirectory stringByAppendingPathComponent:@"cache.dat"];

NSUInteger discCapacity = 10 * 1024 * 1024;
NSUInteger memoryCapacity = 512 * 1024;

FilteredWebCache *cache =
[[FilteredWebCache alloc] initWithMemoryCapacity:memoryCapacity
diskCapacity:discCapacity diskPath:path];
[NSURLCache setSharedURLCache:cache];
[cache release];

iPhone SDK
http*://zedo.com*
http*://zencudo.co.uk*
http*://zmedia.com*
*/a.aspx?Zone*
*/a.thefreedictionary.*
*/adjs.php?*
*/ads.pl?*
*/ad.gif?*
*/ad1.jpg
*/adx2.js
http://*.images-amazon.com/*
http://*.ad.adlantis.jp/*
http://*.adlantis.jp/*.js*"

iPhone SDK
for (id whiteURL in whiteList) {
NSPredicate *predicate =
[NSPredicate predicateWithFormat:@"SELF like[c] %@", whiteURL];
if ([predicate evaluateWithObject:[URL absoluteString]]) {
[loadedURLsOfCurrentPage addObject:URL];
return NO;
}
}

[@"SELF like[c] http://*.ad.adlantis.jp/*"
evaluateWithObject:@"http://suiheiliebe.blog52.fc2.com/"]

iPhone SDK
NSPredicate *regex =
[NSPredicate predicateWithFormat:
@"SELF MATCHES 'https?://[a-zA-Z0-9/.?_+~=%:;!#-]+'"];
if ([regex evaluateWithObject:source]) {

UIWebView Tips

More Related Content

UIWebView Tips

Editor's Notes