CenterElement (name can change) takes the RightAlignBead approach. It deals with conflicts by listening to the layoutComplete event and making the changes then. Maybe a bit expensive but it works.
From: Alex Harui<mailto:aha...@adobe.com> Sent: Sunday, February 12, 2017 8:56 AM To: dev@flex.apache.org<mailto:dev@flex.apache.org> Subject: Re: [FlexJS] Spacers and positioning In the current layouts, %width works the way it does in the browser and not the way it did in Flex. Where should we document that so folks find it easily? If someone wants to port the Flex layouts that's fine with me. They will be at least twice as slow, if not more, but that's PAYG for you. I think you might be able to use Spacer as the FlexibleChild in OneFlexibleChildHorizontalLayout And we want the recommended JS patterns to work. Nice to know that you got position:absolute;right:0px; to work. Supposedly "float: right" will work as well, but I don’t think the SWF side supports that. We are in the business of finding common patterns and encapsulating them. So, it is totally within the FlexJS philosophy to have a bead called a RightAlignBead that injects position:absolute;right:0px; into the styles block. There is probably some trickiness to dealing with conflicts if the styles are also being set in some other way, but then you could do: <js:Label text="Right"> <js:beads> <js:RightAlignBead /> </js:beads> </js:Label> I'm not sure I understand the last code snippet, but there is no reason not to create a 4ColumnLayout. We have a VerticalColumnLayout already. Find the pattern and encapsulate it so others can use it. Try to keep it small and loosely coupled. My 2 cents, -Alex On 2/11/17, 10:07 PM, "Harbs" <harbs.li...@gmail.com> wrote: >Currently, the best you can do to spread elements in FlexJS is by using >OneFlexibleChildVerticalLayout and OneFlexibleChildHorizontalLayout. > >The more we use FlexJS, the more we’re coming to the conclusion that we >really need a ConstrainedLayout which has the features of the classic >Flex layout… > >Harbs > >> On Feb 12, 2017, at 4:46 AM, Justin Mclean <jus...@classsoftware.com> >>wrote: >> >> Hi, >> >> An old trick to get things to be pined to the RHS was to use a 100% >>spacer in MXML. >> >> However code like this doesn’t work in FlexJS: >> >> <js:HContainer percentWidth="100"> >> <js:Label text="Left" /> >> <js:Spacer percentWidth="100" /> >> <js:Label text="Right" /> >> </js:HContainer> >> >> But in FlexJS the spacer is 100% of the containers width and the button >>wraps onto the next line. >> >> You can do this but is seems bit cumbersome: >> >> <js:HContainer percentWidth="100"> >> <js:Label text="Left" /> >> <js:Label text="Right" style="position:absolute;right:0px;" /> >> </js:HContainer> >> >> And a little more cumbersome once you have several items you want to >>evenly space. >> >> <js:initialView> >> <js:View percentWidth="100"> >> <js:HContainer percentWidth="100"> >> <js:Container percentWidth="25"> >> <js:TextButton text="one" style="margin-left: auto; >>margin-right: auto;"/> >> </js:Container> >> <js:Container percentWidth="25"> >> <js:TextButton text="two" style="margin-left: auto; >>margin-right: auto;"/> >> </js:Container> >> <js:Container percentWidth="25"> >> <js:TextButton text="three" style="margin-left: auto; >>margin-right: auto;"/> >> </js:Container> >> <js:Container percentWidth="25"> >> <js:TextButton text="four" style="margin-left: auto; >>margin-right: auto;"/> >> </js:Container> >> </js:HContainer> >> </js:View> >> </js:initialView> >> >> Is there a better way of doing this? >> >> Thanks, >> Justin >> >
