2 Replies Latest reply on Nov 28, 2010 7:05 PM by John Hall

    Disappering boxes ? whats up !

    DvorakMK

      Now i'm learning flex from Official Book for Flex 3 (there is no newer book in poland) and i had problems with states (which has changed in Flex 4), and i wrote that:

       

      [source]

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

         xmlns:s="library://ns.adobe.com/flex/spark"

         xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" layout="horizontal" >

      <mx:states>

      <s:State name="State1"/>

      <s:State name="fullSales"/>

      <s:State name="fullComp"/>

      <s:State name="fullType"/>

      </mx:states>

       

       

      <mx:ApplicationControlBar dock="true" width="100%">

       

      <mx:LinkButton label="All" click="this.currentState=''"  />

      <mx:LinkButton label="Sales" click="this.currentState='fullSales'" />

      <mx:LinkButton label="Categories" click="this.currentState='fullType'" />

      <mx:LinkButton label="Comparison" click="this.currentState='fullComp'"/>

       

      </mx:ApplicationControlBar>

       

       

      <mx:Panel id="sales" width="100%" height="100%" title="Sales Chart"  includeIn="State1,fullSales">

      <mx:ControlBar>

       

      </mx:ControlBar>

      </mx:Panel>

      <mx:VBox id="rightCharts" width="100%" height="100%" >

      <mx:Panel id="type" width="100%" height="100%" title="Category Chart"  includeIn="State1,fullType">

       

      <mx:ControlBar>

       

      </mx:ControlBar>

      </mx:Panel>

      <mx:Panel id="comp" width="100%" height="100%" title="Comparison Chart"  includeIn="State1,fullComp">

      <mx:ControlBar>

       

      </mx:ControlBar>

      </mx:Panel>

      </mx:VBox>

      <fx:Declarations>

      <!-- Place non-visual elements (e.g., services, value objects) here -->

      </fx:Declarations>

      </mx:Application>

      [/source]

       

      and i have problem because box are disappering... i cant see panel id=Type in FullType state, and no comp in FullComp (i see in FullComp id=sales :/)

        • 1. Re: Disappering boxes ? whats up !
          John Hall Level 4

          I can see some problems with width issues. What are you trying to accomplish? In the All do all three panels display and in the other 3 states just fullscreen of the individual panels? In your question, you imply that you expect to see the sales panel in the fullType panel but it looks like you're also wanting the type panel to be 100%. My hunch is that you may want to lose the VBox because it's in the mix and probably doesn't need to be because you accomplish everything with an absolute layout for the full application.

          • 2. Re: Disappering boxes ? whats up !
            John Hall Level 4

            Here's one possibility (did a transition because I was bored ;-)

             

             

            <?xml version="1.0" encoding="utf-8"?>

                 <mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                 xmlns:s="library://ns.adobe.com/flex/spark"

                 xmlns:mx="library://ns.adobe.com/flex/mx"

                 layout="absolute">

             

                 <mx:states>

                      <mx:State name="start"/>

                      <mx:State name="fullSales"/>

                      <mx:State name="fullComp"/>

                      <mx:State name="fullType"/>

                     </mx:states>

                 <mx:transitions>

                 <s:Transition fromState="*"  toState="*">

                      <s:Parallel targets="{[sales,comp,type]}">

                           <s:Fade duration="500"/>

                           <s:Resize duration="500"/>

                      </s:Parallel>

                 </s:Transition>

                 </mx:transitions>

             

                 <mx:ApplicationControlBar dock="true"

                        width="100%"

                        x="0"

                        y="0"

                        id="controlBar">

                      <mx:LinkButton label="All"

                              click="this.currentState='start'"/>

                      <mx:LinkButton label="Sales"

                              click="this.currentState='fullSales'"/>

                      <mx:LinkButton label="Categories"

                              click="this.currentState='fullType'"/>

                      <mx:LinkButton label="Comparison"

                              click="this.currentState='fullComp'"/>

                     </mx:ApplicationControlBar>

             

                 <mx:Panel id="sales"

                        title="Sales Chart"

                        width="47.5%"

                        width.fullSales="96%"

                        bottom="20"

                        left="20"

                        top="20"/>

             

                 <mx:Panel id="comp"

                        title="Comparison Chart"

                        top="20"

                        right="20"

                        alpha="0"

                        width="47.5%"

                        width.fullSales="0"

                        width.fullType="0"

                        alpha.fullComp="1"

                        alpha.start="1"

                        height="46%"

                        bottom.fullComp="20"/>

             

                 <mx:Panel id="type"

                        title="Category Chart"

                        alpha="0"

                        height="46%"

                        bottom="20"

                        right="20"

                        width="47.5%"

                        width.fullComp="0"

                        width.fullSales="0"

                        alpha.start="1"

                        alpha.fullType="1"

                        top.fullType="20"/>

             

            </mx:Application>