DPL动态模版指令

摘要

鉴于目前平台提供给开发者有屏端的展现模版都是静态的, 造成开发者开发展现样式的灵活性较低, 无法自定义模版的布局。新增DPL动态模版以提升展现模版开发的灵活性，平台会提供给用户8种基础组件，用户使用基础组件可以实现自定义的模版布局和样式。

消息样例

{
  "type":"DPL",
  "version":"1.0",
  "duration": {{INTEGER}},
  "resources":[
    {
      "description": "{{STRING}}",
      "colors": {
        "{{STRING}}": "{{Color}}"
      }
    },
    {
      "description": "{{STRING}}",
      "dimensions": {
        "{{STRING}}": "{{STRING}}"
      }
    },
    ...
  ],
  "styles":{
    "{{STRING}}": {
      "extend":[
        "{{STRING}}"
      ],
      "values": {
        "{{ATTRIBUTE}}": "{{STRING}}"
      }
    },
    "{{STRING}}": {
       "values": {
          "{{ATTRIBUTE}}": "{{STRING}}"
       }
    }
    ...
  },
  "dataSource": {
    "{{STRING}}": {
      "{{STRING}}": "{{STRING}}",
      ...
    }
  },
  "layouts":{
    "{{STRING}}": {
      "parameters": [
        "{{PARAM}}",
        ...
      ],
      "item": [
        {{COMPONENT}},
        ...
      ]
    }
  },
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [
      {{COMPONENT}},
      ...
    ]
  }
}

参数说明

type
- 指令类型，即"DPL"
version
- 指定版本信息
resources
- 用户自定义style的属性常量, 可以在styles属性中引用属性常量, 引用方式@
styles
- 用户自定义styles样式, 可以在COMPONENT中引入对应的自定义styles名称
dataSource
- 用户自定义的数据部分, 可以在COMPONENT中引用datasource, 引用方式${}
layouts
- 用户自定义样式, 可以在mainTemplate中的items中引用自定义的layout
mainTemplate
- 样式解析入口
  - parameters
    - 指定datasource的引用别名
  - items
    - 模版的子组件数组

resources

对应的属性只能是 description、colors、dimensions。

参数

description
- 对属性常量的描述，解析的时候会被忽略
colors
- 定义颜色的属性常量，只能是颜色值
dimensions
- 定义其他属性值, 如宽高、左右间距

样例

"resources": [
    {
      "description":"Stock color for the light theme",
      "colors": {
        "colorTextPrimary": "#151920"
      }
    },
    {
      "description":"Stock color for the dark theme",
      "colors": {
        "colorText": "#f0f1ef"
      }
    },
    {
      "description":"Standard font sizes",
      "dimensions":{
        "textSizeBody": 48,
        "textSizePrimary": 27,
        "textSizeSecondary": 23,
        "textSizeSecondaryHint": 25
      }
    }
  ]

styles

属性名称自定义

参数

values
- 自定义样式包含的属性
extend
- 继承其他的自定义的属性, 要避免环状继承关系

样例

"styles":{
    "textStylePrimary": {
      "extend": [
        "textStyleBase1",
        "textStyleBase0"
      ],
      "values": {
        "width": 80
      }
    },
    "textStyleBase0": {
      "description":"This version of basic font",
      "extend": "textStyleBase",
      "values": {
        "height": 100
      }
    },
    "textStyleBase": {
      "description":"Base font description set color",
      "values": {
          "color":"@colorTextPrimary"
      }
    }
}

dataSource

自定义数据源，会在组件中引用。

参数

自定义，参数的层级关系和名称需要在引用的时候对应

样例

"dataSource":{
    "backgroundImage":{
      "url":"image-url"
    },
    "mylayout1":{
      "text":"This is mylayout1 text"
    },
    "data":{
      "title":{
          "text": "title text"
      },
      "image": {
          "url": "data-image-url"
      },
      "content":{
          "text": "This is a customs text!"
      }
    }
  }

layouts

自定义布局, 支持嵌套。

参数

parameters
- 组件的参数名称，引用的时候需要对应上
item
- 基础组件的数组

样例

"layouts":{
    "mylayout1":{
      "parameters":[
        "dataLayout"
      ],
      "item":[
        {
          "type":"Container",
          "width":"100vw",
          "height":"100vh",
          "items":[
            {
              "type":"Text",
              "text":"${dataLayout.text}",
              "style":"textStylePrimary",
              "color":"@colorTextPrimary"
            }
          ]
        }
      ]
    }
}

mainTemplate

解析入口，必填字段。

参数

parameters
- 组件的参数名称，默认payload
items
- 组件的数组

样例

