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.
