2 Replies Latest reply on Oct 15, 2011 2:30 AM by Themida

    BorderContainer vs Canvas

    Themida

      I am in the process of converting a large project from an earlier SDK to 4.5.1. all has went well up until earlier this morning.

       

      Source and a few comments can be found here:

       

      http://www.mediawizard.tv/problem/index.html

       

       

       

      The code is straight forward - I'm giving a couple illustrations below to better explain the problem.

       

      Thanks for any insight on this.

       

      Regards,

      Shawn Tomovick

       

       

       

       

       

       

      Correct image insert with Canvas - inserted image is on top of the orange background (Canvas) and under both the left and right margin objects.

      correct.png

       

       

      Bad insert with BorderContainer - inserted image is on top of the orange background - inserted image is also under the left margin (using index 0 of the addElementAt method fixed this from being on top of the gray GUI area)

      however, the inserted image is above the right margin - this is the bad part and needs to be fixed.  Any correct way of doing this? and still keep the BorderContainer?

       

      bad.png

        • 1. Re: BorderContainer vs Canvas
          Shongrunden Adobe Employee

          mx:Canvas had clipping enabled by default, but spark containers do not.

           

          You will want to use a custom BorderContainer skin that sets clipAndEnableScrolling="true", for example:

           

          CustomBorderContainerSkin.as:

          package

          {

              import spark.skins.spark.BorderContainerSkin;

             

              public class CustomBorderContainerSkin extends BorderContainerSkin

              {

                  public function CustomBorderContainerSkin()

                  {

                      super();

                      clipAndEnableScrolling = true;

                  }

              }

          }

           

          Main.mxml:

          <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"

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

           

           

              <s:BorderContainer width="50" height="50" backgroundColor="red">

                  <s:Button label="looooonngg" />

              </s:BorderContainer>

             

              <s:BorderContainer width="50" height="50" backgroundColor="red" skinClass="CustomBorderContainerSkin" y="60">

                  <s:Button label="looooonngg" />

              </s:BorderContainer>

             

          </s:WindowedApplication>

          • 2. Re: BorderContainer vs Canvas
            Themida Level 1

            Thanks much!  Was hoping i'd not have to come up with a hack...

             

            appreciate the thorough answer.