You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@flex.apache.org by Justin Mclean <ju...@classsoftware.com> on 2017/02/12 02:46:58 UTC
[FlexJS] Spacers and positioning
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
Re: [FlexJS] Spacers and positioning
Posted by Peter Ent <pe...@adobe.com>.
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" <pe...@adobe.com> 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" <yi...@hotmail.com> wrote:
>
>>That sounds like a good idea. Let me know if I can help.
>>
>>
>>
>>--
>>View this message in context:
>>http://apache-flex-development.2333347.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
Posted by Peter Ent <pe...@adobe.com>.
I'll be including the issues of spacing and positioning in my work with
layouts.
‹peter
On 2/21/17, 5:56 AM, "yishayw" <yi...@hotmail.com> wrote:
>That sounds like a good idea. Let me know if I can help.
>
>
>
>--
>View this message in context:
>http://apache-flex-development.2333347.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
Posted by yishayw <yi...@hotmail.com>.
That sounds like a good idea. Let me know if I can help.
--
View this message in context: http://apache-flex-development.2333347.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
Posted by Peter Ent <pe...@adobe.com>.
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" <ah...@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" <ha...@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 <ju...@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
>>>
>>
>
RE: [FlexJS] Spacers and positioning
Posted by Yishay Weiss <yi...@hotmail.com>.
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<ma...@adobe.com>
Sent: Sunday, February 12, 2017 8:56 AM
To: dev@flex.apache.org<ma...@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" <ha...@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 <ju...@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
>>
>
Re: [FlexJS] Spacers and positioning
Posted by Alex Harui <ah...@adobe.com>.
On 2/13/17, 12:33 PM, "Justin Mclean" <ju...@classsoftware.com> 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
Posted by Justin Mclean <ju...@classsoftware.com>.
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
Posted by Peter Ent <pe...@adobe.com>.
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" <ha...@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 <ah...@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" <ha...@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 <ju...@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
>>>>
>>>
>>
>
Re: [FlexJS] Spacers and positioning
Posted by Harbs <ha...@gmail.com>.
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 <ah...@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" <ha...@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 <ju...@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
>>>
>>
>
Re: [FlexJS] Spacers and positioning
Posted by Alex Harui <ah...@adobe.com>.
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" <ha...@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 <ju...@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
>>
>
Re: [FlexJS] Spacers and positioning
Posted by Harbs <ha...@gmail.com>.
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 <ju...@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
>