Re: [FlexJS] Spacers and positioning
I posted this to a different email thread, but I pushed VerticalFlexLayout and HorizontalFlexLayout. Give them a try; only the JS side is affected. For spacing, put margins on the children of the Container. Padding on Container is still broken; I know why, just have to decide how to address it. Percentage sizing for the children works, too, although the Flexbox will override them if it feels it must. Personally, I think it does a great job of presenting the information. On 2/22/17, 8:55 AM, "Peter Ent"wrote: >I'll be including the issues of spacing and positioning in my work with >layouts. > >‹peter > >On 2/21/17, 5:56 AM, "yishayw" wrote: > >>That sounds like a good idea. Let me know if I can help. >> >> >> >>-- >>View this message in context: >>http://apache-flex-development.247.n4.nabble.com/FlexJS-Spacers-and-p >>o >>sitioning-tp59242p59706.html >>Sent from the Apache Flex Development mailing list archive at Nabble.com. >
Re: [FlexJS] Spacers and positioning
I'll be including the issues of spacing and positioning in my work with layouts. ‹peter On 2/21/17, 5:56 AM, "yishayw"wrote: >That sounds like a good idea. Let me know if I can help. > > > >-- >View this message in context: >http://apache-flex-development.247.n4.nabble.com/FlexJS-Spacers-and-po >sitioning-tp59242p59706.html >Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] Spacers and positioning
That sounds like a good idea. Let me know if I can help. -- View this message in context: http://apache-flex-development.247.n4.nabble.com/FlexJS-Spacers-and-positioning-tp59242p59706.html Sent from the Apache Flex Development mailing list archive at Nabble.com.
Re: [FlexJS] Spacers and positioning
You can use CSS Flexbox[1] on the JS side to handle these situations. I'm thinking about making a layout that makes it possible to specify Flexbox and have some/all of it work on the SWF side as well. Its a bit of work but I think it will be worth it. If anyone is interested in helping, let me know. ‹peter [1] https://css-tricks.com/snippets/css/a-guide-to-flexbox/ On 2/12/17, 1:55 AM, "Alex Harui"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: > > > > > > > > >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" 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 >>>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: >>> >>> >>> >>> >>> >>> >>> >>> 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: >>> >>> >>> >>> >>> >>> >>> And a little more cumbersome once you have several items you want to >>>evenly space. >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> Is there a better way of doing this? >>> >>> Thanks, >>> Justin >>> >> >
Re: [FlexJS] Spacers and positioning
On 2/13/17, 12:33 PM, "Justin Mclean"wrote: >Hi, > >> 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. > >Padding would also be useful to have. I don't think the Express package has a goal of emulating regular Flex APIs. It's goal is to aggregate the APIs in the Basic package which are tilted towards native browser APIs. Padding, for example, would work like it does in the browser, along with Margin. In Flex, there was no margin style, and thus padding worked a bit differently. It would be cool to see a component set that tries to emulate the Spark/MX APIs without promising a full port of Spark/MX. For example, a Spark-like Button would have a label and click event, but wouldn't promise to extend UIComponent, or allow setting of masks and scrollrects and other low-level Flash stuff. Any volunteers? My 2 cents, -Alex
Re: [FlexJS] Spacers and positioning
Hi, > 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. Padding would also be useful to have. Thanks, Justin
Re: [FlexJS] Spacers and positioning
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: or 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"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 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: >> >> >> >> >> >> >> >> >> 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" 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 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: 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: And a little more cumbersome once you have several items you want to evenly space. Is there a better way of doing this? Thanks, Justin >>> >> >
Re: [FlexJS] Spacers and positioning
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 Haruiwrote: > > 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: > > > > > > > > > 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" 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 >>> 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: >>> >>> >>> >>> >>> >>> >>> >>> 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: >>> >>> >>> >>> >>> >>> >>> And a little more cumbersome once you have several items you want to >>> evenly space. >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> >>> Is there a better way of doing this? >>> >>> Thanks, >>> Justin >>> >> >
RE: [FlexJS] Spacers and positioning
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: 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: >> >> >> >> >> >> >> >> 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: >> >> >> >> >> >> >> And a little more cumbersome once you have several items you want to >>evenly space. >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> Is there a better way of doing this? >> >> Thanks, >> Justin >> >
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: 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"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 >>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: >> >> >> >> >> >> >> >> 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: >> >> >> >> >> >> >> And a little more cumbersome once you have several items you want to >>evenly space. >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> >> Is there a better way of doing this? >> >> Thanks, >> Justin >> >
Re: [FlexJS] Spacers and positioning
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 Mcleanwrote: > > 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: > > > > > > > > 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: > > > > > > > And a little more cumbersome once you have several items you want to evenly > space. > > > > > > > > > > > > > > > > > > > > > Is there a better way of doing this? > > Thanks, > Justin >