创建一个包含多个元素的组件

使用多个HTML元素创建组件。

添加API

本节演示如何使用[classname]Element API和多个DOM元素，创建一个支持标签(label)的`TextField`组件。

示例：组件的DOM结构。

Source code

HTML<div>
    <label></label>
    <input>
</div>

示例：带有`<input>`和`<label>`元素的`TextField`组件

Source code

Java@Tag("div")
public class TextField extends Component {

    Element labelElement = new Element("label");
    Element inputElement = new Element("input");

    public TextField() {
        inputElement
            .addPropertyChangeListener("value", "change", e -> {});
        getElement()
            .appendChild(labelElement, inputElement);
    }

}

DOM结构通过在`@Tag`注解中标记根元素为`<div>`创建。
标签(label)和输入(input)元素被追加到根元素中。
借助输入元素设置`value`属性的同步。

请参阅使用Element API创建简单组件以了解另一种同步方式。

添加API

为了使组件使用更方便，您可以添加一个用于设置输入框数值和标签文本的API。

示例：添加一个用于获取和设置输入框与标签内容的API。

Source code

Java  public String getLabel() {
      return labelElement.getText();
  }

  public String getValue() {
      return inputElement.getProperty("value");
  }

  public void setLabel(String label) {
      labelElement.setText(label);
  }

  public void setValue(String value) {
    inputElement.setProperty("value", value);
  }

AF6AD086-B42A-43BF-9013-48ED5FCB2FD8

Docs

Docs

创建一个包含多个元素的组件

添加API