云服务器内容精选

华为云首页用户手册

标准页面

ASTRO轻应用 ASTROZERO-设置AstroZero标准页面模态框组件:基本属性

基本属性基本属性通过数据绑定后，在运行时以数据绑定的值为准。标题：模态框的标题。确定按钮文字：模态框的“确定”按钮上的文字。取消按钮文字：模态框的“取消”按钮上的文字。显示Loading：开启后，确定按钮显示loading状态。显示遮罩层：开启后，显示遮罩层。点击遮罩层关闭：开启后，允许单击模态框外的遮罩层关闭模态框。关闭后，必须先对该模态框进行响应，才能将该模态框关闭，例如单击模态框中的按钮（“确定”、“取消”）以及图标。可拖动：开启后，该容器可拖动。不显示底部：开启后，隐藏“确认”和“取消”按钮区域。显示取消按钮：开启后，显示取消按钮。确定按钮在前：开启后，确认按钮在前。确定按钮禁用：开启后，确认按钮被禁用。懒加载：开启后，弹框不打开不渲染，以提高性能。

ASTRO轻应用 ASTROZERO 设置AstroZero标准页面组件属性
ASTRO轻应用 ASTROZERO-设置AstroZero标准页面模态框组件:数据绑定

数据绑定通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。单击“新增模型”，进入新增模型页面。设置模型名称与来源，单击“下一步”。图2 定义模型 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。表1 模型来源说明分类模型说明模型参数的定义模型方法的定义 API调用方法自定义开发者自行定义的模型。由开发者自定义，可以添加子节点。开发者自定义方法。 $model.ref("modelName").actionName(); 对象由Object对象表映射生成，关于对象模型的详细介绍，请参见对象。系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。系统自动生成查询、保存、删除和统计四个方法。 $model.ref("modelName").query(param); $model.ref("modelName").save(); $model.ref("modelName").delete(); $model.ref("modelName").count(); 服务服务模型由后台服务映射生成，当前支持与服务编排或脚本映射。关于服务模型的详细介绍，请参见服务编排和脚本。参数根据后台服务的入参、出参，映射生成为inputParam和outputParam节点。系统自动生成run方法，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件事件模型由后台事件的字段映射生成，并且支持websocket刷新模型数据。参数根据后台事件的字段映射生成。直接使用直接使用除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。上一步来源选择“自定义”，需要添加子节点自定义参数及类型。上一步来源选择“对象”，需要配置模型关联的对象以及字段。上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。单击“下一步”，设置方法。方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。设置完成后，单击“确定”。属性值绑定：将容器组件的某个属性，如隐藏、样式、弹性布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。在“数据绑定”中，单击“属性值绑定”后的“+”。在“属性”下拉框中，选择容器的某个属性。在模型字段中，单击，进入选择模型页面。单击“新增模型”，进入新增模型页面。设置模型名称与来源，单击“下一步”。 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。详细介绍，请参见表1。图3 定义模型在新建模型“设置”页面，执行如下操作。上一步来源选择“自定义”，需要添加子节点自定义参数及类型。上一步来源选择“对象”，需要配置模型关联的对象以及字段。上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。单击“下一步”，设置方法。方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。设置完成后，单击“确定”。

ASTRO轻应用 ASTROZERO 设置AstroZero标准页面组件属性
ASTRO轻应用 ASTROZERO-AstroZero标准页面概述:什么是标准页面

什么是标准页面标准页面是一种将一个或多个组件拖进画布，进行低代码甚至无代码的配置，即可快速完成业务功能的前端页面。对于一般的业务应用系统，例如请假电子流、出差报销、在线投票等企业常见业务场景，其功能主要是针对业务数据的增、删、改、查，且前端界面的样式相对简单的页面，可以使用AstroZero提供的标准页面。标准页面提供了丰富的组件，组件包含了预置的样式，并封装了基础事件代码，实现了开箱即用，避免重复写样式和事件代码，陷入代码细节，使开发人员更好的专注于业务场景的挖掘。

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-AstroZero标准页面概述:标准页面常用操作入门

