Подключение события GWT к элементу во внешнем фрейме - PullRequest
11 голосов
/ 17 июля 2009

Я пишу приложение GWT, которое предполагает взаимодействие с внешним документом в iframe. В качестве подтверждения концепции я пытаюсь прикрепить обработчик щелчка к кнопке.

Следующие работы в javascript

var iframe = document.getElementById("rawJSIFrame");
var doc = iframe.contentDocument;
var body = doc.body;
var button = doc.getElementsByTagName("input").namedItem("submit");
button.onclick = function() {
    alert("Clicked!");
};

Пытаясь сделать эквивалент в GWT, я сделал следующее:

public void addClickHandlerToSubmitButton(String buttonElementName, ClickHandler clickHandler) {
    IFrameElement iframe = IFrameElement.as(frame.getElement());
    Document frameDocument = getIFrameDocument(iframe);
    if (frameDocument != null) {
        Element buttonElement = finder(frameDocument).tag("input").name(buttonElementName).findOne();
        ElementWrapper wrapper = new ElementWrapper(buttonElement);
        HandlerRegistration handlerRegistration = wrapper.addClickHandler(clickHandler);
    }
}

private native Document getIFrameDocument(IFrameElement iframe)/*-{
        return iframe.contentDocument;
}-*/;

Ниже приведен класс ElementWrapper:

public class ElementWrapper extends Widget implements HasClickHandlers {

    public ElementWrapper(Element theElement) {
        setElement(theElement);
    }

    public HandlerRegistration addClickHandler(ClickHandler handler) {
        return addDomHandler(handler, ClickEvent.getType());
    }


}

Код для поиска кнопки работает нормально, но фактический обработчик события щелчка не вызывается. У кого-нибудь была подобная проблема раньше, и как вы ее решили?

Заранее спасибо,

Tin

Ответы [ 7 ]

10 голосов
/ 06 ноября 2009

Хильбранд прав в том, что метод GWT onAttach() не был вызван.

Я реализовал ваше оригинальное решение, добавив следующий метод к ElementWrapper:

  public void onAttach() {
    super.onAttach();
  }

И вызывается добавлено wrapper.onAttach() после создания ElementWrapper. Работает как шарм!

4 голосов
/ 22 июля 2009

Я ожидаю, что проблема в том, что метод GWT onAttach() не вызывается, когда вы используете обтекание, как в первом примере. Вы можете попробовать использовать статический метод wrap в виджете Button. Хотя, чтобы использовать это, input должен иметь тип button. Или взгляните на реализацию метода wrap. Вот модифицированный код при использовании метода wrap:

Element buttonElement = finder(frameDocument).tag("input").name(buttonElementName).findOne();
Button button = Button.wrap(buttonElement);
HandlerRegistration handlerRegistration = button.addClickHandler(clickHandler);
1 голос
/ 03 января 2011

Вместо использования фреймов я предлагаю вам сделать http-запрос от GWT через com.google.gwt.http.client.RequestBuilder. Вот так:

private void getHtml(String url) {
        RequestBuilder rb = new RequestBuilder(RequestBuilder.GET, url);

        rb.setCallback(new RequestCallback() {

            @Override
            public void onResponseReceived(Request request, Response response) {
                HTMLPanel html = new HTMLPanel(response.getText());

                // Now you have a widget with the requested page
                // thus you may do whatever you want with it.
            }

            @Override
            public void onError(Request request, Throwable exception) {
                Log.error("error " + exception);
            }
        });

        try {
            rb.send();
        } catch (RequestException e) {
          Log.error("error " + e);
        }
    }
1 голос
/ 29 апреля 2010

Вы можете найти это полезным:

import com.google.gwt.dom.client.Element;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.HasClickHandlers;
import com.google.gwt.event.shared.HandlerRegistration;
import com.google.gwt.user.client.ui.AbsolutePanel;

public class DirectPanel extends AbsolutePanel implements HasClickHandlers {
        public DirectPanel(Element elem) {
                super(elem.<com.google.gwt.user.client.Element> cast());
                onAttach();
        }

        @Override
        public HandlerRegistration addClickHandler(ClickHandler handler) {
                return addDomHandler(handler, ClickEvent.getType());
        }
}

После этого вы сможете превратить произвольные контейнеры в контейнеры виджетов:

  Element root = Document.get().getElementById("target");
  DirectPanel p = new DirectPanel(root);
  Button register = new Button("Register");
  register.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
      // ...
    }
  });
  p.add(register);

