JSNI and Flex Intercommunication Problem (through Javascript Interface)
143 views
Skip to first unread message
Debug Desperado
May 24, 2011, 12:20:07 AM5/24/11
to Google Web Toolkit
I'm trying to wrap a javascript library (Cytoscape Web:
http://cytoscapeweb.cytoscape.org/documentation ) that exposes methods
for interacting with a Flash object built with Flex. The library is
designed very well, consisting of a single javascript Visualisation
object and several member functions. These functions usually take
JSON-like objects as arguments, and I'm encountering an error when I
construct the object within a JSNI method. The Flash player error is
"Error #1034: Type Coercion failed: cannot convert Object@3cf6821 to
Array."
Here is my class that extends JavaScriptObject and wraps the library's
Visualisation object:
public class Visualization extends JavaScriptObject{
protected Visualization(){}
public static final native Visualization create()/*-{
var div_id = "cytoscapeweb";
var options = {
// where you have the Cytoscape Web SWF
swfPath: "swf/CytoscapeWeb",
// where you have the Flash installer SWF
flashInstallerPath: "swf/playerProductInstall"
};
var vis = new $wnd.org.cytoscapeweb.Visualization(div_id,
options);
return vis;
}-*/;
/* BROKEN: Causes the Flash error #1034 */
public final native void draw()/*-{
var network_json = {
data: {
nodes: [ { id: "1" }, { id: "2" } ],
edges: [ { id: "2to1", target: "1", source: "2" } ]
}
};
this.draw({network: network_json});
}-*/;
}
Whenever I call the draw function using a javascript object as an
argument, I get the error #1034 type conversion problem. However, the
library has an alternate method for encoding a graph using an XML
string, and passing the string literal works!
/* Passing a string literal works fine. No error with this method
*/
public final native void draw()/*-{
var xml = '\
<graphml>\
<key id="label" for="all" attr.name="label"
attr.type="string"/>\
<key id="weight" for="node" attr.name="weight"
attr.type="double"/>\
<graph edgedefault="directed">\
<node id="1">\
<data key="label">A</data>\
<data key="weight">2.0</data>\
</node>\
<node id="2">\
<data key="label">B</data>\
<data key="weight">1.5</data>\
</node>\
<node id="3">\
<data key="label">C</data>\
<data key="weight">1.0</data>\
</node>\
<edge source="1" target="2">\
<data key="label">A to B</data>\
</edge>\
<edge source="1" target="3">\
<data key="label">A to C</data>\
</edge>\
</graph>\
</graphml>\
';
this.draw({network: xml});
}-*/;
Furthermore, I tried hard-coding the javascript object in the <head>
section of the HTML file, and it ends up working just fine, too
(referenced with the $wnd variable)!
public final native void draw()/*-{
this.draw({network: $wnd.network_json});
}-*/;
Note, however, that if I redefine the $wnd.network_json variable
within the JSNI method, the same error rears its ugly head.
In summary, the flash object seems to not agree with me passing it an
object that I create through a JSNI method. Whenever the object is
hard-coded into the HTML page, there are no errors; copy-pasting the
exact same object into a JSNI method results in an odd error about
converting the object into Array. I've traced through the code with
FireBug, and the object referenced seems fine to me. I don't really
have any way to debug the Flex application, so I'm at a loss to see
what it's complaining about. To me it just seems peculiar that it
only fails when created through a JSNI method. Any help with this
brain-teaser would be kindly appreciated!
http://cytoscapeweb.cytoscape.org/documentation ) that exposes methods
for interacting with a Flash object built with Flex. The library is
designed very well, consisting of a single javascript Visualisation
object and several member functions. These functions usually take
JSON-like objects as arguments, and I'm encountering an error when I
construct the object within a JSNI method. The Flash player error is
"Error #1034: Type Coercion failed: cannot convert Object@3cf6821 to
Array."
Here is my class that extends JavaScriptObject and wraps the library's
Visualisation object:
public class Visualization extends JavaScriptObject{
protected Visualization(){}
public static final native Visualization create()/*-{
var div_id = "cytoscapeweb";
var options = {
// where you have the Cytoscape Web SWF
swfPath: "swf/CytoscapeWeb",
// where you have the Flash installer SWF
flashInstallerPath: "swf/playerProductInstall"
};
var vis = new $wnd.org.cytoscapeweb.Visualization(div_id,
options);
return vis;
}-*/;
/* BROKEN: Causes the Flash error #1034 */
public final native void draw()/*-{
var network_json = {
data: {
nodes: [ { id: "1" }, { id: "2" } ],
edges: [ { id: "2to1", target: "1", source: "2" } ]
}
};
this.draw({network: network_json});
}-*/;
}
Whenever I call the draw function using a javascript object as an
argument, I get the error #1034 type conversion problem. However, the
library has an alternate method for encoding a graph using an XML
string, and passing the string literal works!
/* Passing a string literal works fine. No error with this method
*/
public final native void draw()/*-{
var xml = '\
<graphml>\
<key id="label" for="all" attr.name="label"
attr.type="string"/>\
<key id="weight" for="node" attr.name="weight"
attr.type="double"/>\
<graph edgedefault="directed">\
<node id="1">\
<data key="label">A</data>\
<data key="weight">2.0</data>\
</node>\
<node id="2">\
<data key="label">B</data>\
<data key="weight">1.5</data>\
</node>\
<node id="3">\
<data key="label">C</data>\
<data key="weight">1.0</data>\
</node>\
<edge source="1" target="2">\
<data key="label">A to B</data>\
</edge>\
<edge source="1" target="3">\
<data key="label">A to C</data>\
</edge>\
</graph>\
</graphml>\
';
this.draw({network: xml});
}-*/;
Furthermore, I tried hard-coding the javascript object in the <head>
section of the HTML file, and it ends up working just fine, too
(referenced with the $wnd variable)!
public final native void draw()/*-{
this.draw({network: $wnd.network_json});
}-*/;
Note, however, that if I redefine the $wnd.network_json variable
within the JSNI method, the same error rears its ugly head.
In summary, the flash object seems to not agree with me passing it an
object that I create through a JSNI method. Whenever the object is
hard-coded into the HTML page, there are no errors; copy-pasting the
exact same object into a JSNI method results in an odd error about
converting the object into Array. I've traced through the code with
FireBug, and the object referenced seems fine to me. I don't really
have any way to debug the Flex application, so I'm at a loss to see
what it's complaining about. To me it just seems peculiar that it
only fails when created through a JSNI method. Any help with this
brain-teaser would be kindly appreciated!
Alain Ekambi
May 24, 2011, 2:27:21 PM5/24/11
to google-we...@googlegroups.com
I did had the same problem while working on gwt4air Flex API.
--
Let me see if i can find the solution
Best,
Alain
2011/5/24 Debug Desperado <debug.d...@gmail.com>
--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To post to this group, send email to google-we...@googlegroups.com.
To unsubscribe from this group, send email to google-web-tool...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
--
GWT API for non Java based platforms
Debug Desperado
May 24, 2011, 4:44:22 PM5/24/11
to Google Web Toolkit
Hmm, after searching I'll bet it has something to do with the iframe
that GWT embeds. According to w3schools, "the browser creates one
window object for the HTML document, and one additional window object
for each frame." Weirdly, an Array object in one window isn't the
same as one in another:
http://groups.google.com/group/google-web-toolkit/browse_thread/thread/9d82fa9a8d87832/4d9d9f703be6ee45?lnk=gst&q=jsni+array#4d9d9f703be6ee45
The Flex library probably tests the array somewhere when deserializing
it. I'd be very interested to hear how you worked around the problem,
Alain.
On May 24, 1:27 pm, Alain Ekambi <jazzmatad...@googlemail.com> wrote:
> I did had the same problem while working on gwt4air Flex API.
> Let me see if i can find the solution
>
> Best,
>
> Alain
>
> 2011/5/24 Debug Desperado <debug.desper...@gmail.com>
that GWT embeds. According to w3schools, "the browser creates one
window object for the HTML document, and one additional window object
for each frame." Weirdly, an Array object in one window isn't the
same as one in another:
http://groups.google.com/group/google-web-toolkit/browse_thread/thread/9d82fa9a8d87832/4d9d9f703be6ee45?lnk=gst&q=jsni+array#4d9d9f703be6ee45
The Flex library probably tests the array somewhere when deserializing
it. I'd be very interested to hear how you worked around the problem,
Alain.
On May 24, 1:27 pm, Alain Ekambi <jazzmatad...@googlemail.com> wrote:
> I did had the same problem while working on gwt4air Flex API.
> Let me see if i can find the solution
>
> Best,
>
> Alain
>
>
>
>
> > I'm trying to wrap a javascript library (Cytoscape Web:
> >http://cytoscapeweb.cytoscape.org/documentation) that exposes methods
>
>
> > I'm trying to wrap a javascript library (Cytoscape Web:
nino
May 26, 2011, 7:34:15 PM5/26/11
to google-we...@googlegroups.com
Sorry i got back at you this late.
You allready spot the problem.
try doing somethinf like this
var network_json = new $wnd.Object();
network_json.data = {
data: {
nodes: [ { id: "1" }, { id: "2" } ],
edges: [ { id: "2to1", target: "1", source: "2" } ]
}
};
nodes: [ { id: "1" }, { id: "2" } ],
edges: [ { id: "2to1", target: "1", source: "2" } ]
}
};
this.draw({network: network_json});
Regards,
Alain
Debug Desperado
Jun 5, 2011, 1:04:43 AM6/5/11
to Google Web Toolkit
Oops, forgot to report back just in case anyone else has this problem.
My solution was just to make sure that any array objects created by
GWT are done with new $wnd.Array(), as nino hinted. Weirdly there are
no type conversion errors with Function objects or normal javascript
Object.
My solution was just to make sure that any array objects created by
GWT are done with new $wnd.Array(), as nino hinted. Weirdly there are
no type conversion errors with Function objects or normal javascript
Object.
Deepan
Mar 13, 2012, 1:45:59 PM3/13/12
to google-we...@googlegroups.com
Hi,
I am also trying to use Cytoscape web in GWT.
I was wondering if you successfully created the wrapper.
Any help on this topic will be greatly appreciated.
thanks.
Nik
Ümit Seren
Mar 14, 2012, 9:27:19 AM3/14/12
to google-we...@googlegroups.com
A Google search returns Debug Desperado's github project (
https://github.com/debug-desperado/Cytoscape-Web-GWT-Wrapper ) as number one hit :-p
Deepan
Mar 14, 2012, 10:01:11 AM3/14/12
to google-we...@googlegroups.com
Oh yeah I saw that....Unfortunatley when import that module in to GWT project I am not able to get it working.
did u ???
-Nik
Reply all
Reply to author
Forward
0 new messages