Re: [FlexJS]TileLayout

[Harbs]

Already fixed. :-)

> On Jul 25, 2017, at 12:47 AM, Alex Harui  wrote:
> 
> I thought the goal was to approximate what regular Flex TileLayout did.
> The fact that TileLayout uses flexbox under the covers is an
> implementation detail.  IMO, Flex TileLayout behavior would be the default
> TileLayout to simplify migration and other options would have longer names.
> 
> No matter what, if SWF and HTML don't currently match, we should fix it so
> they do.
> 
> My 2 cents,
> -Alex
> 
> On 7/24/17, 7:13 AM, "Peter Ent"  wrote:
> 
>> I just left things as open as possible as I recall. Thanks Harbs.
>> 
>> On 7/23/17, 6:06 AM, "Harbs"  wrote:
>> 
>>> Agreed, but I think the defaults should match Flash between and HTML.
>>> 
>>> He did not set stretch. Nothing was set. ³stretch² is the default css.
>>> 
 On Jul 23, 2017, at 12:23 PM, Alex Harui 
 wrote:
 
 There doesn't have to be one TileLayout.  There can be
 TileLayoutWithFlexStart, TileLayoutWithStretch, and
 TileLayoutWithAlignContent with a property that allows you to set it.
 
 Peter may remember why he chose "stretch".
 
 -Alex
 
 On 7/23/17, 1:28 AM, "Harbs"  wrote:
 
> I just discovered something which is worth bringing up:
> 
> The default for css flex layouts is align-content: stretch This adds
> space between elements if the total height (or width) of the elements
> are
> less than the parent. I don¹t think that¹s an appropriate default for
> a
> tile layout. The layout should be packed from the top left and only
> add
> space if there is padding/margins in the itemRenderers.
> 
> I believe the correct default css is align-content: flex-start which
> has
> the behavior that I would expect from a tile layout.
> 
> Of course, it might be interesting to have a tile layout which offers
> different spacing options. That could be alternate layouts, or even
> beads
> attached to the layout beads.
> 
> I fixed this issue in my app by just adding some align-content:
> flex-start css to my TileLayout component. This works because I don¹t
> need swf rendering, but I think it¹s something that should be
> addressed
> in the TileLayout.
> 
> Let me checkŠ
> 
> I just (fixed and) ran ContainerTest, and the swf behavior is in fact
> different than the HTML behavior. I think we can classify this as a
> bug.
> I¹m committing this change.
> 
> FWIW, there¹s lots of other differences between the swf output and the
> JS
> output in ContainerTest. It¹s probably worth looking into the rest of
> those issues as wellŠ
> 
> Harbs
 
>>> 
>> 
> 

Re: [FlexJS]TileLayout

[Alex Harui]

I thought the goal was to approximate what regular Flex TileLayout did.
The fact that TileLayout uses flexbox under the covers is an
implementation detail.  IMO, Flex TileLayout behavior would be the default
TileLayout to simplify migration and other options would have longer names.

No matter what, if SWF and HTML don't currently match, we should fix it so
they do.

My 2 cents,
-Alex

On 7/24/17, 7:13 AM, "Peter Ent"  wrote:

>I just left things as open as possible as I recall. Thanks Harbs.
>
>On 7/23/17, 6:06 AM, "Harbs"  wrote:
>
>>Agreed, but I think the defaults should match Flash between and HTML.
>>
>>He did not set stretch. Nothing was set. ³stretch² is the default css.
>>
>>> On Jul 23, 2017, at 12:23 PM, Alex Harui 
>>>wrote:
>>> 
>>> There doesn't have to be one TileLayout.  There can be
>>> TileLayoutWithFlexStart, TileLayoutWithStretch, and
>>> TileLayoutWithAlignContent with a property that allows you to set it.
>>> 
>>> Peter may remember why he chose "stretch".
>>> 
>>> -Alex
>>> 
>>> On 7/23/17, 1:28 AM, "Harbs"  wrote:
>>> 
 I just discovered something which is worth bringing up:
 
 The default for css flex layouts is align-content: stretch This adds
 space between elements if the total height (or width) of the elements
are
 less than the parent. I don¹t think that¹s an appropriate default for
a
 tile layout. The layout should be packed from the top left and only
