云服务器内容精选

  • 通过自定义JavaScript代码编排事件 通过手动编写JavaScript代码,实现按钮的事件逻辑。系统支持在手动编写JavaScript代码时,进行代码联想提示。同时,系统还封装了一些常用功能的接口,并将其中典型接口做成模板,可以从左侧拖动相关模板至右侧事件定义区域,直接使用。 参考登录AstroZero新版应用设计器中操作,进入应用设计器。 在应用设计器的左侧导航栏中,选择“界面”。 在页面中,将鼠标放在对应的标准页面上,单击,选择“编辑”。 在标准页面开发界面,选中按钮组件。 在右侧“事件”页签中,单击“点击”后的,进入“添加动作”页面。 选择“自定义动作”,在右侧事件定义区域,输入实现事件逻辑的JavaScript代码,也可从左侧拖动相关模板至右侧事件定义区域,单击“创建”。 图2 自定义JavaScript代码 自定义JavaScript代码示例如下: //获取当前组件 var _component = context.$component.current; //获取当前表单 var _form = context.$component.form; // 重置表单 _form.resetFields(); 在标准页面的自定义事件中,还内置了一些与工作流BPM交互的API: 获取变量:context.$工作流.loadVariables(): Promise 提交任务、流程: context.$工作流.submitTask(variables: {[key: string]: any}): Promise 修改变量: context.$工作流.putVariables(variables: {[key: string]: any}): Promise 图3 在标准页面的事件代码中与工作流交互 返回标准页面开发界面,单击页面上方的,保存页面。
  • 只读/编辑控件 “只读/编辑控件”内置动作,用于控制标准页面中全部或部分组件是否可编辑。 在标准页面设计界面,选中按钮组件。 在右侧“事件”页签中,单击,进入添加动作页面。 在“内置动作”中,单击“只读/编辑控件”。 在右侧页面中,单击“添加控件”,选择需要设置的组件,单击“确定”。 图10 选择组件 设置组件是否可编辑,单击“创建”。 图11 是否可编辑 返回标准页面开发界面,单击页面上方的,保存页面。 单击,预览设置后的效果。
  • 弹出页面 在标准页面中,“弹出页面”内置动作通常用于实现弹出窗口或对话框的功能。以单击“提交”按钮,弹出“提交成功”的提示页面为例,进行介绍。 在标准页面设计界面,选中按钮组件。 在右侧“事件”页签中,单击,进入添加动作页面。 在“内置动作”中,单击“弹出页面”,配置目标页面、窗口选项,单击“创建”。 图3 弹出页面 目标页面:设置弹出的目标页面类型。 当前应用页面:当前应用中,已创建好的页面。 URL:某个页面的URL。 窗口可拖拽:窗口是否可来回拖拽。 窗口标题:弹出窗口的标题内容。 窗口位置:弹出窗口在屏幕的位置,如屏幕中央或屏幕顶部居中。 窗口宽度:窗口的宽度,单位像素。 窗口高度:窗口的高度,单位像素。 返回标准页面开发界面,单击页面上方的,保存页面。 单击,预览页面,单击“提交”按钮,可预览按钮的事件效果。
  • 显示/隐藏控件 “显示/隐藏控件”内置动作,用于控制标准页面中全部或部分组件是否可见。 在标准页面设计界面,选中按钮组件。 在右侧“事件”页签中,单击,进入添加动作页面。 在“内置动作”中,单击“显示/隐藏控件”。 在右侧页面中,单击“添加控件”,选择需要设置的组件,单击“确定”。 图6 选择组件 设置组件是否显示,单击“创建”。 图7 组件是否显示 返回标准页面开发界面,单击页面上方的,保存页面。 单击,预览设置后效果。
  • 启用/禁用控件 “启用/禁用控件”内置动作,用于控制标准页面中全部或部分组件是否启用。 在标准页面设计界面,选中按钮组件。 在右侧“事件”页签中,单击,进入添加动作页面。 在“内置动作”中,单击“启用/禁用控件”。 在右侧页面中,单击“添加控件”,选择需要设置的组件,单击“确定”。 图8 选择组件 设置组件是否启用,单击“创建”。 图9 设置是否启用 返回标准页面开发界面,单击页面上方的,保存页面。 单击,预览设置后效果。
  • 打开页面 在标准页面中,“打开页面”内置动作通常用于实现页面的跳转功能。以单击“立即体验”按钮,打开新的产品体验入口页面为例,进行介绍。 在标准页面设计界面,选中按钮组件。 在右侧“事件”页签中,单击,进入添加动作页面。 在“内置动作”中,单击“打开页面”,配置目标页面、打开方式等参数,单击“创建”。 图2 打开页面 目标页面:设置待打开的目标页面。 当前应用页面:当前应用中,已创建好的页面。 URL:某个页面的URL。 重新加载当前页面:加载刷新当前的页面。 打开方式:设置目标页面的打开方式,如在新标签页中打开或在当前窗口打开。 参数绑定:当打开的页面URL中,有参数时,可单击“添加”,设置页面URL路径中的参数。 返回标准页面开发界面,单击页面上方的,保存页面。 单击,预览页面,单击“立即体验”按钮,可预览按钮的事件效果。
  • 弹出消息对话框 在标准页面中,“弹出消息对话框”内置动作通常用于弹出消息对话框。以单击“确定”按钮,弹出“创建实例成功”的消息对话框为例进行介绍。 在标准页面设计界面,选中按钮组件。 在右侧“事件”页签中,单击,进入添加动作页面。 在“内置动作”,单击“弹出消息对话框”,设置相关参数,单击“创建”。 图5 弹出消息对话框 消息类型:弹出的消息类型,如成功、错误、警告和提示。 标题:消息对话框左上角,显示的标题。 消息内容:消息对话框中,显示的消息内容。 内容作为HTML渲染:内容是否作为HTML渲染。动态渲染HTML容易导致XSS攻击,开启此属性时,请确保传入的内容是可信的。 按钮:消息对话框中,显示的按钮名称。 弹出后延时自动关闭:弹出后,是否支持延时自动关闭。勾选后,需要设置延时秒数。 例如:勾选该参数,并设置延时3秒。效果为弹出消息对话框后,3秒后自动关闭该弹框。 返回标准页面开发界面,单击页面上方的,保存页面。 单击,预览页面,单击“确定”按钮,可预览按钮的事件效果。
  • 通过内置动作编排事件 参考登录AstroZero新版应用设计器中操作,进入应用设计器。 在应用设计器的左侧导航栏中,选择“界面”。 在页面中,将鼠标放在对应的页面上,单击,选择“编辑”。 在标准页面开发界面,选中按钮组件。 在右侧“事件”页签中,单击“点击”后的“+”,进入添加动作页面。 在“内置动作”中,单击“重置表单”,选择需要重置的表单,单击“创建”。 图1 添加动作 本示例选择“重置表单”内置动作,其他内置动作功能介绍,如表1所示。 表1 内置动作功能说明 内置动作 功能介绍 打开页面 该预置动作,用于在当前页面中打开当前应用中已创建好的页面。 弹出页面 该预置动作,用于在当前页面中弹出当前应用中已创建好的页面。 关闭弹出页面 该预置动作,用于关闭弹出页面。 弹出消息对话框 该预置动作,用于弹出消息对话框,如成功、错误、警告和提示等。 显示/隐藏控件 该预置动作,用于控制页面上的全部或部分组件是否可见。 启用/禁用控件 该预置动作,用于控制页面上的全部或部分组件是否可用。 只读/编辑控件 该预置动作,用于控制页面上的全部或部分组件是否可编辑。 打印 该预置动作,用于将页面数据提交到表单中,和重置表单配置类似。 提交表单 该预置动作,用于打印表单中的字段。 BPM 在工作流中经常使用到“用户任务”图元,表示在业务流程中由用户参与完成某些工作,如填写表单提交数据、进行审批等。“用户任务”会关联一些页面呈现给用户进行处理。标准页面预置了几种与工作流流程相关的事件,供工作流关联标准页面时使用。 BPM-提交实例 该预置动作用于将数据提交到工作流,与预置的API“context.$工作流.submitInstance (variables:object)”效果相同。 BPM-提交任务 该预置动作用于将数据提交到工作流,与预置的API“context.$工作流.submitTask (variables:object)”效果相同。 BPM-转派任务 该预置动作用于转派工作流中的用户任务。 BPM-更改变量 该预置动作用于设置工作流中的变量值,与预置的API“context.$工作流.putVariables (variables:object, instId: string)”效果相同。 BPM-加载变量 该预置动作用于获取工作流中的参数变量,与预置的API“context.$工作流.loadVariables()”效果相同。 返回标准页面开发界面,单击页面上方的,保存页面,并单击,预览页面。 在表单中输入数据,单击“重置”按钮,可预览按钮的事件效果。
  • 认识事件编排器 图1 事件编排器 事件编排是页面的重要组成部分,用于承载页面中的逻辑,完成事件响应,以帮助用户快速高效地实现页面所需要呈现的功能效果。 事件行为区:集中存放事件编排过程中使用的行为节点,包括系统内置的动作(例如打开页面、弹出页面、显示或隐藏控件、定时任务、提交表单、重置表单等)和自定义动作(例如获取当前组件、获取页面模型等)。 事件定义区:事件编排的操作区域,完成对事件逻辑的编排。开发者在代码编写过程中,键入特定的字符,界面会进行提示,从而自动构建智能代码补全服务,增强IDE代码补全能力。 事件内置API补全:输入“context”后,提示事件代码内可调用的API。 图2 事件内置API补全 模型名称补全:输入“context.$model.ref”后,提示当前页面中的模型。 图3 模型名称补全 服务编排名称补全:输入“context.flow”后,提示当前租户下的服务编排。 图4 服务编排名称补全 事件名称补全:输入“context.script”后,提示当前租户下的事件。 图5 事件名称补全 服务名称补全:输入“context.service”后,提示当前租户下的 API服务 ,选择API服务名称后自动补全服务地址。 图6 服务名称补全 图7 自动补全服务地址 华为OneMobile API补全:输入“xm”后,提示华为OneMobile小程序中的API。 图8 华为OneMobile API补全 WeLink API补全:输入“HWH5”后提示WeLink小程序中的API。 图9 WeLink API补全