2012-03-04 73 views
1

我是钛的新手,并试图找到一个解决方案或如何在webview中使用钛API的一个很好的解释。我已将所有代码都包含在本演示的必要部分中。Appcelerator在webview中使用本机iOS/Android功能的钛fireEvent

我想要做的是从win4.html(参见下文)中激发本机相机功能。这个文档在api中并不是很棒。

我有一个非常基本的设置在我app.js

var tabGroup = Titanium.UI.createTabGroup(); 

var win1 = Titanium.UI.createWindow({ 
    title: "HTML", 
    backgroundColor: "#000", 
    url:"windows/win4.js" 
}); 
var tab1 = Titanium.UI.createTab({ 
    title: "HTML", 
    icon: "KS_nav_ui.png", 
    window: win1 
}); 


var win2 = Titanium.UI.createWindow({ 
    title: "Tab 3", 
    backgroundColor: "#000", 
    url:"windows/win3.js" 
}); 
var tab2 = Titanium.UI.createTab({ 
    title: "Camera", 
    icon: "KS_nav_ui.png", 
    window: win2 
}); 

win4.js(HTML - createWebView设置):

var win = Titanium.UI.currentWindow; 
var webview = Titanium.UI.createWebView({url:'win4.html'}); 
win.add(webview); 
Ti.App.addEventListener('showCamera', function() { 
      tabGroup.activeTab = tab2; 
}); 

win4.html(纯HTML由调用win4.js):

<html> 
    <head> 
     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> 
     <style type="text/css"> 

      body { 
       background: #87e0fd; 
       background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%); 
       background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#87e0fd), color-stop(40%,#53cbf1), color-stop(100%,#05abe0)); 
       background: -webkit-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); 
       background: -o-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); 
       background: -ms-linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); 
       background: linear-gradient(top, #87e0fd 0%,#53cbf1 40%,#05abe0 100%); 
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0); 
      } 
      p { 
       text-shadow: 1px 1px 1px rgba(255,255,255,.5); 
      } 
      .container { 
       margin: 0 auto; 
       overflow: hidden; 
       width: 90%; 
      } 
      .left { 
       float: left; 
      } 
      .right { 
       float: right; 
      } 

     </style> 
     <script type="text/javascript"> 
      function Init() { 
       var left = document.getElementById("left"); 
       left.addEventListener('click', function(e) { 
        Ti.App.fireEvent('showCamera'); 
       }); 
      }  
     </script> 
    </head> 
    <body onload="Init()"> 

     <div class"container"> 

      <div id="left" class="left">  
       <p> 
        left content here      
       </p>       
      </div>   
      <div class="right">  
       <p> 
        right content here      
       </p>   
      </div> 

     </div> 

    </body> 

</html> 

win3.js(机摄像头调用):

Titanium.Media.showCamera({ 

    success:function(event) 
    { 
     var cropRect = event.cropRect; 
     var image = event.media; 

     Titanium.Media.saveToPhotoGallery(image); 

     Titanium.UI.createAlertDialog({title:'Photo Gallery',message:'Check your photo gallery'}).show();  
    }, 
    cancel:function() 
    { 

    }, 
    error:function(error) 
    { 
     // create alert 
     var a = Titanium.UI.createAlertDialog({title:'Camera'}); 

     // set message 
     if (error.code == Titanium.Media.NO_CAMERA) 
     { 
      a.setMessage('Device does not have video recording capabilities'); 
     } 
     else 
     { 
      a.setMessage('Unexpected error: ' + error.code); 
     } 

     // show alert 
     a.show(); 
    }, 
    allowEditing:true 
}); 

我怎样才能让在click事件#left我的应用程序内触发本机摄像头?

回答

0

你已经用你的JavaScript文件的URL定义了你的窗口,它为每个窗口创建一个新的JavaScript上下文。因此,tab2没有在win4的上下文中定义,所以当你尝试切换标签时,它将不起作用。

而不是将您的应用程序侦听器放在win4中,把它放在app.js. Ti.App事件是全局的,app.js是唯一知道所有想要访问的变量的JavaScript上下文。