focus & key board listner problem in cell table in gwt - gwt

I have one small problem i.e. one textbox is their when click on the text box the popup is shows below the text box.The popup contains celltable
i write keypresslisner for textbox when i press Down And UP arrow the focus is set to be cellTable And also we still press down and up arrows its highlites the rows in celltable
anyone please tell me how to solve it...it's my request
When I wrote code like this:
box.addKeyPressHandler(new KeyPressHandler() {
#Override
public void onKeyPress(KeyPressEvent event) {
if (event.getNativeEvent().getKeyCode() == 38) {
celltable.setFocus(true);
} else if (event.getNativeEvent().getKeyCode() == 40) {
celltable.setFocus(true);
}
}
});
only the focus is goes to the cell table

The question is a little bit unclear, but I think you may be helped by FocusPanel:
http://google-web-toolkit.googlecode.com/svn/javadoc/2.0/com/google/gwt/user/client/ui/FocusPanel.html
Wrap your CellTable in this FocusPanel and you can do setFocus() on that instead. The FocusPanel has addKeyPressHandler(), so you can capture further keypress events there, also when your textbox has lost the focus.

Related

Editable Label/Div losing focus on click

I have an editable GWT Label which shows a strange behavior. That is if I click the text “Add note…” the cursor does not appear until I click a second time. But if I click on the label outside the text the cursor appears on first click. How do I solve that? My guess is that replacing the text also removes the cursor when the cursor is in the text. So how can I get the cursor back on first click?
public class EditableLabel extends Label implements FocusHandler {
public EditableLabel() {
super();
getElement().setAttribute("contenteditable", "true");
getElement().setAttribute("tabindex", "1");
this.sinkEvents(Event.ONBLUR);
this.sinkEvents(Event.ONFOCUS);
addHandler(this, FocusEvent.getType());
setText("Add note...");
}
#Override
public void onFocus(FocusEvent event) {
setText("");
}
}
I think your problem depends on the browser. On FF it works fine for me.
I assume you want to write something, if so try to change Label for TextBox, it should work.

GWT: Back Button working twice, both by browser and my GWT code

The Scenario:
In my GWT webapp, I'm using KeyDownHandler to capture the event of user hitting backspace.
Say, I'm using it on widget 'B', and hitting the backpsace when widget 'B' is focused should take me to widget 'A'.
The Problem:
On hitting backspace, I'm taken to widget 'A', BUT only for a moment before the Browser takes me back to the previous page! I want my backspace event to be used only by my (GWT) code, not the browser.
final TextBox txtA = new TextBox();
TextBox txtB = new TextBox();
VerticalPanel testPanel = new VerticalPanel();
testPanel.add(txtA);
testPanel.add(txtB);
txtB.addKeyDownHandler(new KeyDownHandler() {
public void onKeyDown(KeyDownEvent event) {
if(event.getNativeKeyCode() == KeyCodes.KEY_BACKSPACE){
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
public void execute() {
txtA.setFocus(true);
}
});
}
}
});
RootPanel.get().add(testPanel);
This SO post might be usefull to you. However its still better to use shift+tab to navigate backwards in a web-based form IMHO.
You might have to prevent the default action from happening. And you might have to do it for some or all of the key events (keydown, keypress –in Firefox–, keyup); be sure to test as many browsers as possible!
That being said, hijacking global keyboard shortcuts is seen my many users as being too intrusive; and it might have consequences on accessibility of your app.

Add SuggestBox to CellTable as an editable cell

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.

Select text on click in EditorGridPanel (gwt-ext)

I have a gwt-ext EditorGridPanel, by clicking onto a cell, you can edit its value. The cursor is placed at the beginnig of the cell, but I want to select the whole text in this cell if the user clicks on it. Any idea how I can handle this?
I tried some Listeners etc. but none worked for me yet.
Sorry for my english, with Ext-GWT(GXT) it's posible doing this:
final TextField<String> text = new TextField<String>();
text.setAllowBlank(false);
CellEditor textEditor = new CellEditor(text);
textEditor.addListener(Events.StartEdit, new Listener<EditorEvent>() {
public void handleEvent(EditorEvent be) {
text.setSelectOnFocus(true);
}
});
column.setEditor(textEditor);
configs.add(column);
Just find the way in GWT-Ext, I think will something like this.....I hope this help....

How to group gwt composite widgets change events as one change event

If i have a GWT composite widget with three text boxes like for SSN, and i need to fire change event only when focus is lost from the widget as a whole, not from individual text boxes how to go about doing that?
If you want just the event when your whole widget loses focus (not the text boxes), then make the top level of your widget be a FocusPanel, and expose the events that it gives you.
You need to implement the Observer Pattern on your composite, and trigger a new notification everytime:
the focus is lost on a specific text box AND
the focus was not transferred to any of the other text boxes.
Couldn't you use a timer? On lost focus from a text box, start a 5ms (or something small) timer that when it hits, will check focus on all 3 TextBox instances. If none have focus, then you manually notify your observers. If one has focus, do nothing.
Put this in your Composite class:
private Map<Widget, Boolean> m_hasFocus = new HashMap<Widget, Boolean>();
And then add this to each one of your TextBox instances:
new FocusListener() {
public void onFocus(Widget sender) {
m_hasFocus.put(sender, Boolean.TRUE);
}
public void onLostFocus(Widget sender) {
m_hasFocus.put(sender, Boolean.FALSE);
new Timer() {
public void run() {
for (Boolean bool : m_hasFocus.values()) {
if (bool) { return; }
}
notifyObservers();
}
};
}
};