Question

I am building a graphic component in MXML that has different states, each state having its own size.

I have a “normal” state and a “highlighted state”, the highlighted one having a higher height.

On this components I implemented a function to be executed on each mouseOver and mouseOut to change from normal state to highlighted state and back.

My problem is, in the highlighted mode, the mouseout event is triggered according to the size of the normal state.

Here is the code:

<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:mx="library://ns.adobe.com/flex/mx"
       xmlns:controller="com.*"

       mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"
       width="230" height.Playing="40" height.Normal="21" height.Highlighted="40">
<mx:states>
    <mx:State name="Normal" />
    <mx:State name="Playing" />
    <mx:State name="Highlighted" />
</mx:states>
<mx:Button includeIn="Highlighted" left="19" bottom="2" width="15" height="15" />
</mx:Canvas>

Is there something wrong in the way I use mouseOuver and mouseOut ?

Thanks,

Alexandre

Answer 1

I am building a graphic component in
MXML that has different states, each
state having its own size.

You have a misunderstanding of how the Flex Component Architecture works. A component never sizes itself. It is always up to the parent to size it’s children. You can override the measure method to set measuredWidth and measuredHeight; however these are only suggestions provided to the component’s parent. It is up the component to decide whether to accept them or no.

So, in your example, you can change the height/width of the button (a child); but you cannot change the height/width of the canvas (The component you’re extending) and expect it to stick.

Without seeing the code that contains this canvas component, it’s hard to say for sure what is going on. But, in this case, you should override the measure method to change the measuredWidth / measuredHeight. Something like this:

override protected measure():void{
 if(currentState=='Normal'){
  measuredWidth = 0;
  measuredHeight = 0;
 } else {
  measuredWidth = button.width;
  measuredHeight = button.height;
 }
}

When the state changes, be sure to call the invalidateSize() method. You can do this by listening to the currentStateChange event.

In theory, that will cause the component to change the measuredWidth/measuredHeight; which will force the parent to also redraw itself, accommodating for the new measuredWidth/measuredHeight.

MXML masks a lot of these details.