1

使用 vaadin 7（我们正在尝试迁移到 v21，非常非常困难）我们有这个

CustomLayout cl1 = new CustomLayout(new ByteArrayInputStream("<fieldset><legend location='legend'></legend><div location='content'></div></fieldset>".getBytes()));
cl1.setSizeUndefined();
cl1.add(new Label(title), "legend");
cl1.add( panel, "content");

基本上是一个带有边框和标题边框的面板我们如何在 vaadin flow v21 中做到这一点

提前致谢

4

2 回答 2

1

有一个 Cookbook 配方可以为 CustomLayout 提供替代方案：https ://cookbook.vaadin.com/custom-layout

本质上，CustomLayout 替换类Html以一种相当简单的方式扩展。该add方法具有大部分逻辑：

public class CustomLayout extends Html {
    private Map<String, Component> locations = new HashMap<>();

    public CustomLayout(String template) {
        super(template);
    }

    public CustomLayout(InputStream stream) {
        super(stream);
    }

    public void add(Component child, String location) {
        remove(location);
        locations.put(location, child);

        // Establish parent-child relationship, but leave DOM attaching to us
        getElement().appendVirtualChild(child.getElement());

        // Attach to the specified location in the actual DOM
        getElement().executeJs("this.querySelector('[location=\"'+$0+'\"]').appendChild($1)", location,
                child.getElement());

        // Ensure the element is removed from the DOM when it's detached
        child.addDetachListener(detachEvent -> {
            detachEvent.unregisterListener();
            getElement().executeJs("this.querySelector && this.querySelector('[location=\"'+$0+'\"]').lastChild.remove()", location);

            // Also clear the bookkeeping
            locations.remove(location, child);
        });
    }

    public void remove(String location) {
        Component oldChild = locations.remove(location);
        if (oldChild != null) {
            remove(oldChild);
        }
    }

    public void remove(Component child) {
        getElement().removeVirtualChild(child.getElement());
    }
}

请注意，使用locationsMap 进行簿记很重要，以便在分离父级后也删除客户端元素。

于 2021-11-11T06:19:49.243 回答
1

Vaadin 10+ 为最常用的 HTML 标签定义了“元素”，并为构建在这些元素之上的组件提供了更高级别的抽象。它不包括<fieldset>. 我不熟悉 Vaadin 7，但它看起来也没有附带。

Vaadin 10+ 有多种方法可以满足您的需求。这是一个基于扩展Component类的快速示例：

@Tag("fieldset")
public class FieldSet extends Component {

    private final Div enclosedComponents;

    public FieldSet(String label) {
        Element legend = new Element("legend").setText(label);
        getElement().appendChild(legend);
        enclosedComponents = new Div();
        getElement().appendChild(enclosedComponents.getElement());
    }

    public void add(Component ... components) {
        enclosedComponents.add(components);
    }
}

我没有包含强大的 API。与添加和删除方法的完整补充以及更新标签的方法一起使用会更有用。

作为学习 10+ 的一点，要知道 的性质fieldset使这个变得更加复杂。如果这不必包含<legend>标签，它可能会简单得多，因为您可以简单地扩展Div几个类或其中一个Layout类并继承一个健壮的 API。

文档中有一部分概述了解决这些类型问题的各种方法。当我第一次开始使用 Vaadin 时，我发现它非常宝贵。何时使用每种方法并不总是很清楚，但你会感觉到它。

于 2021-11-11T03:28:59.650 回答