标准页面常用操作入门在进行标准页面设计前，建议您先对开发界面的常用操作进行简单的了解。在应用设计器的“界面”中，单击页面后的“+”，设置页面标签和名称，单击“添加”，即可创建一个标准页面（空白页面或基于模板创建）。标准页面中预置了多种组件，可以直接从左侧“组件”区域，将这些组件拖拽到中间“设计视图”。图2 拖拽组件到设计视图在配置使用组件前，可以将光标放在每个组件上，单击组件右上角的图标，可查看组件的详细介绍。如果需了解更多预置组件的使用及配置方法，请参见设置AstroZero标准页面组件属性。图3 组件的帮助图标在“设计视图”中，选中某个组件，在右侧“属性”页签，可设置该组件的绑定数据、样式等属性，如图4所示。图4 组件属性面板在“设计视图”中，选中某个组件，在右侧“事件”页签，可设置组件的关联事件。例如，选择一个“按钮”，在按钮的“点击”事件中，添加相应的事件代码，实现在单击按钮后将界面输入保存到数据库中。图5 编辑组件的关联事件利用组件导航，快速选中组件。当选中某个组件时，页面上方会在组件导航上显示组件的html标签层级。当组件数量比较多，位置较为紧密时，可以直接单击标签层级，快速选择组件，也可以快速切换组件。例如，单击图5组件导航中的“页面”，可直接选中页面上的最外层页面组件。利用组件树，快速选中组件。在组件数量比较多，位置较为紧密时，也可以单击页面右下角的“组件树”，展开组件树。在组件树中，直接单击标签层级，快速选择组件，也可以快速切换组件。图6 利用组件树快速选中组件

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-将AstroZero标准页面保存为模板:自定义标准模板

自定义标准模板参考登录AstroZero新版应用设计器中操作，进入应用设计器。在应用设计器的左侧导航栏中，选择“界面”。在页面中，将鼠标放在对应的标准页面上，单击，选择“编辑”。在标准页面的编辑页面，单击，进入另存为页面。设置模板标签和名称，打开“另存为模板”开关，单击“创建”。图1 另存为模板表1 另存为模板参数说明参数说明标签输入模板的标签名，用于在页面显示，创建后可修改。名称输入模板的名称，名称是模板在系统中的唯一标识，创建后不可修改。命名要求：必须以字母开头，不允许有连续的下划线，空格和特殊字符。另存为模板（模板可在标准页面-页面模板中查看到）勾选后，该标准页面模板，可在页面模板中查看到。缩略图显示当前标准页面的缩略图。另存为完成后，当前用户或同一华为账号下的其他用户，创建类似应用时，可以直接使用该模板来创建。图2 选择基于模板图3 我的模板

ASTRO轻应用 ASTROZERO 标准页面
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-什么是标准页面:与高级页面的区别

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

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

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

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-设置AstroZero标准页面表格（新）组件属性:基本设置

基本设置表头：是否显示表头。序号：是否显示序号列，序号累加显示。单选：启用后，显示单选按钮。多选：启用后，显示多选按钮。与属性“单选”互斥，只能勾选“单选”或“多选”的一种。斑马纹：是否显示间隔斑马纹。勾选后，表格会间隔显示不同颜色，用于区分不同行数据。自动加载：预览或加载页面时，是否自动加载数据。仅当模型为对象模型时有效，启用后，预览或加载页面时，将调用后台的对象查询接口自动加载数据，不需要通过事件触发。表格边框：设置表格的边框样式，支持显示完整边框、显示默认边框、显示外边框等。文字对齐方式：表格中，文字整体的对齐方式。使用模式：设置表格的使用模式，如管理模式、只读模式和勾选模式。数据操作页面：编辑表格中数据的方式，可以设置“链接到页面”编辑数据。设置“链接到页面”时需要配置关联的页面名称，例如配置“详情页”、“新增页”、“修改页”的页面名称。如果在当前页面编辑数据，则清空“编辑数据的方式”值。

ASTRO轻应用 ASTROZERO 设置AstroZero标准页面组件属性
ASTRO轻应用 ASTROZERO-设置AstroZero标准页面表格（新）组件属性:数据绑定

