Flex: make part of a skin non focusable/non-clickable

Question

AKA: How to set the hitArea in a skin.

I need to make part of a flex skin non-focusable/non-clickable, i.e. so that when the mouse clicks that part of the button, it doesn't actually get clicked.

Basically, I want that part to be a shadow or highlight or background or whatever you'd like to call it. It's done somehow with drop shadows but I want to have finer control than using filters.

Example code:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark" >
    <fx:Metadata>
        <![CDATA[ 
            [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>
    <s:Ellipse id="nonFocusableBackground"
        left="-20" right="-20" bottom="-20" top="-20">
        ...
    </s:Ellipse>

    <s:Rect id="focusableForeground" left="0" right="0" top="0" bottom="0">
        ...
    </s:Rect>
</s:SparkSkin>

With this code I want the part with the id nonFocusableBackground to not be part of the skin/component's active area (my own term). Currently, however, this part, since it is bigger than the other part, will click the button when it is clicked.

I have done a quick test using a halo effect, which produces decent results, but it's not quite what I would like.

Answer 1

I don't know if this is the simplest way to do it. I would really like to have a way to do all of this directly in mxml.

Here's how I solved it for now:

in skin declaration:

creationComplete="setHitArea(event)"

in script:

protected function setHitArea(event:FlexEvent):void
    {
        this.clickGroup.mouseEnabled = false;
        this.hitArea = this.clickGroup;
        this.hostComponent.hitArea = this.clickGroup;
    }

rest:

<s:Group id="clickGroup" left="0" right="0" top="0" bottom="0">
    <s:Rect id="focusableForeground" left="0" right="0" top="0" bottom="0">
    ...
    </s:Rect>
</s:Group>

Answer 2

I didn't believe that graphic primitives accept focus. They have no focus events; and how would a user tell something was in focus? What have you been experiencing?

You could put your Shape in a UIComponent and then use the UIComponent and use focusEnabled and hasFocusableChildren to false.