亚洲国产综合无码一区,国产精品亚洲αv天堂无码,亚洲熟妇无码AV

Make an TWaver HTML5 iPhone App

Posted on 2012-03-10 23:36 TWaver 閱讀(1822) 評論(2) 編輯收藏

構建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的拓撲組件

接下來將twaver.js和demo.html的頁面內容drag添加進入項目，形成如下目錄結構的工程。這里細心的同學以及發現這行代碼<meta name = “viewport” content = “user-scalable=no, width = 500″></meta>，這個例子我希望讓拓撲自己控制縮放，所以關閉了瀏覽器的scalable功能并設定了寬度，更多的viewport知識可以參考這里

這時需要我們做個設置，XCode默認將js作為Source而不是Resource處理，所以會導致找不到js資源的問題，可以在XCode的Build
Phases里面將twaver.js從Compile Sources干掉，在Copy Bundle Resources里面加入twaver.js

以下代碼再界面呈現時通過UIWebView的loadRequest函數加載指向demo.html的NSURLRequest，注意其中對textfield的添加的個空函數是為了回車能取消編輯，最后的becomeFirstResponder是為了能接收到Shake手勢，該例子中通過選中圖元搖晃手機可以彈出編輯告警界面。

-(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

[self.textField addTarget:nil action:@selector(dummy:)
10

forControlEvents:UIControlEventEditingDidEndOnExit];
11

[self becomeFirstResponder];
13

}

以下是Switch開關控制html頁面內javascript代碼，Objective C調用Javascript比較容易，直接調用stringByEvaluatingJavaScriptFromString運行即可

- (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值，以及當前選中圖元的名字信息

-(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避免一些副作用，以下是相關的代碼，邏輯很簡單我就不解釋了。

- (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

}

var iframe = document.createElement("IFRAME");
2

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

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了。

# re: Make an TWaver HTML5 iPhone App 回復 更多評論

2012-03-11 13:06 by lockron

學到很多，感謝博主

# re: Make an TWaver HTML5 iPhone App 回復 更多評論

2012-03-12 09:20 by tb

呵呵不錯啊

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

TWaver - 專注UI技術

Make an TWaver HTML5 iPhone App

評論

# re: Make an TWaver HTML5 iPhone App 回復 更多評論

# re: Make an TWaver HTML5 iPhone App 回復 更多評論

日歷

公告

常用鏈接

留言簿(14)

隨筆檔案(171)

文章檔案(2)

新聞檔案(1)

相冊

搜索

最新隨筆

最新評論

閱讀排行榜

評論排行榜

TWaver - 專注UI技術

Make an TWaver HTML5 iPhone App

評論

# re: Make an TWaver HTML5 iPhone App 回復 更多評論

# re: Make an TWaver HTML5 iPhone App 回復 更多評論

日歷

公告

常用鏈接

留言簿(14)

隨筆檔案(171)

文章檔案(2)

新聞檔案(1)

相冊

搜索

最新隨筆

最新評論

閱讀排行榜

評論排行榜

# re: Make an TWaver HTML5 iPhone App 回復更多評論

# re: Make an TWaver HTML5 iPhone App 回復更多評論