0 Replies Latest reply on Dec 10, 2010 8:25 PM by sanggpark

    skin state problem with PopupAnchor

    sanggpark Level 1

      I wanted a button which on hover show a popup. and depending on some state, add/remove elements from the popup.

      I extended Button to create HoverButton and used DropDownController with PopupAnchor to get the hover to popup behavior. However for some reason removing element from the popup using skin state isn't working. I've included a sample code below.

       

      Basically when you mouse hover over the button, you should see a popup with one or two label depending on state which gets toggled when you click on the button. Initially you see one label in the popup because it's in open state. when you click on the button, state should change to close. so when you hover on the button, popup shows up with two button. So far so good. But if you move your mouse away and then hover again, all of sudden you don't get the second button.

       

      anyone have any idea why this is happening?

       

      MainApplication.mxml

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

      <s:WindowedApplication

           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:local="*">

       

      <local:HoverButton skinClass="HoverButtonSkin" label="wtf" horizontalCenter="0" verticalCenter="0"/>

      </s:WindowedApplication>

       

       

      HoverButton.as

      package 

      {

      import flash.events.MouseEvent;

       

      import spark.components.Button;

      import spark.components.Group;

      import spark.components.supportClasses.DropDownController;

      import spark.events.DropDownEvent;

       

      [SkinState("open")]

      [SkinState("close")]

      public class HoverButton extends Button

      {

      private var _dropDownController:DropDownController;

      private var _open:Boolean = true;

       

      [SkinPart(required='true')]

      public var dropDown:Group;

       

      public function HoverButton()

      {

      super();

       

       

      _dropDownController = new DropDownController();

      _dropDownController.openButton = this;

      _dropDownController.rollOverOpenDelay = 300;

      _dropDownController.addEventListener(DropDownEvent.OPEN, handleDropDownOpenClose, false, 0, true);

      _dropDownController.addEventListener(DropDownEvent.CLOSE, handleDropDownOpenClose, false, 0, true);

      }

       

      override protected function clickHandler(event:MouseEvent):void

      {

      _open = !_open;

      }

       

      override protected function getCurrentSkinState():String

      {

      var skinstate:String;

       

      // if the hover is opened, return open

      if (_dropDownController.isOpen) {

      if (_open) {

      skinstate = "open";

      } else {

      skinstate = "close";

      }

      } else {

      skinstate = super.getCurrentSkinState();

      }

       

      return skinstate;

      }

       

      override protected function partAdded(partName:String, instance:Object):void

      {

      super.partAdded(partName, instance);

       

      if (instance == dropDown) {

      _dropDownController.dropDown = dropDown;

      }

      }

       

      override protected function partRemoved(partName:String, instance:Object):void

      {

      super.partRemoved(partName, instance);

       

      if (instance == dropDown) {

      _dropDownController.dropDown = null;

      }

      }

      private function handleDropDownOpenClose(event:DropDownEvent):void

      {

      // invalidate skin state whenever the hover gets opened or closed.

      invalidateSkinState();

      }

      }

      }

       

       

      HoverButtonSkin.mxml

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

       

      <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" width="50" height="50">

          <fx:Metadata>[HostComponent("HoverButton")]</fx:Metadata>

       

          <!-- states -->

          <s:states>

              <s:State name="up" />

              <s:State name="over" />

              <s:State name="open" stateGroups="hoverState" />

              <s:State name="close" stateGroups="hoverState" />

              <s:State name="down" />

              <s:State name="disabled" />

          </s:states>

       

      <s:Rect top="0" bottom="0" left="0" right="0">

      <s:fill>

      <s:SolidColor color="0xAAAAAA" />

      </s:fill>

      </s:Rect>

       

      <s:PopUpAnchor id="popUp" displayPopUp="false" displayPopUp.hoverState="true" includeIn="hoverState"

         left="0" right="0" top="0" bottom="0" itemDestructionPolicy="auto"

         popUpPosition="above" popUpWidthMatchesAnchorWidth="false">

      <s:Group id="dropDown">

      <s:VGroup>

      <s:Label text="{'hover ' + currentState}"/>

      <s:Label text="closeLabel" includeIn="close"/>

      </s:VGroup>

      </s:Group>

      </s:PopUpAnchor>

       

      <s:Label id="labelDisplay" verticalCenter="0" horizontalCenter="0"/>

      </s:SparkSkin>