数据绑定通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。值绑定：值绑定类似vue中的v-model语法，组件上创建双向数据绑定。值绑定会根据组件类型，自动选取正确的方法来更新元素。同时，负责监视各类引起绑定数据变化的事件以更新数据。在“数据绑定”中，单击“值（value）绑定”中的，进入选择模型页面。单击“新增模型”，进入新增模型页面。设置模型名称与来源，单击“下一步”。图2 定义模型 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。表1 模型来源说明分类模型说明模型参数的定义模型方法的定义 API调用方法自定义开发者自行定义的模型。由开发者自定义，可以添加子节点。开发者自定义方法。 $model.ref("modelName").actionName(); 对象由Object对象表映射生成，关于对象模型的详细介绍，请参见对象。系统自动获取Object所有的字段，开发者可以从中选择部分字段作为参数。系统自动生成查询、保存、删除和统计四个方法。 $model.ref("modelName").query(param); $model.ref("modelName").save(); $model.ref("modelName").delete(); $model.ref("modelName").count(); 服务服务模型由后台服务映射生成，当前支持与服务编排或脚本映射。关于服务模型的详细介绍，请参见服务编排和脚本。参数根据后台服务的入参、出参，映射生成为inputParam和outputParam节点。系统自动生成run方法，用于执行模型关联的服务编排或脚本。 $model.ref("modelName").run(); 事件事件模型由后台事件的字段映射生成，并且支持websocket刷新模型数据。参数根据后台事件的字段映射生成。直接使用直接使用除了在模型中定义的方法，低代码平台还提供了如下标准API，适用于所有的模型。获取模型数据：$model.ref("modelName").getData(); 设置模型数据：$model.ref("modelName").setData(); 设置模型字段值：$model.ref("modelName").setValue(key,value); 在新建模型“设置”页面，执行如下操作。上一步来源选择“自定义”，需要添加子节点自定义参数及类型。上一步来源选择“对象”，需要配置模型关联的对象以及字段。上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。单击“下一步”，设置方法。方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。设置完成后，单击“确定”。属性值绑定：将容器组件的某个属性，如隐藏、样式、弹性布局等与具体的模型字段相绑定，绑定后组件的属性随模型字段的值变化而变化，类似Vue的v-bind。在“数据绑定”中，单击“属性值绑定”后的“+”。在“属性”下拉框中，选择容器的某个属性。在模型字段中，单击，进入选择模型页面。单击“新增模型”，进入新增模型页面。设置模型名称与来源，单击“下一步”。 AstroZero支持自定义、对象、服务和事件四类模型，每类模型都包含参数定义和方法定义。方法是在模型上定义的API，通常会在前台组件关联的事件脚本（例如页面加载事件、鼠标单击事件）中调用这些API，以实现某些功能。详细介绍，请参见表1。图3 定义模型在新建模型“设置”页面，执行如下操作。上一步来源选择“自定义”，需要添加子节点自定义参数及类型。上一步来源选择“对象”，需要配置模型关联的对象以及字段。上一步来源选择“服务”，需要配置模型关联的后台服务，可以是脚本、服务编排或者公共接口。上一步来源选择“事件”，需要配置模型关联的事件以及事件字段。单击“下一步”，设置方法。方法一般无需添加，如需添加或修改，可参考对象和服务默认生成的方法。设置完成后，单击“确定”。

ASTRO轻应用 ASTROZERO 设置AstroZero标准页面组件属性
ASTRO轻应用 ASTROZERO-调测AstroZero标准页面:调试事件

调试事件打开一个标准页面。图1 标准页面实例选择一个组件，例如“上传”组件，在右侧区域切换到“事件”页签，单击“文件上传”事件后的“+”，进入“上传”事件的编排页面。图2 单击文件上传后的加号在代码编辑区域，使用“debugger” 语句设置断点，单击“创建”。图3 使用“debugger”设置断点返回标准页面开发界面，单击，保存标准页面后，单击，预览标准页面。在弹出的预览页面，按“F12”或者“Ctrl + Shift + I”，开启浏览器调试工具。在“Console”页签，查看日志相关信息。在“Network”页签，查看网络请求信息。图4 “Console”页签查看日志相关信息图5 在“Network”页签查看网络请求信息单击上传按钮上传文件，由于之前在上传事件的自定义JavaScript代码中使用“debugger” 语句设置断点，因此事件代码在执行到debugger语句时会停止执行。按“F8”可跳转下一个断点，按“F10”可跳转下一行，根据相关数据判断页面逻辑是否正确执行。图6 调试JavaScript代码

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-为AstroZero标准页面添加组件:标准页面组件分类

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

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-标准页面布局:基础布局设置

