跳至主要内容

Composite Components

在 ChatGPT 中打开
Java API

Composite 组件将现有的 webforJ 组件组合成自包含的、可重用的组件，具有自定义行为。使用它将内部 webforJ 组件包装成可重用的业务逻辑单元，在应用程序中重用组件模式，并组合多个组件而不暴露实现细节。

Composite 组件与底层绑定组件有着强关联。这使您可以控制用户可以访问哪些方法和属性，这与传统继承模式不同，在传统模式下一切都是公开的。

如果您需要集成来自其他源的网络组件，请使用专门的替代方案：

AI skill available

The webforj-creating-components skill can wrap web components, JS libraries, or compositions as reusable webforJ components. After installing the webforJ AI plugin, ask your assistant:

  • "Wrap this Custom Element library as webforJ components."
  • "Compose these webforJ components into a reusable card."
  • "Integrate this plain JavaScript library as a webforJ component."

用法​

要定义一个 Composite 组件，扩展 Composite 类并指定它管理的组件类型。这将成为您的绑定组件，即持有内部结构的根容器：

BasicComposite.java
public class BasicComposite extends Composite<FlexLayout> {
  private final FlexLayout self = getBoundComponent();

  public BasicComposite() {
    // 访问绑定组件以进行配置
    self.setDirection(FlexDirection.COLUMN)
      .setSpacing("3px")
      .add(new TextField(), new Button("Submit"));
  }
}

getBoundComponent() 方法提供对您底层组件的访问，使您能够直接配置其属性、添加子组件和管理其行为。

绑定组件可以是任何 webforJ 组件 或 HTML 元素组件。对于灵活的布局，请考虑使用 FlexLayout 或 Div 作为您的绑定组件。

组件扩展

切勿直接扩展 Component 或 DwcComponent。始终使用与 Composite 结合的组合模式来构建自定义组件。

当您需要在创建和管理绑定组件时有更大的灵活性时，例如使用带参数的构造函数而不是默认无参构造函数时，重写 initBoundComponent()。当绑定组件需要组件传递给其构造函数而不是之后添加时，请使用此模式。

CustomFormLayout.java
public class CustomFormLayout extends Composite<FlexLayout> {
 private TextField nameField;
 private TextField emailField;
 private Button submitButton;

 @Override
 protected FlexLayout initBoundComponent() {
   nameField = new TextField("Name");
   emailField = new TextField("Email");
   submitButton = new Button("Submit");

   FlexLayout layout = new FlexLayout(nameField, emailField, submitButton);
   layout.setDirection(FlexDirection.COLUMN);
   layout.setSpacing("10px");

   return layout;
 }
}

组件生命周期​

webforJ 自动处理所有 Composite 组件的生命周期管理。通过使用 getBoundComponent() 方法，大多数自定义行为可以在构造函数中处理，包括添加子组件、设置属性、基本布局设置和事件注册。

public class UserDashboard extends Composite<FlexLayout> {
 private final FlexLayout self = getBoundComponent();
 private TextField searchField;
 private Button searchButton;
 private Div resultsContainer;

 public UserDashboard() {
   initializeComponents();
   setupLayout();
   configureEvents();
 }

 private void initializeComponents() {
   searchField = new TextField("Search users...");
   searchButton = new Button("Search");
   resultsContainer = new Div();
 }

 private void setupLayout() {
   FlexLayout searchRow = new FlexLayout(searchField, searchButton);
   searchRow.setAlignment(FlexAlignment.CENTER);
   searchRow.setSpacing("8px");

   getBoundComponent()
     .setDirection(FlexDirection.COLUMN)
     .add(searchRow, resultsContainer);
 }

 private void configureEvents() {
   searchButton.onClick(event -> performSearch());
 }

 private void performSearch() {
   // 搜索逻辑
 }
}

如果您有额外特定的设置或清理要求，您可能需要使用可选的生命周期钩子 onDidCreate() 和 onDidDestroy()：

public class DataVisualizationPanel extends Composite<Div> {
 private Interval refreshInterval;

 @Override
 protected void onDidCreate(Div container) {
   // 初始化需要 DOM 附加的组件
   refreshInterval = new Interval(5.0, event -> updateData());
   refreshInterval.start();
 }

 @Override
 protected void onDidDestroy() {
   // 清理资源
   if (refreshInterval != null) {
     refreshInterval.stop();
   }
 }

 private void updateData() {
   // 数据更新逻辑
 }
}

如果您需要在组件附加到 DOM 后执行任何操作，请使用 whenAttached() 方法：

InteractiveMap.java
public class InteractiveMap extends Composite<Div> {
  public InteractiveMap() {
    setupMapContainer();

    whenAttached().thenAccept(component -> {
      initializeMapLibrary();
      loadMapData();
    });
  }
}

示例 Composite 组件​

以下示例演示了一个 Todo 应用程序，其中每个项是一个 Composite 组件，由一个 RadioButton 样式化为开关和一个 Div 组成，带有文本：

显示代码

示例：组件分组​

有时您可能想使用 Composite 将相关组件组合在一起，形成一个单独的单元，即使可重用性不是主要关注点：

显示代码