Question

我经常使用rich-faces来创建用户界面，最近我通过了vaadin。现在我正在寻找vaadin中的垂直menù，是否有这种组件？

Rich-faces有以下内容：

http://showcase.richfaces.org/richfaces/component-sample.jsf?demo=panelMenu&skin=blueSky

Answer 1

如果您使用的是vaadin 6.2+，则可以使用此附加组件：

https://vaadin.com/directory#addon/melodion

但我想你正在使用vaadin 7，所以你可以通过

获得相同的结果

更新此附加组件（应该很简单）
使用手风琴组件：https://vaadin.com/book/vaadin7/-/page/layout.accordion.html

Answer 2

不幸的是，vaadin只提供了一个菜单栏。

如果您有html和css方面的经验，可以创建自己的垂直菜单，然后使用vaadin CustomLayout将其嵌入到面板中。

例如，您可以尝试这样的事情。

您应该创建一个html文件：

<table width="100%" height="100%">
  <tr height="100%">
    <td>
      <table align="center">
        <tr>
          <td align="left">Menu 1</td>
          <td><div location="menu1"></div></td>
        </tr>
        <tr>
          <td align="right">Menu2</td>
          <td><div location="menu2"></div></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

然后你应该以这种方式将它嵌入vaadin：

// Have a Panel where to put the custom layout.
Panel panel = new Panel("Menu");
panel.setSizeUndefined();
main.addComponent(panel);

// Create custom layout from "yourfile.html" template.
CustomLayout custom = new CustomLayout("layoutname");

//the style name refers the one you should define in css
custom.addStyleName("customlayoutexample");

// Use it as the layout of the Panel.
panel.setContent(custom);

// Create a few components and bind them to the location tags
// in the custom layout.
TextField menu1 = new TextField();
custom.addComponent(menu1, "menu1");


TextField menu2 = new TextField();
custom.addComponent(menu2, "menu2");

注意绑定位置名称和组件名称。

如果你想将一些javascript添加到xml（对于打开/关闭菜单元素），你应该直接在tag属性中编写它。

在vaadin中有垂直菜单吗？

2 个答案: