¿Cuál es la forma correcta de usar gwt-bootstrap modal con gwt-platform?

Question

Estoy creando una aplicación web con Google Web Toolkit usando GWT-Platform y GWT-Bootstrap frameworks. Mayormente ha sido casi perfecto hasta que intenté implementar una ventana emergente. La comprensión de estos marcos de las ventanas emergentes parece ser bastante diferente.

GWT-Platform espera que un widget emergente en sí sea una instancia de com.google.gwt.user.client.ui.PopupPanel al usar el RevealRootPopupContentEvent.fire(source, content) de GWTP o el método addToPopupSlot(child) de un presentador.

GWT-Bootstrap's Modal se usa como cualquier otro widget que se agrega al panel subyacente pero mi objetivo es tener un presentador y una vista por separado y posiblemente buscarlo asincrónicamente con AsyncProvider.

he tratado de hacerlo como un PresenterWidget y el uso de addToSlot(slot, content) revelarlo, pero no se ve del todo bien. No todos los estilos se aplican de esta manera y el ícono de cerrar (×) no funciona, por ejemplo.

Creo que no soy el primero en intentar hacer algo así, así que tal vez alguien haya descubierto una forma adecuada de hacerlo funcionar.

Gracias!

Answer 1

usted tiene que crear una vista:

public class MyPopupView extends PopupViewImpl implements MyView { 

    protected Widget widget; 

    public interface MyPopupViewUiBinder extends 
      UiBinder<Widget, MyPopupView> { 
    } 

    @UiField(provided = true) 
    Modal dialogBox; 

    private MyPresenter presenter; 

    @Inject 
    public MyPopupView(final MyPopupViewUiBinder uiBinder, 
      final EventBus eventBus) { 
     super(eventBus); 
     setUpDialog(); // Provides UiField => Before initWidgets 
     initWidget(uiBinder.createAndBindUi(this)); 
    } 

    // DialogBox must be overridden to let the presenter handle changes onUnload 
    private void setUpDialog() { 
     dialogBox = new Modal() { 

      @Override 
      protected void onUnload() { 
       MyPopupView.this.hide(); 
      } 
     }; 

     dialogBox.setTitle("Some title"); 
    } 

    @Override 
    public void setPresenter(final MyPresenter presenter) { 
     this.presenter = presenter; 
    } 

    @Override 
    public final void hide() { 
     dialogBox.hide(); 
     presenter.hide(); 
    } 

    @Override 
    public void setAutoHideOnNavigationEventEnabled(final boolean autoHide) { 
     // TODO Auto-generated method stub 
    } 

    @Override 
    public void setCloseHandler(
      final PopupViewCloseHandler popupViewCloseHandler) { 
     // TODO Auto-generated method stub 
    } 

    @Override 
    public void setPosition(final int left, final int top) { 
     // TODO Auto-generated method stub 
    } 

    @Override 
    public void show() { 
     dialogBox.show(); 
    } 

    @Override 
    public void center() { 
     dialogBox.show(); 
    } 

    @Override 
    public Widget asWidget() { 
     return widget; 
    } 

    protected final void initWidget(final Widget widget) { 
     this.widget = widget; 
    } 

} 

Y un archivo UiBinder:

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' 
    xmlns:g='urn:import:com.google.gwt.user.client.ui' 
    xmlns:b='urn:import:com.github.gwtbootstrap.client.ui'> 

    <b:Modal title="Some Title" ui:field="dialogBox"> 
     <!-- Your content --> 
    </b:Modal> 
</ui:UiBinder> 

Answer 2

Creo que tendrá que hacer un código de pegamento para que funcione.

Nunca utilicé las ventanas emergentes de GWT-Platform, así que no sé exactamente cómo hacerlo, pero creo que tendrá que crear un nuevo PopupPresenter de ampliación de clases, e hizo lo necesario para que funcionase.

Además, estaba pensando en GWT-Platform hace días ... y estoy bastante seguro de que cuando salga el primer lanzamiento de GWT-Platform, crearé un nuevo proyecto para hacer estos códigos de pegamento necesarios.

Si necesita ayuda con esto, contácteme.

