如何在 cuba 平台上实现三点菜单？

Question

我怎样才能在每个表格行中实现一个垂直的三点菜单，就像这张图片中的一样？

Answer 1

CUBA.platform没有提供按钮单击上下文菜单的内置组件，但可以使用Vaadin ContextMenu类轻松实现。

主要概念如下：

1. 展开 Vaadin 组件：

CubaButton vButton = button.unwrap(CubaButton.class);

2. 为此组件创建上下文菜单并添加菜单项：

ContextMenu contextMenu = new ContextMenu(vButton, true);

contextMenu.addItem("Item", (MenuBar.Command) selectedItem -> {
   // handle menu item click
});
...

3. 单击按钮时以编程方式显示上下文菜单：

vButton.setClickHandler(clickEvent ->
        contextMenu.open(clickEvent.getClientX(), clickEvent.getClientY()));

您可以在生成的表列中使用这种方法。假设我们需要一个显示所有数据的单列表。

XML 定义

<table id="usersTable"
       dataContainer="usersDc"
       columnHeaderVisible="false"
       stylename="no-stripes"
       width="250px"
       height="400px">
    <columns>
        <column id="column"/>
    </columns>
    <buttonsPanel>
        <button caption="Share" icon="USER_PLUS" stylename="borderless"/>
        <button caption="Preview" icon="EYE" stylename="borderless"/>
    </buttonsPanel>
</table>

Java 控制器

@UiController("demo_Sandbox")
@UiDescriptor("sandbox.xml")
public class Sandbox extends Screen {

    @Inject
    private UiComponents uiComponents;
    @Inject
    private Notifications notifications;
    @Inject
    private MetadataTools metadataTools;

    @Install(to = "usersTable.column", subject = "columnGenerator")
    private Component usersTableColumnColumnGenerator(User user) {
        HBoxLayout rootLayout = uiComponents.create(HBoxLayout.class);
        rootLayout.setMargin(new MarginInfo(true, false, true, false));
        rootLayout.setSpacing(true);
        rootLayout.setWidthFull();

        VBoxLayout content = uiComponents.create(VBoxLayout.class);
        content.setSpacing(true);

        Label<String> login = uiComponents.create(Label.TYPE_STRING);
        login.setValue("Login: " + user.getLogin());

        Label<String> name = uiComponents.create(Label.TYPE_STRING);
        name.setValue("Name: " + user.getName());

        content.add(login, name);

        LinkButton contextMenu = uiComponents.create(LinkButton.class);
        contextMenu.setIconFromSet(CubaIcon.ELLIPSIS_V);
        contextMenu.setAlignment(Alignment.TOP_RIGHT);
        setupContextMenu(contextMenu, user);

        rootLayout.add(content, contextMenu);

        return rootLayout;
    }

    private void setupContextMenu(LinkButton button, User user) {
        CubaButton vButton = button.unwrap(CubaButton.class);

        ContextMenu contextMenu = new ContextMenu(vButton, true);
        addMenuItem(contextMenu, "Rename", user);
        addMenuItem(contextMenu, "Delete", user);
        addMenuItem(contextMenu, "Open", user);

        vButton.setClickHandler(clickEvent ->
                contextMenu.open(clickEvent.getClientX(), clickEvent.getClientY()));
    }

    private void addMenuItem(ContextMenu contextMenu, String caption, User user) {
        contextMenu.addItem(caption, (MenuBar.Command) selectedItem ->
                notifications.create()
                        .withCaption(caption + ": " + metadataTools.getInstanceName(user))
                        .show());
    }
}

结果