4 Replies Latest reply on Sep 8, 2009 12:51 PM by run,ryan!

    How do I make a canvas resize to the size of a child Viewstack?

    wind_surfer Level 1

      I have a ViewStack in a Canvas with a 9-slice background. When I select a ViewStack element with a greater height, the containing canvas does not resize to show the entire content. I am using some hokey actionscript to set the height explicitly, but I believe it must be possible without resorting to a programmatic solution. Can anyone help?

      Thanks,

      Shannon Vance

        • 1. Re: How do I make a canvas resize to the size of a child Viewstack?
          TheFlexGuy Level 2

          Can you provide a code snippet to give us an idea of what you've got so far?

          • 2. Re: How do I make a canvas resize to the size of a child Viewstack?
            wind_surfer Level 1

            Here is a snippet... the site mangled the code.. sorry. Hope this is enough.

            it fits directly in the Application.

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

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

            <mx:Canvas

             

             

            xmlns:mx="http://www.adobe.com/2006/mxml

            "

            styleName="

             

            appWrap

            "

            xmlns:gl="

             

            components.*"

            >

             

             

            <mx:Script>

            <![CDATA[

             

             

            import

            mx.events.ItemClickEvent;

             

             

            import

            mx.controls.Alert;

             

             

             

            private function clickHandler(event:ItemClickEvent):void

            {

            mainView.selectedIndex=event.index;

             

             

            this

            .height=840;

            mainView.height=mainView.selectedChild.height;

             

             

            //Alert.show("main view: " + mainView.selectedChild.height);

             

             

            if

            (mainView.selectedChild.height>840) {

             

             

            this

            .height=mainView.selectedChild.height+300;

            }

            }

            ]]>

             

             

            </mx:Script>

            <mx:ToggleButtonBar left="378" top="132" horizontalGap="5

            "

            itemClick="clickHandler(event);"

            selectedButtonTextStyleName="

             

            topTabSel

            "

            firstButtonStyleName="

             

            topTab" buttonStyleName="topTab" lastButtonStyleName="topTab"

            >

             

             

            <mx:dataProvider>

             

             

            <mx:String>home

            </mx:String>

             

             

            <mx:String>create

            </mx:String>

             

             

            <mx:String>pay

            </mx:String>

             

             

            <mx:String>send

            </mx:String>

             

             

            </mx:dataProvider>

             

             

            </mx:ToggleButtonBar>

             

             

            <mx:ViewStack id="mainView" width="932" left="336" top="159" styleName="contentWrap"selectedIndex="0">

             

             

                 <gl:HomeView />

             

             

                 <gl:CreateView />

             

             

                 <gl:PayView />

             

             

                 <gl:SendView />

             

             

            </mx:ViewStack>

             

            </mx:Canvas>

            • 3. Re: How do I make a canvas resize to the size of a child Viewstack?
              wind_surfer Level 1

              Hi,

              I posted this to the site, but I thought I'd also reply directly.

               

              Here is the snippet.. I wish the indentation would be retained!

               

              Thanks for any help,

              Shannon Vance

              Greenlight Development

              shannon@greenlightdevelopment.com

              o. 541.386.6180

              m. 541.400.0298

               

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

               

              <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"

               

              styleName="appWrap"

               

              xmlns:gl="components.*" >

               

              <mx:Script>

               

              <![CDATA[

               

              import mx.events.ItemClickEvent;

               

              import mx.controls.Alert;

               

               

              private function clickHandler(event:ItemClickEvent):void {

               

              mainView.selectedIndex=event.index;

               

              this.height=840;

               

              mainView.height=mainView.selectedChild.height;

               

              if(mainView.selectedChild.height>840) {

               

              this.height=mainView.selectedChild.height+300;

               

              }

               

              }

               

              ]]>

               

              </mx:Script>

               

              <mx:ToggleButtonBar left="378" top="132" horizontalGap="5"

               

              itemClick="clickHandler(event);"

               

              selectedButtonTextStyleName="topTabSel"

               

              firstButtonStyleName="topTab" buttonStyleName="topTab"

              lastButtonStyleName="topTab" >

               

              <mx:dataProvider>

               

              <mx:String>home</mx:String>

               

              <mx:String>create</mx:String>

               

              <mx:String>pay</mx:String>

               

              <mx:String>send</mx:String>

               

              </mx:dataProvider>

               

              </mx:ToggleButtonBar>

               

              <mx:ViewStack id="mainView" width="932" left="336" top="159"

              styleName="contentWrap"

               

              selectedIndex="0">

               

              <gl:HomeView />

               

              <gl:CreateView />

               

              <gl:PayView />

               

              <gl:SendView />

               

              </mx:ViewStack>

               

               

               

              </mx:Canvas

              • 4. Re: How do I make a canvas resize to the size of a child Viewstack?
                run,ryan! Level 3

                just an answer based on the title of your question, sorry if I didn't get your question, your code is too long...

                 

                <canvas id='parentComp'><view id='childComp' width='xx', height='xx' x=xx y=xx /></canvas>

                <button label='resize canvas' onclick='resize()'/>

                private function resize():void

                {

                  childComp.x = 0;

                  childComp.y = 0;

                  parentComp.width = childComp.width;

                  parentComp.height = parentComp.height

                }