Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
yllus
Posts: 57
Registered: ‎06-15-2011
My Carrier: Rogers
Accepted Solution

Input events are different on local files vs. web?

[ Edited ]

I'm exploring creating a (free and open source) offline mapping app for the BlackBerry PlayBook. So far, the plan is:

 

  1. Use the Leaflet ( http://leaflet.cloudmade.com/ ) library to create a touch interface.
  2. Download test tiles from OpenStreetMaps ( http://www.openstreetmap.org/ ).
  3. Get Leaflet reading from the local filesystem instead of pulling them off the Web.
  4. Use the BlackBerry WebWorks Geolocation API to place and update a marker on the map.

Unfortunately, I'm stuck on #1 for a strange reason. If I reference a page that loads the Leaflet library on a remote server, the touch events work properly - drag to zoom, double tap to zoom, pinch - it all works. However, if I take the exact same page that was referenced via a http:// call and instead use local:/// , the touch events don't work.

 

This works:

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0;" />
	<title>Azimuth</title>
	<link rel="stylesheet" href="leaflet/leaflet.css" />
	<script src="leaflet/leaflet.js"></script>
	<style>
		body {
			padding: 0;
			margin: 0;
		}

		html, body, #map {
			height: 600px;
		}
	</style>
</head>
<body>
	<script>
		//window.location = 'local:///map.html';
		window.location = 'http://leaflet.cloudmade.com/examples/mobile-example.html';
	</script>
</body>
</html>

 But this does not:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0;" />
	<title>Azimuth</title>
	<link rel="stylesheet" href="leaflet/leaflet.css" />
	<script src="leaflet/leaflet.js"></script>
	<style>
		body {
			padding: 0;
			margin: 0;
		}

		html, body, #map {
			height: 600px;
		}
	</style>
</head>
<body>
	<script>
		window.location = 'local:///map.html';
		//window.location = 'http://leaflet.cloudmade.com/examples/mobile-example.html';
	</script>
</body>
</html>

The code for the app is located here: http://yllus.com/wp-content/uploads/2011/08/azimuth.zip 

 

You'll need to update the author and authorId values in blackberry-tablet.xml but past that, the app should simply work. Does anyone know what the deal is here? If we can solve this, we're most of the way to having a very nice offline GPS map app for the PlayBook.

Please use plain text.
BlackBerry Development Advisor
tneil
Posts: 3,702
Registered: ‎10-16-2008
My Carrier: Rogers

Re: Input events are different on local files vs. web?

[ Edited ]

Are you sure that those libraries are not pulling in other content that you haven't included in your WebWorks archive?

 

Or using relative paths that expect to be hosted on their domain?

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Please use plain text.
Developer
yllus
Posts: 57
Registered: ‎06-15-2011
My Carrier: Rogers

Re: Input events are different on local files vs. web?

I tested the app on my desktop PC in Chrome, and both of the pages I provided code for above behaved identically - so I'm inclined to think that they loaded the same resources. That said, I'll test again tonight and take an exact list of resources pulled for each to absolutely rule out that as the issue.
Please use plain text.
Developer
yllus
Posts: 57
Registered: ‎06-15-2011
My Carrier: Rogers

Re: Input events are different on local files vs. web?

Strange - I retrieved the JS and CSS files from http://leaflet.cloudmade.com/examples/mobile-example.html , put them in my own folder and now it works! Thanks Tim for prodding me to be more thorough. :smileyhappy:
Please use plain text.
Administrator
astanley
Posts: 1,359
Registered: ‎07-02-2009
My Carrier: Bell

Re: Input events are different on local files vs. web?

Wanted to ask a follow up question for the benefit of other developers who may experience a similar issue - could this have been a whitelisting error?

 

Did you have the following element defined in your config.xml file?

 

<access uri="http://leaflet.cloudmade.com" subdomains="true"/>

 This would allow your WebWorks app to retrieve the mobile-example.html file from a remote location at runtime.  Without this access element defined, this external resource would have been inaccessible.

 

Sincerely,

Adam

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
Developer
yllus
Posts: 57
Registered: ‎06-15-2011
My Carrier: Rogers

Re: Input events are different on local files vs. web?

I had * for my access rule in config.xml - I looked deeper into this and it looks like I was running v0.2 of the JavaScript library, while  the remote site (leaflet.cloudmade.com) was running an experimental v0.3. Grabbing that version solved the issue.

Please use plain text.