---
description: 集成面板
---

# 0.17

集成面板可以将多个模块整合进一个面板中，用多个模块为一个内容提供多样的显示形态和交互体验。

## 术语约定

TODO

## 功能特性

* 对齐网格（Align Grid）

将视窗（Viewport）划分为N行M列的网格，在开启吸附功能后，在（x,y）坐标位置打开的集成面板会自动寻找最靠近的网格，并将最终打开的坐标位置设置为网格的中心的坐标位置（x', y'）。

## 配置说明

```xml
      </PageSlots>
      <TabBar space="24">
        <Background image="rectangle_tabbar_bg.png" color="#272930A0">
          <Border top="56" bottom="56" left="56" right="56"/>
        </Background>
        <CloseButton image="rectangle_tab_close.png" color="#FFFFFFFF">
          <Anchor width="44" height="44"/>
          <Subjects>
            <Subject message="/XTC/IntegrationBoard/DirectClose">
              <Parameters>
                <Parameter key="uid" value="{{uid}}" type="_"/>
                <Parameter key="delay" value="0" type="float"/>
              </Parameters>
            </Subject>
          </Subjects>
        </CloseButton>
        <TabButtons>
          <TabButton name="__home__" contentKey="_"
                     uncheckedIcon="rectangle_tab_profile_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
                     checkedIcon="rectangle_tab_profile_checked.png" checkedWidth="96" checkedHeight="44">
            <Subjects>
              <Subject message="/XTC/IntegrationBoard/ActivatePage">
                <Parameters>
                  <Parameter key="uid" value="{{uid}}" type="_"/>
                  <Parameter key="page" value="__home__" type="string"/>
                </Parameters>
              </Subject>
            </Subjects>
          </TabButton>
          <TabButton name="dossier" contentKey="dossier"
                     uncheckedIcon="rectangle_tab_dossier_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
                     checkedIcon="rectangle_tab_dossier_checked.png" checkedWidth="96" checkedHeight="44">
            <Subjects>
              <Subject message="/XTC/IntegrationBoard/ActivatePage">
                <Parameters>
                  <Parameter key="uid" value="{{uid}}" type="_"/>
                  <Parameter key="page" value="dossier" type="string"/>
                </Parameters>
              </Subject>
            </Subjects>
          </TabButton>
          <TabButton name="media" contentKey="MediaCenter"
                     uncheckedIcon="rectangle_tab_media_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
                     checkedIcon="rectangle_tab_media_checked.png" checkedWidth="96" checkedHeight="44">
            <Subjects>
              <Subject message="/XTC/IntegrationBoard/ActivatePage">
                <Parameters>
                  <Parameter key="uid" value="{{uid}}" type="_"/>
                  <Parameter key="page" value="media" type="string"/>
                </Parameters>
              </Subject>
            </Subjects>
          </TabButton>
          <TabButton name="search" contentKey="_"
                     uncheckedIcon="rectangle_tab_search_unchecked.png" uncheckedWidth="44" uncheckedHeight="44"
                     checkedIcon="rectangle_tab_search_checked.png" checkedWidth="96" checkedHeight="44">
            <Subjects>
              <Subject message="/XTC/IntegrationBoard/ActivatePage">
                <Parameters>
                  <Parameter key="uid" value="{{uid}}" type="_"/>
                  <Parameter key="page" value="search" type="string"/>
                </Parameters>
              </Subject>
            </Subjects>
          </TabButton>
        </TabButtons>
      </TabBar>
      <CoverPicture fitmode="zoom" maxZoomIn="3.0"/>
    </Style>
  </Styles>
  <!-- 预创建的实例列表
      uid: 实例的唯一ID
      style: 使用的样式名
      uiSlot: ui的挂载槽路径，空值时使用UI.slot
      worldSlot: 3D世界的挂载槽路径，空值时使用World.slot
    -->
  <Instances>
    <Instance uid="default" style="rectangle" uiSlot="" worldSlot=""/>
  </Instances>
  <!-- 预加载 -->
  <Preload>
    <!-- 消息订阅的主题
          message: 消息
          Parameter.key: 参数的键
          Parameter.value: 参数的值
          Parameter.type: 参数的类型，支持的类型为string,int,float,bool
        -->
    <Subjects>
      <Subject message="/XTC/IntegrationBoard/Open">
        <Parameters>
          <Parameter key="uid" value="default" type="string"/>
          <Parameter key="source" value="assloud://" type="string"/>
          <Parameter key="uri" value="XTC.IntegrationBoard/1" type="string"/>
          <Parameter key="delay" value="0" type="float"/>
        </Parameters>
      </Subject>
    </Subjects>
  </Preload>
</MyConfig>
```

