10 Replies Latest reply on Oct 31, 2007 11:55 AM by rbetieh

    constraintRows / constraintColumns - love em or hate em ..

    IanIlsley
      Well I took the plunge and downloaded the Flex3 Beta2 , took one of my projects from Flex2 and compiled it ..

      A few warning were generated ..

      3604: Grid has been deprecated. Instead, please use the constraintRows and constraintColumns properties of containers that implement IConstraintLayout, such as Application, Canvas, and Panel.

      Ok no big deal , looks like there is something new to play with :) ..

      Found this great info about 'Enhanced_Constraints'

      http://labs.adobe.com/wiki/index.php/Flex_3:Feature_Introductions#Enhanced_Constraints_.28 Updated_for_Beta_2.29

      watched the video , looks easy enough ..

      WRONG ..

      maybe its because they are new , but man they feel difficult to work with in the Designer , maybe its my chubby mouse
      pointer but selecting the lines for columns and rows and the options for each one especially when they are close to each
      other is tricky . There should an option to delete the constraint in the Flex Properties too - ( where you associate an anchor point with a row / column ) .

      Seems to me its really more difficult to implement a simple grid with ROWS / COLUMNS ..

      I can see their potential benefit thou ..

      I really would like to see GRID back again thou because it was simple , effective and easy to implement .. :)







        • 1. Re: constraintRows / constraintColumns - love em or hate em ..
          alexd7777
          the stuff, actually, isn't so bad. Unfortunately, not really useful yet: I've placed 6 cols & 5 rows (every "cell" is label or text) on one of canvases in TabNavigator. Now I can neither Flex Builder nor compiled application in browser with this tab open :). It dies after some seconds after eating of 1GB memory...
          • 2. Re: constraintRows / constraintColumns - love em or hate em ..
            IanIlsley Level 1

            It seems pretty unstable right now using any more than a few constraint rows / columns ..
            Flex Builder is crashing alot .
            Constraint lines just disappear , especially ones @ the edge of the screen ..

            • 3. Re: constraintRows / constraintColumns - love em or hate em ..
              ithrasher
              yep, quite buggy and completely unusable as far as I'm concerned. I'll be interested when something like this works correctly:

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
              <mx:Canvas width="400" height="400">
              <mx:constraintColumns>
              <mx:ConstraintColumn id="col1" width="40%"/>
              <mx:ConstraintColumn id="col2" width="15%"/>
              <mx:ConstraintColumn id="col3" width="15%"/>
              <mx:ConstraintColumn id="col4" width="15%"/>
              <mx:ConstraintColumn id="col5" width="15%"/>
              </mx:constraintColumns>
              <mx:constraintRows>
              <mx:ConstraintRow id="row1" height="20%"/>
              <mx:ConstraintRow id="row2" height="20%"/>
              <mx:ConstraintRow id="row3" height="20%"/>
              <mx:ConstraintRow id="row4" height="20%"/>
              <mx:ConstraintRow id="row5" height="20%"/>
              </mx:constraintRows>
              <mx:HBox left="col1" top="row1">
              <mx:Label text="left-r1c1"/>
              <mx:Label text="(left-r1c1)"/>
              </mx:HBox>
              <mx:Label left="col2" top="row1" text="left-r1c2"/>
              <mx:Label left="col3" top="row1" text="left-r1c3"/>
              <mx:Label left="col4" right="col4" top="row1" text="center-r1c4"/>
              <mx:Label left="col5" top="row1" text="left-r1c5"/>
              <mx:HBox left="col1" top="row2">
              <mx:Label text="left-r2c1"/>
              <mx:Label text="(left-r2c1)"/>
              </mx:HBox>
              <mx:Label left="col2" top="row2" text="left-r2c2"/>
              <mx:Label left="col3" top="row2" text="left-r2c3"/>
              <mx:Label left="col4" right="col4" top="row2" text="center-r2c4"/>
              <mx:Label left="col5" top="row2" text="left-r2c5"/>
              </mx:Canvas>
              </mx:Application>
              • 5. Re: constraintRows / constraintColumns - love em or hate em ..
                gtcroz
                Any idea why Grid was deprecated? I find the grid to be a much more intuitive mental model than the constraint stuff that has been introduced.
                • 6. Re: constraintRows / constraintColumns - love em or hate em ..
                  jfillman Level 1
                  I don't believe it was wise to change this in a Beta 2 release. It's very hard to work with and they don't plan on another Beta release to refine it. If I move an item using the keyboard arrow keys, I end up seeing multiple constraint lines for the same item. Have to Clean the project to get the correct display. This also makes selecting items that are close together harder. I've also seen a lot of crashes in this release.

                  Selecting an item in Source view often does not stay selected in Design View, and vice versa. Switching to Design View often defaults to the Base State.

                  It does, however, seem noticeably faster at building and launching applications.
                  • 7. Re: constraintRows / constraintColumns - love em or hate em ..
                    joan_lafferty Adobe Employee
                    Here are the reasons that the Grid container was deprecated in favor of the new Constraints (provided by one of our developers):

                    1. Grid (as well as GridRow and GridItem) were all containers, so
                    by using the Grid container you'd have multiple nested containers. In
                    the speedy world of Flex 2/AS3, this was not too bad, but in general
                    it's a good rule of thumb to avoid too much container nesting.
                    2. Because Grid was a set of nested containers - it was difficult
                    to animate controls between each cell since this would require
                    re-parenting. You could code around this, but it was difficult. With
                    constraintColumns/constraintRows, you can animate controls from one cell
                    to another seamlessly using states and transitions.
                    3. We introduced the Better Constraints feature to address a
                    limitation in the Flex 2 constraint-based layout system (namely, the
                    Flex 2 constraint system allowed developers to only specify
                    parent-relative constraints on child controls without using container
                    nesting or data binding). By introducing Better Constraints, we realized
                    we would have redundant behavior with the mx:Grid container. We needed
                    to address this redundancy, and since the new constraints system had
                    some clear benefits over the Grid container, we chose to deprecate the
                    Grid container.

                    Joan Lafferty
                    Flex SDK QA
                    • 8. Re: constraintRows / constraintColumns - love em or hate em ..
                      ithrasher Level 1
                      Apparently by denoting an offset for each the columns and rows, the layout in my post above works correctly. For instance, the line:

                      <mx:Label left="col2" top="row1" text="left-r1c2"/>

                      should be used in conjunction with an offset (zero pixels in this case), like:

                      <mx:Label left="col2:0" top="row1:0" text="left-r1c2"/>

                      ...and it works. This looks like a case of me not reading the docs closely enough, however it would have been nice if a warning could have been thrown in Flex Builder to let me know what was going on, or perhaps a better option, to default the offset to zero if none is specified.
                      • 9. Re: constraintRows / constraintColumns - love em or hate em ..
                        IanIlsley Level 1

                        It looks like Grids are un-depreciated !! ?? ( yeah !!! )

                        http://bugs.adobe.com/jira/browse/SDK-12941

                        • 10. Re: constraintRows / constraintColumns - love em or hate em ..
                          rbetieh
                          Ok so I was wondering how I would model something like This with the new constraintRows and columns im still not getting it.....


                          <mx:Canvas label="Modules" styleName="OptionsArea" width="100%" height="100%">
                          <<mx:Grid styleName="grid">
                          <mx:GridRow styleName="gridRows">
                          <mx:Repeater id="ModulesRepeaterRow1" dataProvider="{allModules.lastResult.modules.module}" count="8">
                          <mx:GridItem width="10%" height="100%" horizontalAlign="center" verticalAlign="middle" resize="onGridItemResized(event)">
                          <mx:Button label="{ModulesRepeaterRow1.currentItem.id}" click="gotoModule(event)"/>
                          </mx:GridItem>
                          </mx:Repeater>
                          </mx:GridRow>
                          <mx:GridRow styleName="gridRows">
                          <mx:Repeater id="ModulesRepeaterRow2" dataProvider="{allModules.lastResult.modules.module}" startingIndex="8">
                          <mx:GridItem width="10%" height="100%" horizontalAlign="center" verticalAlign="middle" resize="onGridItemResized(event)">
                          <mx:Button label="{ModulesRepeaterRow2.currentItem.id}" click="gotoModule(event)"/>
                          </mx:GridItem>
                          </mx:Repeater>
                          </mx:GridRow>
                          </mx:Grid>
                          </mx:Canvas>