Question

I need to execute Javascript from an external javascript library (which I left in the public folder at the same level than client, server and shared). I need that the output of that JavaScript (which is a Canvas generated by ChemDoodle javascript library) is displayed within a SmartGWT VLayout. At first I tried adding the javascript code to an HTMLFlow object and then adding the HTMLFlow to the VLayout, however the HTMLFlow won’t execute the Javascript code (if I copy-paste the produced HTML into another browser window, it works). What I’m currently trying is to evaluate the javascript code with JSOHelper.eval(“java script code here”) resulting in a JavaScriptObject. However I don’t know how to “place” the result of the javascript execution inside the VLayout.

String javaScriptCode = 
"var viewerCanvas = new ChemDoodle.ViewerCanvas('viewerCanvas', 200, 200);\n" +
"var molFile = 'contentToBeDrawnByChemDoodleCanvas';\n" +
"var moleculeToShow = ChemDoodle.readMOL(molFile);\n" +
"viewerCanvas.loadMolecule(moleculeToShow);\n";

HTMLFlow hflow = new HTMLFlow("<script>\n"+javaScriptCode+"</script>");
vLayout.addMember(hflow);

However, as I said, this doesn’t work because HTMLFlow won’t execute the >script\> block (the boolean setting setEvalScriptBlocks(true) only applies for other URLs invoked from the HTMLFlow). So, with the JSOHelper class you can do:

JavaScriptObject jso = JSOHelper.eval(javaScriptCode); // without the <script> tags
// but the following line doesn't work, probably because jso is not a HTMLFlow
HTMLFlow flow2 = HTMLFlow.getOrCreateRef(jso);
// so then this doesn't work either, but I guess it shows where I want to get.
vLayout.addMember(flow2);

I have been trying to figure out how to do it with a JSNI method, but I don’t know how to refer to the vLayout from there (in javascript). Know that we have $doc and $win, but from there to the vLayout (which is inside a tab, which is inside other widgets), I don’t know how to get. I know there is a getElementByID method in javascript, but I don’t know how do I get the id of the vLayout and then how to associate that DIV (I guess) with the drawn canvas, so that the image appears there.

Could anyone explain me how do I manage (I guess through JSNI is the only way) to make that that javascript snippet is executed and the result (the generated canvas) displayed in the place where I need?

Thanks!

Answer 1

You better take a different approach, using JSNI to only handle JavaScript implementations, and delegating all higher level operations to the Java layer.

Getting to know JSNI is crucial, so I suggest you start by diving into some documentation (GWT’s coding basics on JSNI is very useful).

Having said that, best approach will be to have a native (JavaScript) script for the library instantiation as a separate file, and having it injected pre-load via the module’s (or the application’s) .gwt.xml file.

Than you can wrap the code snippet within that file in a self executing block (i.e. (function() {...})(); as means of making sure it will run prior to onModuleLoad(), but this is just debugging sugar.