I think we should use the Express package as a way to build a comprehensive, yet slim, set of components, that has all of the expected functionality built it. For example, incorporating vertical and horizontal gap properties and alignment, into the layouts. Imposing this on Basic/HTML is not the PAYG way. Basic really should a have a number of layouts or layouts + layout beads, that accomplish the same task as Express, but in a much more verbose way.
For example: <basic:HorizontalLayoutWithGap gap="10" /> or <basic:VerticalLayoutWithGapAndAlignment gap="10" alignment="center" /> That sort of thing. The Express version of these layouts would have those properties already in them and probably do a more complex algorithm, maybe with multiple passes if needed. Another option would be to implement the flex-box layout on the SWF side, which seems pretty versatile to me. That might also be something for Express. To me, the Basic/HTML, should provide the bare minimum with augmentation via beads. Peter Ent Adobe Systems/Apache Flex Project On 2/12/17, 6:07 AM, "Harbs" <harbs.li...@gmail.com> wrote: >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 >>>> >>> >> >
