组件

​

Amis原生组件

几乎所有的amis原生组件都适用于华炎魔方微页面，请参阅 Amis 组件。

​

华炎魔方组件

我们为 amis 扩展了以下组件用于快速实现华炎魔方各种界面能力。

• 对象表单 ObjectForm
• 列表视图 ObjectListView
• 对象表格 ObjectTable
• 标题面板 RecordDetailHeader
• 相关表 RecordDetailRelatedList

​

@data.change事件

在amis广播事件可以自定义派发的事件名称eventName，其他渲染器可以监听自定义事件并配置响应动作。了解更多广播事件。

华炎魔方基于amis广播事件，实现了基于对象的@data.change事件，只需要在组件中按规范监听相关对象的@data.change事件，可以很方便的实现刷新列表视图和表单数据功能。

​

名称规范

事件名称规范：@data.changed.对象的API名称，表示触发某个对象的@data.change事件。

​

触发

要触发对象的@data.change事件，eventName按上述名称规范，并配置actionType: 'broadcast'。

以下示例演示了点击按钮时触发一个名为instance_tasks的对象的@data.change事件。actions.data中的数据会传递给目标事件，可通过event.data.xxx直接获取。

  {
    "type": "button",
    "label": "广播一下",
    "onEvent": {
      "click": {
        "actions": [
          {
            "actionType": "broadcast",
            "args": {
              "eventName": "@data.changed.instance_tasks"
            },
            "data":{
              "objectName": "instance_tasks"
            }
          }
        ]
      }
    }
  }

​

监听

要监听@data.change事件，事件名按上述名称规范即可。

以下示例演示了一个监听名为instance_tasks的对象的@data.change事件。当事件触发时会执行相关动作，传递的数据通过event.data.xxx获取。

  "onEvent": {
    "@data.changed.instance_tasks": {
      "actions": [
        {
          "actionType": "toast",
          "args": {
            "msgType": "info",
            "msg": "传递的数据：${event.data.objectName}",
            "position": "top-center"
          }
        }
      ]
    }
  }

​

应用

华炎魔方很多内置组件都监听了对象的@data.change事件，基于amis的广播事件特性可以很方便的调用这些组件的功能和行为，比如列表视图组件的刷新功能。

以下组件通过监听对象的@data.change事件实现了组件的各种动作能力：

• 列表视图组件
• 对象表单组件
• 相关表组件

​

自定义组件

Amis 本身提供了非常丰富的组件功能，基本它可以实现大部分业务场景的UI界面需求。

如果遇到适合自己开发自定义组件的场景，我们也可以通过自定义资产包来把自定义组件集成到amis设计器中，这样我们就可以实现任何我们想要的UI效果了。

只要把自定义资产包地址配置到环境变量 STEEDOS_PUBLIC_PAGE_ASSETURLS 中，华炎魔方会根据资产包中配置的资源包地址自动把相关自定义组件加载并集成到amis引擎中，非常方便。

STEEDOS_PUBLIC_PAGE_ASSETURLS=https://unpkg.com/@steedos-widgets/example@0.0.6/dist/assets.json

资产包的地址只要可以访问即可，它可以是发布到npm的包(unpkg.com)地址，也可以是其他任何可以被当前服务访问的地址，比如在远程开发环境中公开的资产包地址。

下面的示例 amis-custom-components 完整演示了如何在华炎魔方项目中通过引用自定义资产包的方式来集成自定义组件。

关于自定义资产包及自定义组件的开发，请参考下面的示例 steedos-widgets。