Creating APIBridge JavaScript Binding Code - Revision history

Hamishwillee: Hamishwillee - Subedit

2011-11-07T04:21:24Z

Hamishwillee - Subedit

Hamishwillee: Hamishwillee - Bot addition of Template:ArticleMetaData

2011-11-03T22:26:52Z

Hamishwillee - Bot addition of Template:ArticleMetaData

Forum Nokia KB: Protected "Creating APIBridge JavaScript Binding Code" ([edit=sysop] (indefinite) [move=sysop] (indefinite))

2010-02-11T07:56:04Z

Protected "Creating APIBridge JavaScript Binding Code" ([edit=sysop] (indefinite) [move=sysop] (indefinite))

Forum Nokia KB at 07:45, 11 February 2010

2010-02-11T07:45:24Z

Forum Nokia KB: 1 revision

2010-02-11T07:44:48Z

1 revision

Kbwiki at 07:36, 11 February 2010

2010-02-11T07:36:47Z

New page

__TOC__

==Binding JavaScript™ Code<br>==
The binding code for the EchoServlet example can be found in '''\bindings\js\sample.js'''. This file uses the <tt>APIBridge</tt> class, which is contained in the '''apibridge.js''' file that ships with APIBridge.

The code for this example is:

<code>

var Sample = {
echo: function( msg, err, onSuccess, onError) {
APIBridge.Internal._sendRequest(
"/sample/echo?msg="+encodeURIComponent(msg) +"&err="+encodeURIComponent(err),
null,
function(req){
if (req.responseText)
onSuccess (req.responseText);
else
onError(500);
},
onError );
}
}

</code>

Essentially, the binding code translates the parameters passed into a URI-encoded GET string by using the <tt>APIBridge.Internal._sendRequest</tt> function. It then analyses the response from the framework and calls the appropriate callback.

If you dissect the URL portion, you will see two parts:

* '''Request''': <tt>/sample/echo.</tt> This request will get routed to your plug-in as specified in the ECOM Plug-in resource file.

* '''Parameters''': <tt>?msg="<nowiki>+</nowiki>encodeURIComponent(msg)<nowiki>+</nowiki>"&err="<nowiki>+</nowiki>encodeURIComponent(err).</tt> The parameters are extracted at the servlet<nowiki>’</nowiki>s <tt>ServiceL</tt> function by using the <tt>RQueryParser</tt> class and this function:

<tt>req-<nowiki>></nowiki>GetRequest()-<nowiki>></nowiki>GetQuery()</tt>

==How it is used==
The code below shows how a Web Runtime (WRT) application might use this newly created function:

<code>

Sample.echo(msg,err,

'''function'''(text) //OnSuccess callback

<nowiki> {</nowiki>

output.innerHTML <nowiki>+</nowiki>= "The APIBridge returned: "<nowiki>+</nowiki>text<nowiki>+</nowiki>"<nowiki><</nowiki>br/<nowiki>></nowiki>";

<nowiki>}</nowiki>,

'''function''' (err) //OnError callback

<nowiki>{</nowiki>

output.innerHTML <nowiki>+</nowiki>= "Error: "<nowiki>+</nowiki> err.status <nowiki>+</nowiki> ". Message: "<nowiki>+</nowiki>err.responseText<nowiki>+</nowiki>"<nowiki><</nowiki>br/<nowiki>></nowiki>";

</code>

==JavaScript Binding API==

The binding API for JavaScript™ can be found in the '''apibridge.js''' file that ships with APIBridge.

===SendRequest function===
<tt>APIBridge.Internal._sendRequest: '''function'''( path, parameters, onSuccess, onError )</tt>

This function is used to send a raw request to the APIBridge server; it takes care of security and access control for the developer.

{|border="2" cellspacing="0" cellpadding="4" width="100%"
|align = "center" bgcolor = "#B3B3B3"|'''Parameter'''
|align = "center" bgcolor = "#B3B3B3"|'''Description'''

|-
|'''path'''
|URI path to the plug-in including any GET parameters. The <nowiki>http://localhost</nowiki> part should NOT be included here.

|-
|'''parameters'''
|String that will be passed in the body of the HTTP request. If this parameter is not null, the request will be a POST request, otherwise it will be a GET.

|-
|'''onSuccess'''
|Callback function that returns the XMLHttpRequest object as the single parameter. It is called when the server reports a 200 HTTP status code.

|-
|'''onError'''
|Callback function that returns the XMLHttpRequest object as the single parameter. It is called when the server reports an HTTP status code other than 200, the access is not granted, or the path is not associated with any plug-in.

|}

← Older revision		Revision as of 22:26, 3 November 2011
Line 1:		Line 1:
−	__TOC__	+	{{ArticleMetaData
		+	\|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
		+	\|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
		+	\|devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
		+	\|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
		+	\|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
		+	\|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
		+	\|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
		+	\|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
		+	\|capabilities=<!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
		+	\|keywords= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
		+	\|id= <!-- Article Id (Knowledge base articles only) -->
		+	\|language=<!-- Language category code for non-English topics - e.g. Lang-Chinese -->
		+	\|review-by=<!-- After re-review: [[User:username]] -->
		+	\|review-timestamp=<!-- After re-review: YYYYMMDD -->
		+	\|update-by=<!-- After significant update: [[User:username]]-->
		+	\|update-timestamp=<!-- After significant update: YYYYMMDD -->
		+	\|creationdate=20100211
		+	\|author=[[User:Kbwiki]]
		+	}}__TOC__

@@ Line 1: / Line 1: @@
 {{ArticleMetaData
 |sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
@@ Line 18: / Line 20: @@
 |creationdate=20100211
 |author=[[User:Kbwiki]]
-}}__TOC__
+}}
-==Binding JavaScript™ Code<br>==
+==Binding JavaScript™ Code ==
 The binding code for the EchoServlet example can be found in '''\bindings\js\sample.js'''. This file uses the <tt>APIBridge</tt> class, which is contained in the '''apibridge.js''' file that ships with APIBridge.
 The code for this example is:
