Web and WebWorks Development

[titchbb]

I'm trying to use an event so that I can send debug statements from native and console.log them in js.

// index.htm (inside script tag)
function logCallback(message) { console.log("message: " + message); };
app.monitorLogs(logCallback);

// client.js
// register callback on client side
_self.monitorLogs = function (cb) {
    window.webworks.event.add(_ID, "app.logEvent", cb);
};

 When the above line executes, the console outputs the following:

GET http://localhost:8472/1/add?eventName=%22app.logEvent%22 404 (OK) GET http://localhost:8472/1/add?eventName=%22app.logEvent%22:1  

 The strange thing is, the events work perfectly OK despite this error message.

A couple of points of interest:

-The error is only presented when the windows.webworks.add line is exectued the first time

-The error does not occur at all when no callback is supplied eg.

monitorLogs();

Any help would be appreciated, as I'm not sure what the 404 is telling me.

Thanks.

Edit: I've just noticed that the example memory extension raises this error as well, is this considered normal?

Any explanation of why it occurs either way would be very interesting.

[Nukul]

404 means that it couldn't find the corresponding method on the index.js

Can I see your index.js file?

https://github.com/blackberry/BB10-WebWorks-Framework/blob/master/lib/plugins/default.js#L51

[titchbb]

Ah, I see. Sure here it is. Note that "app" in the previous version has been replaced by "tcrpa".

var tcrpaJNext,
    _event = require("../../lib/event");

module.exports = {
	sayHelloServer: function (success, fail, args, env) {
        try {
            success(tcrpaJNext.sayHelloJNext());
        } catch (e) {
            fail(-1, e);
        }
    }
};

///////////////////////////////////////////////////////////////////
// JavaScript wrapper for JNEXT plugin
///////////////////////////////////////////////////////////////////

JNEXT.TCRPAJNext = function ()
{   
    var _self = this;

	_self.sayHelloJNext = function () {
        return JNEXT.invoke(_self._id, "sayHello");
    };
	
    _self.getId = function () {
        return _self._id;
    };

    _self.init = function () {
	
		// Specify the required module exported by the native side
        if (!JNEXT.require("tcrpaJnext")) {
            return false;
        }

		// Creates an object by using an acquired module and saves returned id
        _self._id = JNEXT.createObject("tcrpaJnext.TCRPAExt");

        if (!_self._id || _self._id === "") {
            return false;
        }

		// Registers itself to be notified on events so that the onEvent method is called
        JNEXT.registerEvents(_self);
    };
	
	// Events from the native side are passed as a string to this method (onEvent name mandatory)
    _self.onEvent = function (strData) {

        var arData = strData.split(" "),
            strEventId = arData[0],
            arg = arData[1];
			
        _event.trigger("tcrpa.logEvent", strData);
    };

    _self._id = "";
    
    _self.init();
};

tcrpaJNext = new JNEXT.TCRPAJNext();

[Nukul]

Memory extension also seems to be missing registering of the events

Try this 

In the client.js you need to call register events

https://github.com/blackberry/BB10-WebWorks-Framework/blob/master/ext/connection/client.js#L50

In the index.js you should register the action map with the eventing framework and have a corresponding register events method

https://github.com/blackberry/BB10-WebWorks-Framework/blob/master/ext/connection/index.js#L20

https://github.com/blackberry/BB10-WebWorks-Framework/blob/master/ext/connection/index.js#L31

And code to register with the eventing framework

https://github.com/blackberry/BB10-WebWorks-Framework/blob/master/ext/connection/connectionEvents.js

This should solve your issue

[titchbb]

Thanks for the reply.

Could you point me to the documentation on how to write those methods, as I'm unsure of how to write the equivalents for my own code.

[Nukul]

I don't really have docs yet but I am here to help

Register method on the client.js is the same
In the client.js you need to call register events
https://github.com/blackberry/BB10-WebWorks-Framework/blob/master/ext/connection/client.js#L50
The register method should be same as well.

The action map is also exactly the same but you need to make some small changes to the strings

context: require("./<event name>Events"),
event: "<event name>",
trigger: function (args) {
_event.trigger("<event name>", args);
}

https://github.com/blackberry/BB10-WebWorks-Framework/blob/master/ext/connection/index.js#L31

https://github.com/blackberry/BB10-WebWorks-Framework/blob/master/ext/connection/index.js#L20


In the JNEXT wrapper where you go eventOn, you need do some more work and use like a start stop mechanism like this
connection API does
https://github.com/blackberry/BB10-WebWorks-Framework/blob/master/ext/connection/connectionJNEXT.js#...

You will need your own Events module like below which implements the addEventListener and removeEventListener
https://github.com/blackberry/BB10-WebWorks-
Framework/blob/master/ext/connection/connectionEvents.js

Hopefully this carries you through this.

I am slowly working on the docs here. Your feedback will help as you try it.

[titchbb]

Thanks for your reply, it's really helped my progress with this.

I've now refactored my code into a format similar to the connection example.

Where should the :

addEventListener / removeEventListener (connectionEvents.js)

and

startEvents / stopEvents (connectionJNEXT.js)

functions be called?

[Nukul]

addEventListener / removeEventListener

these are called automatically by the eventing framework. So when the user will call blackberry.event.addEventListener("yourEvent"...) it will call the  addEventListener in your code.

startEvents / stopEvents

The addEventListener/removeEventListener should call startEvents and stopEvents as here-

https://github.com/blackberry/BB10-WebWorks-Framework/blob/master/ext/connection/connectionEvents.js

[titchbb]

<html>
	<head>
		<title>tc-rpa extension test</title>
		<script type="text/javascript">
		
		</script>
		
		<script type="text/javascript" src="webworks-1.0.1.17.js"></script>
		<script type="text/javascript">
		
			function onLoad() {
				document.addEventListener("webworksready", webWorksReady, false);
			};
			
			function logCallback(message) {
				console.log("!!!!!!");
				console.log("message: " + message);
                        };
			
			function webWorksReady () {
				blackberry.event.addEventListener("tcrpalogEvent");
			};
			
			function getHelloString() {
				var str = tcrpa.sayHello();
				alert(str);
			};
			          
        </script>
	</head>
	<body onload="onLoad()" bgcolor="#FF9900">
        <div align="center">
            <br />
			<button style="width:280px; height: 240px; font-size: 200%; background-color: lightgreen" onclick="getHelloString()">
				Say Hello
			</button>
        </div>
	</body>
</html>

 Call add event listener like this ^ ?

It looks like my StartEvents() C++ funciton is not being called.

Any chance you have an example application that uses the connection extension?

[Nukul]

firstly your webworks.js version is wrong. You seem to be using the older version of the SDK. Can you make sure you have the most recent webworks.

Your code is correct. Here are the things that you need to debug now-

Are you reaching your addEventListener code in your extension?
You set a break point in that code.
How?

since that code is dynamic it is not possible to set a breakpoint in it from webinspector so you must put a breakpoint in it from code.
In your code where you want to stop put this statement
debugger;

When you run your app it will stop there you can inspect.

If you push up your code somewhere (github), I can have a look at the entire stack or you will need to show me all the files here which might be a mess.