WebView in Appcelerator Titanium

The Titanium Web View allows you to open an HTML5 based view which can load either local or remote content. Here I am going to give example for both Local and remote content.

1. WebView with local content
Here I have added some sample text to webview, the 'html' property will accept the HTML content.

var win = Ti.UI.currentWindow;    
var textContent = '
Hi this is the sample text from the webview 
';
var localWebview = Titanium.UI.createWebView({
    top:0,
    left:10,
    right:10,
    html:textContent,
    height:320,
    width:320,
    backgroundColor:'transparent',
    touchEnabled:false
});
win.add(localWebview);

2. WebView with remote content
Here I have added some remote content into the webview, for example I am loading a Facebook page in webview.

var win = Ti.UI.currentWindow;    
Ti.App.fireEvent('show_indicator'); //display loading spinner until webview gets loaded
var fbUrl = "http://www.facebook.com";
var extwebview = Titanium.UI.createWebView({
     top:0,
     left:0,
     right:0,
     url:fbUrl,
     height:440,
     width:320,
     backgroundColor:'#ccc'
});
win.add(extwebview); //adding webview in current window

extwebview.addEventListener('load', function() {
    Ti.App.fireEvent('hide_indicator'); //Hide the Loading indicator after the webview loaded
})

var space = Titanium.UI.createButton({
    systemButton: Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
  
var buttonClose = Titanium.UI.createButton({
    title:"Done",
    style:Titanium.UI.iPhone.SystemButtonStyle.DONE 
});

var bottomToolbar = Titanium.UI.createToolbar({
    left : 0,
    bottom: 0,
    height : 40,
    width : 320,
    items: [space,space, space,space, space, space,buttonClose]
})
win.add(bottomToolbar); // add close button at the bottom tabbar to close the webview 
  
buttonClose.addEventListener('click', function (e) {
    win.remove(extwebview);
    win.remove(bottomToolbar);
});