Gracias, disculpe la poca compatibilidad con la plataforma gwt.

Answer 3

Su presentador emergente gwtp tiene una vista que amplía PopUpViewImpl que implementa PopupView, y utiliza muchos de los métodos de esa interfaz para mostrar la ventana emergente (como PopupPanel(), show(), center(), etc.).

Estoy empezando a conocer gwt-bootstrap (se ve muy bien + caalos0), pero parece que Modal no implementa PopupView, y por lo tanto no se puede pasar a addToPopupSlot de una manera que se mostraría automáticamente por gwtp.

en cuanto al problema addToSlot(), ¿está utilizando RootLayoutPanel o RootPanel? podría ser la razón por la cual addToSlot no funciona correctamente, ya que el widget modal gwt-bootstrap está conectado al RootPanel en la inicialización, esto puede causar un comportamiento de diseño extraño junto con una aplicación que usa RootLayoutPanel como base.

Intentaré extender el componente modal, permitiré que implemente PopUpView, lo agregue como un campo en el PopUpViewImpl conectado a su presentador emergente y anule la función PopUpViewImpl asPopupPanel() para devolver el nuevo Modal extendido.

Answer 4

Sobre la base de la respuesta por @dominik hice algunas mejoras, veo mi Gist. Contiene algunas clases base abstractas que se pueden usar para cualquier implementación Modal/PopupView. Es un poco más complejo pero también más limpio porque no pasamos el Presenter completo al View. La interfaz para la View para interactuar con el Presenter cuando el modal está cerrado es HasModalUnbind.

Se podría utilizar estas clases de la siguiente manera. Ejemplo presentador:

public class ErrorModalPresenter extends ModalPopupPresenter<ErrorModalPresenter.MyView> { 

    public interface MyView extends ModalPopupView { 
     DivElement getErrorMessage(); 
    } 

    private final ErrorEvent error; 

    @Inject 
    public ErrorModalPresenter(final EventBus eventBus, 
           final MyView view, 
           @Assisted final ErrorEvent error) { 

     super(eventBus, view); 
     this.error = error; 
    } 

    @Override 
    public void unbindModal() { 
     ErrorDismissEvent.fire(this, this); 
    } 

    @Override 
    protected void onBind() { 
     super.onBind(); 

     //noinspection ThrowableResultOfMethodCallIgnored 
     getView().getErrorMessage().setInnerText(error.getCause().getMessage()); 
    } 
} 

Ejemplo vista:

public class ErrorModalView extends ModalPopupViewImpl implements ErrorModalPresenter.MyView { 

    @UiField(provided = true) 
    Modal errorModal; 

    @UiField 
    DivElement errorMessage; 

    interface Binder extends UiBinder<Widget, ErrorModalView> {} 

    @Inject 
    public ErrorModalView(final EventBus eventBus, 
          final Binder uiBinder) { 

     super(eventBus); 

     errorModal = initModal(); 
     initWidget(uiBinder.createAndBindUi(this)); 
    } 

    @Override 
    public DivElement getErrorMessage() { 
     return errorMessage; 
    } 
} 

Y el XML UiBinder sólo para el registro:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' 
      xmlns:g='urn:import:com.google.gwt.user.client.ui' 
      xmlns:b='urn:import:com.github.gwtbootstrap.client.ui'> 

    <b:Modal ui:field='errorModal' title='Error'> 
     <g:HTML> 
      <div ui:field='errorMessage'/> 
     </g:HTML> 

     <b:ModalFooter> 
      <b:Button text='Close' dismiss='MODAL'/> 
     </b:ModalFooter> 
    </b:Modal> 

</ui:UiBinder> 

En unbindModal() de ErrorModalPresenter I desencadenar un evento que se captura por el padre Presentador de ErrorModalPresenter. Allí, el presentador modal se elimina de un contenedor y luego se llama al unbind() en el presentador. Por supuesto, cualquier otra solución es posible en unbindModal().

Las clases de base asumen que los modales son modales de un solo uso que se eliminarán una vez que están ocultos. Este comportamiento se puede cambiar en initModal() de ModalPopupViewImpl.