SCADA实例分析之二 --- scada积木模板(scat)之 可拖动的图像按钮

本文以app应用中的 积木模板之一:  可拖动的图像按钮模板 说明scada模板的一般写法:

    scada模板是 集成可视化设计+脚本控制的 可重用性元素.

    本例子的按钮效果:

　　　　1.  当鼠标晃动到按钮上, 出现一个以渐变方式填充的背景.

           2.  当鼠标点下后, 改变渐变填充背景效果.

           3.  支持拖动.

    感谢我同事Vienna为此作出的UI设计工作,  本应用是根据是Vienna的UI设计而实现的.

    代码如下:

----------------------------------------------------------------------------------------------------------------------

  1 /*
  2     Vienna在 app应用中 设计的 icon模板
  3     用于 常用工具显示, 并且这个按钮 有鼠标状态的 变动效果. 
  4 ------------------------------------------------------------------------    
  5 
  6     
  7 
  8 
  9 
 10 */
 11 
 12 
 13 #begin design scada
 14 $$Template = newObject() ;    // 清空$$Template
 15 <LDL>
 16 
 17 %    $$Template
 18 [type]    brick
 19 (x)    48
 20 (y)    33
 21 (width)    60
 22 (height)    60
 23 [border.color]    Black
 24 [border.type]    none
 25 [bgn.type]    image
 26 [bgn.imageFile]    /app/res/icon/icon1.png
 27 [bgn.imageFillStyle]    center
 28 
 29 </LDL>
 30 #end design scada
 31 
 32 
 33 /*
 34     基于scada模板基础上 实现的 积木扩展类 写法样板: 
 35     
 36         1. 在$$Template后面, 复制 $$Template到 另一特定变量, 因为 $$Template会被覆盖.                 
 37         2. 在类的初始化中, 复制 积木模板信息, 设置对象的扩展事件处理.  
 38 
 39 */
 40 
 41 // $$Template会被多处定义: 
 42 //    因此复制下来. $$Template--->$btnImageTemplate 
 43 $btnImageTemplate = newObject()  ;
 44 $btnImageTemplate->cloneTree($$Template) ;
 45 newClass( "BtnImage", $$Template ) ;    // 修复$$Template, 以保障在可视化工具中工作正常.        
 46 
 47 class BtnImage
 48 {
 49     function BtnImage( $brickDescript )
 50     {
 51         $this->init( $brickDescript ) ;
 52     }
 53 
 54     /// 初始化描述信息( 复制类的模板, 绑定事件处理 ). 
 55     function init( $brickDescript ) 
 56     {
 57         // 复制模板
 58     extern $btnImageTemplate ;
 59         $brickDescript->cloneTree($btnImageTemplate) ;
 60 
 61         // 设置事件处理.         
 62         $brickDescript.eventHandler = $this ;    // 定义 积木对象事件之 扩展处理对象.             
 63         $brickDescript.onMouseOn             = "$$eventObj.eventHandler->setButtonState_On($$eventObj) ;      $$scadaWnd->redrawWnd() ;  " ;
 64         $brickDescript.onMouseOut             = "$$eventObj.eventHandler->setButtonState_Common($$eventObj) ;  $$scadaWnd->redrawWnd() ;  " ;
 65         $brickDescript.onLButtonDown         = "$$eventObj.eventHandler->setButtonState_Pressed($$eventObj) ; $$scadaWnd->redrawWnd() ;  " ;
 66         $brickDescript.onMouseMove            = "$$eventObj.eventHandler->onMouseMove($$eventObj) ;" ;
 67         $brickDescript.onLButtonUp         = "$$eventObj.eventHandler->onLButtonUp($$eventObj) ; " ;
 68 
 69     }
 70 
 71     /// 这是image button处于 鼠标移动上去的状态. 
 72     function  setButtonState_On( $btn )
 73     {
 74         // 设置为 渐变 + 图片 背景, 圆弧边框.
 75         $btn.bgn.type             = "commonAndImage" ;
 76         $btn.bgn.color             = "#838383" ;
 77         $btn.bgn.colorAlpha      = 76 ;
 78         $btn.bgn.color2             = "#4b4a4a" ;
 79         $btn.bgn.color2Alpha     = 128 ;
 80         $btn.bgn.fillStyle         = "TopToBottom" ;
 81         $btn.bgn.imageFillStyle = "center" ;
 82         $btn->updateBgn() ;
 83         
 84         $btn.border.type            = "roundRect" ;
 85         $btn.border.color         = "#1f1f1f" ;
 86         $btn.border.colorAlpha     = 102 ;
 87         $btn->updateBorder() ;
 88         
 89     }
 90 
 91     /// 这是Button处于 标准状态
 92     function  setButtonState_Common( $btn )
 93     {
 94         // 设置为 全透明背景
 95         $btn.bgn.type = "image" ;    
 96         $btn.bgn.imageFillStyle = "center" ;
 97         $btn->updateBgn() ;
 98         
 99         $btn.border.type = "none" ;
100         $btn->updateBorder() ;
101         
102     }
103 
104     /// 这是button处于 鼠标按下去的状态. 
105     function  setButtonState_Pressed( $btn )
106     {
107         $btn.dragging = true ;
108     extern $$scadaWnd ;
109 
110         $$scadaWnd->getCursorPos( $x, $y ) ;
111         $btn.beginCatchX = $x ;
112         $btn.beginCatchY = $y ;
113         $btn.beginX = $btn->getX() ;
114         $btn.beginY = $btn->getY() ;
115 
116         // 设置为 渐变 + 图片 背景, 圆弧边框.
117         $btn.bgn.type             = "commonAndImage" ;
118         $btn.bgn.color             = "#838383" ;
119         $btn.bgn.colorAlpha      = 76 ;
120         $btn.bgn.color2             = "#4b4a4a" ;
121         $btn.bgn.color2Alpha     = 128 ;
122         $btn.bgn.fillStyle         = "BottomToTop" ;
123         $btn.bgn.imageFillStyle = "center" ;
124         $btn->updateBgn() ;
125         
126         $btn.border.type            = "roundRect" ;
127         $btn.border.color         = "#1f1f1f" ;
128         $btn.border.colorAlpha     = 102 ;
129         $btn->updateBorder() ;
130         
131     }
132 
133     function onMouseMove( $brick ) 
134     {
135     extern $$main ;
136     extern $$scadaWnd ;
137 
138         if( $brick.dragging!=true )
139         {
140             return ;
141         }
142 
143         $$scadaWnd->getCursorPos( $x, $y ) ;    
144         $newX = ($x-$brick.beginCatchX)+$brick.beginX ;  
145         $newY = ($y-$brick.beginCatchY)+$brick.beginY ;  
146         if( $newX!=$brick->getX() || $newY!=$brick->getY() )
147         {
148             $brick->moveTo( $newX, $newY ) ;
149             $$scadaWnd->redrawWnd() ;
150         }        
151             
152     }
153 
154     function onLButtonUp( $brick ) 
155     {
156         $brick.dragging = false ;
157 
158     extern $$scadaWnd ;
159         $$scadaWnd->getCursorPos( $x, $y ) ;
160         
161     extern $$page ;    
162         
163         $$page->onDrop_ImageButton( $brick, $x,$y ) ;
164         
165     }
166     
167 }
168 
169 
170 
171 
172 
173  

 

实际效果: