Flex4中看似简单的皮肤问题;风格给迪斯科效果

时间:2010-04-16 15:34:14

标签: css flex flex4 skinning

我做错了什么,但我无法弄清楚是什么。 flex4中的简单项目,我创建了一个带皮肤的组合框(末尾的碎片)。

如果我打开3个皮肤参考(皮肤过度,皮肤上,皮肤下),组合框似乎只是停止工作。如果我移除了上层皮肤,将鼠标悬停在组合上会产生闪烁效果,似乎应用了该样式,然后立即将其删除。

我用一个按钮而不是一个组合来获得同样的东西。

我确信这很简单,但它正在躲避我。

    <?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>

皮肤定义:

    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;
                        }
                    }


                }
            }


    }

2 个答案:

答案 0 :(得分:0)

我会在你的switch语句中添加一个实际绘制内容的默认值,但它看起来确实是一个奇怪的问题。只是设置:

skin: ClassReference("nmx.MyComboSkin");

帮助解决问题?你的皮肤本身实际上处理状态,所以你不需要将它分配给每个单独的状态。

答案 1 :(得分:0)

啊哈!发现它..

因为我的皮肤只画了一个空心的矩形,所以击中测试显然是失败的。 I.E:如果鼠标指针在组合按钮的文本上方,那就是皮肤过度,否则只是正常的upSkin。

添加以下修复:

g.beginFill(0x0000ff,0);
g.drawRect(0,0,w,h);
g.endFill();

绘制一个完全透明的矩形(!)。

相关问题