Qual è il modo corretto di usare gwt-bootstrap modal con gwt-platform?

Question

Sto costruendo una webapp con Google Web Toolkit utilizzando GWT-Platform e GWT-Bootstrap framework. Per lo più è stato quasi impeccabile fino a quando non ho provato a implementare un popup. L'inclusione di popup di questi framework sembra essere molto diversa.

GWT-Platform si aspetta che un popup popup sia un'istanza di com.google.gwt.user.client.ui.PopupPanel quando si utilizza il RevealRootPopupContentEvent.fire(source, content) del GWTP o il metodo addToPopupSlot(child) di un relatore.

Il modale di GWT-Bootstrap viene utilizzato come qualsiasi altro widget che viene aggiunto al pannello sottostante, ma il mio obiettivo è avere un presentatore e una vista separati e possibilmente recuperarlo in modo asincrono con AsyncProvider.

Ho cercato di renderlo come un PresenterWidget e di usare addToSlot(slot, content) per rivelarlo ma non sembra giusto. Non tutti gli stili sono applicati in questo modo e l'icona di chiusura (×), ad esempio, non funziona.

Penso di non essere il primo a provare a fare qualcosa del genere, quindi forse qualcuno ha trovato un modo corretto per farlo funzionare.

Grazie!

Answer 1

è necessario creare 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; 
    } 

} 

E un file 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

Credo che dovrai fare un po 'di codice colla per farlo funzionare.

Non ho mai usato i popup di GWT-Platform, quindi non so esattamente come, ma credo che dovrete fare una nuova classe estendendo PopupPresenter e realizzato ciò che è necessario per farlo funzionare.

Inoltre, stavo pensando a GWT-Platform giorni fa ... e sono abbastanza sicuro che quando uscirà la prima versione di GWT-Platform, creerò un nuovo progetto per realizzare questi codici di colla necessari.

Se avete bisogno di aiuto con questo, per favore contattatemi.

Grazie, mi dispiace per il supporto scarso della piattaforma gwt.

Answer 3

Il tuo presentatore popup gwtp ha una vista che estende PopUpViewImpl che implementa PopupView e utilizza molti dei metodi di tale interfaccia per visualizzare il popup (asPopupPanel(), show(), center(), ecc.).

Sto appena iniziando a conoscere gwt-bootstrap (sembra ottimo + caalos0), ma sembra che Modal non implementa PopupView, e quindi non può essere passato a addToPopupSlot in un modo che sarebbe visualizzato automaticamente da gwtp.

come per il problema addToSlot(), stai utilizzando RootLayoutPanel o RootPanel? potrebbe essere il motivo per cui addToSlot non funziona correttamente, poiché il widget Modem gwt-bootstrap è collegato a RootPanel durante l'inizializzazione, questo può causare un comportamento strano del layout insieme a un'applicazione che utilizza RootLayoutPanel come base.

Vorrei provare ad estendere il componente Modal, a implementare PopUpView, aggiungerlo come campo sul PopUpViewImpl collegato al presentatore popup e sostituire la funzione PopUpViewImpl asPopupPanel() per restituire il nuovo Modal esteso.

Answer 4

Sulla base della risposta da @dominik ho fatto alcuni miglioramenti, vedere il mio Gist. Contiene alcune classi base astratte che possono essere utilizzate per qualsiasi implementazione Modal/PopupView. È un po 'più complesso ma anche più pulito perché non passiamo l'intero Presenter allo View. L'interfaccia per il Presenter per interagire con Presenter quando la modal è chiusa è HasModalUnbind.

Queste classi verranno utilizzate come segue. Esempio presentatore: vista

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

Esempio:

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

E l'XML UiBinder solo per la cronaca:

<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> 

In unbindModal() di ErrorModalPresenter ho generare un evento che viene catturato dal genitore presentatore di ErrorModalPresenter. Lì il presentatore modale viene rimosso da un contenitore e quindi viene chiamato il unbind() sul presentatore. Naturalmente qualsiasi altra soluzione è possibile in unbindModal().

Le classi base presuppongono che le modali siano modali one-shot che verranno rimosse una volta nascoste. Questo comportamento può essere modificato in initModal() di ModalPopupViewImpl.