/****************** app.js ***************************/

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#002878');

//
// create controls tab and root window
//
var rootwinopts = {};
rootwinopts.url = 'webview.js';
rootwinopts.backgroundColor = '#002878';
rootwinopts.navBarHidden = true;
rootwinopts.tabBarHidden = true;
rootwinopts.exitOnClose = true;
rootwinopts.orientationModes = [
        Titanium.UI.PORTRAIT,
        Titanium.UI.UPSIDE_PORTRAIT,
        Titanium.UI.LANDSCAPE_LEFT,
        Titanium.UI.LANDSCAPE_RIGHT
    ];
if (Ti.Platform.name == 'android') {
    rootwinopts.windowSoftInputMode = Ti.UI.Android.SOFT_INPUT_ADJUST_RESIZE;    
}
var rootwin = Ti.UI.createWindow(rootwinopts);

rootwin.open();


/**************** webview.js ***********************/


//
// create web view
//
var serviceURL = "localpage.html";

// Get a handle to the current window
var win = Titanium.UI.currentWindow;
var webview = null;

var actInd = Titanium.UI.createActivityIndicator({
    message: "Loading...",
});
actInd.hide();

webview = Titanium.UI.createWebView({url:'https://mobile.twitter.com/', scalesPageToFit:true}); 
webview.addEventListener('beforeload', function(e) {
    Ti.API.debug("BEFORELOAD: Showing the activity indicator.  URL: " + e.url);
    actInd.show();
});

webview.addEventListener('error', function(e) {
    Ti.API.debug("     ERROR: message: " + e.message + ", source: " + e.source + ", type: " + e.type + ", url: " + e.url);
    if (actInd != null) {
        actInd.hide();
    }
});

webview.addEventListener('load', function(e) {
    Ti.API.debug("      LOAD: Hiding the activity indicator.  URL: " + e.url);
    actInd.hide();
});

win.add(webview);
webview.add(actInd);

3 Answers

• Mobile twitter has a number of issues, which I will go ahead and explain some of the work arounds below.

  Due to the fact a user can click on a link and go to a new page without the webview not firing the load event, I have had to use setInterval() to continually check if the web canGoBack(). Thus it checks every second whether or not my back button should be enabled.

  On iOS, the webview control has a property where it stops executing javascript if it takes longer than 10 seconds to run. On Mobile twitter, this is fine unless you are on a slow 3G connection. In this case I have added some special iOS code to stop loading the webview as soon as the load event is fired (the page has loaded, but the javascript hasn't finished). This seems to work 85+ percent of the time. There is also some logic below (the evalJS line) to hide any potential error messages that may happen from this.

  On Android, I don't believe I have ever seen it successfully load in a webview. My work around for this was exposing the userAgent string and setting it to be a different device. The older mobile webpage displays just fine (go to mobile.twitter.com on your computer and your device to see the difference). I have created a pull request to place this in the actual Titanium source, but it has not been included yet.

  Despite my issues with it loading, I do not experience the activity indicators not hiding the way you describe. I did use a timer, but it seems to work reliably well. Possibly it could be related to my special activity indicator class (vwActivity below), but I doubt it.

  var loading = false;
  
   var vwWeb = Ti.UI.createWebView({
       left: 0,
       right: 0,
       top: 0,
       bottom: 0,
       scalesPageToFit: true,
       url: url
   });
  
   vwWeb.addEventListener('beforeload', function (e) {
       //New twitter site design has javascript running over 10 seconds on 3g connection
       //causing page not load as iPhone has a script timeout http://bit.ly/ohVM7Q                
       if (laf.device.isiPhone() && vwWeb.url.toLowerCase().indexOf('twitter.com/') >= 0) {
           vwWeb.evalJS('window.alert=null;');
       }
  
       if (!loading) {
           loading = true;
           vwActivity.show('Loading...');
           btnBack.enabled = vwWeb.canGoBack();
           setTimeout(function () {
               if (loading) {
                   loading = false;
                   vwActivity.hide();
               }
           }, 8500);
       }
   });
  
   vwWeb.addEventListener('load', function (e) {
       //New twitter site design has javascript running over 10 seconds on 3g connection
       //causing page not load as iPhone has a script timeout http://bit.ly/ohVM7Q
       if (laf.device.isiPhone() && vwWeb.url.toLowerCase().indexOf('twitter.com/') >= 0) {
           vwWeb.stopLoading();
       }
  
       btnBack.enabled = vwWeb.canGoBack();
       if (loading) {
           loading = false;
           vwActivity.hide();
       }
       setTimeout(function () {
           btnBack.enabled = vwWeb.canGoBack();
       }, 350);
   });
  
   vwWeb.addEventListener('error', function (e) {
       btnBack.enabled = vwWeb.canGoBack();
       if (loading) {
           loading = false;
           vwActivity.hide();
       }
   });
  

• WebView is a View that displays web pages.If want to display html as the part of your UI then you can use WebView in your APP. for more please visit here …….
  http://androidexample.com/Show_Loader_To_Open_Url_In_WebView__-_Android_Example/index.php?view=article_discription&aid=125&aaid=145

• wv.getSettings().setDomStorageEnabled(true);

  This worked for me for loading twitter URL..
  Refer this: http://stackoverflow.com/questions/9189267/webview-rendering-page-different-on-different-devices?answertab=active#tab-top