Eclipse Scout 22默认抽象图表报错及适配问题咨询

一、核心问题定位 #

报错本质是前后端未正确建立图表组件的适配器映射，且前端未完成图表模块的注册，导致Scout无法识别ChartField模型。

二、分步修复方案 #

1. 完善JSON适配器实现 #

你已经创建了JsonObjectFactory，但缺少对应的JsonChartField适配器实现，且前端未关联该适配器类型。

（1）实现JsonChartField类

在UI.HTML模块的src/main/java下创建如下类（包路径需确保被Spring组件扫描覆盖）：

import org.eclipse.scout.rt.client.ui.basic.chart.IChartField;
import org.eclipse.scout.rt.ui.html.json.AbstractJsonAdapter;
import org.eclipse.scout.rt.ui.html.json.IJsonAdapter;
import org.eclipse.scout.rt.ui.html.json.IUiSession;
import java.util.Map;

public class JsonChartField extends AbstractJsonAdapter<IChartField> {

    public JsonChartField(IChartField model, IUiSession session, String id, IJsonAdapter<?> parent) {
        super(model, session, id, parent);
    }

    @Override
    public String getObjectType() {
        return "ChartField"; // 必须与前端组件类型标识一致
    }

    @Override
    protected void initJsonProperties(Map<String, JsonProperty<IChartField>> propertyMap) {
        super.initJsonProperties(propertyMap);
        // 映射图表数据到前端
        propertyMap.put("chart", new JsonProperty<IChartField>("chart") {
            @Override
            public Object modelValue(IChartField model) {
                return model.getChart().toJson();
            }
        });
    }
}

（2）确保JsonObjectFactory正确返回适配器

你的工厂代码已能打印日志，只需确认返回的是上述JsonChartField实例：

import org.eclipse.scout.rt.client.ui.basic.chart.IChartField;
import org.eclipse.scout.rt.ui.html.json.AbstractJsonObjectFactory;
import org.eclipse.scout.rt.ui.html.json.IJsonAdapter;
import org.eclipse.scout.rt.ui.html.json.IUiSession;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

@Component
@Order(100)
public class JsonObjectFactory extends AbstractJsonObjectFactory {

    @Override
    public IJsonAdapter<?> createJsonAdapter(Object model, IUiSession session, String id, IJsonAdapter<?> parent) {
        if (model instanceof IChartField) {
            return new JsonChartField((IChartField) model, session, id, parent);
        }
        return null;
    }
}

2. 修复前端模块注册逻辑 #

你之前的前端导入方式错误，需将图表模块注册到Scout全局组件工厂：
修改UI.HTML模块的MYPROJECT.js：

import * as chart from '@eclipse-scout/chart';
// 注册图表组件到Scout框架
Scout.addObjectFactories(chart.objectFactories);
Scout.addFieldTypes(chart.fieldTypes);

3. 统一前后端版本 #

确保后端Maven依赖与前端npm包版本完全一致，修改client pom.xml：

<dependency>
  <groupId>org.eclipse.scout.rt</groupId>
  <artifactId>org.eclipse.scout.rt.chart.client</artifactId>
  <version>22.0.0-beta.10</version> <!-- 与前端@eclipse-scout/chart版本一致 -->
</dependency>

4. 测试数据添加位置 #

教程中的饼图测试数据，需添加到Chart内部类的execLoadData方法中：

public class ChartField extends AbstractChartField<Chart> {
   public class Chart extends AbstractChart {
     @Override
     protected void execLoadData() {
       // 饼图测试数据
       IChartData data = new PieChartData();
       data.addValue("Chrome", 61.41);
       data.addValue("Internet Explorer", 11.84);
       data.addValue("Firefox", 10.85);
       data.addValue("Edge", 4.67);
       data.addValue("Safari", 4.18);
       data.addValue("Sogou Explorer", 1.64);
       data.addValue("Opera", 1.6);
       data.addValue("QQ", 1.2);
       data.addValue("Other", 2.61);
       setChartData(data);
     }
   }
}

三、最终验证步骤 #

1. 执行Maven命令：clean install（清理并重建后端）
2. 进入UI.HTML模块目录，执行：npm install（更新前端依赖）
3. 重启应用，打开包含图表的表单

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