Documentation is the key. I don’t know what to say, but we need a solution to that problem.
The current BasicLayout seems to be pretty inefficient as-is for HTML layout. It currently runs layout twice, and we observed some pretty extreme delays in laying out lists. For example, a list with close to 400 items (simple strings) took about a full second to redraw. We have not spent the time figuring out why it’s so slow. It would be an interesting exercise to create a ConstrainedLayout which would basically be a port of the Flex layout and compare the performance between the two. We very well might do that… Harbs > On Feb 12, 2017, at 8:55 AM, Alex Harui <aha...@adobe.com> wrote: > > 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 >>> >> >
