如何快速使用酷屏组件设计器

2329
1

908791215 数据达人Lv4

发表于2019-12-17 16:38

楼主
本帖最后由 908791215 于 2019-12-17 16:54 编辑

1.  新建HTML组件设计器
       先看到酷屏设计界面的左边,在“HTML组件”一栏中,右键单击目标文件夹,选择“新建HTML组件”。这时,一个新的酷屏组件设计器就展现出来了
       截图201912171547222915.png
       以下是新建的页面
       截图201912171548085613.png
2.  主要功能介绍      
2.1  代码区说明
2.1.1  源代码
   本部分用来写HTML静态代码,组件中,只要是静态的、不变的、不需要交互(动态传值)的部分,都可以写在这里面。
   建议只要能写静态的,就绝不要写动态,因为这样浏览 器执行效率会高很多。
2.1.2  js文件
   本部分写动态的js脚本,根据该文件里和wiki中提供的模板,来完成你所需要的功能吧。第一次写注意一下各个参数的意义,以及参数的值的形式。
2.1.3  css文件
   本部分写css样式文件。
  注意:js文件和css文件会以从左到右的顺序依次被编译,因此如果js存在父子关系的对象,父对象要放在子对象左边,这些jscss只会在该组件中被调用,作用于本组件中
2.2  取数定义说明
   取数定义里定义的数据,即为组件在运行时需要的参数,一般是可以通过拾取表元而获得的数据,在定义时,可以设定一个默认值。
         截图201912171601153694.png
    点击取数定义后,在弹出的对话框中,点击"+"  号,就可以实现变量的创建,变量设定完毕后,点击 "确认" 保存。
    所有的取数,在js代码中,都会以字符串的形式存放在 "vardata" 参数中,例如上图中,想使用 item 参数,就要写成 vardata.item 。
2.3  组件属性配置说明
截图201912171607077641.png
          截图201912171607356501.png
       “属性”是指,在编辑界面的右侧,可以根据编辑人员的需求,来改变参数,如右图的“上下文组件”中,四个属性都是通过左图中 “+” 自定义的属性,前面7个属性是组件默认的属性,从第八条开始才是你自己新建的组件。
      对于一个属性而言,左图红圈中的五项很重要。
  (1)“属性名称”可以理解为,你在写js代码时,在  “setProperty” 方法中传入的 “key” 值。
  (2)“属性标题”是指在右侧属性面板上这个属性的名称,例如右图红框里面的,都是标题属性。
      (3)“类型”分为很多种,右图红框属性的类型,就是输入框,编辑者自己敲自己需要的内容,类型一共有五种,如下图。
         截图201912171621424536.png
  (4)“编辑”是说,可不可以在右侧属性面板,对该属性进行写操作,去掉勾勾以后,该属性就是不可写状态。
  (5)“显示”,如果勾选了,该属性就会显示在属性面板上,去掉勾勾,则该属性不显示在属性面板
       再看回“事件”选项,“事件”的只是提供一个接口,实现这个接口的,是你组件的使用者。
         截图201912171624217574.png
      (6)自定义打开对话框,参考脚本
          getObjectFromRootAsync(cls, saveid, disposeit, jssrc, onfinish, dontshowWaitDialog, userdata),以根窗体的window对象空间创建一个类对象,各参数含义
参数名
该例参数
含义
cls"FloatBtnDialog"要创建的类的类名
saveid"_FloatBtnDialog"唯一id ,如果传递saveid则表示将创建的对象寄存到wnd上,下次不再创建而直接获取
disposeit true是否添加dispose事件,如果saveid且disposeit则此函数在创建对象时为对象添加dispose的事件
jssrc"vfs/root/products/ebi/sys/coolrpt/coolresource/js/floatBtnDialog.js"js文件路径,在创建对象之前,先确保wnd引用了jssrc指定的js,在处理jssrc引用的时候是异步的引用方式,多个文件用逗号分隔
onfinishfunction(dlg){}当需要应用的jssrc都装入完毕后创建对象并触发回调事件onfinish,参数表示创建的对象
dontshowWaitDialog 是否显示等待框
userdata 用户数据

  1. // userfunc属性自定义脚本默认接口函数
  2. function userFunc(cwidget,editor,options) {
  3.     getObjectFromRootAsync("FloatBtnDialog","_FloatBtnDialog",true,
  4.     "vfs/root/products/ebi/sys/coolrpt/coolresource/js/floatBtnDialog.js", // floatBtnDialog.js自定义对话框脚本文件
  5.     function(dlg){ // dlg为新建FloatBtnDialog类对象,该方法为对话框的操作及数据处理
  6.         var value = cwidget.getProperty("opervalue");
  7.         //打开对话框
  8.         if(!!value){
  9.            dlg.show(value);
  10.         }else{
  11.            dlg.show();
  12.         }
  13.         // 点击确定按钮,处理
  14.         dlg.setOnOk(function() {
  15.             var value = dlg.getIdValue();
  16.             // 对value进行处理,可以运行cwidget的方法
  17.             
  18.         });
  19.     });
  20. } // 具体请参考‘浮动按钮’组件‘操作命令’属性
复制代码
2.4  插入图片功能说明
        插入图片,简单来讲就是,把你所需要的图片素材,从本地上传到vfs服务器上的过程。下图是插入图片的界面。
          截图201912171628222955.png
      点击上传图片,选择所需要上传的图片就行了,单击所需要的图片,点击“确定”就可以事件图片的插入了。
       这里值得一说的事,图片管理的默认界面,显示的都是用户图标,如你在上图所见,而系统图标点击后,所显示的图片就是系统自带的,一般用户并不能往系统图标里上传图片。
2.5  预览功能说明
   “预览按钮点击后,会显示你的组件目前的效果。
          截图201912171633393780.png
2.6  另存为“HTML”组件
         这个按钮可以将你的组件另存为,创建一个副本并保存。

3.  酷屏组件使用流程
(1)新建酷屏组件
(2)设计取数定义
(3)考虑需要的属性,并留好接口
(4)通过你掌握的html、js、css知识,依次写好对应的三个文件
(5)插入图片素材
(6)点击预览,看你的组件效果
(7) 检查你的组件、debug,若符合要求就点击“保存”。
   
   至此,一个酷屏组件就编写完毕了。

最近看过此主题的会员

15350939

鹿白

pandabuxizao

mske_js

mengchenlong

zk_jeson

杨国签

esen_4DMTKMGCI4W5

刘凯源

adhzh

liu20220622

1个回答

只看楼主

leiz 小试身手Lv3

发表于2019-12-17 16:57

只看该作者

取消 关注该作者的回复

沙发

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

一对一专家交流

版权所有© 2006-2024 北京亿信华辰软件有限责任公司 京ICP备07017321号 京公网安备11010802016281号