在上一章中，我们介绍了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")
@ResponseBody
public ListResultModel<List<test.view.index3.topbar.GalleryMenu>>getGalleryMenu ();
}