检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
组件的数据可来自于静态数据或通过数据集获取,以EchartsWidgetTemplate组件为例,在“{Widget}”.editor.js文件中,可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时,默认组件需要对接数据集。配置示例如下:
进入config目录,新增“application.yml”配置文件。 cd config vi application.yml 在配置文件中,添加如下内容: # 配置当前机器的ip(默认127.0.0.1) hostIp: 10.10.*.* # 配置http连接器超时时间(默认3000)
editor.js:组件核心渲染文件。组件属性定义文件,负责组件编辑状态时需要渲染的界面和逻辑。 {widget}.flt:组件DOM结构文件,需要在服务端提前渲染的部分可以写在此文件中,相当于HTML文件,负责样式展示。 {widget}.js:组件逻辑文件,整个Widget的渲染核
MintUI库文件结构 packageinfo.json包含所要引入的文件。例如,MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件,请在packageinfo.json中添加这两个文件的描述,如下所示。其中,“js”和“css”定义文件类型,“name”定义文件路径及名称。
css 组件的样式文件,在该文件中编写组件的CSS样式。 EchartsWidgetTemplate.ftl 组件DOM结构文件,需要在服务端提前渲染的部分可以写在此文件中,相当于HTML文件,负责样式展示。 packageinfo.json 组件的元数据描述文件。 widegtApi
getWidgetBasePath 获取该组件静态资源的根路径,用来拼接组件内部的其他静态资源。 getMessages 获取该组件国际化配置文件中定义的国际化文件内容,推荐配置vue和vueI18n使用。 hideWidget 隐藏组件。 showWidget 显示组件。 triggerEvent
代码结构介绍 了解代码目录结构 目录文件详解 父主题: 自定义组件开发规范
根据业务需求,设置自定义桥接器中的数据连接逻辑,并将该目录中的所有文件和文件夹打成zip包。 将开发好的自定义桥接器zip包上传到AstroCanvas中。 在我的资产中,单击左侧导航栏的“我的桥接器”。 单击“添加新桥接器”,在“上传源文件”中,选择本地打包好的自定义桥接器包。 设置发行说明后,单击“提交”。
创建页面 初识开发页面 使用空白画布新建页面 使用模板新建页面 使用页面模板文件新建页面
将向您介绍,如何实现组件响应动作。 注册动作 在响应动作中,单击“响应动作”,在下拉框中选择对应的响应动作。 图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 * @params thisObj: 组件实例 */ Studio
”,可对该列进行编辑、删除、复制、左侧插入列和右侧插入列。 图3 编辑该列 导入Excel或CSV 单击“新增静态数据”,将本地的Excel或CSV文件(文件大小不能超过100KB)拖入“上传文件”中,单击“保存”。 单击“保存”,完成数据集的创建。 在数据集管理列表中,可查看到已创建的数据集。 在组件中使用数据集
交互,请参见echarts组件自定义动作交互设置。 异步加载 对于部分配置项,初始化echarts之前需要异步加载文件。例如“地图(SVG)”组件需要先加载svg文件。这里需要在异步加载动作的完成回调函数中,手动调用echarts的setOption。 图8 异步加载 引入第三方库
板和自定义模板),通过模板创建新的页面,可充分利用已有资源,减少重复开发,提高交付效率。 使用页面模板文件新建页面:将已开发的页面保存为模板,再次创建页面时可使用该页面模板文件,创建可视化页面,减少重复开发,提高交付效率。 发布及安装项目 项目开发完成后,可以在线预览,也可以一键打包从A环境发布、B环境安装,实现开发
在主菜单中,选择“我的资产”。 在左侧导航栏中,单击“我的素材”。 将鼠标放在对应的素材上,单击。 图6 查看素材详情 在素材详情页面,查看素材名称、大小、文件尺寸和上传时间。 删除素材 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在主菜单中,选择“我的资产”。 在左侧导航栏中,单击“我的素材”。
在左侧导航栏中,单击“我的桥接器”。 将鼠标放在对应的桥接器上,单击。 图6 编辑我的桥接器 在桥接器编辑页面,单击右上角的,获取锁。 按需在线修改桥接器文件,单击。 在弹出的提示框中,单击“确定”。 在桥接器更新页面,按需设置桥接器参数(如修改桥接器名称为桥接器-Update),单击“更新”。
上传图标:单击“+”,可设置连接器显示的图标。 描述:新建连接器的描述信息,可按需进行设置。 请求协议:设置连接器请求协议。 域名:请求的Host地址,不需要带上“http://”或“https://”协议头,同时也不需要“/”结尾。 域名参数:配置域名参数,包含字段名称、默认值和
设置空间页面配额 项目 创建大屏&PC端项目 创建移动端项目 设置项目锁 通用设置 健康检查设置 设置项目封面 页面 使用模板创建页面 使用页面模板文件新建页面 使用空白画布新建页面 为页面添加组件 设置页面数据 设置交互方式 资产迁移 发布项目 安装项目 常见问题 了解更多常见问题、案例和解决方案
在左侧导航栏中,单击“我的组件”。 将鼠标放在对应的组件上,单击。 图10 编辑组件 在组件编辑页面,单击右上角的,获取锁。 按需在线修改组件文件,单击。 在弹出的提示框中,单击“确定”。 在组件更新页面,按需设置组件参数(如修改组件名称为TabsWidget_Update),单击“更新”。
单击“新建”,新建一个客户端模式的密钥。 图29 新建认证密钥 返回OAuth管理页面,单击已创建认证后的。 图30 下载密钥文件 在弹出的页面,单击“确定”,将密钥下载到本地。 在下载的密钥文件中,获取客户端ID(client_id)和客户端密码(client_secret)。 图31 获取客户端ID和密钥