add
 space if there is padding/margins in the itemRenderers.
 
 I believe the correct default css is align-content: flex-start which
has
 the behavior that I would expect from a tile layout.
 
 Of course, it might be interesting to have a tile layout which offers
 different spacing options. That could be alternate layouts, or even
beads
 attached to the layout beads.
 
 I fixed this issue in my app by just adding some align-content:
 flex-start css to my TileLayout component. This works because I don¹t
 need swf rendering, but I think it¹s something that should be
addressed
 in the TileLayout.
 
 Let me checkŠ
 
 I just (fixed and) ran ContainerTest, and the swf behavior is in fact
 different than the HTML behavior. I think we can classify this as a
bug.
 I¹m committing this change.
 
 FWIW, there¹s lots of other differences between the swf output and the
JS
 output in ContainerTest. It¹s probably worth looking into the rest of
 those issues as wellŠ
 
 Harbs
>>> 
>>
>

Re: [FlexJS]TileLayout

[Peter Ent]

I just left things as open as possible as I recall. Thanks Harbs.

On 7/23/17, 6:06 AM, "Harbs"  wrote:

>Agreed, but I think the defaults should match Flash between and HTML.
>
>He did not set stretch. Nothing was set. ³stretch² is the default css.
>
>> On Jul 23, 2017, at 12:23 PM, Alex Harui 
>>wrote:
>> 
>> There doesn't have to be one TileLayout.  There can be
>> TileLayoutWithFlexStart, TileLayoutWithStretch, and
>> TileLayoutWithAlignContent with a property that allows you to set it.
>> 
>> Peter may remember why he chose "stretch".
>> 
>> -Alex
>> 
>> On 7/23/17, 1:28 AM, "Harbs"  wrote:
>> 
>>> I just discovered something which is worth bringing up:
>>> 
>>> The default for css flex layouts is align-content: stretch This adds
>>> space between elements if the total height (or width) of the elements
>>>are
>>> less than the parent. I don¹t think that¹s an appropriate default for a
>>> tile layout. The layout should be packed from the top left and only add
>>> space if there is padding/margins in the itemRenderers.
>>> 
>>> I believe the correct default css is align-content: flex-start which
>>>has
>>> the behavior that I would expect from a tile layout.
>>> 
>>> Of course, it might be interesting to have a tile layout which offers
>>> different spacing options. That could be alternate layouts, or even
>>>beads
>>> attached to the layout beads.
>>> 
>>> I fixed this issue in my app by just adding some align-content:
>>> flex-start css to my TileLayout component. This works because I don¹t
>>> need swf rendering, but I think it¹s something that should be addressed
>>> in the TileLayout.
>>> 
>>> Let me checkŠ
>>> 
>>> I just (fixed and) ran ContainerTest, and the swf behavior is in fact
>>> different than the HTML behavior. I think we can classify this as a
>>>bug.
>>> I¹m committing this change.
>>> 
>>> FWIW, there¹s lots of other differences between the swf output and the
>>>JS
>>> output in ContainerTest. It¹s probably worth looking into the rest of
>>> those issues as wellŠ
>>> 
>>> Harbs
>> 
>

Re: [FlexJS]TileLayout

[Harbs]

Agreed, but I think the defaults should match Flash between and HTML.

He did not set stretch. Nothing was set. “stretch” is the default css.

> On Jul 23, 2017, at 12:23 PM, Alex Harui  wrote:
> 
> There doesn't have to be one TileLayout.  There can be
> TileLayoutWithFlexStart, TileLayoutWithStretch, and
> TileLayoutWithAlignContent with a property that allows you to set it.
> 
> Peter may remember why he chose "stretch".
> 
> -Alex
> 
> On 7/23/17, 1:28 AM, "Harbs"  wrote:
> 
>> I just discovered something which is worth bringing up:
>> 
>> The default for css flex layouts is align-content: stretch This adds
>> space between elements if the total height (or width) of the elements are
>> less than the parent. I don’t think that’s an appropriate default for a
>> tile layout. The layout should be packed from the top left and only add
>> space if there is padding/margins in the itemRenderers.
>> 
>> I believe the correct default css is align-content: flex-start which has
>> the behavior that I would expect from a tile layout.
>> 
>> Of course, it might be interesting to have a tile layout which offers
>> different spacing options. That could be alternate layouts, or even beads
>> attached to the layout beads.
>> 
>> I fixed this issue in my app by just adding some align-content:
>> flex-start css to my TileLayout component. This works because I don’t
>> need swf rendering, but I think it’s something that should be addressed
>> in the TileLayout.
>> 
>> Let me check…
>> 
>> I just (fixed and) ran ContainerTest, and the swf behavior is in fact
>> different than the HTML behavior. I think we can classify this as a bug.
>> I’m committing this change.
>> 
>> FWIW, there’s lots of other differences between the swf output and the JS
>> output in ContainerTest. It’s probably worth looking into the rest of
>> those issues as well…
>> 
>> Harbs
> 

