javascript - 如何将 JavaScriptObject 结果添加到 SmartGWT 中生成的 HTML 的特定位置？

Question

我需要从外部 javascript 库执行 Javascript(我将其留在公共(public)文件夹中，与客户端、服务器和共享处于同一级别)。我需要将该 JavaScript 的输出(这是由 ChemDoodle javascript 库生成的 Canvas)显示在 SmartGWT VLayout 中。首先，我尝试将 javascript 代码添加到 HTMLFlow 对象，然后将 HTMLFlow 添加到 VLayout，但是 HTMLFlow 不会执行 Javascript 代码(如果我将生成的 HTML 复制粘贴到另一个浏览器窗口中，它会起作用)。我目前正在尝试使用 JSOHelper.eval("java script code here") 评估 javascript 代码，从而生成 JavaScriptObject。但是我不知道如何将 javascript 执行的结果“放置”在 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);

但是，正如我所说，这不起作用，因为 HTMLFlow 不会执行 >script\> block ( bool 设置 setEvalScriptBlocks(true) 仅适用于从 HTMLFlow 调用的其他 URL)。因此，使用 JSOHelper 类，您可以执行以下操作:

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);

我一直试图弄清楚如何使用 JSNI 方法来做到这一点，但我不知道如何从那里引用 vLayout (在 JavaScript 中)。知道我们有 $doc 和 $win，但是从那里到 vLayout(它在选项卡内，它在其他小部件内)，我不知道如何获取。我知道javascript中有一个getElementByID方法，但我不知道如何获取vLayout的id，然后如何将该DIV(我猜)与绘制的 Canvas 关联起来，以便图像出现在那里。

谁能解释一下我如何管理(我猜通过 JSNI 是唯一的方法)来执行该 JavaScript 代码片段并将结果(生成的 Canvas )显示在我需要的地方？

谢谢!

Answer 1

您最好采取不同的方法，使用 JSNI 只处理 JavaScript 实现，并将所有更高级别的操作委托(delegate)给 Java 层。

了解 JSNI 至关重要，因此我建议您首先深入研究一些文档(GWT's coding basics on JSNI 非常有用)。

话虽如此，最好的方法是将库实例化的 native (JavaScript) 脚本作为单独的文件，并通过模块的(或应用程序的).gwt.xml 注入(inject)预加载 文件。

您可以将该文件中的代码片段包装在自执行 block 中(即 (function() {...})(); 作为确保它将在onModuleLoad()，但这只是调试糖。