[英]How to add form elements in gwt-bootstrap3
I am trying to add some elements in gwt-bootstrap3 modal [link] , I am using UI-binder to generate the screen but nothing is appear. 我正在尝试在gwt-bootstrap3模态[link]中添加一些元素,我正在使用UI-binder生成屏幕,但是什么也没有出现。
my ui binder class 我的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>
and my view class 和我的观点班
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);
}
}
I am not sure, What is wrong but only header is appearing in the modal. 我不确定,这是什么问题,但是模版中仅出现标题。
You are calling AddBook.this.show();
您正在调用AddBook.this.show();
- this shows the Modal
that is the base of this AddBook
instance, not the instance defined in your UiBinder template. -这将显示作为此AddBook
实例基础的Modal
,而不是UiBinder模板中定义的实例。 When you call setTitle(title);
当您调用setTitle(title);
you are setting the header/title on this instance - this is why all you see is the header and not the rest of the modal. 您正在为此实例设置标题/标题-这就是为什么您只看到标题而不是模态的其余部分的原因。 You should assign an ui:field
to your Modal
defined in your UiBinder template and show/hide it. 您应为UiBinder模板中定义的Modal
分配一个ui:field
并显示/隐藏它。
Also AddBook
shouldn't be extending Modal
- it shouldn't extend any widget class at all :) Normally, UiBinder classes are extending Composite
- because your UiBinder template is composed of a variety of widgets and Composite
is used to bring them together without exposing any of their APIs: you call initWidget
with the result of binder.createAndBindUi(this)
. 另外AddBook
不应扩展Modal
它根本不应扩展任何小部件类:)通常,UiBinder类正在扩展Composite
因为您的UiBinder模板由各种小部件组成,并且Composite
用于将它们放在一起而不暴露它们的任何一种API:您initWidget
使用binder.createAndBindUi(this)
的结果调用initWidget
。 But if you are creating a widget whose "main" widget is Modal
, like here, you should just call binder.createAndBindUi(this)
and ignore the Widget
that is returned (just like you are doing now). 但是,如果要创建一个“主”窗口小部件为Modal
窗口小部件binder.createAndBindUi(this)
,则应仅调用binder.createAndBindUi(this)
并忽略返回的binder.createAndBindUi(this)
Widget
(就像您现在所做的那样)。 This is because Modal
attaches itself to the DOM, bypassing any GWT mechanism (actually, it conflicts with it). 这是因为Modal
绕过任何GWT机制(实际上与之冲突)将自己附加到DOM。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.