正在生成
详细信息:
检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
文件介绍及示例 文件介绍 {widget}.editor.js为组件属性定义文件,负责组件编辑状态时需要渲染的界面和逻辑。其中,“{widget}”为自定义组件的名称,如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题: 代码结构介绍
使用页面模板文件新建页面 创建移动端页面操作和大屏&PC端页面相同,本章节以创建大屏&PC端页面为例进行介绍。 操作场景 使用页面模板文件,构建开发页面,减少重复开发,提高交付效率。 前提条件 已获取对应的页面模板文件,详情请参见下载当前页面。 操作步骤 参考登录AstroCan
{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件,需要在服务端提前渲染的部分,可以写在此文件中,相当于HTML文件,负责样式展示。 文件示例 <div id="EchartsWidgetTemplate" v-cloak> <div ref="echartsDom"
{widget}.css 文件介绍 {widget}.css为组件的样式文件,在该文件中编写组件的CSS样式。AstroCanvas的组件未进行打包编译,CSS样式可能存在互相影响的风险。因为,CSS选择器务必要加上组件id,通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
{widget}.js 文件介绍 {widget}.js为组件逻辑文件,整个Widget的渲染核心JS,在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构,应包含表1中API。其中,init、render和beforeDestory为组件的通用生命周期函数,其余为推荐模板实现。
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件,用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription":
"messages-en" // 组件的多语言文件,相应文件为messages-en.json }, { "name": "messages-zh" // 组件的多语言文件,相应文件为messages-zh.json } ], 文件示例 messages-zh.json配置示例
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题: 目录文件详解
Item Val" } } ] } }, clickSeries字段对应组件{widget}.js文件中,注册的事件id。 Studio.registerEvents(this, "selectItem", { zh_CN: "选中选项"
与belong字段映射。 iconSrc String iconSrc: "image/setting.png" 图标地址。组件文件下,image文件中的setting.png。 classfication示例 classfication配置示例如下,其对应效果如图1所示。 classfication:
propertiesConfig 字段介绍 propertiesConfig是一个数组,用于保存组件配置项的相关字段,包括数据接入配置、组件配置项。 图1 propertiesConfig配置示例 数据接入配置 数据接入配置详细介绍,请参见组件数据接入。 组件配置项 配置示例如下
生成测试Key 其中,“服务器机器码”请配置为2中获取的内容,服务器名称请根据实际情况进行配置。 返回本地部署信息页面,单击服务器机器码后的,下载测试Key文件(runtime.key)。 图12 下载测试Key文件 将获取的测试Key,上传到本地服务器的“/home/canva
中选项)时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的eventConfig配置项中注册,以global_SelectWidget组件为例: 在文件global_SelectWidget.editor.js中定义事件 eventConfig:
MintUI库文件结构 packageinfo.json包含所要引入的文件。例如,MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件,请在packageinfo.json中添加这两个文件的描述,如下所示。其中,“js”和“css”定义文件类型,“name”定义文件路径及名称。
您可以通过“Excel模式”和“Json模式”两种模式设置静态数据。设置为“Excel模式”时,可执行如下操作: 单击“文件导入”,可将本地的数据导入到当前组件中使用。仅支持导入CSV和Excel格式的文件,且文件大小不能超过100KB。 执行导入操作前,请单击,查看当前组件对静态数据字段的要求。例如,玫瑰
服务。用户不需要管理任何服务器,即开即用。支持标准SQL/Spark SQL/Flink SQL,支持多种接入方式,并兼容主流数据格式。数据无需复杂的抽取、转换、加载,使用SQL或程序就可以对云上CloudTable、RDS、DWS、CSS、OBS、ECS自建数据库以及线下数据库
通过移动页面,将页面移动到其他文件夹中,便于页面集中管理。 操作步骤 参考登录AstroCanvas界面中操作,登录AstroCanvas界面。 在项目列表中,单击页面所在的项目,进入项目。 将鼠标放在对应的页面上,单击,选择“移动”。 选择目标文件夹,单击“确定”。 图1 移动页面
配置项总览 本章节介绍AstroCanvas支持的组件配置项,您可以通过{widget}.editor.js文件中定义的type字段,来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
开发人员来访统计大屏页面 开发告警处理情况统计移动端页面 05 实践 弹性云服务器(Elastic Cloud Server)是一种可随时自动获取、计算能力可弹性伸缩的云服务器。 部署web环境 什么是ECS 创建容器应用基本流程 快速创建一个kubernetes集群 3分钟创建一个游戏类容器应用