Navigation in a table

Hi everyone,

I would like to improve the usability of a search workflow. I have a tabsheet where the first tab allows me to enter my search criteria and the second tab holds a table with the result.

When I have entered my criteria, ENTER activates the second tab sheet and I am supposed to browse the table result and hit ENTER to display the detail of the selected row.

Here are my problems:

  1. I have done something like myTable.focus() to make sure I can browse the table with the arrow keys but that does not work. Once I have selected an item with the mouse I can browse the table properly. If I hit TAB first then I can also browse the table.
  2. I want that ENTER does the same as a mouse click on the element (which is working now). Should I simply add a custom action on the table? I tried and it didn’t worked

Thanks,
S.

Hi

We did allomst the same by setting the table value.

Selecting next row:

tableExample.setValue(tableExample.nextItemId(tableExample.getValue())

Selecting previous row:

tableExample.setValue(tableExample.prevItemId(tableExample.getValue())

Maybe you can use the same…

Ah maybe setting the value would get the focus indeed.

Where are you invoking this code? In a custom action handler? How about selecting with enter?

Thx

Which Vaadin version are you using?

In 6.7.0.beta1, there are some table and focus related bugs that are targeted to be fixed for 6.7.0.rc1, so you might be have run into one of them.

Hi Henri,

We’re using 6.6.5. It feels like the table has the focus still but since the first row is not selected the navigation keys do not work. As far as ENTER is concerned, right now it reset the state to “no row selected and cursor just before the first row” which is exactly what I want to happen automatically when the table gets the focus through myTable.focus();

Use case:

Tab sheet opens with table result

User press down arrow key; first result is selected

User press enter, triggers a value change which will display the detail of that row in the right area of the screen (same as a click on the row actually)

Where can I find what ENTER does? Is it fully managed by the client-side widget?

Thanks.

Any idea? I am still stuck on that one.

Thanks

Because the keyboard navigation in Table is based on selection, you need to set the first row as selected before focusing the table to get the first row marked as selected.

To get an event when Enter is pressed, you can use a shortcut listener.

This is my test code that implements your use case as I understand it:

        final Table table = new Table();
        table.addContainerProperty("COL1", String.class, "Col1");
        table.setSelectable(true);
        table.addShortcutListener(new ShortcutListener("Test", KeyCode.ENTER,
                new int[0]
) {
            @Override
            public void handleAction(Object sender, Object target) {
                System.out.println(table.getValue() + " selected");
            }
        });

        table.addItem();
        table.addItem();

        Button focusButton = new Button("Focus table",
                new Button.ClickListener() {
                    public void buttonClick(ClickEvent event) {
                        table.select(table.getItemIds().iterator().next());
                        table.focus();
                    }
                });

        addComponent(table);
        addComponent(focusButton);

        focusButton.focus();

Thanks that worked !

However, I had to change the shortcut because ENTER was already used for a clickShorcut for a button in the same window.

I thought that shortcuts were related to the component who has focus. For instance, say that I have two tables in my window and enter is the shortcut for both of them. When I am browsing table A with the arrow keys and I hit enter it should trigger an event related to that table. If I go in table B, enter also works but enter triggers an event related to table B.

When the focus is outside these two tables, nothing happens.

Is this possible with Vaadin?

Thanks

Shortcut scope can be segmented at least with Panels and Windows - see
this Sampler example
.

Thanks. Added a panel around each table and it worked.