Пользовательский триггер события 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);
}