MakeanTWaverHTML5iPhoneApp

构建iOS App有很多技术方式可以选择，本文介绍基于UIWebView的Cocoa Touch组件嵌入HTML页面的方式实现的一个iPhone App例子。文中将穿插iOS的基本内容，TWaver HTML5的基础应用，以及Objective C与Javascript相互调用的技术点。

首先通过XCode构建个Empty Application即可

创建一个UIViewController子类我命名为MainViewController，然后再xib可视化拖拽出如下界面，其中包含一个UISwitch开关，一个UISlider拉条，一个UITextField输入框，以及一个最重要的UIWebView组件。

该例子中UISwitch用于自动布局的开关，UISlider作为network拓朴图的缩放控制，UITextField作为图元label的编辑更新，UIWebView用于加载TWaver HTML5的拓扑组件

 

 

以下代码在界面呈现时通过UIWebView的loadRequest函数加载指向demo.html的NSURLRequest，注意其中对textfield的添加的个空函数是为了回车能取消编辑，最后的becomeFirstResponder是为了能接收到Shake手势，该例子中通过选中图元摇晃手机可以弹出编辑告警界面。

Js代码  

1. -(void)viewDidAppear:(BOOL)animated  
2. {  
3. [self.webView setDelegate:self];  
4. [self.webView setScalesPageToFit: YES];  
5. NSURL *url = [[NSBundle mainBundle] URLForResource:@"demo" withExtension:@"html"];  
6. NSURLRequest *req = [[NSURLRequest alloc]initWithURL:url];  
7. [self.webView loadRequest:req];  
8.   
9. [self.textField addTarget:nil action:@selector(dummy:)  
10. forControlEvents:UIControlEventEditingDidEndOnExit];  
11.   
12. [self becomeFirstResponder];  
13. }  

以下是Switch开关控制html页面内Javascript代码，Objective C调用Javascript比较容易，直接调用stringByEvaluatingJavascriptFromString运行即可

Js代码  

1. - (IBAction)handleSwitchChange:(id)sender {  
2.     if(self.switcher.on){  
3.         [self.webView stringByEvaluatingJavascriptFromString: @"window.springLayouter.start();"];  
4.     }else{  
5.         [self.webView stringByEvaluatingJavascriptFromString: @"window.springLayouter.stop();"];  
6.     }  
7. }  

 如果Javascript函数有返回值，则即是stringByEvaluatingJavascriptFromString函数的返回值，以下代码就是通过这种方式来获取network当前的zoom值，以及当前选中图元的名字信息

Js代码  

1. -(void) updateSlider{  
2.     NSString* zoom = [self.webView stringByEvaluatingJavascriptFromString: @"window.network.getZoom();"];  
3.     self.slider.value = [zoom floatValue];  
4. }  
5. -(void) updateTextField{  
6.     NSString* name = [self.webView stringByEvaluatingJavascriptFromString: @"window.getCurrentName();"];  
7.     self.textField.text = name;  
8. }  

Javascript没有直接调用Objective C的函数，我们只能通过改变页面location的方式，在UIWebView的UIWebViewDelegate中拦截shouldStartLoadWithRequest函数回调来实现Javascript主动调用Objective C代码。实际还不是那么完美，建议读下这篇文章，我现在才有的也是文章建议的再建立一个iFrame方式去改变location避免一些副作用，以下是相关的代码，逻辑很简单我就不解释了。

Js代码  

1. - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{  
2.     NSString* url = [[request URL] absoluteString];  
3.     if([url hasPrefix:@"call:" ]){  
4.         NSArray *array = [url componentsSeparatedByString:@":"];  
5.         NSString *method = [array objectAtIndex:1];  
6.         [self performSelector:NSSelectorFromString(method)];  
7.         return NO;  
8.     }  
9.     return YES;  
10. }  

Js代码  

1. var iframe = document.createElement("IFRAME");  
2.   
3. network.addPropertyChangeListener(function(e){  
4.     if(e.property === 'zoom'){  
5.         iframe.setAttribute("src", "call:updateSlider");  
6.         document.body.appendChild(iframe);  
7.         iframe.parentNode.removeChild(iframe);  
8.     }  
9. });                   
10.   
11. box.getSelectionModel().addSelectionChangeListener(function(e){  
12.     iframe.setAttribute("src", "call:updateTextField");  
13.     document.body.appendChild(iframe);  
14.     iframe.parentNode.removeChild(iframe);  
15. });  

最后为了让跟随我四年多的已无法升级到iOS5的itouch继续发挥余热，还得做如下一些设置才能用于调试测试，首先Summary里面的Deployment Target需要设置到4.*的版本，plist文件中删除Required device capabilities这行设置，最后在Architectures内改成armv7和armv6

最后是两个比较重要的obc和js代码文件供大家参考TWaver HTML5 Demo

最后将程序Archive归档发布到了App Store等着Apple的“审判”，如果顺利的话过几天大家就可以在App Store上通过查找到“TWaver”关键字，下载玩玩这篇文章的App，最后当然是free的App了。