歌剧般的 UI - 我要求

Question

对于带有 neo4j 数据库的 vaadin 应用程序，我得到了我的用户使用 Match (u:User{_id:<his id>})-[:OWNS]->(s:Site) 的所有网站，并且我 return 所有网站。

在我的 UI 中，我想使用网格布局做一些类似于 Opera 主页的事情。

这是我的做法：

    GridLayout grid = new GridLayout(5, 2);
    grid.setCaption("Liste des Sites");
    grid.setSizeFull();
    grid.setMargin(new MarginInfo(false, true, true, true));

    Button addSite = new Button(FontAwesome.PLUS);
    addSite.setStyleName(ValoTheme.BUTTON_HUGE);
    addSite.addStyleName(ValoTheme.BUTTON_QUIET);
    addSite.setSizeFull();

    addSite.addClickListener(new ClickListener() {
        @Override
        public void buttonClick(ClickEvent event) {
            new SiteCreation(); //this shows a modal window
        }
    });

然后我想在 addSite 按钮之前添加所有用户的站点，就像您在歌剧 UI 上看到的那样。

但问题是，我怎样才能创建一个可点击的布局来设置一些标签呢？我希望用户有一些可点击的方块，他可以在其中看到相应站点的信息，当他点击它时，他会转到另一个视图。

Answer 1

要呈现一个站点，请使用 Panel and use addClickListener to add a MouseEvents.ClickListener to handle the click. The Panel allows you to add further components (setContent 例如a VerticalLayout 并添加一些图像、标签...，提供一些 HTML 描述，并相应地设置样式）。

歌剧般的 UI - 我要求

Opera-like UI - Vaadin

jakarta-ee

vaadin