基本概念
为了简化页面的开发,CabloyJS提供了布局管理器
的概念
布局管理器 = 数据提供者 + 布局配置
-
数据提供者:为页面的显示提供数据
-
布局配置:将页面切分为区块的组合,并且可以单独指定每一个区块的渲染组件和渲染参数
基础布局
为了进一步简化布局的配置,CabloyJS提供了基础布局配置。业务模块只需提供页面布局的增量部分(定制布局),所以开发起来非常便捷。比如:
原子列表布局 = 基础布局 + 列表默认布局 + 列表定制布局
原子条目布局 = 基础布局 + 条目默认布局 + 条目定制布局
基础布局配置
src/module-system/a-base-sync/front/src/config/config.js
- 1 layoutManager: {
- 2 base: {
- 3 info: {
- 4 data: {
- 5 adapter: {
- 6 component: {
- 7 module: 'a-basefront',
- 8 name: 'listLayoutDataAdapter',
- 9 },
- 10 providers: {
- 11 all: {
- 12 component: {
- 13 module: 'a-basefront',
- 14 name: 'listLayoutDataProviderAll',
- 15 },
- 16 },
- 17 continuous: {
- 18 component: {
- 19 module: 'a-basefront',
- 20 name: 'listLayoutDataProviderContinuous',
- 21 },
- 22 },
- 23 paged: {
- 24 component: {
- 25 module: 'a-basefront',
- 26 name: 'listLayoutDataProviderPaged',
- 27 },
- 28 },
- 29 tree: {
- 30 component: {
- 31 module: 'a-basefront',
- 32 name: 'listLayoutDataProviderTree',
- 33 },
- 34 fields: {
- 35 sorting: null,
- 36 },
- 37 dataSourceAdapter: {
- 38 component: null,
- 39 },
- 40 treeviewRoot: {
- 41 attrs: {
- 42 itemToggle: false,
- 43 selectable: true,
- 44 },
- 45 },
- 46 },
- 47 },
- 48 },
- 49 },
- 50 },
- 51 layouts: {
- 52 base: {
- 53 blocks: {
- 54 caption: {
- 55 component: {
- 56 module: 'a-baselayout',
- 57 name: 'baseLayoutBlockCaption',
- 58 },
- 59 renderImmediate: true,
- 60 },
- 61 title: {
- 62 component: {
- 63 module: 'a-baselayout',
- 64 name: 'baseLayoutBlockTitle',
- 65 },
- 66 },
- 67 subnavbar: {
- 68 component: {
- 69 module: 'a-baselayout',
- 70 name: 'baseLayoutBlockSubnavbar',
- 71 },
- 72 },
- 73 main: {
- 74 component: {
- 75 module: 'a-baselayout',
- 76 name: 'baseLayoutBlockMain',
- 77 },
- 78 },
- 79 },
- 80 },
- 81 default: {
- 82 title: 'LayoutDefault',
- 83 component: {
- 84 module: 'a-baselayout',
- 85 name: 'baseLayoutDefault',
- 86 },
- 87 subnavbar: false,
- 88 },
- 89 list: {
- 90 title: 'LayoutList',
- 91 component: {
- 92 module: 'a-baselayout',
- 93 name: 'baseLayoutList',
- 94 },
- 95 subnavbar: false,
- 96 blocks: {
- 97 item: {
- 98 component: {
- 99 module: 'a-baselayout',
- 100 name: 'baseLayoutBlockListItem',
- 101 },
- 102 },
- 103 items: {
- 104 component: {
- 105 module: 'a-baselayout',
- 106 name: 'baseLayoutBlockListItems',
- 107 },
- 108 },
- 109 },
- 110 },
- 111 },
- 112 },
- 113 },
info.data.adapter
由于不同的布局对数据的使用方式有所不同,所以在这里定义了一个数据适配器
和一组数据提供者
1. 数据适配器
数据适配器
用于管理一组数据提供者
,同时向外暴露了统一的接口规范。模块a-basefront
提供了一个缺省的数据适配器
,也定义在JSON规范
中。如果我们有特殊的业务需求,可以开发自定义的数据适配器
,并覆盖默认的配置
名称 | 默认组件 | 说明 |
---|---|---|
component | a-basefront + listLayoutDataAdapter | 实现该数据适配器 的Vue组件 |
2. 数据提供者
模块a-basefront
提供了最常见的4种数据提供者
,从而满足大多数布局的使用需求
- providers
名称 | 默认组件 | 说明 |
---|---|---|
all | a-basefront + listLayoutDataProviderAll | 所有数据模式:用于从后端一次性加载所有数据 |
continuous | a-basefront + listLayoutDataProviderContinuous | 连续模式:响应下拉滚动 ,按连续页 依次从后端加载数据,比如list布局 |
paged | a-basefront + listLayoutDataProviderPaged | 分页模式:响应用户点击 ,按指定页 从后端加载数据,比如table布局 |
tree | a-basefront + listLayoutDataProviderTree | 树型模式:按树型结构从后端加载数据,比如tree布局 和treeTable布局 |
layouts
layouts
定义基本的布局配置
名称 | 说明 |
---|---|
base | 基本 布局配置,定义一些具有共性的区块,包括:caption 、title 、subnavbar 、main |
default | 默认 布局配置。如果没有明确指定,一般的页面都会从default 布局继承配置 |
list | 列表 布局配置,一般的列表页面都会从list 布局继承配置 |
评论: