Как добавить элементы формы в gwt-bootstrap3

Question

Я пытаюсь добавить некоторые элементы в модальный gwt-bootstrap3 [ссылка], я использую UI-связыватель для создания экрана, но ничего не появляется.

мой класс связующего интерфейса

<?xml version="1.0" encoding="UTF-8"?>
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:b='urn:import:org.gwtbootstrap3.client.ui'
xmlns:res="urn:with:com.db.cary.client.resources.CSSResources">
   <ui:with type="com.db.cary.client.resources.CSSResources" field="res">
   </ui:with>
   <b:Modal closable="true" fade="true" dataBackdrop="TRUE" dataKeyboard="true">
       <b:ModalBody>
           <b:Form type="HORIZONTAL">
               <b:FieldSet>
                   <b:Legend>Please enter the book detail</b:Legend>

                   <b:FormGroup>
                       <b:FormLabel for="bookTitle" addStyleNames="col-lg-2">Title</b:FormLabel>
                       <g:FlowPanel addStyleNames="col-lg-10">
                           <b:TextBox placeholder="Enter book Title" ui:field="titleTextBox" />
                       </g:FlowPanel>
                   </b:FormGroup>

                   <b:FormGroup>
                       <b:FormLabel for="bookAuthor" addStyleNames="col-lg-2">Author</b:FormLabel>
                       <g:FlowPanel addStyleNames="col-lg-10">
                           <b:ListBox ui:field="authorListBox" />
                           <b:Button ui:field="newAuthorButton" type="LINK" size="EXTRA_SMALL">New author</b:Button>
                       </g:FlowPanel>
                       <g:FlowPanel addStyleNames="col-lg-offset-2 col-lg-10">
                           <b:TextBox ui:field="authorTextBox" placeholder="enter slash (/) separated list of authors"></b:TextBox>
                       </g:FlowPanel>
                   </b:FormGroup>

                   <b:FormGroup>
                       <b:FormLabel for="bookCategory" addStyleNames="col-lg-2">Category</b:FormLabel>
                       <g:FlowPanel addStyleNames="col-lg-10">
                           <b:ListBox ui:field="categoryListBox" />
                           <b:Button ui:field="newCategoryButton" type="LINK" size="EXTRA_SMALL">New Category</b:Button>
                       </g:FlowPanel>
                       <g:FlowPanel addStyleNames="col-lg-offset-2 col-lg-10">
                           <b:TextBox ui:field="categoryTextBox" placeholder="enter category"></b:TextBox>
                       </g:FlowPanel>
                   </b:FormGroup>
               </b:FieldSet>
           </b:Form>
       </b:ModalBody>
       <b:ModalFooter>
           <b:Button type="PRIMARY" ui:field='submitButton'>Submit</b:Button>
           <b:Button ui:field='cancelButton'>Cancel</b:Button>
       </b:ModalFooter>
   </b:Modal>
</ui:UiBinder>

и мой взгляд на класс

public class AddBook extends Modal {

   interface CheckOutPopUpBinder extends UiBinder<Widget, AddBook> {
   }

   private static final CheckOutPopUpBinder binder = GWT.create(CheckOutPopUpBinder.class);
   private final AuthorAndCategoryServiceAsync authorService = GWT.create(AuthorAndCategoryService.class);
   private final LibraryServiceAsync libraryServiceAsync = GWT.create(LibraryService.class);

   @UiField
   TextBox titleTextBox;
   @UiField
   ListBox authorListBox;
   @UiField
   TextBox authorTextBox;
   @UiField
   ListBox categoryListBox;
   @UiField
   Button submitButton;
   @UiField
   Button cancelButton;

   @UiField
   Button newAuthorButton;
   @UiField
   Button newCategoryButton;
   @UiField
   TextBox categoryTextBox;

   public AddBook(String title) {
      binder.createAndBindUi(this);
      setTitle(title);
      initializeAuthorListBox();
      initializeCategoryListBox();
   }

   private void initializeCategoryListBox() {
      authorService.getCategories(null, new AsyncCallback<List<CategoryDTO>>() {

     @Override
     public void onFailure(Throwable arg0) {
        Window.alert("unable to fetch category list");
     }

     @Override
     public void onSuccess(List<CategoryDTO> arg0) {
        for (CategoryDTO category : arg0)
           categoryListBox.addItem(category.getCategoryName());
     }
      });
      categoryListBox.setMultipleSelect(false);
      categoryTextBox.setVisible(false);

   }

   private void initializeAuthorListBox() {
      authorService.getAuthors(null, new AsyncCallback<List<AuthorDTO>>() {
     @Override
     public void onSuccess(List<AuthorDTO> arg0) {
        for (AuthorDTO author : arg0) {
           authorListBox.addItem(author.getAuthorName());
        }
     }

     @Override
     public void onFailure(Throwable arg0) {
        Window.alert("Unable to fetch the list of authors");
     }
      });
      authorListBox.setMultipleSelect(true);
      authorTextBox.setVisible(false);
   }

   @UiHandler("cancelButton")
   public void cancelAction(ClickEvent e) {
      AddBook.this.hide();
   }

   @UiHandler("submitButton")
   public void submitAction(ClickEvent e) {
      AddBookDTO bookDTO = new AddBookDTO();
      String bookTitle = titleTextBox.getText();
      String bookCategory = categoryListBox.getSelectedValue() == null ? categoryTextBox.getText() : categoryListBox.getSelectedValue();
      List<String> authorsList = new ArrayList<String>();

      for (int i = 0; i < authorListBox.getItemCount(); i++) {
     if (authorListBox.isItemSelected(i)) {
        authorsList.add(authorListBox.getItemText(i));
     }
      }

      if (null != authorTextBox.getText() && authorTextBox.getText().trim().length() > 0) {
     String[] values = authorTextBox.getText().split("/");
     for (String str : values) {
        authorsList.add(str);
     }
      }
      if (bookTitle == null || bookTitle.length() <= 0) {
     Window.alert("Please enter a valid book title");
     return;
      } else if (bookCategory == null || bookCategory.length() <= 0) {
     Window.alert("Please enter a valid book category");
     return;
      } else if (authorsList == null || authorsList.size() == 0) {
     Window.alert("Please enter valid authors");
     return;
      }
      bookDTO.setBookTitle(bookTitle);
      bookDTO.setCategroyName(bookCategory);
      bookDTO.setAuthors(authorsList);
      libraryServiceAsync.addBook(bookDTO, new AsyncCallback<Boolean>() {

     @Override
     public void onFailure(Throwable arg0) {
        Window.alert("There is some issue with database while adding book, Please contact your admin");

     }

     @Override
     public void onSuccess(Boolean arg0) {
        Window.alert("Book is successfully added !!!");
     }
      });
      this.hide();

   }

   @UiHandler("newAuthorButton")
   public void addAuthor(ClickEvent e) {
      authorTextBox.setVisible(true);
   }

   @UiHandler("newCategoryButton")
   public void addCategory(ClickEvent e) {
      categoryTextBox.setVisible(true);
   }

}

Я не уверен, что не так, но в модале появляется только заголовок.

Answer 1

Ты звонишь AddBook.this.show(); - это показывает Modal это основа этого AddBook экземпляр, а не экземпляр, определенный в вашем шаблоне UiBinder. Когда вы звоните setTitle(title); Вы устанавливаете заголовок / заголовок для этого экземпляра - вот почему все, что вы видите, это заголовок, а не остальная часть модального окна. Вы должны назначить ui:field на ваш Modal определенный в вашем шаблоне UiBinder и показать / скрыть его.

Также AddBook не должен расширяться Modal - он не должен расширять какой-либо класс виджетов вообще:) Обычно классы UiBinder расширяются Composite - потому что ваш шаблон UiBinder состоит из множества виджетов и Composite используется для их объединения без предоставления какого-либо из их API: вы звоните initWidget с результатом binder.createAndBindUi(this), Но если вы создаете виджет, чей "основной" виджет Modalкак здесь, вы должны просто позвонить binder.createAndBindUi(this) и игнорировать Widget это возвращается (так же, как вы делаете сейчас). Это потому что Modal присоединяется к DOM, минуя любой механизм GWT (фактически, он конфликтует с ним).