TWaver - 專注UI技術
          
			http://twaver.servasoft.com/
		          		
	
          

          

          

          
	
          

          posts - 171, comments - 191, trackbacks - 0, articles - 2
          
	
 
BlogJava ::
首頁 ::
新隨筆 ::
聯系 ::
聚合
 ::
管理


          
		          		
	
          
	
          
		
			
          
			
          
		          		
		
			
          
				
					
	
          
		
          
			
          
				Make an TWaver HTML5 iPhone App
			
          
 			Posted on 2012-03-10 23:36 TWaver 閱讀(1824) 評論(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手勢，該例子中通過選中圖元搖晃手機可以彈出編輯告警界面。
           1-(void)viewDidAppear:(BOOL)animated
           2{
           3[self.webView setDelegate:self];
           4[self.webView setScalesPageToFit: YES];
           5NSURL *url = [[NSBundle mainBundle] URLForResource:@"demo" withExtension:@"html"];
           6NSURLRequest *req = [[NSURLRequest alloc]initWithURL:url];
           7[self.webView loadRequest:req];
           8
           9[self.textField addTarget:nil action:@selector(dummy:)
          10forControlEvents:UIControlEventEditingDidEndOnExit];
          11
          12[self becomeFirstResponder];
          13}
          

          以下是Switch開關控制html頁面內javascript代碼，Objective C調用Javascript比較容易，直接調用stringByEvaluatingJavaScriptFromString運行即可
          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值，以及當前選中圖元的名字信息
          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避免一些副作用，以下是相關的代碼，邏輯很簡單我就不解釋了。
           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}
           
           1var iframe = document.createElement("IFRAME");
           2
           3network.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
          11box.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
				
          
				
          呵呵  不錯啊  
          
			
          
		




          





          


          

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


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
			
          
		          		
	
          
	
          
		
			


		
	
          

          


    







          
        
	




主站蜘蛛池模板：
纳雍县|
昌邑市|
小金县|
奇台县|
凤翔县|
渝中区|
宜都市|
新余市|
精河县|
高清|
衡阳市|
缙云县|
眉山市|
阿瓦提县|
开远市|
林西县|
永城市|
西峡县|
福州市|
山东省|
双辽市|
安吉县|
泽州县|
抚宁县|
连平县|
汝南县|
濮阳县|
全南县|
吴旗县|
五华县|
曲阳县|
蒲江县|
清河县|
那坡县|
如东县|
名山县|
禄丰县|
台安县|
大冶市|
泌阳县|
麻江县|