OneCode 核心组件——APICaller介绍

在上一章中，我们介绍了OneCode 访问的基础概念Page,Page页面是用户访问以及组织业务逻辑的基本单元，但其更多的还是承担的容器的作用具体的业务功能还是要由一个个Component组件来完成。组件最细粒度复用单元。

添加图片注释，不超过 140 字（可选）

一，基础组件

• 基础组件：通用基础，支撑基础交互，比如Ajax服务调用，CSS样式配置渲染、消息等。

添加图片注释，不超过 140 字（可选）

二,APICaller(后端服务调用)

APICaller 是OneCode核心的交互组件，当页面向发起后端API调用的时候，就需要配置这个组件，一个页面中可以同时配置多个APICaller, APICaller 本身也能形成链条完成更复杂的前后端交互逻辑。

(1)通过添加一个APIClaller

 

添加图片注释，不超过 140 字（可选）

(2) 同步生成的APICaller JS示例代码

 append(xui.create("xui.APICaller").setHost(host,"getGalleryData").setRequestDataSource([{"type":"form","name":"IndexMain","path":""}]).setResponseDataTarget([{"type":"component","name":"topBar","path":"data"}]).setResponseCallback([ ]).setQueryURL("/admin/index/GalleryData").setAutoRun(true).setQueryMethod("POST"));

(3) 后端DSM配置

前后端一体的自动化参数配置

在DSM配置中，每一个APICaller 会对应自动创建一个路由控制器，在路由控制器中可以配置一些需要前后端统一的配置参数，从而实现前后端设置的一体话，比如：需要访问时增加一个隐藏的属性字段，只需要在DSM中增加，然后重新编译并编译视图后，前端会会在pagCtx 页面环境中创建一个隐藏域，同时后端方法参数也会自动做相应的修改，并完成前后端的映射。

 

常用事件触发

DSM配置面板上还针对API组件增加了一些常用事件相应动作的配置管理，比如我们常用的在数据装载的时候给用户一个友好的提示，同时锁定操作窗口。就可以在APICaller 开始调用的饿时候，添加一个遮罩动作。同时添加一个消息弹出。等APICaller 调用结束，在解除遮罩，移除消息框。

 

事件回调应用

事件回调也是APICaller 一个事件的子集，但他又不同于普通的事件，它允许在APICaller 调用完成后将APICaller 调用的结果作为新的事件函数传递给其他组件对象，比如：当APICaller 调用成功时，他会将数据换递给当前绑定APICaller 调用的其他视图组件，完成页面的重载及刷新。

 

视图事件绑定

APICaller 本身可以作为数据流的基础组件节点，在其他组件发出相关事件时触发自身的运行机制。比如：当前绑定的视图是一个表单视图，表单视图在基本事件上会有数据装载、保存（点击保存按钮）等组件事件，APICaller 可以作为这些事件链的参与者相应相关事件并执行反馈结果。

 

PerCode 生成转换

在完成页面应用的基础属性设计以及DSM配置后，可以选择编译模型，OneCode引擎会根据配置自动创建相应的PerCode 代码，当前版本中主要支持的基于Java SpringMVC 的控制及模型代码。

 

 

@Aggregation(rootClass=GalleryMenuAPI.class,moduleName="index3.topbar")
@RequestMapping(value="test/view/index3/topbar")
@Controller
public interface GalleryMenuAPI  {@GalleryViewAnnotation(dataUrl="test/view/index3/topbar/GalleryMenu",cache=false)@APIEventAnnotation(bindTabsEvent=CustomTabsEvent.tabEditor)@RequestMapping(value="GalleryMenu")@ModuleAnnotation(name="GalleryMenu",moduleViewType=ModuleViewType.GalleryConfig)@UIAnnotation(top="0.68em",width="16.0em",right="0.0em",height="5.0em")@ResponseBodypublic  ListResultModel<List<test.view.index3.topbar.GalleryMenu>>getGalleryMenu ();
}