[TIMOB-16607] Android: WebView not loading local RGraph library javascript files

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Invalid
Resolution Date	2014-10-13T21:58:19.000+0000
Affected Version/s	Release 3.2.1
Fix Version/s	n/a
Components	Android
Labels	ipass1, webview
Reporter	Joanna Zolopa
Assignee	Hieu Pham
Created	2014-03-05T11:59:24.000+0000
Updated	2018-08-06T17:37:05.000+0000

Description

I am using web view in my alloy application to render charts using RGraph HTML5 library. My code works perfectly fine on iOS. Unfortunately on Android I keep getting an error indicating that RGraph library files haven't been loaded: [INFO] : I/TiWebChromeClient.console: (main) [1259542,1259713] Uncaught ReferenceError: RGraph is not defined (app:///barchart.html) I have attached the HTML file & function from my controller code that can be used to reproduce the issue. RGraph library can be downloaded from here : http://www.rgraph.net/download I changed the extensions of all js files in the library to .jsf to stop Titanium from compiling them. And this is the structure of my folders in the project app/assets/android/libraries {here I've put RGraph library js files} app/assets/android/barchart.html {html file to be displayed; attached} Similar for iOS. The rest of the project follow the common structure of alloy project. Please don't hesitate to contact me if you have any questions. Here is the js code that I'm using:

function showGraph() {
	
var resFolderPath = Ti.Filesystem.getResourcesDirectory() + '/';
	//Graph View creation
   var graphWebView = Ti.UI.createWebView({
        url: resFolderPath+ 'barchart.html',
        left: 100
    });

//To stop graph from scrolling
graphWebView.addEventListener('touchmove',function(e) {
    	return false;
});
	

	var win_height = Ti.Platform.displayCaps.platformHeight * 0.7;
    var win_width = Ti.Platform.displayCaps.platformWidth;
    
	
	var win = Ti.UI.createWindow({
		backgroundColor : '#40000000'
	});
 
    var view = Ti.UI.createView({
        backgroundColor: '#F2F2F2',
        bottom: -win_height,
        width : win_width,
        height : win_height
    });
	
	var closeButton = Titanium.UI.createButton({
   		title: 'Close',
   		top: 10,
   		left: 10,
   		height: 50
	});
		closeButton.addEventListener('click',function(e)
	{ win.close(); });
	

	var chartTitle = Titanium.UI.createLabel({
		text: "Chart Test",
		right: 10,
		textAlign: Ti.UI.TEXT_ALIGNMENT_RIGHT,
		top: 10,
		zIndex: 1
		
		
	});

	view.add(chartTitle);
	view.add(closeButton);
	view.add(graphWebView);
	
 	win.add(view);
 	
	if(OS_ANDROID) {
		win.open({ modal: true, navbarHidden: true });
	}
	else {
		win.open();
	}
}

Here is the HTML that I'm trying to display:

<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    <script type="text/javascript" src="/libraries/RGraph.common.core.jsf" ></script>
    <script type="text/javascript" src="/libraries/RGraph.common.dynamic.jsf" ></script>
    <script type="text/javascript" src="/libraries/RGraph.common.tooltips.jsf" ></script>
    <script type="text/javascript" src="/libraries/RGraph.common.effects.jsf" ></script>
    <script type="text/javascript" src="/libraries/RGraph.bar.jsf" ></script>
    <script type="text/javascript" src="/libraries/jquery.min.jsf" ></script>
    <title>A basic bar chart</title> 
</head>
<body>

<canvas style="text-align: center" id="cvs" width="850" height="400" >[No canvas support]</canvas>

<script>

var labels = ["One", "Two", "Three", "Four"];
                
               var combinedArrays = [[3,4],[2,3],[1,2],[1,4]];
       
            var bar = new RGraph.Bar('cvs', combinedArrays)
            	.Set('labels', labels)
            	.Set('hmargin', 50)
            	.Set('colors', ['Gradient(white:grey)', 'Gradient(black:white)'])
            	.Set('ylabels', false)
            	.Set('background.grid.vlines', false)
        	RGraph.Effects.Bar.Grow(bar);
</script>
</body>
</html>

Attachments

File	Date	Size
barchart.html	2014-03-06T08:24:18.000+0000	1255
showChartFunction.rtf	2014-03-05T11:59:24.000+0000	2010
TestApp.zip	2014-03-10T19:59:41.000+0000	6651273
TestApp2.zip	2014-03-11T05:34:47.000+0000	8162049

Comments

Joanna Zolopa 2014-03-06

Corrected version ( previous html one got packaged in additional layer of html while saving)
Ritu Agrawal 2014-03-10

[~joanna_z] I tried to follow the exact same steps provided by you to reproduce the issue but the whole application is throwing so many errors. Would it be possible for you to zip your project and attach to this ticket so that I can try and reproduce your problem?
Joanna Zolopa 2014-03-10

Hi Ritu, I've extracted the web view bit from my app that should help you to reproduce the problem. I hope it helps. Kind regards, Joanna
Ritu Agrawal 2014-03-11

Moving this ticket to engineering as I can reproduce this issue with the attached test case (use modified test TestApp2.zip file). Same application works fine on iOS platform but not on Android. It may something to do how resources paths are calculated for different platforms.
Joanna Zolopa 2014-03-19

Hi, Could you provide me with any rough estimate of when possibly this issue can be looked at? I am nearing the completion of an application development and its outcome will highly contribute towards a decision of Appcelerator usefulness for our organisation. I just need to know if it's an issue or just a problem with the way I implemented it. I would be grateful for any response on this one. Kind regards, Joanna
Ingo Muschenetz 2014-03-19

I'm curious if this has to do with the changing of the .js -> .jsf file extension. Do you have to change them, even in development mode?
Ingo Muschenetz 2014-03-19

[~joanna_z] One comment: If you renamed the WebView js files to jsf, then that may not work unless you explicitly set the type="application/javascript" in the