YAO 内建 XGen 界面引擎，封装了 Table, Form, Chart 等一系列常用功能，通过编写 DSL 实现多种功能模块。

约定

1. 示例中约定应用根目录为 /data/app, 实际编写时需替换为应用根目录。
2. 使用 <> 标识自行替换的内容。 例如: icon-<图标名称>, 实际编写时应替换为: icon-foo, icon-bar ...

在 tables 目录下, 创建一个 Table DSL 文件, 与一个 product 数据模型绑定。

在浏览器输入表格路由地址访问:

http://<IP>:<YAO_PORT>/<管理后台路由前缀>/x/Table/product

/data/app/tables/product.tab.yao

{
  "name": "产品",
  "action": {
    "bind": { "model": "product" }
  }
}

修改 Table DSL, 刷新页面预览效果。 (如未开启 watch 需手动重启服务)

/data/app/tables/product.tab.yao

{
  "name": "产品",
  "action": { "bind": { "model": "product" } },
  "layout": {
    "header": { "preset": {} },
    "table": {
      "columns": [
        { "name": "名称", "width": 200 },
        { "name": "上架状态", "width": 200 }
      ]
    }
  }
}

修改 Table DSL, 刷新页面预览效果。 (如未开启 watch 需手动重启服务)

/data/app/tables/product.tab.yao

{
  "name": "产品",
  "action": { "bind": { "model": "product" } },
  "layout": {
    "header": { "preset": {} },
    "table": {
      "columns": [
        { "name": "联动", "width": 200 },
        { "name": "名称", "width": 200 },
        { "name": "备注", "width": 200 },
        { "name": "上架状态", "width": 200 }
      ]
    }
  },
  "fields": {
    "table": {
      "联动": {
        "bind": "online",
        "view": {
          "bind": "new_field",
          "type": "Text",
          "compute": {
            "process": "Concat",
            "args": ["$C(row.name)", "(", "$C(row.remark)", ")"]
          }
        },
        "edit": {
          "type": "Select",
          "props": {
            "options": [
              { "label": "已上架", "value": true },
              { "label": "已下架", "value": false }
            ]
          }
        }
      }
    }
  }
}

查看 Table Widget 手册

在 forms 目录下, 创建一个 Form DSL 文件, 与 product 数据模型绑定。

在浏览器输入表格路由地址访问:

http://<IP>:<YAO_PORT>/<管理后台路由前缀>/x/Form/product/0/edit

/data/app/forms/product.form.yao

{
  "name": "产品",
  "action": { "bind": { "model": "product" } }
}

查看 Form Widget 手册

修改 Table DSL 文件，新增添加按钮、行编辑按钮。刷新页面预览效果。(如未开启 watch 需手动重启服务)

/data/app/tables/product.tab.yao

{
  "name": "产品",
  "action": { "bind": { "model": "product" } },
  "layout": {
    "header": { "preset": {} },
    "filter": {
      "columns": [{ "name": "名称", "width": 4 }],
      "actions": [
        {
          "title": "添加产品",
          "icon": "icon-plus",
          "width": 3,
          "action": {
            "Common.openModal": {
              "Form": { "type": "edit", "model": "product" }
            }
          }
        }
      ]
    },
    "table": {
      "columns": [
        { "name": "联动", "width": 200 },
        { "name": "名称", "width": 200 },
        { "name": "备注", "width": 200 },
        { "name": "上架状态", "width": 200 }
      ],
      "operation": {
        "fold": false,
        "width": 255,
        "actions": [
          {
            "title": "查看",
            "icon": "icon-eye",
            "action": {
              "Common.openModal": {
                "Form": { "type": "view", "model": "product" }
              }
            }
          },
          {
            "title": "编辑",
            "icon": "icon-edit-2",
            "action": {
              "Common.openModal": {
                "Form": { "type": "edit", "model": "product" }
              }
            }
          }
        ]
      }
    }
  },
  "fields": {
    "table": {
      "联动": {
        "bind": "online",
        "view": {
          "bind": "new_field",
          "type": "Text",
          "compute": {
            "process": "Concat",
            "args": ["$C(row.name)", "(", "$C(row.remark)", ")"]
          }
        },
        "edit": {
          "type": "Select",
          "props": {
            "options": [
              { "label": "已上架", "value": true },
              { "label": "已下架", "value": false }
            ]
          }
        }
      }
    }
  }
}

编辑 /data/app/flows/app/menu.flow.yao 添加菜单项

退出后台重新登录。

通过菜单访问