15 Replies Latest reply on Nov 17, 2011 11:40 PM by kevinklin

    Center things in Spark ConstraintColumns?

    rexdtripod Level 1

      I have a Flex 3.5 app that I'm trying to upgrade to 4.5 and Spark.

       

      The app splits the width of your screen into two columns and centers objects on each side, one in the left half and one in the right.  I'm at a loss as to how to duplicate this functionality using Spark components.  Here's a basic example of the old 3.5 code that works fine.  It basically creates two columns and horizontally and vertically centers items within them:

       

       

       

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

      <s: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"

                     backgroundColor="blue">

          <fx:Declarations>

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

          </fx:Declarations>

          <mx:Canvas id="mainContentArea"

                   top="100" bottom="100"

                   width="100%"

                   backgroundColor="red">

              <mx:constraintColumns>

                  <s:ConstraintColumn id="col1" width="{width/2}" />

                  <s:ConstraintColumn id="col2" width="{width/2}" />

              </mx:constraintColumns>

              <mx:Canvas id="greenContainer"

                                 backgroundColor="green"

                                 width="400" height="300"

                                 horizontalCenter="col1:0"

                                 verticalCenter="0">

              </mx:Canvas>

              <mx:Canvas id="yellowContainer"

                         backgroundColor="yellow"

                         width="200" height="150"

                         horizontalCenter="col2:0"

                         verticalCenter="0">

              </mx:Canvas>

          </mx:Canvas>

      </s:Application>

       

       

       

       

      I took a shot using Spark components.  The only container layout that seems to allow ConstraintColumns seems to be ConstraintLayout.  Ironically though it doesn't allow you to horizontally center within those columns (horizontalCenter and verticalCenter only good in Basic and Absolute layouts).  Any suggestions on making this happen?

       

       

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <s: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"
                     backgroundColor="blue">
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          <s:SkinnableContainer id="mainContentArea"
                   top="100" bottom="100"
                   backgroundColor="red">
              <s:layout>
                  <s:ConstraintLayout>
                      <s:constraintColumns>
                          <s:ConstraintColumn id="col1" width="{width/2}" />
                          <s:ConstraintColumn id="col2" width="{width/2}" />               
                      </s:constraintColumns>                   
                  </s:ConstraintLayout>
              </s:layout>
              <s:BorderContainer id="greenContainer"
                                 backgroundColor="green"
                                 width="400" height="300"
                                 horizontalCenter="col1:0"
                                 verticalCenter="0">
              </s:BorderContainer>   
              <s:BorderContainer id="yellowContainer"
                                 backgroundColor="yellow"
                                 width="200" height="150"
                                 horizontalCenter="col2:0"
                                 verticalCenter="0">
              </s:BorderContainer>       
          </s:SkinnableContainer>
      </s:Application>