基础布局设置标准页面提了流式布局（Flow Layout）和弹性布局（Flex Layout），标准页面的基础布局主要是通过“容器”组件实现的。容器组件就是基础的布局容器，可以将其理解为 CSS 中DIV的概念。DIV是层叠样式表中的定位技术，全称Division，即为划分，有时可以称其为图层。 DIV是HTML中的一个标签元素，用来为HTML文档内大块的内容提供结构和背景的元素，可以将“容器”简单理解为画布，通过设置外层画布的属性达到控制内容布局的效果。流式布局容器组件默认弹性布局未开启，处于流式布局的状态，如图1所示。图1 流式布局在流式布局中，组件默认为块级（Block）元素，即不论组件宽度是多少，默认占据全部父级元素的宽度。如图2所示，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入两个“标题”组件，“标题”组件为块级元素，默认占据全部父级元素宽度，即外层“容器”的宽度，第二个“标题”组件会在第一个“标题”组件的下方。图2 流式布局中组件为块级元素流式布局中，组件由上至下依次排布，可以通过“水平对齐方式”对容器内组件进行水平位置调整，如图3、图4所示。图3 居中水平对齐图4 靠右水平对齐弹性布局将“容器”组件属性面板中的“弹性布局”开启后，布局由流式布局切换到弹性布局，弹性布局的相关配置属性在下方出现如“排列方向”、“水平对齐方式”和“垂直对齐方式”，如图5所示。图5 弹性布局为了方便说明弹性布局，向画布中拖拽一个“容器”组件，再向“容器”组件中拖入五个“容器”组件，将每个“容器”组件的宽度和高度设置为100px，并为每个“容器”组件设置不同的背景颜色，在每个“容器”中加入一个“标题”组件，分别显示A、B、C、D、E。默认弹性布局下，排列方向为“行”，水平对齐方式为“起点对齐”，垂直对齐方式为“起点对齐”，如图6所示。图6 弹性布局默认效果排列方向属性决定了容器内组件的排列方向。当排列方向为“行”时，容器内组件从左到右排布。排列方向为“列”时，容器内组件从上到下排布，如图7。图7 排列方向“列” 水平排列方式属性，决定了容器主轴方向排列方式。当容器排列方向为“行”时，水平排列方式属性作用于水平方向。当容器排列方向为“列”时，水平排列方式属性作用于垂直方向。排列方向为行时起点为左，水平对齐方式选择“中间对齐”和“终点对齐”时，如图8、图9所示。图8 水平对齐方式选择“中间对齐” 图9 水平对齐方式选择“终点对齐” 垂直排列方式属性决定了容器交叉轴方向排列方式。当容器排列方向为“行”时，垂直排列方式属性作用于垂直方向。容器排列方向为“列”时，垂直排列方式属性作用于水平方向。当容器排列方向为行时起点为上，垂直对齐方式选择“中间对齐”和“终点对齐”时，如图10、图11所示。图10 垂直对齐方式选择“中间对齐” 图11 垂直对齐方式选择“终点对齐” 通过对弹性布局属性的不同组合配置，实现用户想要实现的布局效果。例如，将排列方向设置为“行”，水平对齐方式和垂直对齐方式设置成“中间对齐”，实现居中布局的效果，如图12所示。图12 弹性布局实现居中

ASTRO轻应用 ASTROZERO 标准页面
ASTRO轻应用 ASTROZERO-标准页面布局:自适应布局

自适应布局自适应布局的特点是分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态布局，确保一个页面在所有终端上（各种尺寸的PC、平板、手机、智能手表等）都能显示出令人满意的效果。利用流式布局加弹性布局，分别为不同的屏幕分辨率定义布局。标准页面的自适应布局主要是通过“分栏”组件实现的。“分栏”组件中包含一个或多个“栏”组件，“栏”组件可以简单理解为上一小节介绍的“容器”组件，用来提供某一部分的布局，多个“栏”组件组成“分栏”组件。通过配置不同分辨率屏幕中，“栏”组件的呈现形式，实现不同大小屏幕下不同的显示方案，如图13。图13 分栏组件 “分栏”组件右侧属性配置面板的“行布局”中，可以选择“分栏”组件在PC端和移动端下“栏”的布局形式。“PC”属性中可以依据图示选择“分栏”组件，在PC端包含多少个“栏”。为了方便说明，如何使用“分栏”组件实现自适应布局，向画布中拖拽一个“分栏”组件，在“PC”下选择从左到右三个“栏”的布局形式。向每个“栏”中拖拽一个“标签”组件和一个“输入框”组件用来模拟录入员工信息的场景，如图14。图14 分栏组件模拟录入员工信息 “phone”属性中，可以依据图示，选择“分栏”组件中“栏”，在移动端的布局形式，如图12所示。当在“PC”选择左到右三个“栏”的布局形式时，移动端的屏幕较小，仍然选择从左到右布局可能导致页面元素显示不全或变形，这时可以在“phone”中选择在移动端下“栏”转换为从上到下排列，此时单击页面上方的“全屏”，手机图标就可以模拟在移动端展示的效果，如图15。图15 移动端展示效果“竖排” 如果在“phone”中，依旧选择从左到右的布局方式，则展示效果如图16。图16 移动端展示效果“横排” 布局模式：可以调整“分栏”组件为流式布局或弹性布局，用来控制“分栏”组件中多个“栏”组件或其他组件的布局，更多流式布局和弹性布局的介绍请参见标准页面布局。录入分隔比例：在“PC”属性的选项中，单击最后的齿轮按钮，可以设置“录入分隔比例”。这个比例指的是将整个屏幕宽度划分为24份，每个“栏”组件所占宽度比例，通过设置“录入分隔比例”，在不同大小的屏幕下“分栏”组件获得屏幕的宽度，决定每个“栏”的宽度，即使在不同大小的屏幕下显示的比例是不变的，从而实现自适应布局。设置“分栏”选择从左到右三个“栏”均分，显示“录入分隔比例”为“8:8:8”，如图17所示。图17 “录入分隔比例”为“8:8:8” 调整“录入分隔比例”为“6:12:6”时，中间的“栏”的宽度就会按比例放大，两侧“栏”的宽度按比例缩小，如图18。图18 “录入分隔比例”为“6:12:6”

ASTRO轻应用 ASTROZERO 标准页面