多米诺编辑器教程

1. 简介

2. 工具使用

* [边框]()

            控制的是控件边框线条的颜色、宽度、样式、以及圆角。

            颜色:边框颜色的设定方法,点击该属性可以在弹出的颜色画板中选择自己的颜色,也可以在下面的rgb()数值中输入特定的颜色值,进度条可以调整背景的透明度。当然在rgb手动输入的时候也可以设置,比如:rgba(106, 168, 79, 0.6),这里的0.6代表不透明度(0为全透明,100不透明,去掉该参数默认为不透明。 

            宽度:设定宽度以px为单位,决定边框线条的粗细。

            样式:设定边框线条为 实线,虚线,点状,双线,3D凹槽,3D垄状,3Dinsert3Doutset等。

            圆角:设置边框边缘的弧形度,使其直线条变成圆角矩形,设定基础单位为px

* [阴影]()

            控制控件阴影的颜色,宽度,横移,纵移,模糊,位置。

            颜色:阴影颜色的设定方法,点击该属性可以在弹出的颜色画板中选择自己的颜色,也可以在下面的rgb()数值中输入特定的颜色值,进度条可以调整背景的透明度。当然在rgb手动输入的时候也可以设置,比如:rgba(106, 168, 79, 0.6),这里的0.6代表不透明度(0为全透明,100不透明,去掉该参数默认为不透明。

            宽度:设定宽度以px为单位,决定阴影线条的粗细面积。

            横移:设定横移以px为单位,决定阴影面积的横向偏移量。

            纵移:设定纵移以px为单位,决定阴影面积的纵向偏移量。                

            模糊:设定模糊以px为单位,对阴影部分进行模糊处理。

            位置:设定阴影是在控件的内部显示还是外部显示。

* [文本]()

            文本的设定包括:字体,大小,粗体,斜体,删除线,下划线,字体颜色,对齐与居中。

            字体:serifsansarialarial blackcouriercourier newcomic sans mshelveticaimpactlucida Grandelucida sanstahomatimestimes new Romanverdanastkaitistxihei

            文字编辑:B加粗     I斜体     删除线      下划线

            大小:单位为1,最大为100,最小为1,如果是在非Retina显示1-12设定字体大小无变化。

            颜色:阴影颜色的设定方法,点击该属性可以在弹出的颜色画板中选择自己的颜色,也可以在下面的rgb()数值中输入特定的颜色值,进度条可以调整背景的透明度。当然在rgb手动输入的时候也可以设置,比如:rgba(106, 168, 79, 0.6),这里的0.6代表不透明度(0为全透明,100不透明,去掉该参数默认为不透明。

            对齐居中:对齐分别为左对齐,中间对齐,右侧对齐,两侧对齐。居中分别为靠上,居中,靠下等三种。                

* [文字阴影]()

            文字阴影的属性有颜色,横移,纵移,模糊。

            文字阴影的属性可以点击“+”号进行增加,让文字有多种阴影,每一种阴影可以设置他的横移,纵移,以及模糊等属性,来达到不错的效果。

            横移:设定横移以px为单位,决定阴影面积的横向偏移量。

            纵移:设定纵移以px为单位,决定阴影面积的纵向偏移量。                

            模糊:设定模糊以px为单位,对阴影部分进行模糊处理。

* [内容]()

            内容为该空间之内显示的文字等信息,不只是可以显示文字,任何控件的内容部分均支持html代码以及样式代码。可以根据实际情况做自定义的修改,如果在内容部分使用了自定义的htmlcss与外部控件的其他基础属性有重叠的话,将优先展示内容部分代码定义的效果。


* [页面]()

            在幻灯片中有页面,它可以包含任何一个控件或者控件的组合。也可以把整个页面嵌入到幻灯片中,作为幻灯片中的一页,你需要做的是要创建一个页面控件并选择好要嵌入的页面。  

            幻灯片的页面没有属性,大小取决于幻灯片控件的自身大小。这个页面操作方式相当于操作窗口一样,按住shift键可以拖动元素控件进入页面中。            


* [场景]()

            场景属性为一个页面的综合描述属性,包含导航事件,自定义尺寸,监听通知。

            导航事件,当勾选此项的时候,在页面的场景中会出现在程序运行时候,导航各个页面之间的纽带事件,包括切换到某个页面,正在进入,逆向返回,首次触摸等纽带事件。


            设置一个页面的自定义尺寸,便可以区别于整体工程的统一页面尺寸,在遇到比较长的页面需要展示全部信息的时候可以采用自定义页面尺寸来满足需求。

            监听通知,在进行javascript编程的时候,可以在代码中监听某些页面发送的通知,以用来操作该页面上元素的事件。

* [监听通知]()

            监听通知,在进行javascript编程的时候,可以在代码中监听某些页面发送的通知,以用来操作该页面上元素的事件。

* [卡片]()

            专属于幻灯片的属性,包括过度动画,速度,方向,循环,侧方可见数。

            过度动画:可以选择幻灯片过度时候的几种方式:走马灯,coverflowconcavecube立方体,翻转和经典。

            速度:可以设置幻灯片动画切换的持续时间,以0.1秒为单位。

            方向:可以设置幻灯片是横向过度还是纵向过度。

            循环:可以设置幻灯片是否播放完毕后,再从第一页开始播放。             

* [控制条]()

            控制条是针对于视频空间的一个特殊属性,设置有,则该视频组件有控制条,设置无,则不显示控制条。

* [关键帧]()

            关键帧是针对于视频空间的一个特殊属性,可以设置该视频播放到特定秒数的时候,触发特定事件来操作该页面上的元素事件。

* [文件]()    
            文件是属于多媒体的一个特殊属性,既选择某一个文件适配给某个多媒体控件。

* [锚点]()
            锚点是适配给窗口的一个特殊属性,当窗口中有很多控件,显示某块区域的分页(横向和纵向)效果的时候就可以采用锚点来解决,设置到相关的分页像素(px)即可。

            启动锚点的需要被动事件形式来处理,向前滚动,向后滚动,滚动到某某页面。

* [栏数]()
            栏数是适配给富文本的特殊属性,当富文本中显示的文字或者图文混排的时候,这个栏数就可以设置他的分栏阅读的样式。
* [玻璃擦]()
    * 自发事件:开始,进行中,结束。
    * 被动事件:显示,隐藏,激活,禁止。
    * 包含属性:
        * 尺寸(xy,宽,高,旋转,不透明);
        * 背景(rgba);
        * 边距;
        * 边框(rgba,宽度,样式,圆角);
        * 阴影(rgba,宽度,横移,纵移,模糊,位置);
        * 内容层(rgba);
        * 覆盖层(rgba); 

* [地图]()
    * 自发事件:无。
    * 被动事件:显示,隐藏。
    * 包含属性:
        * 尺寸(xy,宽,高,旋转,不透明);
        * 背景(rgba);
        * 边距;
        * 边框(rgba,宽度,样式,圆角);
        * 阴影(rgba,宽度,横移,纵移,模糊,位置);
        * 经度(可以设定当前坐标的经度);
        * 纬度(可以设定当前坐标的纬度);    
* [版本]()

        设置该项目的版本信息,作为项目更新的标记管理。


* [上传路径]()

        设置该项目的上传路径之后,制作的这个页面工程就可以上传到互联domino平台中的该路径下,在其他的联网终端上就可以共享查看了。


* [管理员账号]()

        设置管理员账号(在domino平台的注册用户),多个账户用分号隔开。这样,当你上传应用的时候,在你设置的账号中登录的时候,在其他账号我的作品菜单中就出现了该项目的预览工程(该账号中自己上传的工程标注为绿色,别人通过管理员共享的工程为蓝色);


* [尺寸]()

        设置该项目的所有页面的默认展示尺寸(宽 X 高)。


* [Retina Display]()

        如果该项目是否是要在高清屏幕上显示,那么工程的图片等素材就要比普通的大一些,当勾选次选项的时候,在制作过程中,导入图片素材是会默认将原来比例缩小二分之一,当然这不并不影响制作,并且在项目运行到设备上的时候会显示的更加清晰。      


* [背景颜色]()

        设置该项目的主体显示背景颜色,当页面中没有覆盖素材和控件的地方会显示这里设置的背景颜色。


* [浏览器标题]()

        设置该项目的浏览器标签显示的内容,注意:在微信中则是上面标的名称。默认为同名称。      

* [模板]()

        设置该项目的模板信息,3layers时,将兼容手机和各类浏览器的浏览模式。
* [顶部]()

        设置该项目的顶部页面,当你制作好一个打算作为项目中每个面都有的顶部标题或者其他类的控件组合的话,就在这里设置为这个页面即可。

* [底部]()

        设置该项目的底部页面,当你制作好一个打算作为项目中每个面都有的底部标题或者其他类的控件组合的话,就在这里设置为这个页面即可。

* [页面使用]()

        设置该项目中需要显示的相关页面,在手势导航和键盘导航中如果不希望用户自己滑动出来,就在这里勾选掉,这个只是控制用户的自主操作,避免打乱程序页面的流程,在自己的页面跳转制作当中还是可以调用的。

3. 事件机制

* [通知]()

        通知是在复杂的处理程序逻辑的时候,在javascript编程用到的一种特殊处理方式,当页面中需要负载处理的时候,比如请求网络实时数据,然后反馈在页面上,这个时候要发通知,然后在后台编写相应的网络请求,后台组织和处理数据,当然后台编程实际的过程中也是可以控制前台页面显示的相关控件的。

        通知在编程中是十分常用的功能,是连接后台和前台的纽带。


* [出现]()

        出现事件就是预加载页面(就绪)之后要执行的动作,在就绪事件处理完的控件之后,再处理出现功能调用的事件关系。


* [点击]()

        点击事件是控件的基础事件之一,手机上是一个触摸后抬起的动作,pc上就是鼠标的一次单击事件。

* [按下]()

        按下事件是按钮控件的基础事件之一,手机上是一个触摸不抬起时的动作,pc上就是鼠标的一次单击不抬起事件,在这个时候可以可以做事件关联,比如开启一动画,抬起时候结束动画事件等等。    

* [松开]()

        松开事件是和按下相互关联的事件,没有按下就没有松开。手机上是一个触摸后抬起的动作,pc上就是鼠标的一次单击事件的后半段事件。


* [开始]()

        这个事件指的是序列帧(gif)和玻璃擦控件,当gif开始播放的时候,即开始事件中既可以做相关的事件关系了,或者玻璃擦组件开始擦的时候会启动这个事件。           

* [结束]()

        这个事件指的是序列帧(gif)和玻璃擦控件,当gif开始播放的时候,即开始事件中既可以做相关的事件关系了。 


* [横向滚动]()

        容器类的控件有对应的滚动事件,当窗口等容器类控件被元素充满并且超出该区域范围的时候,就会产生横向滚动的需求,这个时候可以触发该事件,但是滚动事件是个很灵敏的事件,只要有滚动就会出发,所以该事件建议和动画的单步事件一起,可以看到慢播动画的效果。


* [纵向滚动]()

        容器类的控件有对应的滚动事件,当窗口等容器类控件被元素充满并且超出该区域范围的时候,就会产生纵向滚动的需求,这个时候可以触发该事件,但是滚动事件是个很灵敏的事件,只要有滚动就会出发,所以该事件建议和动画的单步事件一起,可以看到慢播动画的效果。


* [滚动到页面]()

        当窗口的容器控件设置分页锚点的时候,就会出现页面数,系统会给页面分配相应ID(名称可以自己设置),滚动到相应页面的时候在出发事件中就会排列出设置的那些页面的事件。       


* [切换页面]()

        该事件是针对幻灯片控件的,当幻灯片切换的时候,会触发该事件。            


* [N页出现]()

        该事件是针对幻灯片控件的,当幻灯片切换到某页面出现的时候就会触发该事件


* [开始播放]()

        该事件是多媒体文件的触发事件,当播放声音或者视频文件的时候触发该事件。


* [播放完成]()

        该事件是多媒体文件的触发事件,当播放声音或者视频文件完成的时候触发该事件



* [开始了]()

        该事件是动画组件的独有事件,当一个动画被执行开始动作的时候,该事件被触发,



* [结束了]()

        该事件是动画组件的独有事件,当一个动画被执行完毕之后,该事件被触发,此事件可以被利用作为循环动画(在结束之后再次开启动画本身)。



* [反向开始了]()

        该事件是动画组件的独有事件,动画有正向播放就会有反向播放,只有在keyframe动画的时候才可以有效的利用反向开始动画,当一个动画被执行完毕的时候,可以被调用反向开始,即这个时候该事件被触发。            


* [反向结束了]()

        该事件是动画组件的独有事件,动画有反向播放完毕时候,该事件被触发,此事件可以被利用作为循环动画(在结束之后再次开启动画本身)。


* [右翻页]()

        该事件是触摸手势的事件,当在设置了可以触摸的组件或者控件的时候,那么在该控件上就可以实现手势操作了,当在次控件上从左向右滑动的时候,触发该事件。           


* [左翻页]()

        该事件是触摸手势的事件,当在设置了可以触摸的组件或者控件的时候,那么在该控件上就可以实现手势操作了,当在次控件上从右向左滑动的时候,触发该事件。 


* [下翻页]()

        该事件是触摸手势的事件,当在设置了可以触摸的组件或者控件的时候,那么在该控件上就可以实现手势操作了,当在次控件上从上向下滑动的时候,触发该事件。 


* [上翻页]()

        该事件是触摸手势的事件,当在设置了可以触摸的组件或者控件的时候,那么在该控件上就可以实现手势操作了,当在次控件上从下向上滑动的时候,触发该事件。 


* [长按]()

        该事件是触摸手势的事件,当在设置了可以触摸的组件或者控件的时候,那么在该控件上就可以实现手势操作了,当在次控件上发生长按(2秒)的时候,触发该事件。 


* [缩小]()

        该事件是触摸手势的事件,当在设置了可以触摸的组件或者控件的时候,那么在该控件上就可以实现手势操作了,当在次控件上从两端向中间双指滑动的时候,触发该事件。 


* [放大]()

        该事件是触摸手势的事件,当在设置了可以触摸的组件或者控件的时候,那么在该控件上就可以实现手势操作了,当在次控件上从中间向两端滑动的时候,触发该事件。 


* [摇一摇]()

        该事件是微信(目前只支持微信摇一摇)的事件,当在某个环节(比如:某个动画播放完毕,提示用户摇动手机)设置了好之后,当手机摇一摇的时候就可以触发该事件。 


* [开始]()

        该事件是拖动组件的独有事件,当画布中摆放好拖动组件,并设置好要拖动的组件的时候,当激活拖动组件的时候,就可以拖动该目标控件,当目标控件刚被移动的时候,触发该事件。    

* [移动]()

        该事件是拖动组件的独有事件,当画布中摆放好拖动组件,并设置好要拖动的组件的时候,当激活拖动组件的时候,就可以拖动该目标控件,当目标控件被移动的过程中,触发该事件。  


* [结束]()

        该事件是拖动组件的独有事件,当画布中摆放好拖动组件,并设置好要拖动的组件的时候,当激活拖动组件的时候,就可以拖动该目标控件,当目标控件刚被移动的时候,触发该事件。  


* [超时]()

        该事件属于计时器组件的独有事件,当画布中放入计时器控件的时候,设置好超时时间,那么当计时器被启动后,经过设置的时间之后,就会触发该事件。    

* [N]()

        该事件属于计数器组件的独有事件,当画布中放入计数器控件的时候,设置好计数的个数(值只能设置整数),那么当计数器被启动后,经过设置的数值之后,就会触发该事件


* [其他事件]()

        domino平台中有一些小工具组件(比如:图片查看器,拼图游戏,画图板,玻璃擦,地图组件等)会有一些自己的触发事件,比如:拼图游戏完成的时候会触发拼好了事件,画图板导出图片的时候会触发图片导出事件,玻璃擦的开始,进行中和结束事件等等,这些事件的使用方式和基本组件没有什么差别,一样按照调用的规则进行使用即可。
* [开始播放和停止播放()

        开始播放和停止播放为多媒体控件以及有序列帧类的gif等的被动事件,即其他控件的触发事件都可以控制下一个控件的显示和隐藏。      


* [单步]()

        单步为动画,多媒体或者有序列帧类的控件的被动事件,单步:就是说按每一帧来播放图像和动画,但是单步不可以和其他的“点”触发事件进行关联,常常要和带有滚动性质的触发事件关联,比如窗口的横向或者纵向滚动事件,可以设置和动画事件的单步事件关联在一起,在窗口的缓慢滚动下可以清楚看到序列帧的单步播放,当前迅速滚动的话也是可以看到,只不过是速度要快很多。           


* [向后]()

        向后是幻灯片的被动事件,比如在一个按钮控件的点击事件中做幻灯片的向后事件关联,即可实现点击按钮一张张的向后播放幻灯片。


* [向前]()

        向前是幻灯片的被动事件,比如在一个按钮控件的点击事件中做幻灯片的向前事件关联,即可实现点击按钮一张张的向前播放幻灯片

* [跳到]()

        跳到是幻灯片的被动事件,比如在一个按钮控件的点击事件中做幻灯片跳到某一页的事件关联,即可实现点击按钮跳到幻灯片第三张。

* [播放]()

        播放是多媒体类组件的基本属性,即其他控件的触发事件都可以控制这类控件的播放事件。     

* [暂停]()

        暂停是多媒体类组件的基本属性,即其他控件的触发事件都可以控制这类控件的暂停事件。     

* [停止]()

        停止是多媒体类组件和动画以及序列帧类组件的基本属性,即其他控件的触发事件都可以控制这类控件的停止事件。     

* [静音和取消静音]()

        静音和取消静音是多媒体类组件视频的基本属性,即其他控件的触发事件都可以控制视频组件的静音和取消静音事件。     


* [开始和反向开始]()

        开始和反向开始动画的被动事件,如果和自身事件互相做事件关联,就可以实现不间断的动画效果。                           


* [激活和关闭]()

        激活和关闭是功能性组件以及辅助性组件的基本属性。当要启用一个功能性组件的时候,就可以调用他的激活事件,比如点击按钮激活拖动组件。当要关闭一个功能性组件的时候,就可以调用他的关闭事件,关闭以后该组件功能就不再生效了。 (注:页面组件只有激活事件,没有关闭事件。)           

* [取消]()

        取消是计时器的主要被动事件,类似于功能组件的激活和关闭中的关闭事件,当该事件被调用的时候,计时器将不再工作。

* [+1-1]()

        +1-1 是计数器的主要被动事件,当开启一个计数器之后,通过这两个被动事件来修改计数器统计值的变化。            

* [重置]()

        重置是计数器的基本被动事件,当开启一个计数器之后,通过这个动事件来修改计数器统计值的为设定的初始值。

3. 函数方法

3. 简单上手指南