Использование внешнего кода JavaScript для добавления эффектов на страницу, сгенерированную GWT - PullRequest
Новая
       3

Использование внешнего кода JavaScript для добавления эффектов на страницу, сгенерированную GWT

3 голосов
/ 17 сентября 2010

Я пытаюсь добавить внешний код javascript, чтобы добавить некоторые эффекты к сгенерированной gwt части страницы.

Мне был предоставлен некоторый статический html / css от дизайнера, и он использует JavaScript для добавления желаемых эффектов на страницу.

Наше приложение использует архитектуру MVP, как описано на официальных страницах GWTпоэтому для первоначального теста я просто поместил статический 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 частям страницы?

1 Ответ

2 голосов
/ 17 сентября 2010

В таких случаях я иду наоборот - я вызываю функцию JS, определенную на странице хоста (просто оборачиваем то, что у вас есть в тегах <script> в функции) из моего кода GWT через функцию JSNI (обычно в onModuleLoad). Функция JSNI будет выглядеть примерно так: 

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

О, а вы уверены, что $$('div.panelheader') действительно получает этот элемент? Если вы используете UiBinder и определяете стили в тегах <ui:style>, то они будут запутаны (<ui:style> преобразуется в CssResource во время компиляции). Если вы хотите быть уверены, что используете правильные элементы, вы можете легко передать GWT Widget в функцию инициализации - просто используйте метод 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'});
    });
}

В любом случае, вы не должны пытаться «запрашивать» нужные вам элементы, вы должны отслеживать их как Widget s. Используйте возможности OO, которые предоставляет Java - это одна из основных причин, по которой я использую GWT:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...