背景信息

本章节一方面将为您详细介绍高级页面开发工作台各功能模块的主要功能及操作方法，另一方面为您介绍说明“绝对布局”和“流式布局”高级页面的组件布局方法。

高级页面开发工作台

图1 高级页面开发工作台

高级页面开发工作台功能模块布局说明如下：

1. 高级页面工具栏：包含页面开发过程中的常用工具，详细说明如表1所示。

   表1 高级页面工具栏说明

   操作按钮	功能详述
   组件列表	用于展开、收起高级组件列表。
   获取锁\释放锁	AppCube提供了多人协同开发保护机制，即页面锁机制。在应用开发过程中除了新建页面，其它页面相关操作都必须先锁定页面，包括编辑页面、删除页面、下载页面、发布页面模板、复制页面、保存发布页面，同时，在进行页面设置前，必须先锁定页面设置。 多人协同操作页面锁定规则如下： 锁定高级页面的前提：该页面未被他人锁定，且页面设置未被他人锁定。 锁定页面设置的前提：所有页面包括页面设置未被他人锁定。 每个用户只允许锁定一个页面或页面设置。
   电脑端\移动端	为了让同一页面能够完美呈现于电脑端和移动端，AppCube提供高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发，开发完成后发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测用户所用的设备类型并加载相应视图页面，多终端适配相关详细信息请查阅如何适配多终端。
   保存	保存当前开发页面的修改。
   发布	单击“发布”按钮后会弹出“页面成功发布”提示信息，页面发布后可以预览该页面运行态效果。 说明： 【信息】页面修改、保存后，需再次执行发布操作才能在应用和预览页面中体现修改内容。
   预览	页面发布后可以预览该页面运行态效果。
   撤销\复原	页面开发过程中若出现误操作，可执行撤销、复原操作。
   高级页面缩放比例	用于调节页面画布在开发工作台中的大小比例。
   自动适应大小	自动适应页面画布在开发工作台中的大小比例。
   网格线	用于开启画布网格线功能，用于标定组件在画布中的位置。
   页面视图设置	单击后，弹出“当前页面视图设置”弹窗，用于设置高级页面的分辨率、网格大小、背景颜色和背景图片。

2. 组件分类列表：

   包含高级组件的功能分类，用于在开发高级页面时对组件进行筛选，方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等，可选择相应的分类来筛选高级组件。

3. 高级组件展示、选择区域：

   选定组件分类后，属于该功能分类的组件将显示在该区域。在该区域中又包含了多种筛选条件，包含搜索框、应用场景、预置和自定义，详细信息如下所述：

   • 搜索框：可通过组件名称快速查询归属于当前选定组件分类中的高级组件。
     图2 搜索框示例
     
   • 应用场景筛选：可快速筛选不同应用场景的高级组件，当前应用场景包含：通用、智慧园区、5G消息、其他。
     图3 应用场景筛选示例
     
   • 预置和自定义筛选：用于筛选当前选定组件分类中平台预置组件和用户自定义组件。
     图4 预置和自定义筛选示例
     
     

     【信息】预置组件即AppCube平台提供的全局高级组件，详细信息请查阅全局高级组件；自定义组件为用户自主开发的高级组件，详细信息请查阅开发高级组件。

