Cách thích hợp để sử dụng phương thức gwt-bootstrap với gwt-platform là gì?

Question

Tôi đang xây dựng một webapp bằng Google Web Toolkit sử dụng các khung công tác GWT-Platform và GWT-Bootstrap. Chủ yếu là nó đã được gần như hoàn hảo cho đến khi tôi đã cố gắng để thực hiện một popup. Các khung công tác 'undestanding' của các khung quảng cáo này có vẻ khá khác nhau.

GWT-Platform dự kiến ​​tiện ích bật lên sẽ là một phiên bản com.google.gwt.user.client.ui.PopupPanel khi sử dụng phương thức RevealRootPopupContentEvent.fire(source, content) của GWTP hoặc phương pháp addToPopupSlot(child) của người trình bày.

Chế độ GWT-Bootstrap được sử dụng giống như bất kỳ tiện ích con nào khác được thêm vào bảng điều khiển cơ bản nhưng mục tiêu của tôi là có trình bày riêng và chế độ xem và có thể tìm nạp nó một cách đồng bộ với AsyncProvider.

Tôi đã cố gắng làm cho nó như là một PresenterWidget và sử dụng addToSlot(slot, content) để tiết lộ nó nhưng nó không nhìn khá đúng. Không phải tất cả các kiểu được áp dụng theo cách này và biểu tượng đóng (×), không hoạt động chẳng hạn.

Tôi nghĩ rằng tôi không phải là người đầu tiên cố gắng làm điều gì đó như vậy để có thể ai đó đã tìm ra một cách thích hợp để làm cho nó hoạt động.

Cảm ơn!

Answer 1

Bạn phải tạo một cái nhìn:

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

} 

Và một 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

Tôi tin rằng bạn sẽ phải thực hiện một số Mã keo để làm cho nó hoạt động.

Tôi chưa bao giờ sử dụng cửa sổ bật lên GWT-Platform, vì vậy tôi không biết chính xác như thế nào, nhưng tôi tin rằng bạn sẽ phải tạo một Lớp mới mở rộng PopupPresenter và thực hiện những gì cần thiết để làm cho nó hoạt động.

Ngoài ra, tôi đã suy nghĩ về GWT-Platform ngày trước ... và tôi khá chắc chắn rằng khi lần đầu tiên phát hành nền tảng GWT ra, tôi sẽ tạo một dự án mới để tạo các mã keo cần thiết này.

Nếu bạn cần bất kỳ trợ giúp nào về vấn đề này, vui lòng liên hệ với tôi.

Cảm ơn, xin lỗi về hỗ trợ nền tảng gwt kém.

Answer 3

Trình hiển thị bật lên gwtp của bạn có chế độ xem mở rộng PopUpViewImpl, triển khai PopupView và sử dụng rất nhiều phương thức của giao diện đó để hiển thị cửa sổ bật lên (asPopupPanel(), show(), center(), v.v ...).

Tôi chỉ mới bắt đầu biết gwt-bootstrap (trông tuyệt vời + caalos0), nhưng có vẻ như Modal không triển khai PopupView và do đó không thể được chuyển tới addToPopupSlot theo cách nó sẽ được hiển thị tự động gwtp.

đối với vấn đề addToSlot(), bạn có đang sử dụng RootLayoutPanel hoặc RootPanel không? nó có thể là lý do cho addToSlot không hoạt động đúng, vì widget gwt-bootstrap Modal được gắn vào RootPanel khi khởi tạo, điều này có thể gây ra hành vi bố cục lạ cùng với một ứng dụng sử dụng RootLayoutPanel làm cơ sở.

Tôi sẽ cố gắng mở rộng thành phần Phương thức, cho phép nó triển khai PopUpView, thêm nó làm trường trên PopUpViewImpl được đính kèm với người trình bày bật lên của bạn và ghi đè hàm PopUpViewImpl asPopupPanel() để trả về Chế độ mở rộng mới.

Answer 4

Dựa trên câu trả lời của tôi đã @dominik một số cải tiến, xem Gist tôi. Nó chứa một số lớp cơ sở trừu tượng có thể được sử dụng cho bất kỳ thực thi Modal/PopupView nào. Đó là một chút phức tạp hơn nhưng cũng sạch hơn vì chúng tôi không vượt qua toàn bộ Presenter đến View. Giao diện cho View để tương tác với Presenter khi phương thức đóng là HasModalUnbind.

Bạn sẽ sử dụng các lớp này như sau. người dẫn chương trình ví dụ:

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

dụ xem:

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

Và XML UiBinder chỉ dành riêng cho các kỷ lục:

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

Trong unbindModal() của ErrorModalPresenter tôi cháy một sự kiện được đánh bắt bởi phụ huynh người trình bày của ErrorModalPresenter. Có người trình bày phương thức được lấy ra khỏi một thùng chứa và sau đó unbind() được gọi trên người trình bày. Tất nhiên, bất kỳ giải pháp nào khác đều có thể trong unbindModal().

Các lớp cơ sở giả định rằng các phương thức là các phương thức một lần sẽ bị xóa khi chúng bị ẩn. Hành vi này có thể được thay đổi trong initModal() của ModalPopupViewImpl.