面板内的 Vaadin 焦点网格

Question

我有两个网格（都在其自己的面板中），并希望使用 Tab 键在它们之间导航。

为此，我试图将网格集中在面板内（如果按下 Tab，网格应该获得焦点，因此我可以使用向上/向下键来选择项目）。

Vaadin 没有为 Grid 提供 .focus() 方法。有什么解决方案可以让我专注于网格吗？

Answer 1

这是一个小例子，展示了使用

的工作场景

1. Tab 按下键
2. 向下/向上箭头应指向一行（确切地说，在 Valo 中，这表示为围绕一个单元格的轮廓）
3. 空格使行被选中（如果Grid 已启用选择！）- 应突出显示行。

代码示例：

@Theme ( ValoTheme.THEME_NAME )
public class MyUI extends UI {
    public class A {
        String a;
        String b;
        A(String a, String b) {
            this.a = a;
            this.b = b;
        }
        // getters & setters
    }

    @Override
    protected void init ( VaadinRequest vaadinRequest )
    {
        Grid g = new Grid();
        List<A> list = Arrays.asList(new A("a", "b"), new A("aa", "bb"), 
                                     new A("aaa", "bbb"));
        BeanItemContainer<A> items = new BeanItemContainer<>(A.class, list);
        g.setContainerDataSource(items);

        Panel p = new Panel(g);
        setContent(p);
    }
}

已测试：Vaadin 7.5、Java 8、Tomcat 8。

您可以尝试使用：

setFocusedComponent(p);

在setContent(p) 之后。这应该准确地告诉 Vaadin 使面板集中。但是您仍然必须按一次或多次 tab（取决于您放置在屏幕上的其余组件）。

但请确保：

1. 网格是可选的。
2. 也许您应该多次按Tab。
3. 取决于Theme，获得焦点（甚至选择状态）可能会有不同的效果。也有可能您使用了一些已阻止 grid css 的预定义项目以使其更轻。因此，请检查是否可以通过单击突出显示某一行。

如果没有更多信息，我无能为力。

Answer 2

OP 在编辑中写入：

使用 Javascript/Jquery 解决了这个问题。将此添加到包含网格的面板中：

public class FileTable extends Panel
   {

   String id;
   public FileTable(String id)
   {
    this.id=id;
    Grid table = new Grid();
    initGrid();
    fileTable.setId(id);
   }

   public void focus()
   {
     JavaScript.getCurrent().execute("$(\"#"+id+" table:first td:first\").click();");
   }
}