Flex, States and inheritance

Question

Is it possible to have a child class which adds states to the set of states which are defined in the base class? Currently it looks like my child class overrides all of the states in the base class.

Answer 1

In your child component, create a separate array of states declaratively and in the preinitialize event concatenate them. See this example.

<!-- MyParent -->
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="onCreationComplete()">
    <mx:Script>
        <![CDATA[
            import mx.controls.Button;
            private function onCreationComplete():void {
                for each(var state:State in states) {
                    var button:Button = new Button();
                    button.label = state.name;
                    button.addEventListener(MouseEvent.CLICK, onClick);
                    addChild(button);
                }
            }

            private function onClick(event:MouseEvent):void {
                currentState = Button(event.target).label;
            }
        ]]>
    </mx:Script>
    <mx:states>
        <mx:State name="Red">
            <mx:SetStyle name="backgroundColor" value="#FF0000" />
        </mx:State>
        <mx:State name="Green">
            <mx:SetStyle name="backgroundColor" value="#00FF00" />
        </mx:State>
        <mx:State name="Blue">
            <mx:SetStyle name="backgroundColor" value="#0000FF" />
        </mx:State>
    </mx:states>
</mx:VBox>


<!-- MyChild -->
<?xml version="1.0" encoding="utf-8"?>
<MyParent xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*" preinitialize="onPreinitialize()">
    <mx:Script>
        <![CDATA[

            private function onPreinitialize():void {
                states = states.concat(newStates);
            }
        ]]>
    </mx:Script>
    <mx:Array id="newStates">
        <mx:State name="Cyan">
            <mx:SetStyle name="backgroundColor" value="#00FFFF" />
        </mx:State>
        <mx:State name="Purple">
            <mx:SetStyle name="backgroundColor" value="#FF00FF" />
        </mx:State>
    </mx:Array>
</MyParent>


<!-- MyApp -->
<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    minWidth="955" 
    minHeight="600" xmlns="*">

    <MyParent width="50%" height="100%" />
    <MyChild width="50%" height="100%" right="0" />

</mx:Application>