标准页面-华为云

ASTRO轻应用 ASTROZERO-什么是标准页面:基本组件分类说明

基本组件分类说明组件包括平台预置基本组件、用户自定义的扩展组件，基本组件具体说明如表2所示。若需要了解每个基本组件的详细使用说明，请将鼠标悬浮在基本组件上，基本组件右上会出现问号图标，单击该图标会出现该基本组件的使用说明。表2 基本组件分类说明分类说明布局用于控制页面的布局，即将页面设计几行几列。例如先拖入一个栅格容器，将栅格容器用行列划分成小区域后，再向单元格中拖入其他组件。容器本身可以包含容器，也可以包含其他组件。表单：元数据表单。根据数据对象可生成表单。可用于制作带数据的交易类页面。表格：元数据表格，用于展示对象记录。根据数据对象可生成表格。数据对象中的属性映射为表格中的列。用于通过一个表格完成数据对象的增、删、改、查操作场景。基础容器：基本的布局容器，支持拖拽放置任何组件进去，按照流式布局模式布局（非独占整行组件如按钮组件，从左往右排列，占满整行即换行；独占整行组件如标题组件，则默认独占一行）。分栏：容器组件，相当于行，内部可分多栏（列）。可将页面划分为两栏或者多栏，每一栏都可以拖入其他组件。折叠面板：用于对页面的某些区域进行折叠和展开，可放下多个折叠页组件。页签：用于制作多页签页面时使用，可放下多个页签组件，实现多页签效果，可在不同的页签内放置内容，通过点击标签切换显示不同的内容。列表视图：用于灵活组合列表项的内容，并且根据实例化数据动态展示。使用时需要在List View上绑定数据模型。数据类型为数组。如果要使用分页，分页组件需放在List View Container内。模态框：弹框样式布局，使用数据绑定实现双向绑定，通过控制模型的值true、false来显示、隐藏对话框。表单输入框：文本输入框，关联对象文本（text）类型，可编辑一行的文本控件，包含标签。控件内的标签将其与输入组件区分开。适用于普通文本输入。多行输入框：多行文本输入区域，关联对象文本区（Text Area）类型，多行可编辑的文本控件。适用于多行文本输入。日期选择框：用于日期选择或输入，关联对象日期（Date）类型、日期/时间（Date/Time）类型，可以选择或输入日期，支持年、月、日期等类型，支持选择范围。数字输入框：数字（Number）类型的输入框，关联对象数字类型。复选按钮：该控件允许用户从多个选项中进行多种选择。单选按钮：用于有一组可选项的单项选择，或者切换某个选项的选中状态，以实现从一组互斥的选项组中选择一项。下拉框：下拉框的可选值为对象的SingleSelect类型字段的不同Picklist取值，也可以是自定义json数据。如果Picklist和自定义json数据同时存在，以Picklist的取值为准。级联选择框：提供按层级选择的选择框，可对选择框的数据进行校验，可以对数据进行搜索。开关：滑动开关，可关联对象的复选框（Boolean）类型字段。允许用户选择“真”（选取）或“假”（不选取）值。上传：文件选择上传和拖拽上传控件，可以通过绑定数据模型，上传文件列表会保存在绑定的模型中。自动完成：带有提示的文本输入框。弹出对话框：单击后会弹框的组件，需要自定义实现代码。多语言选择框：多语言切换组件，关联对象多语言（mutillang）类型。评分：评分、评价组件。关联选择框：一个搜索的选择框，关联对象的查找关系（lookup）或主从关系（masterdetail）类型，可以通过搜索来匹配下拉的选项，匹配成功的选项会展开在下拉列表中。基本按钮：通过编排事件实现Button，触发业务逻辑使用。按钮卡：包含多个按钮（两个或更多）的整体面板。该组件可用于构建多项菜单，用于在视图之间导航。标签：用于显示页面信息的静态文本。图标：用于辅助相关文字进行展示，也可当做按钮点击使用，常配合其他组件一起使用。标题：用于添加具有标题意义的文字，可以通过选择属性“标题类型”的值来控制添加的标题的文字大小。链接：链接地址，用于链接、跳转，一般常用来打开新页面或作为文字性按钮使用。图片：用于上传图片，可以从OBS或者SFTP选择或上传图片。面包屑：是项目中常用的一种组件。结构大致是“首页/菜单1/菜单2/菜单3”。滑块：滑块是一个可以利用鼠标在其上面进行滑动的条状组件，一般使用在进度条，区域划分等地方。当鼠标在轨道上点击时，滚动球会移动到当前鼠标点击的位置，单击过的地方会以蓝色显示，未单击的地方是灰色。分页：用于多条数据展示时可设置分页展示，每页展示固定数据条数。高级选项树：树形结构选择设置。适用于要展示的数据为树形结构。步骤条：步骤进度条。可设置总步骤数和每一步的展示名称。时间轴：一般绑定数据服务使用，动态的展示时间轴的内容。走马灯：在满足设置的条件可切换显示灯。可收缩面板：弹性伸缩布局，可左右伸缩的容器。滚动容器：由于屏幕尺寸限制，当页面内容已经超出屏幕的范围时，需要拉动滚动条，在有限的屏幕中浏览更多内容。代码块：用于代码块展示。选择卡：可从某一卡片区域选中到另一卡片区域。栅格容器：用于控制页面的布局，即将页面设计几行几列，先设置元素在页面中纵向排列，然后在每一行中又可设置元素横向排列。标签栏：只有页面布局模式为手机模式时，才会显示该组件。为底部导航组件，单击标签栏中的选项可切换本应用中不同的页面。

