I have a SuggestionBox in GWT. Is there a way to clear it when it blurs (unless the user made a selection, in which case an action should happen)?
Add a BlurHandler:
suggestionBox.getValueBox().addBlurHandler(new BlurHandler() {
#Override
public void onBlur(BlurEvent event) {
// your code goes here
}
});
Try this one using ValueChangeHandler:
Note: ValueChange event has same behavior as Blue event but it is fired only if value is changed in SuggestBox.
class MyMultiWordSuggestOracle extends MultiWordSuggestOracle {
private Set<String> values = new HashSet<String>();
#Override
public void add(String value) {
super.add(value);
values.add(value);
}
#Override
public void clear(){
super.clear();
values.clear();
}
public boolean contains(String value) {
return values.contains(value);
}
}
You code:
final MyMultiWordSuggestOracle oracle = new MyMultiWordSuggestOracle();
oracle.add("A");
oracle.add("AB");
oracle.add("BCD");
oracle.add("BCDE");
final SuggestBox suggestionBox = new SuggestBox(oracle);
suggestionBox.addValueChangeHandler(new ValueChangeHandler<String>() {
#Override
public void onValueChange(ValueChangeEvent<String> event) {
if (!oracle.contains(event.getValue())) {
suggestionBox.setValue("");
}
}
});
Related
I've an combo box which is composed of a text field and a popup with a CellTable showing the suggestion items. The text field has a change handler that updates the CellTable's selection.
When typing a character and clicking an already selected suggestion, the first click is swallowed. The second click works and triggers the selection via the CellTable.addDomHandler(...).
Any idea why first click is swallowed?
Example code:
private static class SuggestFieldTextAndPopupSandbox extends SimplePanel {
private final TextField mText;
private CellTable<Handle<String>> mTable;
private SingleSelectionModel<Handle<String>> mTableSelection;
private SingleSelectionModel<Handle<String>> mSelection;
private ProvidesKey<Handle<String>> mKeyProvider = new SimpleKeyProvider<Handle<String>>();
private PopupPanel mPopup;
private List<Handle<String>> mData;
public SuggestFieldTextAndPopupSandbox() {
mData = Lists.newArrayList(new Handle<String>("AAA"), new Handle<String>("AAB"), new Handle<String>("ABB"));
mSelection = new SingleSelectionModel<Handle<String>>();
mText = new TextField();
mText.addKeyPressHandler(new KeyPressHandler() {
#Override
public void onKeyPress(KeyPressEvent pEvent) {
mPopup.showRelativeTo(mText);
}
});
mText.addBlurHandler(new BlurHandler() {
#Override
public void onBlur(BlurEvent pEvent) {
mTableSelection.setSelected(startsWith(mText.getValue()), true);
}
});
mText.addChangeHandler(new ChangeHandler() {
#Override
public void onChange(ChangeEvent pEvent) {
mText.setText(mText.getText().toUpperCase());
}
});
mTable = new CellTable<Handle<String>>(0, GWT.<TableResources>create(TableResources.class));
mTable.setTableLayoutFixed(false);
mTableSelection = new SingleSelectionModel<Handle<String>>(mKeyProvider);
mTable.setSelectionModel(mTableSelection);
mTable.addDomHandler(new ClickHandler() {
#Override
public void onClick(final ClickEvent pEvent) {
Scheduler.get().scheduleFinally(new ScheduledCommand() {
#Override
public void execute() {
mSelection.setSelected(mTableSelection.getSelectedObject(), true);
mText.setFocus(true);
mPopup.hide();
}
});
}
}, ClickEvent.getType());
mTable.addColumn(new TextColumn<Handle<String>>() {
#Override
public String getValue(Handle<String> pObject) {
return pObject.get();
}
});
mTable.setRowData(mData);
mPopup = new PopupPanel();
mPopup.setAutoHideEnabled(true);
mPopup.setWidget(mTable);
mPopup.setWidth("200px");
mPopup.setHeight("200px");
VerticalPanel p = new VerticalPanel();
p.add(mText);
setWidget(p);
}
private Handle<String> startsWith(final String pValue) {
final String val = nullToEmpty(pValue).toLowerCase();
int i = 0;
for (Handle<String> item : mData) {
String value = item.get();
if (value != null && value.toLowerCase().startsWith(val)) {
return item;
}
i++;
}
return null;
}
}
I reproduced your issue and here is the problem:
when you click on the suggestions the following is happening:
The text field is loosing focus which causes the corresponding ChangeEvent to be dealt with followed by the BlurEvent.
The click causes the popup to get the focus now which is why it is swallowed.
If you remove the ChangeHandler and the BlurHandler of the text field the issue disappears. But I think I found another solution
Try replacing the DOM handler of the mTable with a selection handler relative to the mTableSelection as follows:
mTableSelection.addSelectionChangeHandler(new Handler(){
#Override
public void onSelectionChange(SelectionChangeEvent event) {
Scheduler.get().scheduleFinally(new ScheduledCommand() {
#Override
public void execute() {
mSelection.setSelected(mTableSelection.getSelectedObject(), true);
mText.setFocus(true);
mPopup.hide();
}
});
}
});
Found a way how to properly solve this.
Skipping the blur handler when user hovers the suggestion list area seemed to fix that issue, at least from the tests that were done didn't see any more issues.
This was necessary because just before the user clicks a suggestion item, the text is blurred and it fires a selection change. This in turn cancels the selection made when user clicks an item.
I have two buttons(edit + delete) in one column.
ButtonCell functionButtonCell = new ButtonCell() {
#Override
public void render(final Context context, final SafeHtml data, final SafeHtmlBuilder sb) {
sb.appendHtmlConstant("<button type='button' class='gwt-Button' style = 'width:60px;margin:1px;'>Edit</button>");
sb.appendHtmlConstant("<br/>");
sb.appendHtmlConstant("<button type='button' class='gwt-Button' style = 'width:60px;margin:1px;'>Delete</button>");
}
};
functionColumn = new Column<AdminModel, String>(functionButtonCell) {
public String getValue(final AdminModel object) {
return object.getSeq().toString();
}
};
Bind event for this column in Presenter as
.........
view.getFunctionColumn().setFieldUpdater(new FieldUpdater<AdminModel, String>() {
public void update(final int index, final AdminModel object, final String value) {
Window.alert(index + "-" + value);
}
});
After clicked on edit button , alert-box has appeared , but not on delete button. When I clicked on delete button , nothing has appeared. What would be the problem ?
Addition: How can I decide which button was clicked by user (edit or delete) from my presenter ?
I would really appreciate any of your suggestions because I am troubled on it for a long times. Thanks!
ButtonCell filters events on the first child element only: https://gwt.googlesource.com/gwt/+/2.6.1/user/src/com/google/gwt/cell/client/ButtonCell.java This is why you don't get an event when clicking the second button (note: the goal of that code is to make sure you clicked on the button, and not on blank space around the button; see https://gwt.googlesource.com/gwt/+/a0dc88c8be7408be9554f746eb1ec93798183a28)
The easiest way to implement a two-button cell is to use a CompositeCell; it requires that child cells are rendered into sibling elements though (uses <span>s by default, example below overrides the rendering to use <div>s so your buttons stack each on its own line).
new CompositeCell<AdminModel>(Arrays.asList(
// First button
new HasCell<AdminModel, String>() {
#Override public Cell<String> getCell() { return new ButtonCell(); }
#Override public FieldUpdated<AdminModel, String> getFieldUpdater() {
return new FieldUpdater<AdminModel, String>() {
#Override public void update(int index, AdminModel object, String value) {
Window.alert("Edit " + object.getId());
}
};
}
#Override public String getValue(AdminModel o) {
return "Edit";
}
},
// Second button
new HasCell<AdminModel, String>() {
#Override public Cell<String> getCell() { return new ButtonCell(); }
#Override public FieldUpdated<AdminModel, String> getFieldUpdater() {
return new FieldUpdater<AdminModel, String>() {
#Override public void update(int index, AdminModel object, String value) {
Window.alert("Delete " + object.getId());
}
};
}
#Override public String getValue(AdminModel o) {
return "Delete";
}
}) {
#Override protected <X> void render(Cell.Context context, AdminModel value, SafeHtmlBuilder sb, HasCell<String,X> hasCell) {
// use a <div> instead of the default <span>
Cell<X> cell = hasCell.getCell();
sb.appendHtmlConstant("<div>");
cell.render(context, hasCell.getValue(value), sb);
sb.appendHtmlConstant("</div>");
}
};
(note: in your case, because the button's text doesn't depend on the row object, maybe you should rather use an ActionCell; it would better fit "semantically" with what you're doing, but otherwise it's almost the same; with an ActionCell, you'd use HasCell<AdminModel, AdminModel>, ActionCell<AdminModel>, getFieldUpdater would return null, and thegetValueof theHasCellwould just return theAdminModel` argument as-is).
Otherwise, implement your Cell (or AbstractCell) entirely by yourself.
Ideally, a column should have only one type of cell be it ImageCell, ButtonCell etc. Because all this ImageCell and ButtonCell does not provide any in-built events. The events are handled by FieldUpdater itself which does not have differentiators to identify that which ButtonCell is clicked. Ideally on click of that column, the field-updater will be called.
You should rather create your own composite widget which extends HasCell. This composite widget will have two different buttons and those in built methods are called on click of respective button.
public void onModuleLoad() {
CellTable<Person> table = new CellTable<Person>();
List<HasCell<Person, ?>> cells = new LinkedList<HasCell<Person, ?>>();
cells.add(new ActionHasCell("Edit", new Delegate<Person>() {
#Override
public void execute(Person object) {
// EDIT CODE
}
}));
cells.add(new ActionHasCell("Delete", new Delegate<Person>() {
#Override
public void execute(Person object) {
// DELETE CODE
}
}));
CompositeCell<Person> cell = new CompositeCell<Person>(cells);
table.addColumn(new TextColumn<Person>() {
#Override
public String getValue(Person object) {
return object.getName()
}
}, "Name");
// ADD Cells for Age and Address
table.addColumn(new Column<Person, Person>(cell) {
#Override
public Person getValue(Person object) {
return object;
}
}, "Actions");
}
private class ActionHasCell implements HasCell<Person, Person> {
private ActionCell<Person> cell;
public ActionHasCell(String text, Delegate<Person> delegate) {
cell = new ActionCell<Person>(text, delegate);
}
#Override
public Cell<Person> getCell() {
return cell;
}
#Override
public FieldUpdater<Person, Person> getFieldUpdater() {
return null;
}
#Override
public Person getValue(Person object) {
return object;
}
}
Also, see the link below.
[GWT CellTable-Need to have two buttons in last single cell of each row
Can you please tell me when a widget's OnUnload() is called?
I tried to override it however, it is never been accessed. Also what is the best way to unload a composite, I am using RootPanel.get("Dev1").clear();
If you want to stop the timer when you leave the page then use CloseHandler.
This handler is called while page closing and refreshing.
Window.addCloseHandler(new CloseHandler<Window>() {
#Override
public void onClose(CloseEvent<Window> event) {
timer.cancel();
}
});
If you want to stop the timer when clearing a vertical panel then use removeFromParent.
This overridden method is to be called when any widget is removed form its parent.
private Timer timer = null;
/*
* This is the entry point method.
*/
public void onModuleLoad() {
final Label label = new Label("Hello ") {
#Override
public void removeFromParent() {
if (timer != null && this.isAttached()) {
timer.cancel();
System.out.println("timer is stopped");
}
super.removeFromParent();
}
};
timer = new Timer() {
#Override
public void run() {
label.setText("Hello " + (int) (Math.random() * 100));
}
};
timer.scheduleRepeating(500);
final VerticalPanel verticalPanel = new VerticalPanel();
verticalPanel.add(label);
Button button = new Button("Remove Label");
button.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
label.removeFromParent();
}
});
verticalPanel.add(button);
RootPanel.get().add(verticalPanel);
}
As per you comments try below code where clear method is overridden for VerticalPanel.
final VerticalPanel verticalPanel = new VerticalPanel(){
#Override
public void clear(){
if(this.isAttached()){
timer.cancel();
}
super.clear();
}
};
verticalPanel.getElement().setId("Div1");
I'm trying to drop my draggable widgets out of the boundary panel (AbsolutePanel). In my case draggable widgets is an image. And I want to drop it, so that there will be visible only a part of the image, but when I drop it, and some parts of image beyond absolute panel, it drop automatically within absolute panel.
I tried :
dragController.setBehaviorConstrainedToBoundaryPanel(false);
and thought it means that I can drop it where ever I want, but it doesn't work.
And the working solution :)
Here is my code:
public class myEntripointClass implement EntryPOint{
AbsolutePanel droper;
public void onModuleLoad() {
Panel main = new AbsolutePanel();
droper = new AbsolutePanel();
droper.setHeight("300px");
droper.setWidth("500px");
main.add(droper);
content=new AbsolutePanel();
bt = new Button("Drag and drop it");
content.add(bt);
lb = new Label("Label drag and drop");
content.add(lb);
main.add(content);
manageDnD();
RootPanel.get().add(main);
}
private void manageDnD() {
PickupDragController dragController = new PickupDragController(
(AbsolutePanel) content, true);
dragController.makeDraggable(bt);
dragController.makeDraggable(lb);
dragController.addDragHandler(new DragHandler() {
#Override
public void onPreviewDragStart(DragStartEvent event)
throws VetoDragException {}
#Override
public void onPreviewDragEnd(DragEndEvent event) throws VetoDragException {}
#Override
public void onDragStart(DragStartEvent event) {
}
#Override
public void onDragEnd(DragEndEvent event) {
// TODO Auto-generated method stub
DragContext context = event.getContext();
int x=context.mouseX;
int y= context.mouseY;
droper.add(context.selectedWidgets.get(0),x,y);
}
});
NameDropController dropController = new NameDropController(droper);
dragController.registerDropController(dropController);
dragController.setBehaviorDragProxy(true);
}
and my DropController class is:
public class NameDropController extends AbstractDropController{
public NameDropController(Widget dropTarget) {
super(dropTarget);
}
#Override
public void onDrop(DragContext context) {
int x=getDiff(getDropTarget().getAbsoluteLeft(), context.mouseX);
int y=getDiff(getDropTarget().getAbsoluteTop(), context.mouseY);
((AbsolutePanel)getDropTarget()).add(context.selectedWidgets.get(0),x,y);
System.out.print("("+context.mouseX+"::,::"+context.mouseY+")");
}
#Override
public void onMove(DragContext context){
}
private int getDiff(int val1,int val2){
return Math.abs(val1-val2);
}
}
I am using Cell Table of GWT 2.2 version. I want to get the name of the header column on which I have clicked. I didn't get any click event on the same.
Is there any work around by which I can accomplish my task.
Something like this? ;)
public class CellTableExample implements EntryPoint, ClickHandler {
private static class SomeEntity {
/* ... */
}
private static class ClickableTextHeader extends TextHeader {
private ClickHandler handler;
public ClickableTextHeader(String text, ClickHandler handler) {
super(text);
this.handler = handler;
}
#Override
public void onBrowserEvent(Context context, final Element elem,
final NativeEvent event) {
//maybe hijack click event
if(handler != null) {
if(Event.ONCLICK == Event.getTypeInt(event.getType())) {
handler.onClick(new ClickEvent() {
{
setNativeEvent(event);
setRelativeElement(elem);
setSource(ClickableTextHeader.this);
}
});
}
}
//default dom event handler
super.onBrowserEvent(context, elem, event);
}
}
CellTable<SomeEntity> cellTable;
TextColumn<SomeEntity> firstColumn;
TextColumn<SomeEntity> secondColumn;
TextColumn<SomeEntity> thirdColumn;
#Override
public void onModuleLoad() {
/* somehow init columns - it's not the point for this example */
cellTable.addColumn(firstColumn, new ClickableTextHeader("First column header", this));
cellTable.addColumn(secondColumn, new ClickableTextHeader("Second column header", this));
cellTable.addColumn(thirdColumn, new ClickableTextHeader("Third column header", this));
}
#Override
public void onClick(ClickEvent event) {
ClickableTextHeader source = (ClickableTextHeader) event.getSource();
Window.alert(source.getValue());
}
}
Hijacking event could look simpler if we used "simple listener interface" - i just wanted to be "semanticaly compliant with out-of-the-box Handlers" :)