MindSphere Web Components
入门指南
集成¶
-
通过添加 HTML 元素到您的网站/ Web 应用中,集成 MindSphere Web 组件:
<script id="mdsp-webcomponents-loader" type="text/javascript" src="https://static.{region}.{mindsphere-domain}/webcomponents/v1/index.js"></script>
为了在 MindSphere Web 组件加载后接收反馈,您可以选择注册回调
data-onload
并添加一个 JavaScript 代码段:```html tab="HTML"
```javascript tab="JavaScript" function onMdspWebComponentsLoaded(){ // MindSphere Web 组件被加载 }
资源文件
以下资源文件由
index.js
自动加载:文件名称 描述 native-shim.js
不支持自定义元素的浏览器的填充 mdsp-common.min.js
MindSphere Web 组件基础库 mdsp-components.min.js
MindSphere Web 组件库 mdsp-components-styles.css
MindSphere Web 组件库样式 此外,字体和帮助图像是从 assets 文件夹加载的。
-
通过在
index.html
中添加元素选择器来插入 web 组件,例如:对于一个 asset 列表:<mdsp-asset-view></mdsp-asset-view>
-
当在 Developer 或者 Operator Cockpit 配置您的 web 应用时添加所需的核心角色。
例如 asset 视图元素需要 assetmanagement role。
信息
一个集成 MindSphere Web 组件的演示应用是可用的。
配置¶
每个 web 组件提供一个属性列表,该列表允许开发者配置组件的外观和行为。
例如 asset 视图组件 可以使用 view-mode
属性设置为不同的样式,或者禁用搜索框并显示错误通知:
```html tab="view-mode Card"
```html tab="disabled search box"
<mdsp-asset-view search-hidden="true" error-notification="true"> </mdsp-asset-view>
事件侦听器¶
当用户与用户接口互动时 MindSphere Web 组件发布事件。开发者可以使用 JavaScript 侦听器来检测这些事件并且触发更多动作。
示例¶
以下示例集成了一个 asset 视图和一个文件视图。文件视图显示了文件被分配到所选的 asset。
web 组件的选择器添加在 index.html
中。当改变 asset 选择时,JavaScript 侦听器用于更新文件视图:
```html tab="HTML"
```javascript tab="JavaScript"
// Instantiate the JavaScript objects
const assetViewComp = document.querySelector('mdsp-asset-view');
const fileViewComp = document.querySelector('mdsp-file-view');
// Add a listener for the selectedAssetChanged event
assetViewComp.addEventListener('selectedAssetChanged', function (eventParams) {
// assign the changed asset id to the file view
fileViewComp.assetId = eventParams.detail.assetId;
});
软件清理¶
在应用中使用 MindSphere Web 组件时,请确保在软件清理中列出这些组件。
必须包括 https://static.{region}.{mindsphere-domain}/webcomponents/v1/readme-oss.html
上托管的 readme-oss
文件。