3 Replies Latest reply on Aug 29, 2010 3:14 AM by existnresist

    changing states shows an empty container  :|

    existnresist Level 1

      hi all,

       

      i got an app with dynamically created RichEditableText+RadioButtons+VGroups+HGroups.

      in fact i got 2 mx:Form each with its own VGroup - and what i do is upon button click i switch between 2 states. what should happen is that each time the relevant Form+VGroup+dynamic objects will be displayed, what actually happens is that on 1st press the 1st form i visit displays well, but then the other form i will visit will only display the Form+VGroup with no content at all.

      for example:

      scenario I: run app >> click to display Form1 - displays great! >> click to display Form2 - displays empty. >> click to display Form1 - displays great. etc..

      scenario II: run app >> click to display Form2 - displays great! >> click to display Form1 - displays empty. >> click to display Form2 - displays great. etc..

      it only matters which was the first form displayed.

      any ideas? please?? 

        • 1. Re: changing states shows an empty container  :|
          Gregory Lafrance Level 6

          Need your simplified yet complete code which shows issue.


          • 2. Re: changing states shows an empty container  :|
            existnresist Level 1

            Hi Greg,

            Your help or even a pointing finger would be much much appreciated!

             

            here are some code snippets, i am absolutely clueless as i've been trying everything to make it work!  :-|
            i even explicitly added silly things like:
                                     includeIn="StateX"
                                     includeInLayout="true"
                                     visible="true"
            as well as every sort of invalidate code i could come up with. some of it left in the below example...
            
            
            2 functions like:
                           protected function stage1_clickHandler(event:MouseEvent):void
                           {
                                //currentState = "State1";
                                setCurrentState("State1",false);
                                var asset1:BitmapAsset = new stage1arrow_class() as BitmapAsset;
                                var asset2:BitmapAsset = new stage1arrow_class() as BitmapAsset;
                                var asset3:BitmapAsset = new stage1arrow_class() as BitmapAsset;
                                stage1Image.source = asset1;
                                stage2Image.source = asset2;
                                stage3Image.source = asset3;
            
                                // prepare the data to be displayed
                                vGroup_stage1Main.removeAllElements();
                                vGroup_stage1Main.percentHeight = 100;
            
                                var labelSummary:Label = new Label;
                                labelSummary.text = "This is my text";
                                labelSummary.text += "\nSome more text";
            vGroup_stage1Main.setStyle("visible",true); 
            labelSummary.setStyle("visible",true);  
                                vGroup_stage1.addElementAt(labelSummary,0);
            myTabStage1.setStyle("visible",true); 
            vGroup_stage1Main.invalidateDisplayList();
            vGroup_stage1Main.invalidateSize();
            myTabStage1.invalidateDisplayList();
            myTabStage1.invalidateSize();
                           }
            
                           protected function stage2_clickHandler(event:MouseEvent):void
                           {
                                //currentState = "State2";
                                setCurrentState("State2",false);
                                var asset1:BitmapAsset = new stage1arrow_class() as BitmapAsset;
                                var asset2:BitmapAsset = new stage1arrow_class() as BitmapAsset;
                                var asset3:BitmapAsset = new stage1arrow_class() as BitmapAsset;
                                stage1Image.source = asset1;
                                stage2Image.source = asset2;
                                stage3Image.source = asset3;
            
                                // prepare the data to be displayed
                                vGroup_stage2Main.removeAllElements();
                                vGroup_stage2Main.percentHeight = 100;
            
                                var labelSummary:Label = new Label;
                                labelSummary.text = "This is another text";
                                labelSummary.text += "\nMuch different text";
            vGroup_stage2Main.setStyle("visible",true); 
            labelSummary.setStyle("visible",true);  
                                vGroup_stage2Main.addElementAt(labelSummary,0);
            myTabStage2.setStyle("visible",true); 
            vGroup_stage2Main.invalidateDisplayList();
            vGroup_stage2Main.invalidateSize();
            myTabStage2.invalidateDisplayList();
            myTabStage2.invalidateSize();
                           }
            
            
            and the MXML snippet looks like this:
                      <s:HGroup horizontalCenter="0" y="140" width="884" height="500"
                           id="hGroupReview">
                      <mx:VBox id="myTabs" label="Some Label Goes Here"
                           includeIn="State1,State2"
                           visible="true"
                           y="4.35"
                           horizontalCenter="0"
                           horizontalAlign="center"
                           width="100%" height="450"
                           paddingTop="20" paddingBottom="20"
                           verticalScrollPolicy="auto"
                           backgroundColor="#FFFFDD" 
                           borderColor="#000000"
                           borderStyle="solid"
                           borderThickness="1"
                           cornerRadius="8"
                           >
                           
                           <!-- 3rd form - Stage1 -->
                           <mx:Form id="myTabStage1" 
                                includeIn="State1"
                                y="14.35"
                                horizontalCenter="0"
                                borderColor="#37892F" 
                                height="100%" width="848"
                                paddingTop="0" paddingBottom="0"
                                paddingLeft="0" paddingRight="0"
                                backgroundColor="#FFFFDD" 
                                backgroundAlpha="1.0"
                                cornerRadius="5">
                                <s:VGroup id="vGroup_stage1Main"
                                     includeIn="State1"
                                     width="848" height="100%">
                                </s:VGroup>
                           </mx:Form>
                           <!-- end of Stage1 form -->
                 
                           <!-- 4th form - Stage2 -->
                           <mx:Form id="myTabStage2" 
                                includeIn="State2"
                                includeInLayout="true"
                                visible="true"
                                y="14.35"
                                horizontalCenter="0"
                                borderColor="#37892F" 
                                height="100%" width="848"
                                paddingTop="0" paddingBottom="0"
                                paddingLeft="0" paddingRight="0"
                                backgroundColor="#FFFFDD" 
                                backgroundAlpha="1.0"
                                cornerRadius="5">
                                <s:VGroup id="vGroup_stage2Main"
                                     includeIn="State2"
                                     includeInLayout="true"
                                     visible="true"
                                     width="848" height="100%">
                                </s:VGroup>
                           </mx:Form>
                           <!-- end of Stage2 form -->
                           
                      </mx:VBox>
                      </s:HGroup>
             
            

            • 3. Re: changing states shows an empty container  :|
              existnresist Level 1

              adding to the above i forgot to mention an important point:

              adding the state explicitly in the MXML VGroup items caused the following scenario:

              i choose to see State1 - looks great >> choose State2 - has no content >> choose State1 again - has no content either! >> and on and on...

              the same if i start off with State2 - looks great >> State1 - empty >> State2 - empty >> and on and on.............