Пользовательский триггер события GWT в Javascript

у меня есть приложение, которое составляет половину GWT и половину позвоночника.js. Мы переходим приложение от GWT к магистрали, так как мы добавляем новые компоненты, они находятся в магистрали. Мы также заменяем некоторые существующие компоненты на Backbone.

есть компонент, который я пытаюсь заменить, который все еще должен быть в состоянии сообщить своему контейнеру GWT, когда происходят определенные события, чтобы контейнер мог повлиять на другие компоненты GWT. У меня есть собственная функция в GWT, которая ссылается на глобальное пространство имен, в котором функция определена в Javascript. Эта функция отображает компонент магистрали, поэтому GWT не имеет ссылки на сам компонент.

я попытался определить пользовательское событие DOM в GWT, а затем вызвать это событие из магистрального кода, но либо я сделал это неправильно, либо это не способ сделать это.

я ссылался на эти вопросы при создании моего пользовательского события:как добавить обработчик событий CSS AnimationEnd в GWT виджет? & пользовательские события GWT

я сделал две попытки запуска пользовательского события из магистрали и прослушивания GWT для него, ни один не работал.

мне нужна помощь в запуске события (или вызове обратного вызова или чего-то эквивалентного) из Javascript (Backbone.js), который будет "услышан" (или вызван или что-то еще) в GWT.

код

код общий между двумя попытками, как Компонент Backbone отображается и как запускается событие:

класса BackboneController.java:

public static void loadMessageEntry(final String selector, final String type, final QuipuId conversationID, final QuipuId messageID, final boolean enterIsSubmit) {
    String messageIDString = messageID.getId();
     String enterRole = enterIsSubmit ? "submit" : "newline";
     if(messageID.equals(QuipuId.NULL)) {
         messageIDString = "";
     }
     showMessageEntry(selector, type, conversationID.getId(), messageIDString, enterRole);
}
private static native void showMessageEntry(String selector, String type, String messageId, String conversationId, String enterRole) /*-{
    var intervalTimer = $wnd.setInterval(function() {
        if($wnd.Namespace.MessageEntry) {
            $wnd.Namespace.MessageEntry.displayMessageEntry(selector, type, messageId, conversationId, enterRole);
            $wnd.clearInterval(intervalTimer);
        }
    }, 500);
}-*/;

класса myClientBootstrap.js:

Namespace.MessageEntry = Namespace.MessageEntry || {};
Namespace.MessageEntry.displayMessageEntry = function(selector, type, conversationID, messageID, enterRole) {
  var messageEntry, 
      instanceName = selector.slice(1);
  if(CKEDITOR.instances[instanceName]) {
    CKEDITOR.instances[instanceName].trigger("show");
  } else {
    messageEntry = new MessageEntry( { 
      model: new RTEModel({mode: 'inline', type: type, conversationID: conversationID, messageID: messageID}),
      enterRole: enterRole
    });
    $(selector).append(messageEntry.$el);
  }
};

класса MessageEntryView.js:

// called when the upload button is clicked
openDocumentUploader: function() {
  $("." + this.model.get("id")).trigger('messageEntry',["documentUpload"]);
}

класса MessageEntry.java:

Попытка 1

private native void registerMessageEntryEventHandler(final Element messageEntry, final MessageEntryHandler handler) /*-{
    var callback = function() {
        handler.@mypath.client.MessageEntryHandler::onMessageEntryEvent(Lmypath/client/MessageEntryEvent;)();
    }
    messageEntry.addEventListener("messageEntry", callback, false);     
}-*/;

private void initLayout() {
    initWidget(mainDockLayoutPanel);

    Conversation model = conversationController.getModel();
    messageEntryPanel.getElement().addClassName("richTextAreaId" + model.getId());
    BackboneController.loadMessageEntry(".richTextAreaId" + model.getId(), "message", model.getId(), QuipuId.NULL, (Boolean)PreferencesModel.getInstance().isAutoSubmit());

    registerMessageEntryEventHandler(messageEntryPanel.getElement(), new MessageEntryHandler() {
        @Override
        public void onMessageEntryEvent(MessageEntryEvent event) {
            if(event.getEventType() == "documentUpload") {
                MessageEntry.this.switchToDocumentUpload();
            }
        }
    });
    mainDockLayoutPanel.addStyleName(MessageEntryBundle.instance.css().container());

    modeSimplePanel.add(messageEntryPanel);
    mainDockLayoutPanel.add(modeSimplePanel);
}