ASTRO轻应用 ASTROZERO 标准页面

ASTRO轻应用 ASTROZERO-什么是标准页面:快速开始

快速开始在进行标准页面设计前，需要对开发界面进行全面的了解。将光标放在应用目录上之后，应用目录右侧会出现“+”，单击“+”，选择“标准页面”，设置页面标签和名称，即可创建一个全新空白的标准页面，页面创建后，自动进入标准页面开发界面，标准页面中预置了多种组件，可以直接从左侧“组件”区域，将这些组件拖拽到中间“设计视图”上。图2 标准页面编辑界面（UI Builder）在配置使用组件前，您可以将光标放在每个组件上后，组件右上角将显示帮助信息的问号图标，单击问号图标，即可进入该组件介绍页面。若需了解更多AstroZero预置组件的使用及配置方法，请参见平台标准组件介绍。图3 组件的帮助图标在“设计视图”中，选中一个页面组件，可在右侧“属性”页签，设置该组件的绑定数据、样式等属性，如图4所示。在设计视图中选中一个文本框，可以在右侧修改这个文本框的标签名、样式、绑定的数据模型等。图4 组件属性面板在“设计视图”中，选中任意组件，可以在右侧“事件”页签，设置组件的关联事件。例如，选择一个“按钮”，然后在按钮的“点击”事件中，添加相应的事件代码，实现在单击按钮后将界面输入保存到数据库中。图5 编辑组件的关联事件利用组件导航，快速选中组件。当选中某个组件时，页面上方会在组件导航上显示它的html标签层级。因此，在组件数量比较多，位置较为紧密时，您可以直接单击标签层级，快速选择组件，也可以快速切换组件。例如，在上图的组件导航中单击“页面”，可以直接选中页面上的最外层页面组件。利用组件树，快速选中组件。在组件数量比较多，位置较为紧密时，您也单击页面右下角的“组件树”，展开组件树，在组件树中，直接单击标签层级，快速选择组件，也可以快速切换组件。图6 利用组件树快速选中组件

ASTRO轻应用 ASTROZERO 标准页面

ASTRO轻应用 ASTROZERO-什么是标准页面:初识标准页面

