UI:
<div class="scroll" ui:field="mainContainer">
<ul ui:field="liContainer">
</ul>
</div>
code :
LIElement li = Document.get().createLIElement();
AnchorElement a = Document.get().createAnchorElement();
a.setAttribute("href", "#");
li.appendChild(a);
Image img = new Image(fsd.getImgUrl());
img.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("Hello, again");
}
});
SpanElement span = Document.get().createSpanElement();
span.setInnerText(fsd.getName());
a.appendChild(img.getElement());
a.appendChild(span);
liContainer.appendChild(li);
Note:
#UiField
UListElement liContainer;
The Image must be added to a parent Widget. By attaching the image's element directly to the DOM, you wind up bypassing GWT`s event dispatch system.
Related
I am building a two-level menu for my application using wicket framework. Using ListView#populateItem is redrawing the markup (SubMenuPanel.html) and unable to display menu items which were buried inside markup tags in SubMenuPanel.html. Code below -
html:
<div wicket:id="navMenu"></div>
Main.java:
NavigationMenu navigationMenu = new NavigationMenu("navMenu", navigationMenuAdapter);
add(navigationMenu);
NavigationMenu.java
public NavigationMenu(final String id, final NavigationMenuAdapter adapter)
{
super(id);
this.adapter = adapter;
add(new SubMenuPanel("mainMenu", adapter.getNavigationMenus(this)));
}
SubMenuPanel.java
public SubMenuPanel(final String id, List<NavigationMenuItem> list)
{
super(id);
add(new Rows("firstLevel", list));
setVersioned(false);
}
private static class Rows extends ListView<NavigationMenuItem>
{
private static final long serialVersionUID = 1L;
public Rows(String name, List<NavigationMenuItem> list)
{
super(name, list);
}
#Override
protected void populateItem(ListItem<NavigationMenuItem> listItem)
{
Object modelObject = listItem.getDefaultModelObject();
WebMarkupContainer rowAnchor = new WebMarkupContainer("firstLevelLink");
rowAnchor.add(new Label("firstLevelLabel", ((NavigationMenuItem) modelObject).getName()));
rowAnchor.add(new AttributeAppender("onclick", new Model("handleMenuClick()");
listItem.add(rowAnchor);
listItem.add(new SubMenuPanel("secondLevelMenu", ((NavigationMenuItem) modelObject).getChildMenuItem()));
}
}
SubMenuPanel.html
<body>
<wicket:panel>
<li wicket:id="firstLevel">
<a wicket:id="firstLevelLink" class="dropdown-toggle" aria-expanded="true" data-toggle="dropdown" href="javascript:void(0);" >
<span wicket:id="firstLevelLabel"></span>
</a>
<ul wicket:id="secondLevelMenu" class="dropdown-menu">
</ul>
</li>
</wicket:panel>
Working version
Non-working
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.
my ui binder class
<?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(); - this shows the Modal that is the base of this AddBook instance, not the instance defined in your UiBinder template. When you call 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.
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).
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). This is because Modal attaches itself to the DOM, bypassing any GWT mechanism (actually, it conflicts with it).
Ok, in war/MyProject.html, I have:
<body>
<div id="loading">
<div id="waitingForLoading"></div>
<BR/>
<img src="../images/loading.gif" />
</div>
...
</body>
in MyProject.java
public class OfflineMatching implements EntryPoint {
#Override
public void onModuleLoad() {
// this code works fine
if(DOM.getElementById("loading")!=null){
DOM.getElementById("loading").removeFromParent();
}
Button myButton=new Button("Enter Main Page");
RootPanel.get().add(myButton);
myButton.addClickHandler(new ClickHandler(){
#Override
public void onClick(ClickEvent event) {
// this code does not work
if(DOM.getElementById("loading")==null){
DOM.appendChild(RootPanel.getBodyElement(), DOM.createElement("loading"));
}
}
});
}
}
So, did i do anything wrong?
Why this code does not work?
// this code does not work
if(DOM.getElementById("loading")==null){
DOM.appendChild(RootPanel.getBodyElement(), DOM.createElement("loading"));
}
DOM.createElement(String tagName) creates a <tagname> element. So, if you pass "loading" to it, it will create a <loading> element.
For a quick workaround, you can use RootPanel.get, and then call setVisible on the widget:
// onModuleLoad:
RootPanel.get("loading").setVisible(false);
// onClick:
RootPanel.get("loading").setVisible(true);
But a better approach would be creating the loading <div> as a widget in GWT and just call setVisible on its instance, without relying on ids.
I have added a Form on submit of which I have to add more wicket controls like Labels, textfields and button with an Ajex Link. But not able to get the correct HTML. Can anyone please help me to get rid of it ?
voucherPanel.html
<html xmlns:wicket>
<head>
</head>
<body>
<wicket:panel>
<div class="form-block">
<div wicket:id="form">
<wicket:message key="lbl.vouchercode" />
<div wicket:id="list">
<input wicket:id="word" type="text" />
</div>
<div wicket:id="vouchercode"></div>
<button wicket:id="submit"><wicket:message key="submitText"/></button>
</div>
</div>
</wicket:panel>
</body>
</html>
voucherPanel.java
public class VoucherPanel extends Panel
{
private static final long serialVersionUID = 1L;
public VoucherPanel(final String id)
{
super(id);
final TextField<String> voucherCodeField = new TextField<String>("vouchercode", Model.of(""));
voucherCodeField.setRequired(true);
final Button button = new Button("submit");
Form<?> form = new Form<Void>("form")
{
#Override
protected void onSubmit()
{
numberOfFields = new ArrayList<String>();
int noOfVocuhers = getNoOfAllowedVoucher();// just returing the number
for (int i = 0; i < noOfVocuhers; i++) {
numberOfFields.add(new String(""));
}
add(new ListView<Object>("list", numberOfFields) {
private static final long serialVersionUID = 1L;
#Override
protected void populateItem(ListItem<Object> item) {
final String word = (String) item.getModelObject();
System.out.println( "word =" +word );
TextField<String> textField = new TextField<String>("word", Model.of(""));
textField.setOutputMarkupId(true);
item.add(textField);
}
});
}
}
};
add(form);
form.add(voucherCodeField);
form.add(button);
}
}
You're trying to assign a Textfield to a <div> element (voucherCode), you need <input type="text"> instead.
You need to add list to your form right away, onSubmit is too late. Just set it outside, similar to button and call myListView.setList when submitting the form.
These are the two things I spotted... if you still have problems please let us know about the error messages you get.
I have a <div id="test"><input type="button" value="OK" /></div> html tag.
I used:
((HasClickHandlers)RootPanel.get("test").getWidget(0)).addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert('sss');
}
}
I executed but no action.
Update:
package com.example.client;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.event.dom.client.*;
import com.google.gwt.user.client.*;
import com.google.gwt.user.client.ui.RootPanel;
public class ExampleWebApp implements EntryPoint {
public void onModuleLoad() {
((HasClickHandlers) RootPanel.get("test").getWidget(0)).addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
Window.alert("i got it");
}
});
}
}
HTML:
<table>
<tr>
<div id="test">
<input type=button onClick="" value='click here'>
</div>
</tr>
</table>
The GWT Button widget is a button tag and not a input tag. Which means you can't use the GWT Button widget in this case. To make it work you need to create your own widget, which can be based on the widget ButtonBase, but needs to be initialized with an InputElement object instead of a ButtonElement.
The next step to get tag from html is to add something similar to the static wrap method present in most widgets. Here is how it would be used in your example when the input would have been a button tag:
Button.wrap(RootPanel.get("test").getWidget(0).getElement()).addClickHandler(
new ClickHandler() {
#Override public void onClick(ClickEvent event) {
Window.alert('sss');
}
});
In you case you could add a wrap method to your custom input widget. See the Button widget implementation of te wrap method, it's the same, expect of course for the creation of the widget itself.
You can't just take an html button and try to add click handlers to it. You need to create the button using gwt code. Try:
<div id="test"></div>
And then:
Button button = new Button("OK");
RootPanel.get("test").add(button);
button.addClickHandler(new ClickHandler() {...});