Activador de evento personalizado GWT en Javascript

events backbone.js

Question

Tengo una aplicación que es mitad GWT y mitad Backbone.js. Estamos migrando la aplicación de GWT a Backbone para agregar nuevos componentes, están en Backbone. También estamos reemplazando algunos componentes existentes con Backbone también.

Hay un componente que estoy tratando de reemplazar que aún debe ser capaz de permitir que su contenedor GWT sepa cuándo ocurren ciertos eventos, de modo que el contenedor pueda afectar otros componentes de GWT. Tengo una función nativa en GWT que hace referencia a un espacio de nombres global en el que se define una función en Javascript. Esa función representa el componente Backbone, por lo que GWT no tiene una referencia al componente en sí.

Traté de definir un evento DOM personalizado en GWT y luego desencadenar ese evento desde el código Backbone, pero o lo hice mal, o esa no es la manera de hacerlo.

Hice referencia a estas preguntas al crear mi evento personalizado: ¿Cómo agregar el controlador de eventos CSS AnimationEnd al widget GWT? & GWT Eventos personalizados

Hice dos intentos para activar el evento personalizado desde Backbone y tener a GWT escuchándolo, ninguno de los dos funcionó.

Necesito ayuda para desencadenar un evento (o llamar a una devolución de llamada, o algo equivalente) de Javascript (Backbone.js) que será "escuchado" (o llamado o lo que sea) en GWT.

CÓDIGO

El código común entre dos intentos es cómo se representa el componente Backbone y cómo se desencadena el evento:

De la clase 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);
}-*/;

De la clase 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);
  }
};

De la clase MessageEntryView.js :

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

De la clase MessageEntry.java :

Intento 1

private native void registerMessageEntryEventHandler(final Element messageEntry, final MessageEntryHandler handler) /*-{
    var callback = function() {
        [email protected]::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);
}

Intento 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);
}

EDITAR

Hizo otro intento, esto tiene algunas diferencias más que entre los dos primeros. Cuando creamos nuestro espacio de nombres, hacemos _.extend(Namespace, Backbone.Events) para que podamos desencadenar eventos de GWT que el código Backbone escuchará. Decidí intentar hacer que funcionara en la otra dirección. No fue así.

Intento 3

De MessageEntryView.js :

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

De MessageEntry.java :

private native void registerUploadListener(MessageEntry msgEntry) /*-{
    $wnd.Namespace.on($wnd.Namespace.Events.UPLOAD, function() {
        [email protected]::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);
}

Answer 1

Intento 3 es lo que hizo. Acabo de llamar al método GWT incorrectamente del método nativo.

Usando el espacio de nombres Global y extendiéndolo para usar eventos Backbone, solo tengo la vista Backbone activando el evento Global y la vista GWT para escuchar el evento.

Intento 3

De MessageEntryView.js :

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

De MessageEntry.java :

private native void registerUploadListener(MessageEntry instance) /*-{
    $wnd.Namespace.on($wnd.Namespace.Events.UPLOAD, function() {
        [email protected]::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);
}