Databases
StackOverflow2013
Postsdbo
POAppcelerator Titanium fireEvent in webview to use native iOS/Android functionality
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAppcelerator Titanium fireEvent in webview to use native iOS/Android functionality
    primarykey
    data
    text
    <p>I am new to Titanium and trying to find a solution or a good explanation on how to use Titanium API when in a webview. I have included all my code for the necessary parts of this demo.</p> <p>What I'm trying to do is fire the native camera functionality from win4.html (see below). The documentation is not that great in the api.</p> <p>I have a pretty basic setup in my <strong>app.js</strong>:</p> <pre><code>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 }); </code></pre> <p><strong>win4.js</strong> (HTML - createWebView setup):</p> <pre><code>var win = Titanium.UI.currentWindow; var webview = Titanium.UI.createWebView({url:'win4.html'}); win.add(webview); Ti.App.addEventListener('showCamera', function() { tabGroup.activeTab = tab2; }); </code></pre> <p><strong>win4.html</strong> (Pure HTML called by <strong>win4.js</strong>):</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /&gt; &lt;style type="text/css"&gt; 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; } &lt;/style&gt; &lt;script type="text/javascript"&gt; function Init() { var left = document.getElementById("left"); left.addEventListener('click', function(e) { Ti.App.fireEvent('showCamera'); }); } &lt;/script&gt; &lt;/head&gt; &lt;body onload="Init()"&gt; &lt;div class"container"&gt; &lt;div id="left" class="left"&gt; &lt;p&gt; left content here &lt;/p&gt; &lt;/div&gt; &lt;div class="right"&gt; &lt;p&gt; right content here &lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>win3.js</strong> (Native Camera Call):</p> <pre><code>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 }); </code></pre> <p>How can I make a click event on the #left trigger the native camera within my app? </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USKevin Mack
    1. USKevin Mack
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POAppcelerator Titanium fireEvent in webview to use native iOS/Android functionality
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAppcelerator Titanium fireEvent in webview to use native iOS/Android functionality
      1. USPeter Wong
      1. VTFavorite
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload