如何在现有GWT 2.11应用中逐步集成DominoKit/UI 2.0组件

核心思路是写一个适配器Widget，把DominoKit的BaseDominoElement实例封装成GWT的Widget子类，这样就能直接添加到VerticalPanel这类GWT层级组件里，完美适配逐步迁移的需求。

适配器代码实现 #

import com.google.gwt.user.client.ui.Widget;
import org.dominokit.domino.ui.elements.BaseDominoElement;

public class DominoWidgetAdapter extends Widget {
    private final BaseDominoElement<?> dominoElement;

    public DominoWidgetAdapter(BaseDominoElement<?> dominoElement) {
        this.dominoElement = dominoElement;
        // 绑定DominoKit元素的DOM节点到GWT Widget
        setElement(dominoElement.element());
    }

    // 可选：暴露原DominoKit元素，方便后续操作
    public BaseDominoElement<?> getDominoElement() {
        return dominoElement;
    }
}

实际使用示例 #

比如在GWT VerticalPanel中添加DominoKit按钮：

import com.google.gwt.user.client.ui.VerticalPanel;
import org.dominokit.domino.ui.buttons.Button;

public class MigrationDemo {
    public void integrateDominoToGwtPanel() {
        // 现有GWT面板
        VerticalPanel gwtVerticalPanel = new VerticalPanel();
        
        // 创建DominoKit按钮
        Button dominoBtn = Button.create("现代化按钮")
                .addClickListener(evt -> {
                    // 按钮点击逻辑
                    System.out.println("DominoKit按钮触发点击");
                });
        
        // 用适配器包装Domino元素
        DominoWidgetAdapter adapter = new DominoWidgetAdapter(dominoBtn);
        
        // 像添加普通GWT组件一样加入面板
        gwtVerticalPanel.add(adapter);
        
        // 挂载到页面根容器（根据实际场景调整）
        // RootPanel.get().add(gwtVerticalPanel);
    }
}

关键注意点 #

• 适配器会同步DominoKit元素的DOM节点到GWT Widget，GWT面板的布局、移除等管理逻辑都能正常生效
• 如果需要修改DominoKit组件的属性、事件，直接通过adapter.getDominoElement()获取原实例操作即可，无需直接操作DOM
• 复杂DominoKit组件（比如容器类）同样适用这个方案，完全满足先替换叶子组件、再逐步重构面板的迁移计划

内容的提问来源于stack exchange，提问作者RigEx