更新时间:2023-04-24 GMT+08:00
分享

什么是标准页面

AstroZero提供了三种前端页面:标准页面、高级页面和业务大屏页面。本章节主要带您了解、学习并使用标准页面。

  • 标准页面

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

  • 高级页面

    对于一些样式比较复杂的页面,例如网站、电商、园区大屏等,您可以使用平台提供的“高级页面”。高级页面详细介绍,请参见高级页面

  • 业务大屏页面

    业务大屏页面即Astro大屏应用大屏页面,业务大屏页面可以帮助开发者快速构建和发布专业水准的实时可视化大屏页面。可广泛应用于商业、金融、制造等行业的业务场景中,详细介绍请参见用户指南(Astro Canvas)

初识标准页面

将光标放在应用目录上之后,应用目录右侧会出现“+”,单击“+”,选择“标准页面”,设置页面标签和名称,即可创建一个全新空白的标准页面。页面创建后,自动进入标准页面开发界面,您可以阅读以下内容初步了解标准页面。

图1 标准页面开发界面

标准页面开发界面由四部分组成,分别是:左侧组件区域、上方按钮区域、中间工作区域和右侧可配置页面元素区域,具体功能说明如下表所示。

表1 界面布局说明

分类

功能说明

按钮区域

页面功能按钮区域,包括获取锁、释放锁、保存、另存为、预览页面、修订记录、操作回退、撤销回退、页面性能分析、布局切换以及发布成高级页面组件的操作。

组件区域

页面的组件区域。设计页面时,需要从组件区域拖拉拽各种组件(按住鼠标拖动)到工作区域中以丰富页面功能。

组件区域由以下两个页签组成:

  • 基本组件:平台预置的各类组件,具体说明如基本组件分类说明所示。若需要了解每个基本组件的详细使用说明,请将鼠标悬浮在基本组件上,基本组件右上会出现问号图标,单击该图标会出现该基本组件的使用说明。平台标准组件介绍介绍了常用的基本组件属性说明。
  • 扩展组件:存放用户自定义的组件,自定义组件由用户在线下开发完成并上传到AstroZero,用于丰富页面组件的功能。自定义组件开发过程及上传方法,请参考创建自定义标准组件

工作区域

工作区域即是编辑页面内容区域以及页面视图区,主要的页面布局设计操作区域,完成对页面具体布局、组件放置等操作。

  • 设计视图:页面默认视图,此视图下,可以在页面内容中,通过拖拉拽的方式对需要在页面布局中展示的组件元素进行编排,所有组件视图化,所见即所得,让您快速构建您需要的页面布局。页面右上角“外层容器”开关,可快速呈现外层容器和范围。
  • 模型视图:该页面所涉及的模型展示视图。
  • 事件视图:该视图下,页面布局中各事件以代码形式展示在工作区域。
  • 样式代码:页面自定义的样式代码。
  • 更多:单击“更多”后,将会展开以下页签。
    • 组件代码:该视图下,页面布局中各组件以代码形式展示在工作区域。
    • 第三方库:该页面加载的第三方库代码。

可配置页面元素区域

页面和组件属性设置区域,在该区域可以对组件属性、事件进行设置,也可以加载第三方库以完成对组件的应用。该区域由以下三个页签组成:

  • 属性:组件的属性展示区域,可在属性面板修改组件属性使页面达到预期效果。在工作区域“设计视图”下选中组件,键盘上按Tab键,可在“属性”页签中切换属性参数项,按Enter键可设置属性值。
  • 事件:进入事件编排器的入口,您可通过系统预置的事件编排器,或者直接通过定义JS代码,来实现页面组件与后台接口之间的交互。
  • 库:加载当前页面所依赖库的入口。页面设计的某些功能需要依赖特定的库来完成,用户可以在该页签下新增或删除某些库。系统默认会提供部分库,若不满足现有需求,也可以根据实际情况加载新的库。

基本组件分类说明

组件包括平台预置基本组件、用户自定义的扩展组件,基本组件具体说明如表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”。
  • 滑块:滑块是一个可以利用鼠标在其上面进行滑动的条状组件,一般使用在进度条,区域划分等地方。当鼠标在轨道上点击时,滚动球会移动到当前鼠标点击的位置,单击过的地方会以蓝色显示,未单击的地方是灰色。
  • 分页:用于多条数据展示时可设置分页展示,每页展示固定数据条数。

高级

  • 选项树:树形结构选择设置。适用于要展示的数据为树形结构。
  • 步骤条:步骤进度条。可设置总步骤数和每一步的展示名称。
  • 时间轴:一般绑定数据服务使用,动态的展示时间轴的内容。
  • 走马灯:在满足设置的条件可切换显示灯。
  • 可收缩面板:弹性伸缩布局,可左右伸缩的容器。
  • 滚动容器:由于屏幕尺寸限制,当页面内容已经超出屏幕的范围时,需要拉动滚动条,在有限的屏幕中浏览更多内容。
  • 代码块:用于代码块展示。
  • 选择卡:可从某一卡片区域选中到另一卡片区域。
  • 栅格容器:用于控制页面的布局,即将页面设计几行几列,先设置元素在页面中纵向排列,然后在每一行中又可设置元素横向排列。
  • 标签栏:只有页面布局模式为手机模式时,才会显示该组件。为底部导航组件,单击标签栏中的选项可切换本应用中不同的页面。

快速开始

在进行标准页面设计前,需要对开发界面进行全面的了解。

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

    当选中某个组件时,页面上方会在组件导航上显示它的html标签层级。

    因此,在组件数量比较多,位置较为紧密时,您可以直接单击标签层级,快速选择组件,也可以快速切换组件。例如,在上图的组件导航中单击“页面”,可以直接选中页面上的最外层页面组件。

  • 利用组件树,快速选中组件。

    在组件数量比较多,位置较为紧密时,您也单击页面右下角的“组件树”,展开组件树,在组件树中,直接单击标签层级,快速选择组件,也可以快速切换组件。

    图6 利用组件树快速选中组件

与高级页面的区别

  • 标准页面提供流式布局(Flow Layout)和弹性布局(Flex Layout),高级页面提供流式布局与绝对布局,适用于对样式个性化布局需求更高的业务场景。
  • 标准页面提供基础组件,高级页面具有更复杂的展示组件,如“地图”、“水滴图”和“折线图”等。
  • 在沙箱环境、运行环境中,标准页面均不支持匿名访问,“高级页面”则支持匿名访问。

更多高级页面的介绍,请参见5.1 什么是高级页面

分享:

    相关文档

    相关产品