Flex 4 Показать интерактивный контейнер при наведении курсора мыши

В настоящее время я пытаюсь создать контейнер B, который находится внутри другого контейнера A. Контейнер B по умолчанию невидим, при входе в контейнер A он должен становиться видимым и быть интерактивным. (представьте контейнер B в виде кнопки)

я использую следующий код

<fx:Script>
    <![CDATA[
        protected function mouseOverHandler(event:MouseEvent):void
        {
            this.voter.conB = true;
            this.voter.conB = true;
            this.addElement(this.conB);
        }

        protected function mouseOutHandler(event:MouseEvent):void
        {
            this.conB.visible = false;
            this.conB.enabled = false;
            this.addElement(this.conA);
        }
    ]]>
</fx:Script>

    <s:element id="conB" visible="false"/>
    <s:element id="conA" mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"/>

В основном это работает, проблема, которая у меня есть, заключается в том, что когда я переворачиваю containerB, то flex считает это как mouseOutEvent из контейнера A, что снова делает containerB невидимым, чем снова мышь находится в контейнере A, поскольку B невидим, а B снова запускается видимым . результатом является эффект мерцания на контейнере b, который также делает невозможным нажатие кнопки внутри контейнера b.

есть идеи, как решить эту проблему/другой способ реализовать то, что я намереваюсь?


person omni    schedule 05.11.2010    source источник


Ответы (3)


Хм нет проблема не в этом.

вот как выглядит код:

в основном я протестировал его с пользовательским скином (здесь он называется «тест») для класса кнопки искры, вот как он выглядит, но, как я уже сказал, это неотредактированный чистый автоматически сгенерированный гибкий код при определении новый скин для класса искровой кнопки

    <?xml version="1.0" encoding="utf-8"?>

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2008 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The default skin class for the Spark Button component.  

       @see spark.components.Button

      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5">

    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        /** 
         * @copy spark.skins.spark.ApplicationSkin#hostComponent
         */
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>

    <fx:Script fb:purpose="styling">
        <![CDATA[         
            /* Define the skin elements that should not be colorized. 
            For button, the graphics are colorized but the label is not. */
            static private const exclusions:Array = ["labelDisplay"];

            /** 
             * @private
             */     
            override public function get colorizeExclusions():Array {return exclusions;}

            /**
             * @private
             */
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }  

            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                var cr:Number = getStyle("cornerRadius");

                if (cornerRadius != cr)
                {
                    cornerRadius = cr;
                    shadow.radiusX = cornerRadius;
                    fill.radiusX = cornerRadius;
                    lowlight.radiusX = cornerRadius;
                    highlight.radiusX = cornerRadius;
                    border.radiusX = cornerRadius;
                }

                if (highlightStroke) highlightStroke.radiusX = cornerRadius;
                if (hldownstroke1) hldownstroke1.radiusX = cornerRadius;
                if (hldownstroke2) hldownstroke2.radiusX = cornerRadius;

                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }

            private var cornerRadius:Number = 2;
        ]]>        
    </fx:Script>

    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <!-- layer 1: shadow -->
    <!--- @private -->
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" 
                                 color.down="0xFFFFFF"
                                 alpha="0.01"
                                 alpha.down="0" />
                <s:GradientEntry color="0x000000" 
                                 color.down="0xFFFFFF" 
                                 alpha="0.07"
                                 alpha.down="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 2: fill -->
    <!--- @private -->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" 
                                 color.over="0xBBBDBD" 
                                 color.down="0xAAAAAA" 
                                 alpha="0.85" />
                <s:GradientEntry color="0xD8D8D8" 
                                 color.over="0x9FA0A1" 
                                 color.down="0x929496" 
                                 alpha="0.85" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 3: fill lowlight -->
    <!--- @private -->
    <s:Rect id="lowlight" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="270">
                <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
                <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
                <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 4: fill highlight -->
    <!--- @private -->
    <s:Rect id="highlight" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.0"
                                 alpha="0.33" 
                                 alpha.over="0.22" 
                                 alpha.down="0.12"/>
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48"
                                 alpha="0.33"
                                 alpha.over="0.22"
                                 alpha.down="0.12" />
                <s:GradientEntry color="0xFFFFFF"
                                 ratio="0.48001"
                                 alpha="0" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 5: highlight stroke (all states except down) -->
    <!--- @private -->
    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!-- layer 6: highlight stroke (down state only) -->
    <!--- @private -->
    <s:Rect id="hldownstroke1" left="1" right="1" top="1" bottom="1" radiusX="2" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
                <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    <!--- @private -->
    <s:Rect id="hldownstroke2" left="2" right="2" top="2" bottom="2" radiusX="2" includeIn="down">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
                <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <!--- @private -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000" 
                                 alpha="0.5625"
                                 alpha.down="0.6375" />
                <s:GradientEntry color="0x000000" 
                                 alpha="0.75" 
                                 alpha.down="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!-- layer 8: text -->
    <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
    <s:Label id="labelDisplay"
             textAlign="center"
             verticalAlign="middle"
             maxDisplayedLines="1"
             horizontalCenter="0" verticalCenter="1"
             left="10" right="10" top="2" bottom="2">
    </s:Label>

