Seemingly simple skinning problem in Flex4; style gives disco effect
- by Cheradenine
I'm doing something wrong, but I can't figure out what. Simple project in flex4, whereby I create a skinned combobox (fragments at end).
If I turn on the 3 skin references (over-skin, up-skin, down-skin), the combobox appears to simply stop working. If I remove the up-skin, hovering over the combo produces a flickering effect, where it appears to apply the style, then remove it immediately.
I get the same thing with a button instead of a combo.
I'm sure it's something really simple, but it's evading me.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:containers="flexlib.containers.*">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
#myCombo
{
over-skin: ClassReference("nmx.MyComboSkin");
up-skin: ClassReference("nmx.MyComboSkin");
down-skin: ClassReference("nmx.MyComboSkin");
}
</fx:Style>
<fx:Script>
<![CDATA[
[Bindable]
public var items:Array = ["A","B","C"];
]]>
</fx:Script>
<mx:Canvas backgroundColor="#ff0000" width="726" height="165" x="20" y="41">
<mx:ComboBox id="myCombo" x="10" y="10" prompt="Hospital" dataProvider="{items}">
</mx:ComboBox>
</mx:Canvas>
</s:Application>
Skin Definition:
package nmx
{
import flash.display.GradientType;
import flash.display.Graphics;
import mx.skins.Border;
import mx.skins.ProgrammaticSkin;
import mx.skins.halo.ComboBoxArrowSkin;
import mx.skins.halo.HaloColors;
import mx.utils.ColorUtil;
public class MyComboSkin extends ProgrammaticSkin
{
public function MyComboSkin()
{
super();
}
override protected function updateDisplayList(w:Number, h:Number):void
{
trace(name);
super.updateDisplayList(w, h);
var arrowColor:int = 0xffffff;
var g:Graphics = graphics;
g.clear();
// Draw the border and fill.
switch (name)
{
case "upSkin":
case "editableUpSkin":
{
g.moveTo(0,0);
g.lineStyle(1,arrowColor);
g.lineTo(w-1,0);
g.lineTo(w-1,h-1);
g.lineTo(0,h-1);
g.lineTo(0,0);
}
break;
case "overSkin":
case "editableOverSkin":
case "downSkin":
case "editableDownSkin":
{
// border
/*drawRoundRect(
0, 0, w, h, cr,
[ themeColor, themeColor ], 1);
*/
g.moveTo(0,0);
g.lineStyle(1,arrowColor);
g.lineTo(w-1,0);
g.lineTo(w-1,h-1);
g.lineTo(0,h-1);
g.lineTo(0,0);
// Draw the triangle.
g.beginFill(arrowColor);
g.moveTo(w - 11.5, h / 2 + 3);
g.lineTo(w - 15, h / 2 - 2);
g.lineTo(w - 8, h / 2 - 2);
g.lineTo(w - 11.5, h / 2 + 3);
g.endFill();
}
break;
case "disabledSkin":
case "editableDisabledSkin":
{
break;
}
}
}
}
}