初识标准页面将光标放在应用目录上之后，应用目录右侧会出现“+”，单击“+”，选择“标准页面”，设置页面标签和名称，即可创建一个全新空白的标准页面。页面创建后，自动进入标准页面开发界面，您可以阅读以下内容初步了解标准页面。图1 标准页面开发界面标准页面开发界面由四部分组成，分别是：左侧组件区域、上方按钮区域、中间工作区域和右侧可配置页面元素区域，具体功能说明如下表所示。表1 界面布局说明分类功能说明按钮区域页面功能按钮区域，包括获取锁、释放锁、保存、另存为、预览页面、修订记录、操作回退、撤销回退、页面性能分析、布局切换以及发布成高级页面组件的操作。组件区域页面的组件区域。设计页面时，需要从组件区域拖拉拽各种组件（按住鼠标拖动）到工作区域中以丰富页面功能。组件区域由以下两个页签组成：基本组件：平台预置的各类组件，具体说明如基本组件分类说明所示。若需要了解每个基本组件的详细使用说明，请将鼠标悬浮在基本组件上，基本组件右上会出现问号图标，单击该图标会出现该基本组件的使用说明。平台标准组件介绍介绍了常用的基本组件属性说明。扩展组件：存放用户自定义的组件，自定义组件由用户在线下开发完成并上传到AstroZero，用于丰富页面组件的功能。自定义组件开发过程及上传方法，请参考创建自定义标准组件。工作区域工作区域即是编辑页面内容区域以及页面视图区，主要的页面布局设计操作区域，完成对页面具体布局、组件放置等操作。设计视图：页面默认视图，此视图下，可以在页面内容中，通过拖拉拽的方式对需要在页面布局中展示的组件元素进行编排，所有组件视图化，所见即所得，让您快速构建您需要的页面布局。页面右上角“外层容器”开关，可快速呈现外层容器和范围。模型视图：该页面所涉及的模型展示视图。事件视图：该视图下，页面布局中各事件以代码形式展示在工作区域。样式代码：页面自定义的样式代码。更多：单击“更多”后，将会展开以下页签。模型代码：该视图下，页面布局中各模型以代码形式展示在工作区域。第三方库：该页面加载的第三方库代码。可配置页面元素区域页面和组件属性设置区域，在该区域可以对组件属性、事件进行设置，也可以加载第三方库以完成对组件的应用。该区域由以下三个页签组成：属性：组件的属性展示区域，可在属性面板修改组件属性使页面达到预期效果。在工作区域“设计视图”下选中组件，键盘上按Tab键，可在“属性”页签中切换属性参数项，按Enter键可设置属性值。事件：进入事件编排器的入口，您可通过系统预置的事件编排器，或者直接通过定义JS代码，来实现页面组件与后台接口之间的交互。库：加载当前页面所依赖库的入口。页面设计的某些功能需要依赖特定的库来完成，用户可以在该页签下新增或删除某些库。系统默认会提供部分库，若不满足现有需求，也可以根据实际情况加载新的库。

ASTRO轻应用 ASTROZERO 标准页面

ASTRO轻应用 ASTROZERO-什么是标准页面:与高级页面的区别

与高级页面的区别标准页面提供流式布局（Flow Layout）和弹性布局（Flex Layout），高级页面提供流式布局与绝对布局，适用于对样式个性化布局需求更高的业务场景。标准页面提供基础组件，高级页面具有更复杂的展示组件，如“地图”、“水滴图”和“折线图”等。在沙箱环境、运行环境中，标准页面均不支持匿名访问，“高级页面”则支持匿名访问。更多高级页面的介绍，请参见5.1 什么是高级页面。

ASTRO轻应用 ASTROZERO 标准页面

ASTRO轻应用 ASTROZERO-使用模板创建AstroZero标准页面:使用预置模板创建标准页面

使用预置模板创建标准页面参考登录AstroZero新版应用设计器中操作，进入应用设计器。在应用设计器的左侧导航栏中，选择“界面”。单击“页面”后的“+”，在添加标准页面中选中“基于模板”。设置页面的标签和名称，单击“下一步”。图1 设置标准页面基本信息表1 标准页面参数说明参数说明标签输入标准页面的标签名，用于在页面显示，创建后可修改。取值范围：1~64个字符。名称输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下：长度不能超过64个字符，包括前缀命名空间的长度。说明：名称前的内容为命名空间，在AstroZero中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。在选择模板页面，选中所需的模板，单击“添加”。图2 选择所需模板单击页面上方的，保存标准页面。保存成功后，单击，预览标准页面。您可以基于模板，进行二次开发。

ASTRO轻应用 ASTROZERO 标准页面

ASTRO轻应用 ASTROZERO-使用模板创建AstroZero标准页面:使用自定义模板创建标准页面