4. 画布：此处以绝对布局方式的高级页面向您说明操作方法，流式布局相关操作方法请查阅流式布局类型高级页面布局。
   • 定位到所需组件后，您便可以将其拖动到画布中，用于构建您所需的高级页面，操作方法如下图所示：
     图5 拖拽组件示例
     
   • 在画布中，您可以通过拖拽的方式调整组件的位置、大小。其次，平台提供了组件对齐提示线帮助您布局组件，操作方法如下图所示：
     图6 画布中调整组件示例
     
     

     如上图中所示，在执行操作前请确保您已获取当前页面的页面锁，未获取页面锁的状态下执行的所有操作都不能保存。如下图所示，已获取页面锁的页面会有绿色的锁标识。

     图7 页面锁确认
     
     

     当“页面设置”页面处于锁定状态下时，当前应用中其他页面均无法获取页面锁，如若需进行页面开发，需先释放“页面设置”页面锁。

     图8 释放锁
     
   • 组件的右键设置：在画布中选中组件，单击鼠标右键会弹出删除、复制、粘贴（若已复制组件）、格式刷、置于顶层、置于底层、高级设置选项。

     表2 右键设置功能说明

     功能选项	功能描述
     删除	用于删除当前选中的高级组件，也可通过键盘中BackSpace键（退格键）和Delete键（删除键）实现。
     复制	用于复制当前选中的高级组件，也可通过快捷键Ctrl+C实现。
     粘贴	用于粘贴已复制的高级组件，也可通过快捷键Ctrl+V实现。
     格式刷	用于复制当前选中组件的属性以应用于其他组件，可选的属性包含：样式（边框、背景）；位置（距左、距上、高度、宽度）；其他属性。选定所需格式刷内容后，光标会变成刷子样式，单击所需格式刷组件即可。 图9 格式刷操作示例
     置于底层、置于顶层	用于设置当前选中高级组件的堆叠顺序，即CSS中的z-index属性。 仅绝对布局类型的高级页面中存在该设置选项。
     高级设置	用于设置当前组件的样式属性，全局高级组件详细设置信息请查阅全局高级组件。

5. 组件属性设置：未选中画布中任何组件时，此模块显示内容为“当前视图组件列表”即当前页面中所布局的组件列表，您可以通过选择画布中或列表中的组件切换到该组件的“组件属性设置”栏，进行当前选中组件的属性设置，数据设置，事件绑定，路由设置。
   图10 组件属性设置操作示例
   
   • 属性设置：用于设置组件的基本属性，主要内容如下表所示：

     表3 组件属性设置说明

     类别	设置项	详细说明
     基础	组件标题	设置该组件在“当前视图组件列表”中的组件标题。
     	组件名称	设置该组件在运行态时DOM结构中widgetname属性。
     位置（仅在绝对布局类型的高级页面中存在此设置）	距离左端	设置组件在画布中距离画布左边的距离，单位为px。
     	距离顶端	设置组件在画布中距离画布顶端的距离，单位为px。
     	宽度	设置组件宽度，单位为px。
     	高度	设置组件高度，单位为px。
     	堆叠顺序	设置组件堆叠顺序，即CSS中的z-index属性，单位为px。当存在多个组件堆叠的情况时可通过该设置项设置堆叠顺序，设置值较大的显示在上方。
     边框	全边框	设置组件全边框，包含边框样式、宽度、颜色、弧度。
     	角边框	设置组件角边框，包含边框宽度、长度、颜色、弧度、边距。
     背景	样式	设置组件背景图片的展示模式，包含：普通、居中、拉伸和平铺。
     	图片链接	设置背景图片。
     	颜色	设置组件背景颜色。

     

     您也可以在自定义组件中添加自定义属性，用于设置组件属性等，详细信息请查阅开发高级组件。

   • 数据设置：可设置组件绑定的桥接器，以实现通过桥接器调用后台接口，获取后台数据。详细信息请查阅如何调用后台接口。
   • 事件绑定：可设置在运行态对该组件相关操作的事件触发的具体动作。详细信息请查阅如何实现组件交互。
   • 路由设置：当前该功能主要用于流式布局类型高级页面中的“路由导航”组件。

绝对布局类型高级页面布局

在绝对布局中，每个组件可在页面下任意位置进行拖拽放置，组件的宽高可自定义设置。该布局模式常用于IOC大屏页面开发场景。

• 绝对布局类型高级页面创建：新建高级页面时，在“添加高级页面”弹窗中的布局类型选择“绝对布局”。
  图11 新建绝对布局类型高级页面示例
  