Re: [FlexJS]TileLayout

[Alex Harui]

There doesn't have to be one TileLayout.  There can be
TileLayoutWithFlexStart, TileLayoutWithStretch, and
TileLayoutWithAlignContent with a property that allows you to set it.

Peter may remember why he chose "stretch".

-Alex

On 7/23/17, 1:28 AM, "Harbs"  wrote:

>I just discovered something which is worth bringing up:
>
>The default for css flex layouts is align-content: stretch This adds
>space between elements if the total height (or width) of the elements are
>less than the parent. I don’t think that’s an appropriate default for a
>tile layout. The layout should be packed from the top left and only add
>space if there is padding/margins in the itemRenderers.
>
>I believe the correct default css is align-content: flex-start which has
>the behavior that I would expect from a tile layout.
>
>Of course, it might be interesting to have a tile layout which offers
>different spacing options. That could be alternate layouts, or even beads
>attached to the layout beads.
>
>I fixed this issue in my app by just adding some align-content:
>flex-start css to my TileLayout component. This works because I don’t
>need swf rendering, but I think it’s something that should be addressed
>in the TileLayout.
>
>Let me check…
>
>I just (fixed and) ran ContainerTest, and the swf behavior is in fact
>different than the HTML behavior. I think we can classify this as a bug.
>I’m committing this change.
>
>FWIW, there’s lots of other differences between the swf output and the JS
>output in ContainerTest. It’s probably worth looking into the rest of
>those issues as well…
>
>Harbs

Re: [FlexJS] TileLayout

[Alex Harui]

In these situations (assuming I understand the problem), the first
consideration is "what does the browser do?".  So if I take a bunch of
divs, give them explicit sizes and give them margins do you get what you
expect/want?  There are some funny rules on how margins work in CSS in the
browser, so setting marginRight=0px may be part of the solution.  The
marginLeft would give you space between the items.

We often just pull up an HTML Editor or JSFiddle and create the HTML and
CSS we need to create the UI we want.  Then the goal is to write FlexJS
code to programmatically create that HTML and CSS.  Sometimes creating the
HTML and CSS is hard and StackOverflow is full of complaints about how to
do it.  Then our job is to write JS to implement one of the suggested
solutions.  I imagine that Josh wrote his layouts with Gap because it was
just too painful to do it with just HTML and CSS.  That's reasonable, but
the trade-off is that it might not be using standard CSS.

Once you get something works, we next emulate that in Flash and we're not
worried as much about how that performs.  We simply have to emulate
browser behavior in Flash whether we like it or not, unless you can write
SWF-specific code that performs better.

My 2 cents,
-Alex

On 6/22/17, 7:14 AM, "yishayw"  wrote:

>Adding margins adds a gutter on the right side of the host. This is
>probably
>because each child's width is calculated according to the parent's width
>divided by the number of children, disregarding the margins. I'm using
>padding instead, but that has the drawback that in a tiled list, for
>example, there are no non-selectable gaps.
>
>I think the fix is to take margins into account, but there might be
>performance implications.
>
>
>
>
>--
>View this message in context:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-fle
>x-development.247.n4.nabble.com%2FFlexJS-TileLayout-tp62568p62570.html
>=02%7C01%7C%7Cb91ec1e0b4124d972f2508d4b97b672a%7Cfa7b1b5a7b34438794ae
>d2c178decee1%7C0%7C0%7C636337387051749065=Y9hp5AOMxxVyDAIjUgTvUkVW9b
>iPmjT94HKz9cr9Al0%3D=0
>Sent from the Apache Flex Development mailing list archive at Nabble.com.

