Access native functionality from html content in webview using Titanium.

Webview is used to show the html content. Using titanium we can easily access native functionality from the html content. The code to do so is described below.

Lets say we have a span in our html content and onclick of that we will add a native label to the window.

//Defines the current window

var myWin = Ti.UI.currentWindow;

//Html content

var htmlTag = “Click to add label to top”;

//Actually Ti.App.fireEvent() calls the function that defines the native functionality

//Defines the webview to hold the html content

var myWebView = Ti.UI.createWebView({

   width     : 100,      //describes the width

   height    : 100,     //describes the height

   html      : htmlTag      // assign the html content to this webview

});

//WebView added to the current window

myWin.add(myWebView);

//Defines the application level listener to response the fire event.

Ti.App.addEventListener(‘ addLabel’, function(){

   //Define the label

   var nativeLbl = Ti.UI.createLabel({

      title       : ‘I am a native label’,

      height   : ‘auto’,      //Describes the height

      top       : ’20’

   });

   //label added to window

   myWin.add(nativeLbl);

});

150 150 Burnignorance | Where Minds Meet And Sparks Fly!