Question about changing states

Question

I have a component based on a skinnableContainer that is hidden in stateA and visible in stateB. The problem is when the container is hidden in stateB the components within the container are still visible. Is there a way to hide the container and all its components? FYI the states are defined at the component level.
thanks

Answer 1

Here is the sample code, I removed unrelated code.
Custom component cod
<?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="100%" height="100%" creationComplete="group1_creationCompleteHandler(event)">
    <s:states>
        <s:State name="State1"/>
        <s:State name="viewSearch"/>
        <s:State name="viewCart"/>
    </s:states>
    <s:transitions>
        <s:Transition fromState="*" toState="viewCart">
            <s:Parallel>
                <s:Resize target="{productSearchContainer}" duration="500" />
                <s:Resize target="{cartContainer}" duration="500" /> 
            </s:Parallel>
        </s:Transition>
        <s:Transition fromState="*" toState="viewSearch">
            <s:Parallel>
                <s:Resize target="{productSearchContainer}" duration="500" />
                <s:Resize target="{cartContainer}" duration="500" />
            </s:Parallel>          
        </s:Transition>  
    </s:transitions>
    <fx:Declarations>
    </fx:Declarations>
    <s:layout>
        <s:HorizontalLayout paddingLeft="10" paddingTop="20" paddingRight="10" gap="5"/>
    </s:layout> 
    <components:ProductSearchContainer id="productSearchContainer" width.viewCart="0" width.viewSearch="200"/>
    <components:CartContainer id="cartContainer" width.viewCart="200" width.viewSearch="0"
                              width.State1="0" alpha.viewSearch="0" alpha.viewCart="1"/>
</s:Group>
CartContainer code:
<?xml version="1.0" encoding="utf-8"?>
<s:SkinnableContainer 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="{fixedWidth}" height="100%">
    <s:layout>
        <s:VerticalLayout paddingBottom="0" paddingLeft="5" paddingRight="10" paddingTop="10"/>
    </s:layout>
    <s:Label id="title" text="Your Shopping Cart" styleName="standardBoldText"/>
    <s:List id="cartList" width="100%" height="100%" dropEnabled="true"
            dataProvider="{acCart}" itemRenderer="renderers.CartRenderer"/>
    <mx:Spacer height="10"/>
    <!--<s:HGroup horizontalAlign="right" width="100%">
        <s:Label text="Total:"/>
        <mx:Spacer width="10"/>
        <s:Label text="zzzzz"/>
    </s:HGroup>
    <s:HGroup horizontalAlign="right" width="100%">
        <s:Label text="Shipping:"/>
        <mx:Spacer width="10"/>
        <s:Label text="zzzzz"/>
    </s:HGroup>-->
    <s:HGroup horizontalAlign="right" width="100%">
        <s:Label text="Grand Total:" styleName="standardBoldText"/>
        <mx:Spacer width="10"/>
        <s:Label text="{usdFormatter.format(total)}" styleName="standardBoldText"/>
    </s:HGroup>
    <s:HGroup horizontalAlign="right" width="100%">
        <s:Button label="Submit Order"/>
    </s:HGroup>
</s:SkinnableContainer>