RE: [FlexJS] TileLayout

[Yishay Weiss]

It’s a bit different because horizontal/vertical layouts don’t size the 
children. Tile does according to the set number of rows and columns.

Peter, FlexBox works fine, the question is how to calculate the childrens’ 
size. It looks to me like another PAYG question. Is the basic tile 
functionality without gaps good enough?

From: piotrz<mailto:piotrzarzyck...@gmail.com>
Sent: Thursday, June 22, 2017 6:13 PM
To: dev@flex.apache.org<mailto:dev@flex.apache.org>
Subject: Re: [FlexJS] TileLayout

Hi Yishay,

I think Josh wrote some bead - not sure whether it is related to your
problem [1][2]

[1]
https://github.com/apache/flex-asjs/blob/release0.8.0/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
[2]
https://github.com/apache/flex-asjs/blob/release0.8.0/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayoutWithPaddingAndGap.as

Piotr



-
Apache Flex PMC
piotrzarzyck...@gmail.com
--
View this message in context: 
http://apache-flex-development.247.n4.nabble.com/FlexJS-TileLayout-tp62568p62574.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] TileLayout

[piotrz]

Hi Yishay,

I think Josh wrote some bead - not sure whether it is related to your
problem [1][2]

[1]
https://github.com/apache/flex-asjs/blob/release0.8.0/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/HorizontalLayoutWithPaddingAndGap.as
[2]
https://github.com/apache/flex-asjs/blob/release0.8.0/frameworks/projects/Basic/src/main/flex/org/apache/flex/html/beads/layouts/VerticalLayoutWithPaddingAndGap.as

Piotr



-
Apache Flex PMC
piotrzarzyck...@gmail.com
--
View this message in context: 
http://apache-flex-development.247.n4.nabble.com/FlexJS-TileLayout-tp62568p62574.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] TileLayout

[Peter Ent]

You could write a new TileLayoutWithGapAndPadding to handle that specific
situation. On the JS side, TileLayout uses Flexbox and perhaps you need
more control.

‹peter

On 6/22/17, 10:14 AM, "yishayw"  wrote:

>Adding margins adds a gutter on the right side of the host. This is
>probably
>because each child's width is calculated according to the parent's width
>divided by the number of children, disregarding the margins. I'm using
>padding instead, but that has the drawback that in a tiled list, for
>example, there are no non-selectable gaps.
>
>I think the fix is to take margins into account, but there might be
>performance implications.
>
>
>
>
>--
>View this message in context:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-fle
>x-development.247.n4.nabble.com%2FFlexJS-TileLayout-tp62568p62570.html
>=02%7C01%7C%7C1256d4c11ee54c60a90e08d4b97b6725%7Cfa7b1b5a7b34438794ae
>d2c178decee1%7C0%7C0%7C636337387035370705=Lt0zEPpqPr2Hj7eng2EIwehxJ2
>sdhoTLinXT3qBZ6lE%3D=0
>Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] TileLayout

[yishayw]

Adding margins adds a gutter on the right side of the host. This is probably
because each child's width is calculated according to the parent's width
divided by the number of children, disregarding the margins. I'm using
padding instead, but that has the drawback that in a tiled list, for
example, there are no non-selectable gaps.

I think the fix is to take margins into account, but there might be
performance implications.




--
View this message in context: 
http://apache-flex-development.247.n4.nabble.com/FlexJS-TileLayout-tp62568p62570.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] TileLayout

[Peter Ent]

Hi,

Use margins on the items.

‹peter

On 6/22/17, 9:48 AM, "yishayw"  wrote:

>What is the preferred way to set gaps between columns and between rows?
>
>
>
>--
>View this message in context:
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-fle
>x-development.247.n4.nabble.com%2FFlexJS-TileLayout-tp62568.html=
>02%7C01%7C%7Ca0c719ba202142b1722c08d4b977c8a7%7Cfa7b1b5a7b34438794aed2c178
>decee1%7C0%7C0%7C636337371492919591=DyQk9yp6FLBacjJp1orJR5OugwUbqGGm
>7qyC8lBIXsA%3D=0
>Sent from the Apache Flex Development mailing list archive at Nabble.com.