"mainTemplate": {
    "parameters":[
      "payload"
    ],
    "items":[
      {
        "type":"Container",
        "width":"100vw",
        "height":"100vh",
        "items":[
          {
            "type": "Text",
            "text": "${payload.data.title.text}",
            "color": "#4dd2ff"
          },
          {
            "type":"Container",
            "direction":"row",
            "paddingLeft":40,
            "paddingRight":72,
            "grow":1,
            "items":[
              {
                "type":"mylayout1",
                "dataLayout":"${payload.data.content}"
              },
              {
                "type":"Image",
                "source":"This is a test ${payload.data.image.url}",
                "width":340,
                "height":360,
                "scale":"best-fit",
                "align":"center"
              },
              {
                "type":"Container",
                "items":[
                  {
                    "type":"Text",
                    "text":"Food pairings, Wine pairings",
                    "style":"textStylePrimary",
                    "color":"#4dd2ff"
                  },
                  {
                    "type":"Text",
                    "text":"${payload.data.title.text}",
                    "color":"#4dd2ff"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }

基础组件

Container

容器组件

属性	单位	描述
align-items	stretch, center, flex-start,flex-end	容器子元素对其方式默认:stretch
flex-direction	column, row	容器展现的方向默认: column
justify-content	flex-start, flex-end, center, space-between, space-around	基于父组件整体对其方式默认flex-start

Image

图片组件

属性	单位	描述
height	dp	图片高度
width	dp	图片宽度
src	string	图片Url
scale-type	centerInside, centerCrop, fixXY, fixCenter	图片在容器中的伸缩方式
opacity	0-1	图片不透明度
border-radius	dp	image的圆角弧度默认: 0dp

Text

文本组件

属性	单位	描述
line-height	dp	文本行高
letter-spacing	dp	字符间隔
text-align	auto,left,right,center	文本水平对其方式
vertical-align	auto,top,bottom,middle	文本垂直对其方式
max-lines	Number	最大行数
font-family	String	文本字体
font-size	dp	字体大小
font-style	normal, italic	字体样式
font-weight	normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900	字体粗细
color	Color	文本颜色
text	string	文本内容

DPL完整示例

{
  "type":"DPL",
  "version":"1.0",
  "resources":[
    {
      "description":"Stock color for the light theme",
      "colors":{
        "colorTextPrimary":"#151920"
      }
    },
    {
      "description":"Stock color for the dark theme",
      "colors": {
        "colorText":"#f0f1ef"
      }
    },
    {
      "description":"Standard font sizes",
      "dimensions":{
        "textSizeBody": 48,
        "textSizePrimary": 27,
        "textSizeSecondary": 23,
        "textSizeSecondaryHint": 25
      }
    },
    {
      "description":"Common spacing values",
      "dimensions":{
        "spacingThin":6,
        "spacingSmall":12,
        "spacingMedium":24,
        "spacingLarge":48,
        "spacingExtraLarge":72
      }
    },
    {
      "description":"Common margins and padding",
      "dimensions":{
        "marginTop":40,
        "marginLeft":60,
        "marginRight":60,
        "marginBottom":40
      }
    }
  ],
  "styles":{
    "textStylePrimary":{
      "extend":[
        "textStyleBase1",
        "textStyleBase0"
      ],
      "values": {
        "font": "BBB"
      }
    },
    "textStyleBase0":{
      "description":"This version of basic font",
      "extend": "textStyleBase",
      "values": {
        "fontFamily":"100"
      }
    },
    "textStyleBase":{
      "description":"Base font description set color",
      "values": {
          "color":"@colorTextPrimary"
      }
    },
    "textStyleBase1": {
      "description":"Light version of basic font",
      "extend":"textStyleBase0",
      "values": {
        "fontWeight":"300"
      }
    }
  },
  "dataSource":{
    "backgroundImage":{
      "url":"image-url"
    },
    "mylayout1":{
      "text":"This is mylayout1 text"
    },
    "data":{
      "title":{
          "text": "title text"
      },
      "image": {
          "url": "data-image-url"
      },
      "content":{
          "text": "This is a customs text!"
      }
    }
  },
  "layouts":{
    "mylayout1":{
      "parameters":[
        "dataLayout"
      ],
      "item":[
        {
          "type":"Container",
          "width":"100vw",
          "height":"100vh",
          "items":[
            {
              "type":"Text",
              "text":"${dataLayout.text}",
              "style":"textStylePrimary",
              "color":"@colorTextPrimary"
            }
          ]
        }
      ]
    },
    "mylayout2":{
      "parameters":[
        "content",
        "context"
      ],
      "item":[
        {
          "type":"Container",
          "width":"100vw",
          "height":"100vh",
          "items":[
            {
              "type":"Text",
              "text":"${content.text1 + context.text2}",
              "style":"textStylePrimary",
              "color":"@colorTextPrimary"
            }
          ]
        }
      ]
    }
  },
  "mainTemplate":{
    "parameters":[
      "payload"
    ],
    "items":[
      {
        "type":"Container",
        "width":"100vw",
        "height":"100vh",
        "items":[
          {
            "type": "Text",
            "text": "${payload.data.title.text}",
            "color": "#4dd2ff"
          },
          {
            "type":"Container",
            "direction":"row",
            "paddingLeft":40,
            "paddingRight":72,
            "grow":1,
            "items":[
              {
                "type":"mylayout1",
                "dataLayout":"${payload.data.content}"
              },
              {
                "type":"Image",
                "source":"This is a test ${payload.data.image.url}",
                "width":340,
                "height":360,
                "scale":"best-fit",
                "align":"center"
              },
              {
                "type":"Container",
                "items":[
                  {
                    "type":"Text",
                    "text":"Food pairings,Wine pairing",
                    "style":"textStylePrimary",
                    "color":"#4dd2ff"
                  },
                  {
                    "type":"Text",
                    "text":"${payload.data.title.text}",
                    "color":"#4dd2ff"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}