GWT CellList setKeyboardSelected - gwt

I am trying to programmatically change the "highlighted" item in my CellList, based on keyboard events in another control (a textbox). I can get the keyboard events just fine, but when I use CellList...
int row = getKeyboardSelectedRow() + 1;
setKeyboardSelected(row,selected,stealFocus)
It doesn't have any affect. If I put focus on my cellList indeed, I can move up and down and highlight a row. If I put true for "stealFocus" on the setKeyboardSelected() method, it "works", except I really want to keep focus on the textbox, rather than the cellList. How do I do this? I've attempted fireEvents, sending the keystrokes to the CellList, but that doesn't help either.
J

I have no immediate solution, but if I were you I'd step through the code of setKeyBoardSelected in com.google.gwt.user.cellview.client.AbstractCellTable in debug mode.
Maybe this is where it's going wrong?
if (KeyboardSelectionPolicy.DISABLED == getKeyboardSelectionPolicy()
|| !isRowWithinBounds(index) || columns.size() == 0) {
return;
}

Related

React-Bootstap-Typeahead: Manually set custom display value in onChange() upon menu selection

In the onChange of React-Bootstrap-Typeahead, I need to manually set a custom display value. My first thought was to use a ref and do something similar to the .clear() in this example.
But although .clear() works, inputNode.value = 'abc' does not work, and I'm left with the old selected value from the menu.
onChange={option => {
typeaheadRef.current.blur(); // This works
typeaheadRef.current.inputNode.value = 'abc'; // This does not work (old value is retained)
}}
I also tried directly accessing the DOM input element, whose ID I know, and doing
var inputElement = document.querySelector('input[id=myTypeahead]');
inputElement.value = 'abc';
But that didn't work either. For a brief second, right after my changed value = , I do see the new display label, but then it's quickly lost. I think the component saves or retains the menu-selected value.
Note: I cannot use selected, I use defaultSelected. I have some Formik-related behavior that I've introduced, and it didn't work with selected, so I'm stuck with defaultSelected.
The only workaround I found is to re-render the Typeahead component (hide and re-show, from a blank state) with a new defaultSelected="abc" which is a one-time Mount-time value specification for the control.
I couldn't get selected=.. to work, I have a wrapper around the component which makes it fit into Formik with custom onChange and onInputChange and selected wasn't working with that.
So the simple workaround that works is, if the visibility of the Typeahead depends on some condition (otherwise it won't be rendered), use that to momentarily hide and re-show the component (a brand new repaint) with a new defaultSelected, e.g.
/* Conditions controlling the visibility of the Typeahead */
!isEmptyObject(values) &&
(values.approverId === null || (values.approverId !== null && detailedApproverUserInfo)
)
&&
<AsyncTypehead defaultSelected={{...whatever is needed to build the string, or the literal string itself...}}
..
// Given the above visibility condition, we'll hide/re-show the component
// The below will first hide the control in React's renders
setFieldValue("approver", someId);
setDetailedUserInfo(null);
// The below will re-show the control in React's renders, after a small delay (a fetch)
setDetailedUserInfo(fetchDetailedUserInfo());

jQuery Chosen - Is there a way to let the scroll box open after selected an item?

I would like to know if we can let the scroll box open after having selected an item. In other words, the same behavior of if we hold the CTRL key and a selected item.
I don't think it's possible without chosen script modification.
In jquery.chosen.js look for something like this (line ~955):
if (!((evt.metaKey || evt.ctrlKey) && this.is_multiple)) {
this.results_hide();
}
Modify it for your needs, maybe something like:
Add new option named stay_opened (line ~155):
this.stay_opened = this.options.stay_opened != null ? this.options.stay_opened : true;
And modify mentioned code:
if (!((evt.metaKey || evt.ctrlKey || this.stay_opened) && this.is_multiple)) {
this.results_hide();
}
Note that it will work for multiple mode only (but you can change that too).

How can I switch between UIReturnKeyGo and UIReturnKeyNext when text has been added to the UITextFields?

I'm trying to switch between the UIReturnKeyGo and the UIReturnKeyNext buttons depending on whether or not the user has entered some text in the fields or not, but it's not working the way I was hoping it would. Here's what I'm doing.
I created the following method:
- (void)setReturnKey {
if (self.isLoggingIn) {
if ([self.userField.text length] > 0 ||
[self.passField.text length] > 0) {
self.userField.returnKeyType = UIReturnKeyGo;
self.passField.returnKeyType = UIReturnKeyGo;
} else {
self.userField.returnKeyType = UIReturnKeyNext;
self.passField.returnKeyType = UIReturnKeyNext;
}
}
}
Then I added the above method to the textFieldDidBeginEditing delegate method, which will run anytime a field becomes active, and I created a textFieldDidChange method that is executed anytime text is entered or deleted. Unfortunately this is not working the way I hoped it would. The go button only appears when both fields are filled out and you actively click on another field, it doesn't update when you begin typing. So I can type in my username, then click next and start typing in my password, but the go button doesn't appear when I start entering my password, it will only show if I click the user field again.
Any idea what I'm doing wrong here or if there's a better way to accomplish this?
This is a bad idea. You'll just confuse the users. Keep the User field as Next and the Pass field as Go.

group of gwt listbox when one is selected others should un selected

I want to create a custom component which can have N number of ListBoxes and when one List box is selected then others should be un selected. is there way to do it.. can any one suggest me.
Thanks in advance!!
Yes you can do this.
One way to do this is and internal event bus-
1) Create an event bus for the custom widget.
2) Create a custom selected event
3) Each listbox that gets created should register a handler with this event bus for the custom selected event.
4) If a list gets selected/ focused on (whenever you want others to be deselected), it will fire the custom selected event on the event bus with its Id.
5) The other list boxes will receive this event, check if it came from them, if not, will deselect/ set selection null
Another way, rather than have the event bus control it, is to create a custom function that gets called on selection, this function will have to go through all the lists and deselect them.
Jai gave you some good ideas, but here is my code for similar functionality (not N ListBoxes, but you should be able to extend/generalize it):
#UiHandler({ "listBox1", "listBox2" })
public void onFocus(FocusEvent e) {
// If one ListBox has an item selected, and the user click's the other, unselect previous (mutually exclusive).
if (listBox1.getSelectedIndex() > -1 || listBox2.getSelectedIndex() > -1) {
if (listBox1.getSelectedIndex() > -1 && e.getRelativeElement() == listBox2.getElement()) {
listBox1.setSelectedIndex(-1);
}
else if (listBox2.getSelectedIndex() > -1 && e.getRelativeElement() == listBox1.getElement()) {
listBox2.setSelectedIndex(-1);
}
}
}
As you can see, I used the UiHandler syntax, and I performed the "is selected" check during the onFocus event. In English:
If any ListBox has an item selected (if no ListBox has an item selected, no sense in checking all of them).
If ListBox 1 has an item selected, and the (focus) event came from any other ListBox:
Yes - deselect ListBox 1 item
No - repeat step 2 for ListBox 2 ... N

