Flex中如何去掉ComboBox竖直方向分割符的例子

下面是main.mxml：

1. <? xml version = " 1.0 " encoding = " utf-8 " ?>
2. <!-- http://blog.flexexamples.com/2009/03/23/removing-the-vertical-separator-from-the-combobox-control-in-flex/ -->
3. < Application name = " ComboBox_skin_test "
4. xmlns = " http://www.adobe.com/2006/mxml "
5. backgroundColor = " white " >
7. < ComboBox id = " comboBox "
8. dataProvider = " [The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog] "
9. skin = " CustomComboBoxSkin " />
11. </ Application >

下面是CustomComboBoxSkin.as：

1. package {
2. import flash . display . GradientType ;
3. import flash . display . Graphics ;
5. import mx . skins . halo . ComboBoxArrowSkin ;
6. import mx . skins . halo . HaloColors ;
7. import mx . styles . StyleManager ;
8. import mx . utils . ColorUtil ;
10. public class CustomComboBoxSkin extends ComboBoxArrowSkin {
11. private static var cache : Object = {} ;
13. public function CustomComboBoxSkin () {
14. super () ;
15. }
17. private static function calcDerivedStyles ( themeColor : uint , borderColor : uint , fillColor0 : uint , fillColor1 : uint ) : Object {
18. var key : String = HaloColors . getCacheKey ( themeColor , borderColor , fillColor0 , fillColor1 ) ;
19. if ( ! cache [ key ]) {
20. var o : Object = cache [ key ] = {} ;
21. HaloColors . addHaloColors ( o , themeColor , fillColor0 , fillColor1 ) ;
22. }
23. return cache [ key ] ;
24. }
26. override protected function updateDisplayList ( w : Number , h : Number ) : void {
27. super . updateDisplayList ( w , h ) ;
29. var arrowColor : uint = getStyle ( " iconColor " ) ;
30. var borderColor : uint = getStyle ( " borderColor " ) ;
31. var cornerRadius : Number = getStyle ( " cornerRadius " ) ;
32. var dropdownBorderColor : Number = getStyle ( " dropdownBorderColor " ) ;
33. var fillAlphas : Array = getStyle ( " fillAlphas " ) ;
34. var fillColors : Array = getStyle ( " fillColors " ) ;
35. StyleManager . getColorNames ( fillColors ) ;
36. var highlightAlphas : Array = getStyle ( " highlightAlphas " ) ;
37. var themeColor : uint = getStyle ( " themeColor " ) ;
39. // The dropdownBorderColor is currently only used
40. // when displaying an error state.
41. if ( ! isNaN ( dropdownBorderColor )) {
42. borderColor = dropdownBorderColor ;
43. }
45. var derStyles : Object = calcDerivedStyles ( themeColor , borderColor , fillColors [ 0 ] , fillColors [ 1 ]) ;
46. var borderColorDrk1 : Number = ColorUtil . adjustBrightness2 ( borderColor , - 50 ) ;
47. var themeColorDrk1 : Number = ColorUtil . adjustBrightness2 ( themeColor , - 25 ) ;
48. var cornerRadius1 : Number = Math . max ( cornerRadius - 1 , 0 ) ;
49. var cr : Object = { tl : 0 , tr : cornerRadius , bl : 0 , br : cornerRadius } ;
50. var cr1 : Object = { tl : 0 , tr : cornerRadius1 , bl : 0 , br : cornerRadius1 } ;
51. var arrowOnly : Boolean = true ;
53. // If our name doesn't include "editable", we are drawing the non-edit
54. // skin which spans the entire control
55. if ( name . indexOf ( " editable " ) < 0 ) {
56. arrowOnly = false ;
57. cr . tl = cr . bl = cornerRadius ;
58. cr1 . tl = cr1 . bl = cornerRadius1 ;
59. }
61. var g : Graphics = graphics ;
62. g . clear () ;
64. // Draw the border and fill.
65. switch ( name ) {
66. case " upSkin " :
67. case " editableUpSkin " : {
68. var upFillColors : Array = [ fillColors [ 0 ] , fillColors [ 1 ] ] ;
69. var upFillAlphas : Array = [ fillAlphas [ 0 ] , fillAlphas [ 1 ] ] ;
71. // border
72. drawRoundRect ( 0 , 0 , w , h , cr ,
73. [ borderColor , borderColorDrk1 ] , 1 ,
74. verticalGradientMatrix ( 0 , 0 , w , h ) ,
75. GradientType . LINEAR , null ,
76. { x : 1 , y : 1 , w : w - 2 , h : h - 2 , r : cr1 }) ;
78. // button fill
79. drawRoundRect ( 1 , 1 , w - 2 , h - 2 , cr1 ,
80. upFillColors , upFillAlphas ,
81. verticalGradientMatrix ( 1 , 1 , w - 2 , h - 2 )) ;
83. // top highlight
84. drawRoundRect ( 1 , 1 , w - 2 , ( h - 2 ) / 2,
85. { tl: cornerRadius1, tr: cornerRadius1, bl: 0, br: 0 },
86. [ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
87. verticalGradientMatrix(1, 1, w - 2, (h - 2) / 2 ) );
89. break ;
90. }
92. case " overSkin " :
93. case " editableOverSkin " : {
94. var overFillColors : Array ;
95. if ( fillColors . length > 2 ) {
96. overFillColors = [ fillColors [ 2 ] , fillColors [ 3 ] ] ;
97. } else {
98. overFillColors = [ fillColors [ 0 ] , fillColors [ 1 ] ] ;
99. }
101. var overFillAlphas : Array ;
102. if ( fillAlphas . length > 2 ) {
103. overFillAlphas = [ fillAlphas [ 2 ] , fillAlphas [ 3 ] ] ;
104. } else {
105. overFillAlphas = [ fillAlphas [ 0 ] , fillAlphas [ 1 ] ] ;
106. }
108. // border
109. drawRoundRect ( 0 , 0 , w , h , cr ,
110. [ themeColor , themeColorDrk1 ] , 1 ,
111. verticalGradientMatrix ( 0 , 0 , w , h ) ,
112. GradientType . LINEAR , null ,
113. { x : 1 , y : 1 , w : w - 2 , h : h - 2 , r : cr1 }) ;
115. // button fill
116. drawRoundRect ( 1 , 1 , w - 2 , h - 2 , cr1 ,
117. overFillColors , overFillAlphas ,
118. verticalGradientMatrix ( 1 , 1 , w - 2 , h - 2 )) ;
120. // top highlight
121. drawRoundRect ( 1 , 1 , w - 2 , ( h - 2 ) / 2,
122. { tl: cornerRadius1, tr: cornerRadius1, bl: 0, br: 0 },
123. [ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
124. verticalGradientMatrix(0, 0, w - 2, (h - 2) / 2 ) );
126. break ;
127. }
129. case " downSkin " :
130. case " editableDownSkin " : {
131. // border
132. drawRoundRect ( 0 , 0 , w , h , cr ,
133. [ themeColor , themeColorDrk1 ] , 1 ,
134. verticalGradientMatrix ( 0 , 0 , w , h )) ;
136. // button fill
137. drawRoundRect ( 1 , 1 , w - 2 , h - 2 , cr1 ,
138. [ derStyles . fillColorPress1 , derStyles . fillColorPress2 ] , 1 ,
139. verticalGradientMatrix ( 1 , 1 , w - 2 , h - 2 )) ;
141. // top highlight
142. drawRoundRect ( 1 , 1 , w - 2 , ( h - 2 ) / 2,
143. { tl: cornerRadius1, tr: cornerRadius1, bl: 0, br: 0 },
144. [ 0xFFFFFF, 0xFFFFFF ], highlightAlphas,
145. verticalGradientMatrix(1, 1, w - 2, (h - 2) / 2 ) );
147. break ;
148. }
150. case " disabledSkin " :
151. case " editableDisabledSkin " : {
152. var disFillColors : Array = [ fillColors [ 0 ] , fillColors [ 1 ] ] ;
153. var disFillAlphas : Array = [ Math . max ( 0 , fillAlphas [ 0 ] - 0.15 ) , Math . max ( 0 , fillAlphas [ 1 ] - 0.15 ) ] ;
155. // border
156. drawRoundRect ( 0 , 0 , w , h , cr ,
157. [ borderColor , borderColorDrk1 ] , 0.5 ,
158. verticalGradientMatrix ( 0 , 0 , w , h ) ,
159. GradientType . LINEAR , null ,
160. { x : 1 , y : 1 , w : w - 2 , h : h - 2 , r : cr1 }) ;
162. // button fill
163. drawRoundRect ( 1 , 1 , w - 2 , h - 2 , cr1 ,
164. disFillColors , disFillAlphas ,
165. verticalGradientMatrix ( 0 , 0 , w - 2 , h - 2 )) ;
167. arrowColor = getStyle ( " disabledIconColor " ) ;
168. break ;
169. }
170. }
172. // Draw the triangle.
173. g . beginFill ( arrowColor ) ;
174. g . moveTo ( w - 11.5 , h / 2 + 3);
175. g.lineTo(w - 15, h / 2 - 2 ) ;
176. g . lineTo

分享到：

Flex中如何利用headerSeparatorSkin样式， ... | 投资参考729

• 2009-07-30 17:09
• 浏览 190
• 评论(0)
• 相关推荐

评论

发表评论

您还没有登录,请您登录后再发表评论