I am trying to attach a widget in GWT to an element. I see this example,
How to add a custom widget to an element
but when I use HTMLPanel.wrap() I get an UmbrellaException. Exception is happening on this line:
assert Document.get().getBody().isOrHasChild(element);
How do I get my element to be attached to the DOM? Below is the code I am using:
#UiField
TableElement tblBootstrap;
public void addRow() {
TableRowElement row = tblBootstrap.insertRow(-1);
TableCellElement c = row.insertCell(-1);
HTMLPanel.wrap(c).add(new TextBox());
}
Many Thanks,
Eric
Related
I want to add customized widgets into the cell tree, something like below:
>Label1
customized-widget
>Label2
customized-widget
>Label3
customized-widget
Under each label, there is a customized widget(extends composite)
I tried to use
public void render(
com.google.gwt.cell.client.Cell.Context context, Customizedwidget value, SafeHtmlBuilder sb) {
if(value!=null) sb.appendEscaped(value.getElement().getInnerHTML());
}
but, sb.appendEscaped(value.getElement().getInnerHTML()) is not working, it shows me a bunch of html or maybe javascript code when I click label.
I would like to know how I can solve this problem?
You can use SafeHtmlCell to include your own html content inside of the cell table's cell,
SafeHtmlCell html = new SafeHtmlCell();
final Column<DTO, SafeHtml> htmlContent = new Column<DTO, SafeHtml>(html) {
#Override
public SafeHtml getValue(DTO object) {
// code goes here
return new SafeHtml;
}
};
dataGrid.addColumn(htmlContent, "");
or you can use ButtonCell(to insert buttons), check other cell's also.
check this: GWT - Make CellTable Cell use HTML?
I am creating an Anchor as follows:
Anchor a = new Anchor( "Click Me" );
Then I add a click handler:
a.addClickHandler( new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
GWT.log("Anchor Clicked");
}
} );
I want to add the Anchor to a LI element. Since I don't have any Widgets for UL and LI, I use the following construct:
public class ElementPanel extends ComplexPanel {
public ElementPanel(String tagName) {
setElement(DOM.createElement(tagName));
}
#Override
public void add(Widget w) {
add(w, getElement());
}
}
I create my UL element:
ElementPanel ul = new ElementPanel(UListElement.TAG);
I create a LI element:
ElementPanel li = new ElementPanel(LIElement.TAG);
I add my Anchor to LI, then I add LI to UL (after which I add to the document):
li.add(a);
ul.add(li);
This works fine. If instead I change the previous lines as follows, I don't see a log message:
li.getElement().appendChild(a.getElement());
ul.add(li);
Similarly, if instead I try this, I also do not see a message:
li.add(a);
ul.getElement().appendChild(li.getElement());
Previously, I had the UL element in the UIBinder. But since I was not successful in adding a click handler to an Element, I have to resort to the above approach.
This is how events are handled in GWT: the widget needs to be attached, and that generally means adding it to a container chain up to a RootPanel. See https://code.google.com/p/google-web-toolkit/wiki/DomEventsAndMemoryLeaks#GWT's_Solution for the details.
The easiest way to have <ul><li> if your structure doesn't change dynamically is to use an HTMLPanel (and it's even easier with UiBinder).
If the structure is dynamic, then possibly make a ComplexPanel whose root element is a UListElement and which wraps all child widgets into a LIElement. Have a look at the internals of ComplexPanel, you'll see that it attaches and detaches the child widgets whenever they are added/removed while the panel itself is attached, or whenever the panel is attached / detached.
Im populating a table using ListView component in wicket.The last column of my table is button. So for each row I'll have a button in the last column.What I'm trying to implement is onlick of the button I need to delete the appropriate row. So for this I need to get the current index of the list on click of button. How to achieve/get this ?
I would extend Ajax button and pass the row reference (item) in the constructor...then you can do anything you want..by overriding the onSubmit method
Example:
private class SpecialButton extends AjaxButton {
final Item<Object> rowItem;
public SpecialButton(final String id, final Item<Object> rowItem) {
super(id);
this.rowItem = rowItem;
}
#Override
protected void onSubmit(final AjaxRequestTarget target, final Form<?> form) {
// here you cand do everything you want with the item and the model object of the item.(row)
Object object = rowItem.getModelObject();
}
}
You should replace Object from Item<Object> with your reapeater model. After creating this private class you can reuse it for every row in your repeater.
If you want to delete that row you just have to remove the model from the list used to generate the repeater and refresh the repeater container(Wicket does not allow you to refresh the repeater by adding it to the target...instead you have to add the repeater continer.)
Have a look at the repeaters Wicket Examples page to understand how to use ListView and other repeaters:
http://www.wicket-library.com/wicket-examples/repeater/
You can get the current index of the list from item.getIndex()
protected void populateItem(final ListItem<T> item) {
int index = item.getIndex();
...
Look here for inspirations on how to do it properly (without index):
Wicket ListView not refreshing
I have a bunch of TextBox-es generated dynamically. At the step of creation I'm assigning the ID property for them.
e.g.
id = ...
Button b = new Button();
b.setText("add textbox");
b.addClickHandler(new Clickhandler() {
Textbox tb = new TextBox();
tb.getElement().setId(Integer.toString(id));
tb.setText("some text");
}
id += 1;
I need to access them later by their IDs, but I cannot do it.
I tried to use the DOM object in order to get a widget, but it produces an exception:
String id = "some id";
Element el = DOM.getElementById(id);
String value = el.getAttribute("value"); - this line produces an exception.
I've also tried to use el.getInnerText, el.getNodeValue - no luck. I have see in the chrome debugger - the textboxes don't have the 'value' property.
you can get the widget associated to an element this way:
public static IsWidget getWidget(com.google.gwt.dom.client.Element element) {
EventListener listener = DOM
.getEventListener((com.google.gwt.dom.client.Element) element);
// No listener attached to the element, so no widget exist for this
// element
if (listener == null) {
return null;
}
if (listener instanceof Widget) {
// GWT uses the widget as event listener
return (Widget) listener;
}
return null;
}
Since you are constructing your textboxes in gwt java code, why not put them into a map and access them later?
One thing to keep in mind is the difference between an attribute and a property in HTML/DOM. In your example, "value" is a property. You could try Element#getPropertyString. It used to be that attributes and properties were used interchangeably, but in modern browsers that's no longer the case.
Is there any way to SuggestBox to CellTable? Maybe there is another solution then SuggestBox?
I need to get an editable cell with suggestion feature?
I'm using GWT 2.4.
I don't think you can add it directly in. Try using a ClickableTextCell as the cell for that column. Then code your ValueUpdater (which will be called when the cell is clicked) to open up a DialogBox. Put your SuggestBox, and other widgets (OK button, Cancel button, and such), inside that DialogBox. Initialize the SelectionBox with the current contents of the cell. The DialogBox will likely be a DialogBox subclass with extra state data you initialize with the object for that CellTable row as well as the field for that column, so that the OK action knows what field on what object to update with the new contents of the SuggestBox. Essentially it's a popup editor. Not ideal, because users will expect the editor to be embedded in the CellTable, but there are only a few cell editors available (EditTextCell, DatePickerCell, SelectionCell and CheckboxCell, and maybe another variant of text editing), but I've used this technique, and really, it's not too bad.
I ended up using FlexTable instead of CellTable. With FlexTable you may put any widget inside a table cell.
I needed this also and found a solution (under testing, but solong it is working):
I copied the Code from TextInputCell into a new Class SuggestBoxTextInputCell
public class SuggestBoxTextInputCell extends AbstractInputCell<String, SuggestBoxTextInputCell.ViewData> {
MySuggestBox suggestBox;
and added some lines to the onBrowserEvent method:
// Ignore events that don't target the input.
InputElement input = getInputElement(parent);
String eventType = event.getType();
if (BrowserEvents.FOCUS.equals(eventType)) {
TextBox textBox = new MyTextBox(input);
suggestBox = new MySuggestBox(getSuggestOracle(), textBox);
suggestBox.onAttach();
}
Element target = event.getEventTarget().cast();
The classes MySuggestBox and MyTextbox exist only to make the needed constructor and methods public:
private class MyTextBox extends TextBox {
public MyTextBox(Element element) {
super(element);
}
}
private class MySuggestBox extends SuggestBox {
public MySuggestBox(SuggestOracle suggestOracle, TextBox textBox) {
super(suggestOracle, textBox);
}
#Override
public void onAttach() {
super.onAttach();
}
}
getSuggestOracle() only delivers the needed SuggestOracle. Hope someone can use this solution.
I needed this as a solution so I play around with the solution provided by Ande Hofer.
The exact same issue met by Ankit Singla, when the suggestbox is working fine when I press "Enter" key, but not from the "Mouse Click".
I go on further and add-on this onto the solution.
if (BrowserEvents.FOCUS.equals(eventType)) {
...
...
suggestbox.addSelectionHandler(new SelectionHandler<Suggestion>() {
#Override
public void onSelection(SelectionEvent<Suggestion> event) {
Suggestion selectedSuggestion = event.getSelectedItem();
String selectedValue = selectedSuggestion.getReplacementString();
onSuggestSelected(input, selectedValue, valueUpdater);
}
});
suggestbox.onAttach();
}
and a private function
private void onSuggestSelected(Element input, String value,
ValueUpdater<String> valueUpdater) {
input.blur();
suggestbox.onDetach();
if (suggestbox.getSuggestionDisplay().isSuggestionListShowing()) {
((DefaultSuggestionDisplay) suggestbox.getSuggestionDisplay()).hideSuggestions();
}
valueUpdater.update(value);
}
So far so good.