• 绝对布局类型高级页面组件布局示例：本节以开发如下所示高级页面为例，向您介绍绝对布局类型高级页面中组件布局方法。
  图12 绝对布局类型高级页面组件布局示例
  

  如上图所示，示例页面中包含的组件有：文本编辑、地图、多折线图、多区域折线图和渐变色饼图。

  1. 设置页面背景色：在高级页面右上方单击工具栏中的页面视图设置按钮，在“当前页面视图设置”弹窗中设置背景图片。
     图13 设置页面背景色示例
     
  2. 查找并拖入该页面中包含的组件，并通过拖拽进行初步位置、大小调整，如下图所示：
     图14 拖入组件并初步调整
     
  3. 设置文本编辑组件内容。
     图15 设置文本编辑组件内容
     
  4. 通过组件属性设置精确设置组件大小：本例中设置地图组件宽度为1000px、高度为800px，其他图表类组件宽度为400px、高度为300px。
     图16 精确设置组件大小
     
  5. 复制组件：将上图左侧组件逐个复制，并将其拖拽到右侧，通过对齐提示线将其与左侧组件对齐。
     图17 复制组件
     
  6. 保存、发布、预览高级页面：组件布局完成后您可以通过预览功能查看当前在运行态的效果。
     图18 预览高级页面
     

  至此，您已对绝对布局类型的高级页面布局及搭建方法有了一定的了解，并且成功搭建示例页面，接下来为您介绍流式布局类型高级页面的布局。

流式布局类型高级页面布局

在流式布局下，拖拽到页面中的组件将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。该布局常用于常规Web应用开发，例如电商网站、管理网站等等。

• 流式布局类型高级页面创建：新建高级页面时，在“添加高级页面”弹窗中的布局类型选择“流式布局”。
  图19 新建流式布局类型高级页面示例
  
• 绝对布局类型高级页面与流式布局类型高级页面不同之处：
  1. 在流式布局类型高级页面中不可拖拽组件位置和大小，同样在“组件属性设置”栏中也没有位置相关的设置选项。因为流式布局下组件将按照从上到下、从左到右的顺序依次排列。
  2. 流式布局类型高级页面的画布划分为12列，新拖入的组件默认宽度为100%，即占据12列。您可以通过拖拽组件最右侧边框调节其所占列数，操作如下图所示：
     图20 流式布局中调整组件宽度示例
     
     

     当原来上下排布的多个组件所占列数之和小于12时，会自动调整到同一行。如下图所示，三个组件的所占列数分别调整为4，则本例中三个组件将会按照从左到右的顺序依次排布。

     

  3. 可以通过拖拽的方式调整组件上下、左右的排布次序。操作示例如下图所示
     图21 调整组件上下、左右的排布次序示例
     
  4. 流式布局类型高级页面在高级页面工具栏中新增悬浮模式，开启此模式后拖入的组件不再按照从上到下、从左到右的顺序依次排列，可以设置其相对位置。操作示例如下图所示：
     图22 悬浮模式示例
     

     上图中标注说明如下：

     • 标注1：在高级页面工具栏中开启悬浮模式
     • 标注2：拖入新组件
     • 标注3：悬浮模式下组件相对位置设置选项

       表4 悬浮模式下组件相对位置设置项说明

       设置项	功能描述
       相对定位	Screen：指该组件基于当前视图设置相对位置。
       	Layout：指该组件基于当前布局设置相对位置。
       	Widget：指该组件基于其他组件设置相对位置。
       组件	用于设置该组件相对于其他组件相对定位的组件名称。 （仅相对定位选择Widget时，才会展示该设置项）
       组件位置	用于设置相对定位的具体方位，共9个设置项。
       显示顺序	当组件出现堆叠时，可以设置组件的显示顺序，设置值越大，显示越靠前。
       最大高度	设置该组件的最大高度，单位为px或%。
       宽度	设置该组件的宽度，单位为px或%。