Using Eclipse TableViewer, how do I navigate and edit cells with arrow keys?

I am using a TableViewer with a content provider, label provider, a ICellModifier and TextCellEditors for each column.
How can I add arrow key navigation and cell editing when the user selects the cell? I would like this to be as natural a behavior as possible.
After looking at some of the online examples, there seems to be an old way (with a TableCursor) and a new way (TableCursor does not mix with CellEditors??).
Currently, my TableViewer without a cursor will scroll in the first column only. The underlying SWT table is showing cursor as null.
Is there a good example of TableViewer using CellEditors and cell navigation via keyboard?
Thanks!
I don't know if there is a good example. I use a cluster of custom code to get what I would consider to be basic table behaviors for my application working on top of TableViewer. (Note that we are still targetting 3.2.2 at this point, so maybe things have gotten better or have otherwise changed.) Some highlights:
I do setCellEditors() on my TableViewer.
On each CellEditor's control, I establish what I consider to be an appropriate TraverseListener. For example, for text cells:
cellEditor = new TextCellEditor(table, SWT.SINGLE | getAlignment());
cellEditor.getControl().addTraverseListener(new TraverseListener() {
public void keyTraversed(TraverseEvent e) {
switch (e.detail) {
case SWT.TRAVERSE_TAB_NEXT:
// edit next column
e.doit = true;
e.detail = SWT.TRAVERSE_NONE;
break;
case SWT.TRAVERSE_TAB_PREVIOUS:
// edit previous column
e.doit = true;
e.detail = SWT.TRAVERSE_NONE;
break;
case SWT.TRAVERSE_ARROW_NEXT:
// Differentiate arrow right from down (they both produce the same traversal #*$&#%^)
if (e.keyCode == SWT.ARROW_DOWN) {
// edit same column next row
e.doit = true;
e.detail = SWT.TRAVERSE_NONE;
}
break;
case SWT.TRAVERSE_ARROW_PREVIOUS:
// Differentiate arrow left from up (they both produce the same traversal #*$&#%^)
if (e.keyCode == SWT.ARROW_UP) {
// edit same column previous row
e.doit = true;
e.detail = SWT.TRAVERSE_NONE;
}
break;
}
}
});
(For drop-down table cells, I catch left and right arrow instead of up and down.)
I also add a TraverseListener to the TableViewer's control whose job it is to begin cell editing if someone hits "return" while an entire row is selected.
// This really just gets the traverse events for the TABLE itself. If there is an active cell editor, this doesn't see anything.
tableViewer.getControl().addTraverseListener(new TraverseListener() {
public void keyTraversed(TraverseEvent e) {
if (e.detail == SWT.TRAVERSE_RETURN) {
// edit first column of selected row
}
}
});
Now, how exactly I control the editing is another story. In my case, my whole TableViewer (and a representation of each column therein) is loosely wrapped up in a custom object with methods to do what the comments above say. The implementations of those methods ultimately end up calling tableViewer.editElement() and then checking tableViewer.isCellEditorActive() to see if the cell was actually editable (so we can skip to the next editable one if not).
I also found it useful to be able to programmatically "relinquish editing" (e.g. when tabbing out of the last cell in a row). Unfortunately the only way I could come up with to do that is a terrible hack determined to work with my particular version by spelunking through the source for things that would produce the desired "side effects":
private void relinquishEditing() {
// OMG this is the only way I could find to relinquish editing without aborting.
tableViewer.refresh("some element you don't have", false);
}
Sorry I can't give a more complete chunk of code, but really, I'd have to release a whole mini-project of stuff, and I'm not prepared to do that now. Hopefully this is enough of a "jumpstart" to get you going.
Here is what has worked for me:
TableViewerFocusCellManager focusCellManager = new TableViewerFocusCellManager(tableViewer,new FocusCellOwnerDrawHighlighter(tableViewer));
ColumnViewerEditorActivationStrategy actSupport = new ColumnViewerEditorActivationStrategy(tableViewer) {
protected boolean isEditorActivationEvent(ColumnViewerEditorActivationEvent event) {
return event.eventType == ColumnViewerEditorActivationEvent.TRAVERSAL
|| event.eventType == ColumnViewerEditorActivationEvent.MOUSE_DOUBLE_CLICK_SELECTION
|| (event.eventType == ColumnViewerEditorActivationEvent.KEY_PRESSED && event.keyCode == SWT.CR)
|| event.eventType == ColumnViewerEditorActivationEvent.PROGRAMMATIC;
}
};
I can navigate in all directions with tab while editing, and arrow around when not in edit mode.
I got it working based on this JFace Snippet, but I had to copy a couple of related classes also:
org.eclipse.jface.snippets.viewers.TableCursor
org.eclipse.jface.snippets.viewers.CursorCellHighlighter
org.eclipse.jface.snippets.viewers.AbstractCellCursor
and I don't remember exactly where I found them. The is also a org.eclipse.swt.custom.TableCursor, but I couldn't get that to work.
Have a look at
Example of enabling Editor Activation on a Double Click.
The stuff between lines [ 110 - 128 ] add a ColumnViewerEditorActivationStrategy and TableViewerEditor. In my case the I wanted a single click to begin editing so i changed line 115 from:
ColumnViewerEditorActivationEvent.MOUSE_DOUBLE_CLICK_SELECTION
to ColumnViewerEditorActivationEvent.MOUSE_CLICK_SELECTION. After adding this to my TableViewer, the tab key would go from field to field with the editor enabled.