使用外部JavaScript代码将效果添加到GWT生成的页面

Question

I am trying to add an external javascript code to add some effects to the gwt generated part of the page. 我正在尝试添加一个外部JavaScript代码，以便为gwt生成的页面部分添加一些效果。

I was provided with some static html/css from the designer, and it uses javascript to add the desired effects to the page. 我从设计器那里获得了一些静态html / css，它使用javascript为页面添加所需的效果。

Our app uses MVP architecture as described on the official GWT pages, so for the initial test I just put the static html into an UiBinder xml file of a desired view. 我们的应用程序使用官方GWT页面上描述的MVP架构，因此对于初始测试，我只是将静态html放入所需视图的UiBinder xml文件中。 The output was nice, and the page looked the same as the provided one when opened in the browser. 输出很好，在浏览器中打开时页面看起来与提供的页面相同。 The only problem is that the javascript effects don't work. 唯一的问题是javascript效果不起作用。

Specifically, it is the accordion effect of the Rico framework. 具体来说，它是Rico框架的手风琴效果。 When a mouse is over a list element, it should change colour. 当鼠标位于列表元素上时，它应该改变颜色。 And when a user clicks on the list element, it expands to show more details (like a tree widget). 当用户单击列表元素时，它会展开以显示更多详细信息（如树窗口小部件）。

The script inclusion in the module's host page looks like this: 包含在模块主机页面中的脚本如下所示：

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

All of the .js files that were provided by the designer are in the war/javascript folder, and when inspected in firebug (in both development mode and tomcat deployed), the browser seems to see those files. 设计器提供的所有.js文件都在war/javascript文件夹中，当在firebug中检查时（在开发模式和部署的tomcat中），浏览器似乎看到了这些文件。 I can click on the src="../...js" and the browser does open the correct files. 我可以点击src="../...js" ，浏览器会打开正确的文件。

Where could the problem be? 问题出在哪里？ Since the static page works and the effects are visible, i suppose the problem was in the merge with the GWT. 由于静态页面工作且效果可见，我认为问题出在与GWT的合并中。 Did I do something wrong with the inclusion, or is the external javascript having problem with accesing the gwt generated parts of the page? 我是否对包含有问题，或者外部javascript是否存在访问gwt生成的页面部分的问题？

Answer 1

In such cases I go the other way round - I call a JS function defined in the host page (just wrap what you have in the <script> tags in a function) from my GWT code via JSNI function (usually in onModuleLoad ). 在这种情况下，我会onModuleLoad我通过JSNI函数（通常在onModuleLoad ）从我的GWT代码调用主机页面中定义的JS函数（只是在函数的<script>标签中onModuleLoad ）。 The JSNI function would look something like this: JSNI函数看起来像这样：

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

Oh, and are you sure that $$('div.panelheader') actually gets that element? 哦，你确定$$('div.panelheader')实际上得到了这个元素吗？ If you are using UiBinder and define styles in <ui:style> tags, then they will get obfuscated ( <ui:style> is converted to a CssResource at compile time). 如果您正在使用UiBinder并在<ui:style>标记中定义样式，那么它们将被混淆（ <ui:style>在编译时转换为CssResource ）。 If you want to be sure you are using the right elements, you can easily pass a GWT Widget to your init function - just use the getElement() method: 如果您想确保使用正确的元素，可以轻松地将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());

Then use those elements in your code: 然后在代码中使用这些元素：

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

Either way, you shouldn't try to "query" the elements you need, you should keep track of them as Widget s. 无论哪种方式，您都不应该尝试“查询”您需要的元素，您应该将它们作为Widget跟踪。 Use the OO facilities that Java provides - that's one of the main reasons I use GWT :) 使用Java提供的OO工具 - 这是我使用GWT的主要原因之一:)

使用外部JavaScript代码将效果添加到GWT生成的页面

问题描述

1 个解决方案

解决方案1
2 已采纳 2010-09-17 12:07:54

使用外部JavaScript代码将效果添加到GWT生成的页面

问题描述

1 个解决方案

解决方案1 2 已采纳 2010-09-17 12:07:54

解决方案1
2 已采纳 2010-09-17 12:07:54