Ok, that makes a little more sense now. It can still work, but instead of moving the boxes, during transition, move the groups; and resize the boxes within the groups. As an alternative, you could choose to use a custom layout class.
-TH --- In flexcoders@yahoogroups.com, RobertTr <rexdtripod@...> wrote: > > > Can't do it. Boxes must be constrained via ConstraintColumns. The boxes > switch sides, resize, appear and disappear, etc. via different states and > there are transitions on those states to ease the boxes in as they move and > resize. Picture a "reverse" button upper right that when clicked reverses > the position of the boxes. When the boxes reverse, they smoothly transition > to their new reversed positions. Those transitions won't work if the > components are in different groups. They have to be horizontally centered on > a ColumnConstraint, not a Group container. > > This isn't a new app. It's an existing app with a well designed UI. I'm > just transitioning to Spark so as to take advantage of the new skinning > model and facilitate parallel browser and mobile skins. Can't change the > app's behavior in the process. > > In any event, I heard back from Adobe on this. They said, "we didn't have > enough time to implement horizontal/verticalCenter in the last release > (hopefully coming in the next!).". I asked if they meant for all Spark > containers or what. They responded, "Yes, basically, they are not > implemented in ConstraintLayout. ConstraintLayout handles all of the > ConstraintColumns/ConstraintRows layout logic." So that leaves me stuck > until the next release unless I can find a workaround. > > > > turbo_vb wrote: > > > > Constraints are designed to be used to constrain other components for > > things like alignment and size. For your app, just add a group around > > each of your containers and you're fine. > > > > -TH > > > > <?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"> > > > > <s:SkinnableContainer id="mainContentArea" > > backgroundColor="red" > > bottom="100" > > top="100"> > > <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:Group > > height="100%" > > left="col1:0" > > right="col1:0"> > > <s:BorderContainer id="greenContainer" > > width="400" > > height="300" > > backgroundColor="green" > > horizontalCenter="0" > > verticalCenter="0" /> > > </s:Group> > > > > <s:Group > > height="100%" > > left="col2:0" > > right="col2:0"> > > <s:BorderContainer id="yellowContainer" > > width="200" > > height="150" > > backgroundColor="yellow" > > horizontalCenter="0" > > verticalCenter="0" /> > > </s:Group> > > > > </s:SkinnableContainer> > > > > </s:Application> > > > > --- In flexcoders@yahoogroups.com, RobertTr <rexdtripod@> wrote: > >> > >> > >> Here's code that splits the screen into two columns, left and right. Then > >> it > >> puts a box in each column and attempts to center them. The > >> horizontalCenter > >> and verticalCenter properties are ignored: > >> > >> <?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> > >> > >> -- > >> View this message in context: > >> http://old.nabble.com/Why-don%27t-horizontalCenter-and-verticalCenter-work-with-Spark-ColumnConstraints--tp32358020p32358020.html > >> Sent from the FlexCoders mailing list archive at Nabble.com. > >> > > > > > > > > > > -- > View this message in context: > http://old.nabble.com/Why-don%27t-horizontalCenter-and-verticalCenter-work-with-Spark-ColumnConstraints--tp32358020p32364540.html > Sent from the FlexCoders mailing list archive at Nabble.com. >
