3 Replies Latest reply on Nov 29, 2010 6:13 AM by flex2008

    Question about changing states

    MacLeod7222

      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

        • 1. Re: Question about changing states
          flex2008 Level 3

          Please post a sample code to have a better understanding of the problem.

           

          Thanks

          • 2. Re: Question about changing states
            MacLeod7222 Level 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>

            • 3. Re: Question about changing states
              flex2008 Level 3

              This is how the components needs  to be written:

               

              <components:ProductSearchContainer id="productSearchContainer" includeIn="viewSearch"/>
              <components:CartContainer id="cartContainer" includeIn="viewCart"/>

               

              which tells that ProductSearchContainer  has to be included in viewSearch only and CartContainer has to be included in viewCart state only.Alternately you can use the excludeFrom property also.