GWT checkbox hides/shows widget - gwt

How to add clickHandler to a gwt checkbox, so that when the checkbox is checked, a listbox is shown and when it is unchecked, the listbox disappears?
Following is what I have so far. When I check the checkbox, the list appears, but when I uncheck it, the listbox does not disappear.
VerticalPanel vPanel = new VerticalPanel();
ListBox list = new listBox();
list.setVisible(false);
vPanel.add(list);
.....
.....
checkBox.addClickHandler(new ClickHandler()
{
public void onClick(ClickEvent event)
{
boolean checked =((CheckBox) event.getSource()).isEnabled();
if(checked==true)
{
list.addItem("a");
list.addItem("b");
list.addItem("c");
list.setVisible(true);
}
else if(checked==false)
{
componentList.setVisible(false);
}
}
});
Thanks so much in advance.

A better way to do it is to do the value changed handler. The user can even use the keyboards to check the checkbox!
CheckBox c = new CheckBox();
c.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
#Override
public void onValueChange(ValueChangeEvent<Boolean> event) {
componentList.setVisible(event.getValue());
}
});
}
edit -
You should add the items in the list outside. And, depending on the default checkbox value,(checked or unchecked), set the component visible or hidden outside itself in the start.

enabled != checked! (use isChecked or getValue)
Otherwise, go with Bhat's code and advises.

Related

addValueChangeHandler of gxt ComboBox only fired on focus on another field

I have form with several GWT GXT 3 fields, one of which is a combo box.
When the combo box changes it should call a doSomething method.
My problem is that the onValueChange is only fired when I focus on another form field.
I would like that it changed just when I select an item of the combo box.
How can I do it?
This is part of my code.
final ComboBox<DropDownItemDTO> field = new ComboBox<DropDownItemDTO>(storeCombo, propsTitoliRioComboItemDTO.label());
...
field.addValueChangeHandler(new ValueChangeHandler<DropDownItemDTO>() {
#Override
public void onValueChange(ValueChangeEvent<DropDownItemDTO> event) {
if (event.getValue()!=null) {
value.setFieldValue(event.getValue().getValue());
} else {
value.setFieldValue("");
}
doSomething(event.getValue().getValue());
}
});
I ended up using SelectionHandler, which fires right away on selection
field.addSelectionHandler(new SelectionHandler<DropDownItemDTO>() {
#Override
public void onSelection(SelectionEvent<DropDownItemDTO> event) {

GXT3 - Editable Grid: display the row to edit in a popup

GXT3 - Grid: Adding a column with a button to modify row in Editable Grid
In the example the line is editable automatically when line is selected.
http://www.sencha.com/examples/#Exam...oweditablegrid
I want the line to be changed when I click on the edit button that would appear in a popup.
TextButtonCell button = new TextButtonCell();
button.addSelectHandler(new SelectHandler() {
#Override
public void onSelect(SelectEvent event) {
Context c = event.getContext();
Info.display("Event", "Call the popup here.");
}
});
nameColumn.setCell(button);
There is a way do get this?
Thanks in advance for your help.
First of all you have yo create a column with TextBoxCell which may you already created.
Then you have to disable default onclick editable behavior of grid.
For that as per Sencha example's file RowEditingGridExample.java you can override onClick event and prevent to fire default code.
public class RowEditingGridExample extends AbstractGridEditingExample {
#Override
protected GridEditing<Plant> createGridEditing(Grid<Plant> editableGrid) {
return new GridRowEditing<Plant>(editableGrid){
#Override
protected void onClick(ClickEvent event) {
}
};
}
}
And when you click on textBoxCell click handler you can start editing manually.
TextButtonCell button = new TextButtonCell();
button.addSelectHandler(new SelectHandler() {
#Override
public void onSelect(SelectEvent event) {
Context c = event.getContext();
//Here you can pass a new GridCell like with proper cell index and row index.
GridCell cell = new GridCell(getRowIndex(), getCellIndex());
editing.startEditng(cell);
}
});
nameColumn.setCell(button);
If you want to appear row editor in separate popup you have to design it manually.

How to programmatically open a gwt listbox?

I have a user form with a lot of gwt listbox. The form is like an excel form with named list.
It's ugly and the arrows take place.
I would like the cells were like in excel. The arrow appears only when you click in the cell.
I start to program my own widget with a textbox and a listbox embedded into a DeckPanel, switching when you click on the textbox or when the value change. But with this solution, it is necessary to click again to open the listbox.
Now, it will be great, if when you click on the textbox, the listbox will be displayed already open.
In the code below, I try to do this into the method onClick wih this line:
DomEvent.fireNativeEvent(event.getNativeEvent(), listBox);
But it has no effects.
public class CustomListBox extends Composite implements ClickHandler,
ChangeHandler, HasChangeHandlers {
private final StringListBox listBox;
private final TextBox textBox;
private final DeckPanel panel;
public CustomListBox() {
textBox = new TextBox();
textBox.addClickHandler(this);
textBox.setReadOnly(true);
listBox = new StringListBox();
listBox.addChangeHandler(this);
panel = new DeckPanel();
panel.add(textBox);
panel.add(listBox);
panel.showWidget(0);
// All composites must call initWidget() in their constructors.
initWidget(panel);
}
#Override
public void onClick(ClickEvent event) {
Object sender = event.getSource();
if (sender == textBox) {
panel.showWidget(1);
DomEvent.fireNativeEvent(event.getNativeEvent(), listBox);
}
}
public void addItem(String item) {
listBox.addItem(item);
}
public int getSelectedIndex() {
return listBox.getSelectedIndex();
}
public String getItemText(int selectedIndex) {
return listBox.getItemText(selectedIndex);
}
#Override
public HandlerRegistration addChangeHandler(ChangeHandler handler) {
return listBox.addChangeHandler(handler);
}
#Override
public void onChange(ChangeEvent event) {
Object sender = event.getSource();
if (sender == listBox) {
textBox.setText(getItemText(getSelectedIndex()));
panel.showWidget(0);
}
}
}
Since you are already programming your own widget, why don't you go all the way. Don't swap out the text box for a list box widget. Instead of a textbox use a label. Add an arrow to your label background when you mouse over, then use a popupPanel for the list itself. In the popupPanel you can make the list items whatever you like, just make sure when you click on it, it sets the text in your original label.

How to remove drag highlighting with GWT

is there way to remove drag highlighting within a GWT app without removing the capability to highlight GWT TextBox texts? Any ideas?
By adding a NativePreviewHandler and checking native events target to prevent default behaviour
final TextBox t = new TextBox();
t.setText("Can select me");
Label prevent = new Label("Can't select me");
RootPanel.get().add(t);
RootPanel.get().add(prevent);
Event.addNativePreviewHandler(new NativePreviewHandler() {
#Override
public void onPreviewNativeEvent(NativePreviewEvent event) {
EventTarget target = event.getNativeEvent().getEventTarget();
if (!target.equals(t.getElement())){
event.getNativeEvent().preventDefault();
}
}
});

GWT focus on a TextBox it not working

I am trying to focus on a particular list view in a tree, I am using the following code
this.txtListName.setCursorPos(this.txtListName.getText().length());
this.txtListName.setFocus(true);
The text view has the cursor blinking inside it but when I type a key nothing happens, I have to select the text view again before being able to type.
Why is this happening.
SOLVED
The setting the the focus was done inside a for loop that looped over and created the Tree Items, when I removed it from the for loop it worked.
Could it be that something in your current call stack is taking the focus away after you set it. You could try setting the focus in a timeout:
(new Timer() {
#Override
public void run() {
txtListName.setFocus(true);
}
}).schedule(0);
I've tried to recreate your problem but the following snippet works for me:
public void onModuleLoad() {
Tree tree = new Tree();
final TextBox box = new TextBox();
box.setText("some content");
tree.add(box);
Button btn = new Button("set focus");
btn.addClickHandler(new ClickHandler() {
#Override
public void onClick(ClickEvent event) {
box.setCursorPos(box.getText().length());
box.setFocus(true);
}
});
RootPanel.get().add(tree);
RootPanel.get().add(btn);
}
Isn't that what you're trying to achieve?