使用自定义模板创建标准页面参考登录AstroZero新版应用设计器中操作，进入应用设计器。在应用设计器的左侧导航栏中，选择“界面”。单击“页面”后的“+”，在添加标准页面中选中“基于模板”。设置页面的标签和名称，单击“下一步”。表2 标准页面参数说明参数说明标签输入标准页面的标签名，用于在页面显示，创建后可修改。取值范围：1~64个字符。名称输入标准页面的名称，名称是标准页面在系统中的唯一标识，创建后不可修改。命名要求如下：长度不能超过64个字符，包括前缀命名空间的长度。说明：名称前的内容为命名空间，在AstroZero中为了避免不同租户间数据的重名，租户在首次创建应用时需要先定义一个命名空间。一个租户只能创建一个命名空间，创建后不支持修改。必须以英文字母开头，只能由英文字母、数字或单下划线组成，且不能以下划线结尾。在“我的模板”中，选中自定义模板，单击“添加”。图3 选中自定义模板单击页面上方的，保存标准页面。保存成功后，单击，预览标准页面。您也可以基于模板，进行二次开发。

ASTRO轻应用 ASTROZERO 标准页面

ASTRO轻应用 ASTROZERO-使用模板创建AstroZero标准页面:操作场景

操作场景系统预置了一些典型场景的标准页面模板，如果业务场景贴合已有模板，建议选择“基于模板”来快速创建标准页面。页面模板包括预置模板（通用模板）和自定义模板两大类。预置模板（通用模板）基础表单：基本的表单页面。多区域表单：有间隔区域的多区域表单页面。基础表格：单张表生成表格模板，包含增、删、改、查。基础详情页面：基础的详情页面。自定义模板（我的模板）用户自定义的页面模板，开发好页面后，单击上方的另存为，即可创建自定义页面模板。创建后，该开发者用户、注册AstroZero的华为账号、华为账号下其他AstroZero用户都可直接使用该页面模板来创建标准页面。

ASTRO轻应用 ASTROZERO 标准页面

ASTRO轻应用 ASTROZERO-设置AstroZero标准页面表格组件属性:扩展属性

扩展属性自动加载数据：仅当模型为对象模型时有效，启用后，预览或加载页面时，将自动加载数据，不需要通过事件触发。可编辑：启用后，表格中每行的内容是否能进行编辑操作，不启用则内容为只读。单选：启用后，显示单选按钮。多选：启用后，显示多选按钮。行号：启用后，表格首列显示当前行号。分页时行号重新从1依次开始，不累加。累加行号：和“行号”只能启用其中一个，启用后，表格首列显示当前行号，分页时行号累加上前一页依次显示。最小列宽：设置最小列宽值。加载中状态：是否显示表格加载中状态。空数据提示：数据为空时，显示的提示内容。筛选为空提示：筛选数据为空时，显示的提示内容，仅当列筛选时生效。树形数据：当表格中的数据有父子关系，可开启树形数据，并指定关联字段后，可展示出树形结构。默认展开：开启树形数据时，子数据是否默认展开。可选择：开启树形数据时，是否启用父子关联选择。图标显示字段：开启树形数据时，图标所在位置显示的字段。不配置，就是第一列的字段。父节点字段：开启树形数据时，关联的父节点字段。子节点字段：开启树形数据时，关联的子节点字段。根节点字段值：开启树形数据时，根节点的字段值。不配置默认为空。子节点缩进：子节点缩进，单位px。行拖拽：开启树形数据时，是否启用行拖拽，拖拽行可改变数据的父子结构。风格尺寸：设置表格的尺寸。显示表头：启用后，表格显示标题行。斑马纹：启用后，表格会间隔显示不同颜色，用于区分不同行数据。纵向边框：启用后，显示一个纵向的选择框。高度跟随内容：表格行高度是否跟随内容多少变化。 AUI风格：是否开启AUI风格。表头样式类：表头固定的class类名。数据行样式类：表数据行class类名的回调方法，支持自定义各行数据不同的class类名。合并行或列：合并行或列的计算方法，支持自定义设置行或列，单元格合并规则。图7 合并行或列