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
Highlighted
Developer
Posts: 49
Registered: ‎02-09-2011
My Device: Not Specified

HowTo: Simulate BlackBerry API in Chrome

(This is for the tablet, but it would probably work for the phones)

Here is a useful tool I use for testing my code against api functionality.

 

I know I mentioned I would be writing up a document on how to build blackberry apps using jQuery Mobile and some other frameworks and that is still coming, but I thought I'd toss up some tools while I had the time, this one is easy so it was quick.

 

I'm going to do a short post on how to make local database transactions (potentially) easier using Persistencejs and Amplify here in a couple days, I just need to find the time.

 

You can easily simulate other functionality besides connectivity by adding functions to the end

example:

 

blackberry.system.hasCapability = function(capability){ switch(capability) { case "network.wlan": return true; break; } };

 

Here is the code, just toss this at the top of your main script, dont forget to remove it before you test on the vm Smiley Happy

 

if (typeof exports !== 'undefined') { exports.createblackberry = function() { return initblackberry({}) } var singleton; exports.__defineGetter__("blackberry", function () { if (!singleton) singleton = exports.createblackberry(); return singleton; }); } else { window = window || {}; window.blackberry = initblackberry(window.blackberry || {}); } function initblackberry(blackberry) { if (blackberry.isImmutable) return blackberry; blackberry.isImmutable = function(isim) { return (isim == "system"); }; blackberry.system = function () { return true; }; blackberry.system.hasDataCoverage = function(){ return false; }; return blackberry; }

 

Hope this helps Smiley Happy

 

 

Levi De Haan // Sr. Programmer/Sys. Admin 
1-877-578-3794 x 1000
@levidehaan
1-877-JQUERY-HELP
1-303-747-6007

 

Contributor
Posts: 36
Registered: ‎04-06-2010
My Device: Bold 9700
My Carrier: AT&T

Re: HowTo: Simulate BlackBerry API in Chrome

[ Edited ]

I've started a similar mock playbook.js file, but it is on the back burner.  Maybe we combine efforts and put something on github?

 

I put what I have so far as a gist:  https://gist.github.com/862850

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: HowTo: Simulate BlackBerry API in Chrome

[ Edited ]

If you check out the source code in github for WebWorks-TabletOS "rtm" branch, you will see that all of our APIs are written in pure JavaScript  

 

https://github.com/blackberry/WebWorks-TabletOS/tree/rtm

 

Take a look in the "js_api" directory...

 

The API has been designed with an architecture where you can simply swap out one layer and return dummy data as part of that API.  One of the main reasons for this was to provide the ability to plug the API directly into a desktop browser.  Saves lots of compiling and simulator time Smiley Happy

 

We have more plans around this tooling direction which we can hopefully reveal shortly.

 

All of the PlayBook APIs are pure JavaScript that end up making local restful AJAX calls where we then provide the data back as JSON objects.  This is the direction that we will eventually be taking all of our APIs both on the smartphone and tablet platforms.

 

I've been trying to get some time to add some more architectural details of how this works and our plans to further transition the APIs in this direction.

 

It wouldn't be too difficult to provide a simple loader function on your desktop browser to add these APIs in.  You can even check out our ActionScript code in this branch to see how we load them all in for WebWorks.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter
Developer
Posts: 49
Registered: ‎02-09-2011
My Device: Not Specified

Re: HowTo: Simulate BlackBerry API in Chrome

Certainly if anything in my code would help extend yours, then create a new post to let others know, i would be happy to give yours a try, mine is far from as complete as yours is Smiley Happy.

 

Developer
Posts: 49
Registered: ‎02-09-2011
My Device: Not Specified

Re: HowTo: Simulate BlackBerry API in Chrome

Hi Tim,

I definitely will browse through the API code more, this is more of a quick toss in though, I think integrating this into a browser plugin for chrome would be a better use of the js_api code, which would rawk! (hint hint)
but as far as just making sure that your code works to, say, switch to a different set of scripts based on whether or not your online or to use the database if your not connected to the internet, if the program is in the background start a timeout to check for updates to content remotely. things like that.

 

I haven't written a google chrome plugin, but if anyone reading this has some exp then I would be all for collaborating on a chrome plugin to emulate the playbook api.

 

 

Contributor
Posts: 36
Registered: ‎04-06-2010
My Device: Bold 9700
My Carrier: AT&T

Re: HowTo: Simulate BlackBerry API in Chrome

I was also toying around with the idea of Chrome extension (but never have written one).  I saw "Window Resizer" (https://chrome.google.com/extensions/detail/kkelicaakdanhinjdeammmilcgefonfh) and setup both a 1024x600 and 600x1024 using the mobile profile Mobile (this applies the specified dimensions to the viewport, not to the entire window).  I thought when you changed sizes, it could also fire an orientation change event something like the untested code below.

 

 

function mockOrient(orientation) {
    var event = document.createEvent("OrientationEvent");
    event.initEvent("orientationchange", false, false);

    if (orientation == "portrait") {
        window.orientation = 0;
    } else if (orientation == "landscape") {
        window.orientation = 90;
    }

    event.orientation = orientation;  // ??
    window.dispatchEvent(event);
}

 

I was thinking the extension could also set the various hasPermissions and dataCoverage and battery level, etc.  

 

Retired
Posts: 3,708
Registered: ‎10-16-2008
My Device: Z10
My Carrier: Rogers

Re: HowTo: Simulate BlackBerry API in Chrome

I was playing around with it this morning.  Basically you need to include all the *.js files in the "js_api" directory except for the ones in "global_JS".

 

The way WebWorks is architected is that all the files marked with "_dispatcher.js" are the actual data portion of the APIs.  If you look at them, they are essentially putting together a URI to perform a local restful call.  Our ActionScript portion of the framework returns the data back to the API via a JSON object. What I did was simply remove the restful call portion in the "_dispatcher.js" files and returned dummy data.

 

I didn't go through all of them, but the ones that I did worked like a charm in Chrome Smiley Happy

 

I also created a little loader.js file that was the only thing that I needed to include in the <script> tag of my web pages.  I copied all of the .js files to a framework directory. My loader looked like the following:

 

 

loadLibrary('framework/blackberry_ns.js');
loadLibrary('framework/app_ns.js');
loadLibrary('framework/app_dispatcher.js');
loadLibrary('framework/app_event_ns.js');
loadLibrary('framework/app_event_dispatcher.js');
loadLibrary('framework/invoke_ns.js');
loadLibrary('framework/invoke_dispatcher.js');


function loadLibrary(url) {
	
	var xmlhttp = new XMLHttpRequest();
	xmlhttp.open('GET',url,false);
	xmlhttp.onreadystatechange=function() {
		  if (xmlhttp.readyState==4 && xmlhttp.status==200){
			eval(xmlhttp.responseText);
		  }
		}
	xmlhttp.send(null);
}

 

This just simply synchronously loaded in each of the files that I wanted using an eval() statement.  Since it was the first tag in my HTML document it ran first to ensure the API was loaded before any dom events fired.

 

Just be sure to comment out that script tag when you package and test on the simulator.  Obviously when it is time to ship your app you'll want to remove these files from your app.

 

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter