flex-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Yishay Weiss <yishayj...@hotmail.com>
Subject RE: [FlexJS] Spacers and positioning
Date Sun, 12 Feb 2017 07:32:10 GMT
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:aharui@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.lists@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 <justin@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
>>
>


Mime
  • Unnamed multipart/alternative (inline, None, 0 bytes)
View raw message