И привязывать события к произвольным элементам:

  Element root = Document.get().getElementById("target");
  DirectPanel p = new DirectPanel(root);
  p.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
      // ...
    }
  });

Конкретно в вашем случае попробуйте это:

IFrameElement frm = Document.get().createIFrameElement();
Document d = frm.getContentDocument();
NodeList<Element> inputs = d.getElementsByTagName("input");
InputElement target = null;
for(int i = 0; i < inputs.getLength(); ++i) {
  Element e = inputs.getItem(0);
  if (e.getNodeName().equals("submit")) {
    target = InputElement.as(e);
    break;
  }
}
if (target != null) {
  DirectPanel p = new DirectPanel(target);
  p.addClickHandler(new ClickHandler() {
    @Override
    public void onClick(ClickEvent event) {
      // TODO Auto-generated method stub
    }
  });
}

Меня всегда удивляет, что GWT делает это настолько трудным и плохо документированным.

1 голос
/ 21 июля 2009

После изучения этого вопроса я обнаружил, что iframe не имеет значения. Такое же поведение не работает для обычной кнопки на странице хоста.

Я в основном исправил это, используя JSNI для репликации части механизма обработки событий GWT. Следующие работы:

Element buttonElement = DOM.getElementById("externalButton");
new CustomElementWrapper(buttonElement).addClickHandler(new ClickHandler() {
public void onClick(ClickEvent event) {
        Window.alert("GWT hooked into button");
    }
});

Где CustomElementWrapper:

public class CustomElementWrapper extends Widget implements HasClickHandlers {
    private ClickEventManager clickEventManager;

    public CustomElementWrapper(Element theElement) {
        setElement(theElement);
        clickEventManager = new ClickEventManager(theElement);
    }

    public HandlerRegistration addClickHandler(ClickHandler handler) {
        //The 'right' way of doing this would be the code below. However, this doesn't work
        // A bug in GWT?
        //      
        //              return addDomHandler(handler, ClickEvent.getType());
        return clickEventManager.registerClickHandler(handler);
    }


    void invokeClickHandler() {
        clickEventManager.invokeClickHandler();
    }

    public boolean isClickHandlerRegistered() {
        return clickEventManager.isClickHandlerRegistered();
    }
}

Наконец, ClickEventManager, где происходит настоящая работа:

public class ClickEventManager {
private boolean clickHandlerRegistered = false;
private ClickHandler clickHandler;
private Element element;

public ClickEventManager(Element element) {
    this.element = element;
}

public void invokeClickHandler() {
    //This shouldn't really be null but we are bypassing GWT's native event mechanism
    //so we can't create an event
    clickHandler.onClick(null);
}

public boolean isClickHandlerRegistered() {
    return clickHandlerRegistered;
}

HandlerRegistration registerClickHandler(ClickHandler handler) {
    clickHandler = handler;

    if (!clickHandlerRegistered) {
        registerClickHandlerInJS(element);
        clickHandlerRegistered = true;
    }
    return new HandlerRegistration() {
        public void removeHandler() {
            //For now, we don't support the removal of handlers
            throw new UnsupportedOperationException();
        }
    };
}
private native void registerClickHandlerInJS(Element element)/*-{
    element.__clickManager = this;
    element.onclick 
        = function() {
            var cm = this.__clickManager; 
            cm.@com.talktactics.agent2.client.widgets.ClickEventManager::invokeClickHandler()();
        }
}-*/;
}

Лично я ненавижу это решение, потому что мне кажется, что я дублирую обработку событий GWT и, возможно, вносит неприятные утечки памяти в JavaScript. Будем благодарны за любые идеи о том, почему мой первый пост не работает (если учесть, что аспект iframe - красная сельдь).

Спасибо

Tin

0 голосов
/ 06 ноября 2009

Пожалуйста, смотрите мой предыдущий ответ. Небольшое изменение вашего оригинального решения заставит его работать.

0 голосов
/ 17 июля 2009

Вы можете использовать JSNI для повторного использования вашего кода JavaScript. Ваш javascript-код вызовет метод gwt для объекта, который вызовет его от имени кнопки в iframe.

Относительно того, почему код GWT не работает - я думаю, это потому, что они используют некоторый слой поверх обычных событий браузера, который, вероятно, не может занимать более 1 кадра. Это всего лишь предположение. Вы можете подать это как запрос функции / ошибки против команды GWT. Если я прав, ваш код выглядит просто отлично.

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