-<code>
+<code javascript>
 var Sample = {
-  var Sample = {
+  echo: function( msg, err, onSuccess, onError) {
-   	echo: function( msg, err, onSuccess, onError) {
+  APIBridge.Internal._sendRequest( "/sample/echo?msg="+encodeURIComponent(msg) +"&err="+encodeURIComponent(err),
-  	APIBridge.Internal._sendRequest(
+    null,
-  	"/sample/echo?msg="+encodeURIComponent(msg) +"&err="+encodeURIComponent(err),
+    function(req){
-  			null,
+    if (req.responseText)
-  			function(req){
+      onSuccess (req.responseText);
-  				if (req.responseText)
+    else
-  					onSuccess (req.responseText);
+      onError(500);
-  				else
+    },
-  					onError(500);
+  onError );
-  			},
-  			onError );
-−
-−
-−
 </code>
@@ Line 51: / Line 50: @@
 If you dissect the URL portion, you will see two parts:
 * '''Request''': <tt>/sample/echo.</tt> This request will get routed to your plug-in as specified in the ECOM Plug-in resource file.
 * '''Parameters''': <tt>?msg="<nowiki>+</nowiki>encodeURIComponent(msg)<nowiki>+</nowiki>"&err="<nowiki>+</nowiki>encodeURIComponent(err).</tt> The parameters are extracted at the servlet<nowiki>’</nowiki>s <tt>ServiceL</tt> function by using the <tt>RQueryParser</tt> class and this function:
+*: <code javascript> req-> GetRequest()->GetQuery()</code>
-<tt>req-<nowiki>></nowiki>GetRequest()-<nowiki>></nowiki>GetQuery()</tt>
 ==How it is used==
 The code below shows how a Web Runtime (WRT) application might use this newly created function:
-<code>
+<code javascript>
 Sample.echo(msg,err, function(text) //OnSuccess callback
-  Sample.echo(msg,err,
    output.innerHTML += "The  APIBridge returned: "+text+"<br/>";
-  '''function'''(text) //OnSuccess callback
+   },
    function(err) //OnError callback
-  <nowiki> {</nowiki>
    output.innerHTML += "Error: "+err.status + ". Message: "+err.responseText+"<br/>";
-   output.innerHTML <nowiki>+</nowiki>= "The  APIBridge returned: "<nowiki>+</nowiki>text<nowiki>+</nowiki>"<nowiki><</nowiki>br/<nowiki>></nowiki>";
-−
-  <nowiki>}</nowiki>,
-−
-  '''function'''  (err) //OnError callback
-−
-  <nowiki>{</nowiki>
-−
-   output.innerHTML <nowiki>+</nowiki>= "Error: "<nowiki>+</nowiki> err.status <nowiki>+</nowiki> ". Message: "<nowiki>+</nowiki>err.responseText<nowiki>+</nowiki>"<nowiki><</nowiki>br/<nowiki>></nowiki>";
-−
 </code>
@@ Line 86: / Line 72: @@
 ===SendRequest function===
-<tt>APIBridge.Internal._sendRequest: '''function'''( path, parameters, onSuccess, onError )</tt>
+ <tt>APIBridge.Internal._sendRequest: '''function'''( path, parameters, onSuccess, onError )</tt>
 This function is used to send a raw request to the APIBridge server; it takes care of security and access control for the developer.
-{|border="2" cellspacing="0" cellpadding="4" width="100%"
+{| class="wikitable"
-|align = "center" bgcolor = "#B3B3B3"|'''Parameter'''
+! Parameter
-|align = "center" bgcolor = "#B3B3B3"|'''Description'''
+! Description
-−
 |-
 |'''path'''

@@ Line 77: / Line 77: @@
 |-
 |'''path'''
-|URI path to the plug-in including any GET parameters. The <nowiki>http://localhost</nowiki> part should NOT be included here.
+|URI path to the plug-in including any GET parameters. The '''<nowiki>http://localhost</nowiki>''' part should NOT be included here.
 |-