Попытка 2

private void initLayout() {
    initWidget(mainDockLayoutPanel);

    Conversation model = conversationController.getModel();
    messageEntryPanel.getElement().addClassName("richTextAreaId" + model.getId());
    BackboneController.loadMessageEntry(".richTextAreaId" + model.getId(), "message", model.getId(), QuipuId.NULL, (Boolean)PreferencesModel.getInstance().isAutoSubmit());
    addDomHandler(new MessageEntryHandler() {
        @Override
        public void onMessageEntryEvent(MessageEntryEvent event) {
            if(event.getEventType() == "documentUpload") {
                MessageEntry.this.switchToDocumentUpload();
            }
        }
    }, MessageEntryEvent.getType());
    mainDockLayoutPanel.addStyleName(MessageEntryBundle.instance.css().container());

    modeSimplePanel.add(messageEntryPanel);
    mainDockLayoutPanel.add(modeSimplePanel);
}

редактировать

сделал еще одну попытку, это имеет несколько больше различий, чем между первыми двумя. Когда мы создаем наше пространство имен, мы делаем _.extend(Namespace, Backbone.Events) чтобы мы могли запускать события из GWT, которые будет прослушивать основной код. Я решил попробовать заставить его работать в другом направлении. Но этого не произошло.--15-->

Попытка 3

С MessageEntryView.js:

openDocumentUploader: function() {
  Namespace.trigger(Namespace.Events.UPLOAD);
}

С MessageEntry.java:

private native void registerUploadListener(MessageEntry msgEntry) /*-{
    $wnd.Namespace.on($wnd.Namespace.Events.UPLOAD, function() {
        msgEntry.@mypath.widget.MessageEntry::switchToDocumentUpload();
    });
}-*/;

private void initLayout() {
    initWidget(mainDockLayoutPanel);

    Conversation model = conversationController.getModel();
    messageEntryPanel.getElement().addClassName("richTextAreaId" + model.getId());
    BackboneController.loadMessageEntry(".richTextAreaId" + model.getId(), "message", model.getId(), QuipuId.NULL, (Boolean)PreferencesModel.getInstance().isAutoSubmit());
    registerUploadListener(this);
    mainDockLayoutPanel.addStyleName(MessageEntryBundle.instance.css().container());

    modeSimplePanel.add(messageEntryPanel);
    mainDockLayoutPanel.add(modeSimplePanel);
}

1 ответов


Попытка 3-Вот что это сделало. Я просто неправильно вызвал метод GWT из собственного метода.

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

Попытка 3

С MessageEntryView.js:

openDocumentUploader: function() {
  Namespace.trigger(Namespace.Events.UPLOAD);
}

С MessageEntry.java:

private native void registerUploadListener(MessageEntry instance) /*-{
    $wnd.Namespace.on($wnd.Namespace.Events.UPLOAD, function() {
        instance.@mypath.widget.MessageEntry::switchToDocumentUpload()();
    });
}-*/;

private void initLayout() {
    initWidget(mainDockLayoutPanel);

    Conversation model = conversationController.getModel();
    messageEntryPanel.getElement().addClassName("richTextAreaId" + model.getId());
    BackboneController.loadMessageEntry(".richTextAreaId" + model.getId(), "message", model.getId(), QuipuId.NULL, (Boolean)PreferencesModel.getInstance().isAutoSubmit());
    registerUploadListener(this);
    mainDockLayoutPanel.addStyleName(MessageEntryBundle.instance.css().container());

    modeSimplePanel.add(messageEntryPanel);
    mainDockLayoutPanel.add(modeSimplePanel);
}