I am trying to implement a side panel using Titanium wherein I have couple of options under the side panel menu and each menu option loads a different view. One of the options loads a webview. The website or html loads perfectly in the webview component but I am not able to interact with it; in the sense that I am not able to click on the links or do anything as such. This happens both with local as well as remote html.
For the side panel, I am integrating the drawer widget provided by Ricardo Alcocer, link to his github project is - https://github.com/ricardoalcocer/alloy-widget-drawermenu
Here goes the code blocks.
index.xml
<Alloy> <Window class="container" id="win"> <Require type="widget" src="com.alcoapps.drawermenu" id="drawermenu"/> </Window> </Alloy>mainview.xml (Side menu option to load the webview)
<Alloy> <View id="mainView"> <View id="mainTopBar"> <View id="menuButton"/> </View> <WebView id="chartView" url="http://www.google.co.in"/> </View> </Alloy>menuview.xml (Side Panel)
<Alloy> <View id="menuView"> <View id="menuTopBar"/> <TableView class="menuTable" id="menuTable"> <TableViewRow class="tableRow" id="row1"> <View id="rowContainer"> <View id="rowSkull" class="rowIcon"/><Label id="rowLabel" class="rowLabel">MainView</Label> </View> </TableViewRow> <TableViewRow class="tableRow" id="row2"> <View id="rowContainer"> <View id="rowGear" class="rowIcon"/><Label id="rowLabel" class="rowLabel">Settings</Label> </View> </TableViewRow> </TableView> </View> </Alloy>index.js
var controls=require('controls'); // get main and menu view as objects var menuView=controls.getMenuView(); var mainView=controls.getMainView(); // attach event listener to menu button mainView.menuButton.add(controls.getMenuButton({ h: '60', w: '60' })); //Minor changes to click event. Update the menuOpen status; mainView.menuButton.addEventListener('click',function(){ $.drawermenu.showhidemenu(); $.drawermenu.menuOpen=!$.drawermenu.menuOpen; }); // method is exposed by widget // get config view as objects var configView=controls.getConfigView(); //add menu view to ConfigView exposed by widget configView.menuButton.add(controls.getMenuButton({ h: '60', w: '60' })); //Minor changes to click event. Update the menuOpen status; configView.menuButton.addEventListener('click',function(){ $.drawermenu.showhidemenu(); $.drawermenu.menuOpen=!$.drawermenu.menuOpen; }); // method is exposed by widget $.drawermenu.init({ menuview:menuView.getView(), mainview:mainView.getView(), duration:200, parent: $.index }); //variable to controler de open/close slide var activeView = 1; // add event listener in this context menuView.menuTable.addEventListener('click',function(e){ $.drawermenu.showhidemenu(); $.drawermenu.menuOpen = false; //update menuOpen status to prevent inconsistency. if(e.rowData.id==="row1"){ if(activeView!=1){ $.drawermenu.drawermainview.remove(configView.getView()); activeView = 1; } else { activeView = 1; } } if(e.rowData.id==="row2"){ if(activeView!=2){ $.drawermenu.drawermainview.add(configView.getView()); activeView = 2; } else{ activeView = 2; } } // on Android the event is received by the label, so watch out! Ti.API.info(e.rowData.id); }); $.index.open();controls.js
var Alloy=require('alloy'); exports.getMainView=function(){ return Alloy.createController('mainview');; }; exports.getMenuView=function(){ return Alloy.createController('menuview'); }; exports.getMenuButton=function(args){ var v=Ti.UI.createView({ height: args.h, width: args.w, backgroundColor: '#A1D0E0' }); var b=Ti.UI.createView({ height: "20dp", width: "20dp", backgroundImage: "/106-sliders.png" }); v.add(b); return v; }; //Get the Configuration Controller exports.getConfigView=function(){ return Alloy.createController('config'); };Any kind of help will be highly apppreciated. Thanks.