5 Replies Latest reply on Aug 31, 2010 8:01 AM by Devtron

    Toggle between display objects in Canvas

    ameshram Level 1

      Hi All,

       

      I have a Canvas container with two Panel containers inside it.

      The size of one panel is larger than other one. Both these Panels are on x and y coordinate 0,0. So you can see one panel and half of another panel.

      The requirement is....

      I have two buttons, if I click on one of them... the first panel should come up... and if I click on second button, another panel should come up (hence I can half of another panel)

      Is there a way I can toggle between them.(Can't use view stack, because both component needs to be visible partially) This is just a demo exercise of what m trying to do within an application.

       

      Can someone spread a light on this, if its possible.

       

      -Thanks.

        • 1. Re: Toggle between display objects in Canvas
          Devtron Level 3

          in a button click event, you need to set the visibiltiy of your panel(s).

           

          myPanelID1.visible=false;

          myPanelID2.visible=true;

           

          and vice versa.

          • 2. Re: Toggle between display objects in Canvas
            ameshram Level 1

            Thanks for the response Devtron.

            I guess, I couldnt present my question properly.

            This is what is happening...

             

            In my Canvas, I have two panels...like this...

             

            <mx:Canvas>

             

                 <mx:Panel x=0 y=0 width=50>

             

                 </mx:Panel>

             

                 <mx:HBox x=50 y=0 width=100%>

                 </mx:HBox>

             

            </mx:Canvas>

             

            At this point they both look fine... on click of a button.. I hide the Panel. (by setting visible=false) and set the x property of HBox to 0. (so both Panel and HBox are at 0,0 now... Panel invisible though). However, now when I make the panel visible, it displays at the bottom and doesnt come on top of HBox. Is there a way to come up at top.??

             

            -Thanks again..!

            • 3. Re: Toggle between display objects in Canvas
              BhaskerChari Level 4

              Hi ameshram,

               

              Try to put your both panels inside a VBox instead of Canvas(which has absolute positioning...)

               

               

              <mx:VBox verticalGap="0">

               

                   <mx:Panel id="panel" x=0 y=0 width=50>

               

                   </mx:Panel>

               

                   <mx:HBox x=50 y=0 width=100%>

                   </mx:HBox>

               

              </mx:VBox>

               

               

              On a  button click make ....

               

              panel.visible = false;

              panel.includeInLayOut = false;

               

              Again if you want to make it visible then just do the same as below...

               

              panel.visible = true;

              panel.includeInLayOut = true;

               

               

              No need to set the x, y positions if you do the above ...

               

               

              Thanks,

              Bhasker Chari

              • 4. Re: Toggle between display objects in Canvas
                Devtron Level 3

                Hello BhaskerChari,

                 

                I am in a similar situation. I have a VBOX with an HBOX/Grid, two Panels. Here is my code:

                 

                    <mx:VBox width="100%" height="100%" paddingLeft="50" borderColor="#84CBDA" id="myVBOX" >

                 

                                <mx:HBox width="90%" height="90%" verticalAlign="middle" borderColor="#84CBDA">

                                    <mx:DataGrid />

                                </mx:HBox>

                 

                                 <mx:Panel title="Override Selected Thermostats: "  visible="false" id="multiPanel" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" >

                                               <mx:Form />

                 

                                 </mx:Panel>

                 

                 

                 

                 

                            <mx:Panel title="Configure Thermostat"  visible="false" id="singlePanel" paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10" verticalAlign="top" >

                 

                                                   <mx:Form />

                 

                            </mx:Panel>

                 

                   </mx:VBOX>

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                 

                My problem is, I toggle visibility between the two panels, depending on what is clicked in the DataGrid. if single selection is used, I displayed one panel (but I must set the absolute position over the hidden panel)., if multi-selection is used, I display the other panel. That works fine, until I resize my browser. If the second panel is visible, while the first panel is hidden, and I press the "Restore Down" button in firefox or IE, the panel repositions.


                Here is the code I use in the Grid click event:

                                    singlePanel.y = multiPanel.y;
                                    singlePanel.x = multiPanel.x;

                 

                ^ This places the panel where I need it (ontop of the other one) but when I hit the "restore down" button in IE/FireFox, it repositions it to its original layout X,Y. How can I keep its X,Y position on a "restore down" command in a browser? Is there a way to capture "Restore Down" browser change, so I can keep the X,Y current?

                • 5. Re: Toggle between display objects in Canvas
                  Devtron Level 3

                  I actually used this to "watch" resize events, and re-positioned my panel there (in handleResize). It worked like a charm. I wish FLEX was easier than this tho.

                   

                   

                              private var widthWatch:ChangeWatcher;
                              private var heightWatch:ChangeWatcher;
                              private var resizeExecuting:Boolean = false;

                   

                              private function OnCreateionComplete(event:FlexEvent):void {

                                  //browser resize watcher, listener objects
                                  widthWatch = ChangeWatcher.watch(this,'width',onSizeChange);
                                  heightWatch = ChangeWatcher.watch(this,'height',onSizeChange);

                             }

                   

                              //browser resize function
                              private function onSizeChange(event:Event):void
                              {
                                  if(!resizeExecuting)
                                      callLater(handleResize);
                                  resizeExecuting = true;
                              }
                             
                              //browser resize function
                              private function handleResize():void
                              {
                                  //do resize work here
                                  resizeExecuting = false;

                   

                                  singlePanel.y = multiPanel.y;
                                  singlePanel.x = multiPanel.x;
                              }
                             
                              //browser resize function
                              private function stopWatching():void
                              {
                                  //invoke this to stop watching the properties and prevent the handleResize method from executing
                                  widthWatch.unwatch();
                                  heightWatch.unwatch();
                              }