OneCode-RAD 设计器二次开发指南
原创
OneCode-RAD 设计器二次开发指南
原创
OneCode-RAD 设计器二次开发指南
1. 概述
OneCode-RAD 是一个基于 Spring Boot 的开源低代码可视化开发平台，其核心功能是提供可视化设计器，允许开发者通过拖拽方式快速构建 Web 应用界面。本指南旨在帮助开发者了解如何对 RAD 设计器进行二次开发，包括组件扩展、功能增强和界面定制。
2. 设计器架构
2.1 整体架构
RAD 设计器采用前后端分离的架构设计：
- 后端：基于 Spring Boot 提供 RESTful API 接口
- 前端：基于自研 XUI 框架实现可视化设计器
- 数据层：使用虚拟文件系统(VFS)管理项目文件
2.2 核心模块
- RADEditor：设计器核心服务，处理项目打开、导出等操作
- ProjectManager：项目管理服务，负责创建、配置项目
- ComponentPluginService：组件插件服务，管理扩展组件
- 前端设计器：位于
src/main/resources/static/RAD/目录下的 JavaScript 模块
3. 后端二次开发
3.1 核心服务类
RADEditor 服务
位于 com.ds.rad.service.RADEditor，主要提供以下功能：
- openProject：装载工程
- [export：导出项目
- getProjectConfig：获取工程配置信息
ProjectManager 服务
位于 com.ds.rad.service.ProjectManager，主要提供以下功能：
- createProject：创建工程
- projectManager：工程编辑界面
- [debug：调试界面
ComponentPluginService 服务
位于 com.ds.rad.service.ComponentPluginService，主要提供以下功能：
- getExtCom：获取扩展组件
- addComponent：添加组件
- getExtComTreeProject：获取组件工程树
3.2 数据模型
XUIFile 类
位于 com.ds.rad.bean.XUIFile，用于表示设计器中的文件节点，支持多种类型：
- 项目版本
- 包(EUPackage)
- 模块(EUModule)
- 文件(FileInfo)
- 文件夹(Folder)
- 领域实例(DomainInst)
3.3 扩展开发步骤
- 创建新的服务类
@Controller
@RequestMapping(value = {"/admin/custom/"})
@MethodChinaName(cname = "自定义服务")
public class CustomService {
@MethodChinaName(cname = "自定义方法")
@RequestMapping(value = {"customMethod"}, method = {RequestMethod.GET, RequestMethod.POST})
public @ResponseBody
ResultModel<Boolean> customMethod(String param) {
ResultModel<Boolean> result = new ResultModel<Boolean>();
// 实现业务逻辑
return result;
}
}- 扩展 XUIFile 模型
public class XUIFile {
// 添加新的属性和方法
private String customProperty;
public String getCustomProperty() {
return customProperty;
}
public void setCustomProperty(String customProperty) {
this.customProperty = customProperty;
}
}4. 前端二次开发
4.1 前端架构
前端设计器基于 XUI 框架构建，主要目录结构如下：
RAD/
├── conf.js # 配置文件
├── conf_widgets.js # 组件配置
└── 其他功能模块...4.2 核心模块分析
Index.js
设计器主模块，负责：
- 画布管理
- 控件拖拽
- 属性编辑
- 代码生成
conf_widgets.js
组件配置文件，定义所有可用组件的属性和行为。
4.3 组件扩展
1. 添加新组件到工具箱
在 conf_widgets.js中添加新组件配置：
{
id: 'custom.component',
caption: '自定义组件',
imageClass: 'fa fa-custom',
draggable: true,
iniProp: {
// 初始属性
}
}2. 创建自定义组件模块
创建新的 JavaScript 文件，如 CustomComponent.js：
xui.Class('RAD.CustomComponent', 'xui.Module', {
Instance: {
iniComponents: function () {
// 初始化组件
},
events: {
// 事件处理
}
}
});3. 注册组件
在 conf.js相关配置文件中注册组件：
xui.merge(window.CONF, {
customComponents: {
'custom.component': 'RAD.CustomComponent'
}
});4.4 界面定制
1. 自定义设计器主题
在 conf.js中添加主题配置：
xui.merge(window.CONF, {
customTheme: {
backgroundColor: '#f0f0f0',
textColor: '#333333'
}
});5. 插件开发
5.1 创建组件插件工程
- 创建新的项目类型为
ExtCom的工程 - 在工程中添加自定义组件模块
- 注册组件到插件系统
5.2 注册插件服务
在 ComponentPluginService 中添加新的服务方法：
@MethodChinaName(cname = "获取自定义组件")
@RequestMapping(value = {"getCustomComponents"}, method = {RequestMethod.GET, RequestMethod.POST})
public @ResponseBody
ListResultModel<List<EUModule>> getCustomComponents(String projectName) {
ListResultModel<List<EUModule>> result = new ListResultModel<List<EUModule>>();
// 实现获取自定义组件逻辑
return result;
}6. API 扩展
6.1 添加新的 REST 接口
在相应的服务类中添加新的 @RequestMapping 方法：
@MethodChinaName(cname = "新功能接口")
@RequestMapping(value = {"newFeature"}, method = {RequestMethod.GET, RequestMethod.POST})
public @ResponseBody
ResultModel<CustomData> newFeature(String param) {
ResultModel<CustomData> result = new ResultModel<CustomData>();
// 实现业务逻辑
return result;
}6.2 前端调用扩展 API
在前端 JavaScript 中调用新添加的 API：
xui.APICaller.create({
url: '/admin/custom/newFeature',
method: 'POST',
data: {param: 'value'},
callback: function(response) {
// 处理响应
}
}).invoke();7. 配置管理
7.1 项目配置扩展
在 XUIProject 类中添加新的配置属性：
public class XUIProject {
private String customConfig;
public String getCustomConfig() {
return customConfig;
}
public void setCustomConfig(String customConfig) {
this.customConfig = customConfig;
}
}7.2 前端配置
在 conf.js 中添加自定义配置：
xui.merge(window.CONF, {
customSettings: {
enableCustomFeature: true,
customTimeout: 5000
}
});8. 开发最佳实践
8.1 代码规范
- 遵循 OneCode3.0 注解规范
- 保持代码注释的完整性
- 编写完整的单元测试
8.2 性能优化
- 避免在前端频繁操作 DOM
- 合理使用缓存机制
- 优化组件渲染性能
8.3 安全考虑
- 对用户输入进行验证
- 避免 XSS 攻击
- 合理控制 API 访问权限
9. 调试和测试
9.1 后端调试
使用 Spring Boot 的调试功能：
mvn spring-boot:run -DjvmArguments="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=5005"9.2 前端调试
使用浏览器开发者工具进行调试：
- 设置断点
- 查看网络请求
- 检查控制台输出
10. 部署和发布
10.1 构建项目
mvn clean package10.2 运行应用
java -jar target/Studio.jar11. 常见问题和解决方案
11.1 组件不显示
检查组件是否正确注册到 conf_widgets.js 中。
11.2 API 调用失败
检查后端服务是否正常启动，API 路径是否正确。
11.3 性能问题
使用浏览器性能分析工具定位性能瓶颈。
12. 总结
本文档详细介绍了 OneCode-RAD 设计器的二次开发方法，包括后端服务扩展、前端组件开发、插件机制和 API 扩展等方面。通过遵循本指南，开发者可以快速定制和扩展 RAD 设计器的功能，满足特定业务需求。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
