Skip to content

Latest commit

 

History

History
91 lines (68 loc) · 3.71 KB

README.md

File metadata and controls

91 lines (68 loc) · 3.71 KB
Raw

Ponto, WebView implementation Code Climate

This is the root folder for the WebView (JavaScript) implementation.

Examples

To invoke a method in the native layer from the WebView use:

Ponto.invoke('ClassName', 'methodName', {param1:1, param2:2}, function(d){/*completed*/}, function(e){/*error*/});

The last three parameters (parameters, success/failure callbacks) are optional.

To invoke a method in the WebView from the native layer use:

mWebView.loadUrl("javascript:Ponto.request(\"{\\\"target\\\": \\\"TypeOrModuleName\\\", \\\"method\\\": \\\"methodName\\\", \\\"params\\\":{\\\"a\\\":1}, \\\"callbackId\\\": \\\"callbackId\\\"}\")");
[mWebView stringByEvaluatingJavaScriptFromString:@"Ponto.request(\"{\\\"target\\\": \\\"TypeOrModuleName\\\", \\\"method\\\": \\\"methodName\\\", \\\"params\\\":{\\\"a\\\":1}, \\\"callbackId\\\": \\\"callbackId\\\"}\";"];

Ponto.request accept a JSON-encoded string of an hash/dictionary containing the required data; params and callbackId are optional.

To invoke a callback in the WebView from the native layer after the method invoked by the WebView has completed or resulted in an error use:

mWebView.loadUrl("javascript:Ponto.response(\"{\\\"type\\\": 0, \\\"params\\\":{\\\"a\\\":1}, \\\"callbackId\\\": \\\"callbackId\\\"}\");");
[mWebView stringByEvaluatingJavaScriptFromString:@"Ponto.response(\"{\\\"type\\\": 0, \\\"params\\\":{\\\"a\\\":1}, \\\"callbackId\\\": \\\"callbackId\\\"}\");"];

Ponto.response accept a JSON-encoded string of an hash/dictionary containing the required data; params is optional and type is either 0 (completed successfully) or 1 (error occurred).

Iframe communication

Ponto can be used as a message transport protocol between a parent HTML window and an iframe - to enable this mode it is required to explicitly override the default, native protocol, uing setTarget method.

For parent window, this method gets two params, target indicator and targeted iframe's content window.

Ponto.setTarget(Ponto.TARGET_IFRAME, 'http://iframeOrigin.com', document.querySelector('iframe').contentWindow);

In the iframe, it's just enough to set the target indicator as the iframe's parent.

Ponto.setTarget(Ponto.TARGET_IFRAME_PARENT, 'http://parentWindowOrigin.com');

Ponto by default performs a synchronous operation and immediately responds with a result. If there is a need to perform an asynchronous operation on the second javascript side, it needs to be indicated by using 'async' flag in the invoke method: For parent window, this method gets two params, target indicator and targeted iframe's content window.

Ponto.invoke(scope, method, params, successCallback, errorCallback, async);

After such invocation, the targeted method is triggered with two arguments: params object and callbackId, and is able to respond to the invocation by using the respond method: For parent window, this method gets two params, target indicator and targeted iframe's content window.

function targetedFunction(params, callbackId) {
	Ponto.respond(params, callbackId);
}

To prepare a valid Ponto scope, you need to perform following steps:

  1. Create a constructor:

    function MyObject() {
	this.myMethod = function() {
		console.log('myMethod');
	};
}

  2. Use Ponto's derive method on it:

    Ponto.PontoBaseHandler.derive(myObject);

  3. Override the getInstance method prepared by Ponto:

    myObject.getInstance = function(){
	return new myObject();
};