Keyboard navigation in GWT CellTable

问题:

We are attempting to create an editable grid using CellTable. The use case is fairly high volume data entry for accountants who are used to 10-key entry into spreadsheets. We are trying to replicate spreadsheet- style keyboard navigation as closely as possible.

1. Is there any way to avoid having to hit Enter to get into edit mode for a TextInputCell? I have tried overriding TextInputCell.onBrowserEvent() to call onEnterKeyDown() when a focus event is received, but that didn't work.

2. Is there any way to use Tab and Shift-Tab to navigate between columns instead of LEFT-ARROW and RIGHT-ARROW? CellTable seems to be hardcoded to use left and right arrows and difficult to extend.

回答1:

After quite a bit of work trying, we determined that CellTable was not extensible enough to do what we needed. We ended up extending GWT's Grid class, taking design cues from CellTable to make it perform well enough for our needs.

In our use case, 80% of page views will display less than 10 rows and we will never have more than 600 rows by 10 columns (< 0.5% of cases have more than 500 rows). Instead of a full-fledged flyweight pattern, we used a lazy loading pattern. When the Grid is initially populated, display-only widgets are used to show the data from the underlying value objects. A FocusHandler is attached to each display-only widget. When a user clicks or tabs into a display widget, the FocusHander swaps out the display-only widgets for that row with the editable widgets.

Display-only widgets are restricted to lightweight widgets such as TextBox and CheckBox, so rendering time is acceptable. 100 rows x 5 columns render in less than 2 seconds. SuggestBoxes, DateBoxes, and other Composites are limited to only being used as editable widgets.

Advantages

1. Flexibility to use any of the standard widgets
2. Extensibility - we're not limited by the implementation choices made in CellTable
3. Ease of development - prototyped in less than 3 days of development
4. Performs well enough to fit our needs
5. Tabs work out of the box as you would expect

Disadvantages

• Not as scalable as CellTable. This implementation is not going to render thousands of rows
• We have to maintain it ourselves