Flex 4 Afficher le conteneur interactif sur MouseOver

Question

Actuellement, j'essaie de créer un conteneur B qui se trouve dans un autre conteneur A. Le conteneur B est invisible par défaut, lorsqu'il entre dans le conteneur A, il est censé devenir visible et interactif. (Imaginez récipient B comme un bouton)

J'utilise le code suivant

<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)"/> 

Basicly son travail, le problème que j'ai est que quand je roule sur containerB compte alors flex que mouseOutEvent du contenant A, ce qui rend le conteneur B invisible à nouveau, alors que la souris est à nouveau sur le conteneur A puisque B est invisible et que B est à nouveau visible. le résultat est un effet de scintillement sur le conteneur b, ce qui rend également impossible de cliquer sur le bouton dans le conteneur b.

des idées comment résoudre ce problème/une autre façon de réaliser ce que j'ai l'intention?

Answer 1

Si conB est un enfant de conA, alors je penserais que la souris sur conB ne déclencherait pas de souris sur conA. La même logique d'événement de base devrait encore fonctionner ...

Answer 2

Eh bien, je ne suis pas totalement sûr que je comprends votre scénario ... voyant le code aiderait probablement, mais je sais si vous avez un skin sur un élément et que vous voulez cet élément pour contenir un autre élément, la peau doit avoir ceci:

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

le contentGroup est quelque chose d'une magie ID pour les peaux de savoir que tout ce que vous nid dans l'objet de la peau (en d'autres termes, ce que la peau est étant appliqué à) n'est pas couvert par la peau elle-même. Depth est l'index z, et la profondeur du groupe "contentGroup" doit être plus élevée que toute autre chose dans l'habillage. J'espère que cela t'aides.

Answer 3

Hmm non ce n'est pas le problème.

ici ce que le code ressemble à:

basiquement je l'ai testé avec une peau personnalisée (ici appelée « test ») pour la classe bouton d'allumage, voici à quoi il ressemble, mais comme je l'ai dit c'est le non édité Code flex pur généré automatiquement lors de la définition d'une nouvelle peau pour le bouton d'allumage classe

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

prochaine, nous avons notre composant personnalisé nommé « conteneur » comme

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

et nous mettons finalement que dans l'application principale comme:

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

maintenant si vous essayez, vous verrez que le bouton étincelle composant personnalisé dans ce conteneur n'est pas cliquable. cependant, le composant standard du bouton s: est cliquable, et je ne sais pas pourquoi.