使用外部 javascript 代码向 GWT 生成的页面添加效果答案

【问题标题】：Using external javascript code to add effects to a GWT generated page使用外部 javascript 代码向 GWT 生成的页面添加效果
【发布时间】：2010-09-16 20:55:40
【问题描述】：

我正在尝试添加外部 javascript 代码以向页面的 gwt 生成部分添加一些效果。

设计师为我提供了一些静态 html/css，它使用 javascript 为页面添加所需的效果。

我们的应用程序使用官方 GWT 页面上描述的 MVP 架构，因此对于初始测试，我只是将静态 html 放入所需视图的 UiBinder xml 文件中。输出很好，在浏览器中打开时页面看起来与提供的页面相同。唯一的问题是javascript效果不起作用。

具体来说就是Rico框架的手风琴效果。当鼠标悬停在列表元素上时，它应该改变颜色。当用户点击列表元素时，它会展开以显示更多详细信息（如树小部件）。

模块主机页面中包含的脚本如下所示：

  <head>
    ...
    <script src="javascript/rico.js" type="text/javascript"></script>
    <script type='text/javascript'>
        Rico.loadModule('Accordion');
        Rico.onLoad( function() {
          new Rico.Accordion( $$('div.panelheader'), $$('div.panelContent'),
                              {panelHeight:66, hoverClass: 'mdHover', selectedClass: 'mdSelected'});
        });
    </script>
    ...
  </head>

设计者提供的所有 .js 文件都在 war/javascript 文件夹中，在 firebug 中检查时（在开发模式和部署的 tomcat 中），浏览器似乎看到那些文件。我可以点击src="../...js"，浏览器会打开正确的文件。

问题可能出在哪里？由于静态页面有效并且效果可见，我想问题出在与 GWT 的合并中。是我在包含方面做错了什么，还是外部 javascript 在访问 gwt 生成的页面部分时遇到了问题？

【问题讨论】：

可能是你的js函数尝试添加效果时gwt没有将其元素添加到页面的时间问题。

标签： javascript gwt

【解决方案1】：

在这种情况下，我会反过来——我通过 JSNI 函数（通常在 @ 987654322@)。 JSNI 函数看起来像这样：

public final native void initRico() /*-{
    $wnd.ricoInitFunction();
}-*/;

哦，你确定$$('div.panelheader') 真的得到了那个元素吗？如果您使用 UiBinder 并在 <ui:style> 标签中定义样式，那么它们将被混淆（<ui:style> 在编译时转换为 CssResource）。如果您想确保使用正确的元素，您可以轻松地将 GWT Widget 传递给您的 init 函数 - 只需使用 getElement() 方法：

public final native void initRico(Element e1, Element e2) /*-{
    $wnd.ricoInitFunction(e1, e2);
}-*/;

// The actual call would then look like this:
initRico(widget1.getElement(), widget2.getElement());

然后在你的代码中使用这些元素：

function ricoInitFunction(e1, e2) {
    Rico.loadModule('Accordion');
    Rico.onLoad( function() {
    new Rico.Accordion( $$(e1), $$(e2),
        {panelHeight:66, hoverClass: 'mdHover', selectedClass: 'mdSelected'});
    });
}

无论哪种方式，您都不应该尝试“查询”您需要的元素，您应该将它们跟踪为Widgets。使用 Java 提供的 OO 工具 - 这是我使用 GWT 的主要原因之一 :)

【讨论】：

THX。当然，这是一个菜鸟的错误。问题是你和小路注意到的。有问题的元素不是在调用 new Accordion() 时创建的，因此没有被添加。风格还可以，所以我不需要参数化函数，但无论如何，谢谢你的好主意。最终的解决方案是在演示者已经将视图添加到页面后调用本机函数来初始化手风琴。