### 变量

* CloseButton.Subbjects

| 变量        | 类型     | 说明     |
| --------- | ------ | ------ |
| \{{uid\}} | string | 实例的uid |

* PageSlot.InlaySubbject

| 变量        | 类型     | 说明     |
| --------- | ------ | ------ |
| \{{uid\}} | string | 实例的uid |

* PageSlot.RefreshSubbject

| 变量                       | 类型     | 说明                                                                      |
| ------------------------ | ------ | ----------------------------------------------------------------------- |
| \{{uid\}}                | string | 实例的uid                                                                  |
| \{{bundle\_uuid\}}       | string | 当前页面显示资源的包的uuid                                                         |
| \{{content\_uuid\}}      | string | 当前页面显示资源的内容的uuid                                                        |
| \{{content\_kv\_key\}}   | string | 当前页面显示资源的kvS对应的键                                                        |
| \{{content\_kv\_value\}} | string | 当前页面显示资源的kvS对应的值                                                        |
| \{{uri\}}                | string | \[已弃用] 当前页面显示资源在源中的相对路径, 等于 \{{bundle\_uuid\}}/\{{content\_kv\_value\}} |
| \{{content\_path\}}      | string | \[已弃用] 当前页面显示内容的路径，等于\{{bundle\_uuid\}}/\{{content\_uuid\}}             |

* TabButton.Subjects

| 变量        | 类型     | 说明     |
| --------- | ------ | ------ |
| \{{uid\}} | string | 实例的uid |

## 消息订阅

* /XTC/IntegrationBoard/ActivatePage

此消息将激活一个标签，打开对应的页面

| 参数   | 类型     | 说明                         |
| ---- | ------ | -------------------------- |
| uid  | string | 准备创建的实例的uid                |
| page | string | 要打开的页面的名称，对应TabButton.name |

* /XTC/IntegrationBoard/DirectOpen

此消息将首先创建一个集成面板，然后刷新内容并显示，最后对齐到网格。

| 参数          | 类型     | 说明                    |
| ----------- | ------ | --------------------- |
| uid         | string | 准备创建并打开的实例的uid        |
| style       | string | 准备创建并打开的实例的样式         |
| source      | string | 内容的源类型，可选项为assloud:// |
| uiSlot      | string | 创建完成的实例的挂载槽的绝对路径      |
| uri         | string | 内容在源中的访问地址            |
| delay       | float  | 延时打开的时间，单位为秒          |
| position\_x | float  | 打开的位置的x坐标             |
| position\_y | float  | 打开的位置的y坐标             |

* /XTC/IntegrationBoard/DirectClose

此消息将关闭并销毁一个集成面板

| 参数    | 类型     | 说明             |
| ----- | ------ | -------------- |
| uid   | string | 准备关闭并销毁的实例的uid |
| delay | float  | 延时关闭的时间，单位为秒   |

* /XTC/IntegrationBoard/Refresh

此消息将刷新一个集成面板

| 参数            | 类型     | 说明          |
| ------------- | ------ | ----------- |
| uid           | string | 准备刷新的实例的uid |
| source        | string | 源           |
| bundle\_uuid  | string | 包的uuid      |
| content\_uuid | string | 内容的uuid     |

## 依赖插件

oelMVCS

## 更新日志

### 0.17.0

* 新增：

增加刷新的消息订阅

### 0.16.0

* 修改：

加入CoverPicture.maxZoomIn配置项控制封面图片最大放大倍数

### 0.15.0

* 修改：

DirectOpen消息，加入uiSlot参数

### 0.9.0

* 新增：

支持视频循环，对应配置为：

```markup
<VideoLoop mode="none" visible="false"/>
```