</s:SparkSkin>

затем у нас есть наш пользовательский компонент с именем «контейнер», например

    <?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
            xmlns:s="library://ns.adobe.com/flex/spark" 
            xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="components.*"
             width="200" height="100">

    <s:TextArea id="text_box" width="100%" height="100%">

    </s:TextArea>
    <s:HGroup id="my_container" gap="20" width="100" height="40" verticalCenter="0" horizontalCenter="0">
        <components:test/>
            <s:button />
    </s:HGroup>
</s:Group>

и, наконец, мы помещаем это в основное приложение, например:

    <?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" height="100" width="200" xmlns:components="components.*" backgroundAlpha="0">
    <fx:Declarations>

    </fx:Declarations>

    <fx:Script>
        <![CDATA[



            protected function mouseOverHandler(event:MouseEvent):void
            {
                this.myObject.my_container.visible = true;
                this.myObject.my_container.enabled = true;
            }

            protected function mouseOutHandler(event:MouseEvent):void
            {
                this.myObject.my_container.visible = false;
                this.myObject.my_container.enabled = false;
            }
        ]]>
    </fx:Script>

        <components:Comment id="myObject" mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)">

        </components:Comment>

</s:Application>

теперь, если вы попробуете это сделать, вы увидите, что компонент пользовательской кнопки искры в этом контейнере не активен. однако стандартный компонент s:button кликабельный, и я не знаю, почему.

person omni    schedule 08.11.2010
comment
Любые идеи? потому что я понятия не имею, почему расширение spark:button ведет себя так иначе, чем экземпляр spark:button - person omni; 11.11.2010

Если conB является дочерним элементом conA, то я думаю, что наведение мыши на conB не вызовет отключение мыши на conA. Та же базовая логика событий должна работать...

person kevinmrohr    schedule 05.11.2010
comment
ну, я создал пользовательский компонент (s:group), содержащий как conA, так и conB, и удалил this.addElement(this.conA), так как он заставил элементы исчезнуть, и теперь эффект мерцания исчез. Проблема: теперь кнопки внутри conB больше не нажимаются. Странно то, что если я использую стандартные кнопки s:button, их можно нажимать. но при создании пользовательского скина mxml на основе компонента s:button и использовании его в качестве кнопки в conB кнопка больше не нажимается. хотя НИЧЕГО не было изменено в пользовательском скине s:button. Любые идеи? - person omni; 08.11.2010
comment
Не похоже, что у вас есть новый скин с именем test, похоже, у вас есть пользовательский компонент с именем test, который, как я полагаю, расширяет компонент spark Button на основе вашего описания. Я думаю, мне нужно увидеть код для этого компонента и сопровождающий его скин, чтобы понять, почему он плохо себя ведет... - person kevinmrohr; 08.11.2010

Ну, я не совсем уверен, что понимаю ваш сценарий... просмотр кода, вероятно, поможет, но я знаю, что если у вас есть скин для элемента, и вы хотите, чтобы этот элемент содержал другой элемент, скин должен иметь это:

<s:Group id="contentGroup" depth="25"> 
  <s:layout> 
    <s:BasicLayout/>
  </s:layout> 
</s:Group> 

ContentGroup — это что-то вроде волшебного идентификатора для скинов, чтобы знать, что все, что вы вкладываете в объект скина (другими словами, к чему применяется скин), не покрывается самим скином. Глубина — это z-индекс, а глубина группы «contentGroup» должна быть выше, чем что-либо еще в скине. Надеюсь это поможет.

person kevinmrohr    schedule 08.11.2010
comment
хм, нет, z-глубина не может быть проблемой, так как основная кнопка искры работает, см. подробности ниже. - person omni; 09.11.2010