You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Carlos Rovira <ca...@apache.org> on 2018/03/30 10:42:45 UTC
Layouts and its properties to be set via CSS
Hi
I'm finding a usability problem with layouts. Since Layouts use to be
configured via CSS (IBeadLayout), this works ok for basic layouts without
properties, but if you have for example a "gap" property like in
HorizontalLayoutWithPaddingAndGap, this layout is not usable vía CSS since
you can't set the "gap" attribute.
So how can we overcome this issue?
Maybe If we could write:
SomeComponent
{
IBeadLayout: Classreference
("some.layout.with.properties.that.need.to.be.set");
gap: 10px;
}
And gap will be read by the layout...
if not any layout with properties will be limited to use via MXML
Maybe I missing some other way to do this?
--
Carlos Rovira
http://about.me/carlosrovira
Re: Layouts and its properties to be set via CSS
Posted by Carlos Rovira <ca...@apache.org>.
Hi Alex,
this seems a bit heavy, but maybe is the way to do for now. Maybe this is a
feature for a future version of royale. I'll see how your suggestion works
thanks!
2018-03-30 19:31 GMT+02:00 Alex Harui <ah...@adobe.com.invalid>:
> In other parts of the framework, to avoid using advanced selectors, we
> create subclasses. So for your case, you could create
>
> PanelTitleBar extends TitleBar
> AlertTitleBar extends TitleBar
>
> Each can then have its own CSS TypeSelector with an IBeadLayout that
> references some other layout bead.
>
> -Alex
>
> On 3/30/18, 10:25 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>
> >Hi Alex,
> >
> >this last is not about the gap. In this thread I covered various things
> >and
> >maybe I should make one thread each, but I though it could be many threads
> >as well:
> >
> >1.- Problem to set properties through CSS for beads (layouts or even
> >views). I think this can be covered with Peter's emails using
> >ValuesManager. I should try it as
> >
> >2.- Problem that is maybe the most important. How to make a concrete
> >component have different beads depending on where its used. (i.e:
> >TitleBar,
> >TitleBar in Panel and TitleBar in Alert). We need to have some kind of
> >"cascade styles" for "fake" beads css declarations. Since a normal use can
> >have a very different configuration than a use as a part of another
> >component.
> >
> >3.- In my last email a mention a way to deal with 2), but as part of code.
> >It's not ideal since you could need to write a class only to change a
> >bead.
> >My question there's if I must remove the previous bead in some way to
> >avoid
> >leaks.
> >
> >regarding your comment about gap and margins (referred to 1)), in fact in
> >horizontal layout with gap and padding Peter uses margins to manage the
> >gap, so in the end we are using that, but we should decide if we can use
> >ValuesManager to capture whatever non standard property to proxy it
> >through
> >a bead. I think that would be great.
> >
> >So both problems are covered here and are valid for all kinds of beads
> >(layout, view,...)
> >
> >thanks
> >
> >
> >
> >
> >2018-03-30 18:57 GMT+02:00 Alex Harui <ah...@adobe.com.invalid>:
> >
> >> Carlos, are you looking for a general solution or is this specifically
> >> about gap?
> >>
> >> Gap is not a CSS style. Flex introduced it. I believe the CSS
> >>equivalent
> >> is to set margins on all children of a container. Why not just use
> >> margins?
> >>
> >> Thoughts?
> >> -Alex
> >>
> >> On 3/30/18, 9:51 AM, "carlos.rovira@gmail.com on behalf of Carlos
> >>Rovira"
> >> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
> >>
> >> >If I use a ViewBead to solve this, and make this:
> >> >
> >> >titleBar = new TitleBar();
> >> > titleBar.addBead(new HorizontalLayoutSpaceBetween());
> >> >
> >> >although this works ok, maybe it's not the best since there's another
> >> >ILayoutBead left with no use.
> >> >Should I make a removeBead of the one already was assigned by CSS?
> >> >If yes, how I can remove it? (some sample code will be appreciate)
> >> >
> >> >thanks
> >> >
> >> >
> >> >2018-03-30 14:57 GMT+02:00 Carlos Rovira <ca...@apache.org>:
> >> >
> >> >> Hi Piotr,
> >> >>
> >> >> is not the real class ;), just want to write a quick example, change
> >> >>that
> >> >> for a real layout class (whatever)
> >> >>
> >> >> 2018-03-30 13:36 GMT+02:00 Piotr Zarzycki
> >><pi...@gmail.com>:
> >> >>
> >> >>> Hi Carlos,
> >> >>>
> >> >>> But " verticallayout" - This is AS class ?
> >> >>>
> >> >>>
> >> >>>
> >> >>> 2018-03-30 13:19 GMT+02:00 Carlos Rovira <ca...@apache.org>:
> >> >>>
> >> >>> > Another problem I found with layouts usability:
> >> >>> >
> >> >>> > If I have a component that uses by default an horizontal layout:
> >> >>> >
> >> >>> > ControlBar
> >> >>> > {
> >> >>> > IBeadLayout: Classreference ("horizontallayout");
> >> >>> > }
> >> >>> >
> >> >>> > But this component is used in other component that wants to use
> >> >>>another
> >> >>> > layout (i.e vertical)
> >> >>> >
> >> >>> > I tried this:
> >> >>> >
> >> >>> > .alert j|ControlBar
> >> >>> > {
> >> >>> > IBeadLayout: Classreference ("verticallayout");
> >> >>> > }
> >> >>> >
> >> >>> > and this:
> >> >>> >
> >> >>> > j|Alert j|ControlBar
> >> >>> > {
> >> >>> > IBeadLayout: Classreference ("verticallayout");
> >> >>> > }
> >> >>> >
> >> >>> > but both options are not valid
> >> >>> >
> >> >>> > Some other way to do this? or this is not possible?
> >> >>> >
> >> >>> >
> >> >>> > 2018-03-30 12:42 GMT+02:00 Carlos Rovira
> >><ca...@apache.org>:
> >> >>> >
> >> >>> > > Hi
> >> >>> > >
> >> >>> > > I'm finding a usability problem with layouts. Since Layouts use
> >>to
> >> >>>be
> >> >>> > > configured via CSS (IBeadLayout), this works ok for basic
> >>layouts
> >> >>> without
> >> >>> > > properties, but if you have for example a "gap" property like in
> >> >>> > > HorizontalLayoutWithPaddingAndGap, this layout is not usable
> vía
> >> >>>CSS
> >> >>> > > since you can't set the "gap" attribute.
> >> >>> > >
> >> >>> > > So how can we overcome this issue?
> >> >>> > >
> >> >>> > > Maybe If we could write:
> >> >>> > >
> >> >>> > > SomeComponent
> >> >>> > > {
> >> >>> > > IBeadLayout: Classreference ("some.layout.with.properties.
> >> >>> > > that.need.to.be.set");
> >> >>> > > gap: 10px;
> >> >>> > > }
> >> >>> > >
> >> >>> > > And gap will be read by the layout...
> >> >>> > >
> >> >>> > > if not any layout with properties will be limited to use via
> >>MXML
> >> >>> > >
> >> >>> > > Maybe I missing some other way to do this?
> >> >>> > >
> >> >>> > > --
> >> >>> > > Carlos Rovira
> >> >>> > >
> >> >>>https://na01.safelinks.protection.outlook.com/?url=
> >> http%3A%2F%2Fabout.me
> >> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> >> 7C30e8d54e57f54bacdfa4
> >> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
> >> cee1%7C0%7C0%7C63658025499754
> >> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
> >> >>> > >
> >> >>> > >
> >> >>> >
> >> >>> >
> >> >>> > --
> >> >>> > Carlos Rovira
> >> >>> >
> >> >>>https://na01.safelinks.protection.outlook.com/?url=
> >> http%3A%2F%2Fabout.me
> >> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> >> 7C30e8d54e57f54bacdfa4
> >> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
> >> cee1%7C0%7C0%7C63658025499754
> >> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
> >> >>> >
> >> >>>
> >> >>>
> >> >>>
> >> >>> --
> >> >>>
> >> >>> Piotr Zarzycki
> >> >>>
> >> >>> Patreon:
> >> >>>*https://na01.safelinks.protection.outlook.com/?url=
> >> https%3A%2F%2Fwww.pa
> >> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> >> %7C30e8d54e57
> >> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
> >> cee1%7C0%7C0%7C6365
> >> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
> >> TkIqRPvBcx2Hs%3D&rese
> >> >>>rved=0
> >> >>>
> >> >>><https://na01.safelinks.protection.outlook.com/?url=
> >> https%3A%2F%2Fwww.pa
> >> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> >> %7C30e8d54e57
> >> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
> >> cee1%7C0%7C0%7C6365
> >> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
> >> TkIqRPvBcx2Hs%3D&rese
> >> >>>rved=0>*
> >> >>>
> >> >>
> >> >>
> >> >>
> >> >> --
> >> >> Carlos Rovira
> >> >>
> >> >>https://na01.safelinks.protection.outlook.com/?url=
> >> http%3A%2F%2Fabout.me%
> >> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> >> 7C30e8d54e57f54bacdfa408
> >> >>d5965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> >> 7C63658025499754244
> >> >>8&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
> >> >>
> >> >>
> >> >
> >> >
> >> >--
> >> >Carlos Rovira
> >> >https://na01.safelinks.protection.outlook.com/?url=
> >> http%3A%2F%2Fabout.me%2
> >> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> >> 7C30e8d54e57f54bacdfa408d5
> >> >965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> >> 7C636580254997542448&s
> >> >data=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
> >>
> >>
> >
> >
> >--
> >Carlos Rovira
> >https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me%2
> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> 7C0f1c0a17831e48d6884508d5
> >966360fe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636580275929439073&s
> >data=4fT2dvknAV5sj9IYdjAVD3Lj4CYYnXHhCqzXPQMlmTA%3D&reserved=0
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Layouts and its properties to be set via CSS
Posted by Alex Harui <ah...@adobe.com.INVALID>.
In other parts of the framework, to avoid using advanced selectors, we
create subclasses. So for your case, you could create
PanelTitleBar extends TitleBar
AlertTitleBar extends TitleBar
Each can then have its own CSS TypeSelector with an IBeadLayout that
references some other layout bead.
-Alex
On 3/30/18, 10:25 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>Hi Alex,
>
>this last is not about the gap. In this thread I covered various things
>and
>maybe I should make one thread each, but I though it could be many threads
>as well:
>
>1.- Problem to set properties through CSS for beads (layouts or even
>views). I think this can be covered with Peter's emails using
>ValuesManager. I should try it as
>
>2.- Problem that is maybe the most important. How to make a concrete
>component have different beads depending on where its used. (i.e:
>TitleBar,
>TitleBar in Panel and TitleBar in Alert). We need to have some kind of
>"cascade styles" for "fake" beads css declarations. Since a normal use can
>have a very different configuration than a use as a part of another
>component.
>
>3.- In my last email a mention a way to deal with 2), but as part of code.
>It's not ideal since you could need to write a class only to change a
>bead.
>My question there's if I must remove the previous bead in some way to
>avoid
>leaks.
>
>regarding your comment about gap and margins (referred to 1)), in fact in
>horizontal layout with gap and padding Peter uses margins to manage the
>gap, so in the end we are using that, but we should decide if we can use
>ValuesManager to capture whatever non standard property to proxy it
>through
>a bead. I think that would be great.
>
>So both problems are covered here and are valid for all kinds of beads
>(layout, view,...)
>
>thanks
>
>
>
>
>2018-03-30 18:57 GMT+02:00 Alex Harui <ah...@adobe.com.invalid>:
>
>> Carlos, are you looking for a general solution or is this specifically
>> about gap?
>>
>> Gap is not a CSS style. Flex introduced it. I believe the CSS
>>equivalent
>> is to set margins on all children of a container. Why not just use
>> margins?
>>
>> Thoughts?
>> -Alex
>>
>> On 3/30/18, 9:51 AM, "carlos.rovira@gmail.com on behalf of Carlos
>>Rovira"
>> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>>
>> >If I use a ViewBead to solve this, and make this:
>> >
>> >titleBar = new TitleBar();
>> > titleBar.addBead(new HorizontalLayoutSpaceBetween());
>> >
>> >although this works ok, maybe it's not the best since there's another
>> >ILayoutBead left with no use.
>> >Should I make a removeBead of the one already was assigned by CSS?
>> >If yes, how I can remove it? (some sample code will be appreciate)
>> >
>> >thanks
>> >
>> >
>> >2018-03-30 14:57 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>> >
>> >> Hi Piotr,
>> >>
>> >> is not the real class ;), just want to write a quick example, change
>> >>that
>> >> for a real layout class (whatever)
>> >>
>> >> 2018-03-30 13:36 GMT+02:00 Piotr Zarzycki
>><pi...@gmail.com>:
>> >>
>> >>> Hi Carlos,
>> >>>
>> >>> But " verticallayout" - This is AS class ?
>> >>>
>> >>>
>> >>>
>> >>> 2018-03-30 13:19 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>> >>>
>> >>> > Another problem I found with layouts usability:
>> >>> >
>> >>> > If I have a component that uses by default an horizontal layout:
>> >>> >
>> >>> > ControlBar
>> >>> > {
>> >>> > IBeadLayout: Classreference ("horizontallayout");
>> >>> > }
>> >>> >
>> >>> > But this component is used in other component that wants to use
>> >>>another
>> >>> > layout (i.e vertical)
>> >>> >
>> >>> > I tried this:
>> >>> >
>> >>> > .alert j|ControlBar
>> >>> > {
>> >>> > IBeadLayout: Classreference ("verticallayout");
>> >>> > }
>> >>> >
>> >>> > and this:
>> >>> >
>> >>> > j|Alert j|ControlBar
>> >>> > {
>> >>> > IBeadLayout: Classreference ("verticallayout");
>> >>> > }
>> >>> >
>> >>> > but both options are not valid
>> >>> >
>> >>> > Some other way to do this? or this is not possible?
>> >>> >
>> >>> >
>> >>> > 2018-03-30 12:42 GMT+02:00 Carlos Rovira
>><ca...@apache.org>:
>> >>> >
>> >>> > > Hi
>> >>> > >
>> >>> > > I'm finding a usability problem with layouts. Since Layouts use
>>to
>> >>>be
>> >>> > > configured via CSS (IBeadLayout), this works ok for basic
>>layouts
>> >>> without
>> >>> > > properties, but if you have for example a "gap" property like in
>> >>> > > HorizontalLayoutWithPaddingAndGap, this layout is not usable vía
>> >>>CSS
>> >>> > > since you can't set the "gap" attribute.
>> >>> > >
>> >>> > > So how can we overcome this issue?
>> >>> > >
>> >>> > > Maybe If we could write:
>> >>> > >
>> >>> > > SomeComponent
>> >>> > > {
>> >>> > > IBeadLayout: Classreference ("some.layout.with.properties.
>> >>> > > that.need.to.be.set");
>> >>> > > gap: 10px;
>> >>> > > }
>> >>> > >
>> >>> > > And gap will be read by the layout...
>> >>> > >
>> >>> > > if not any layout with properties will be limited to use via
>>MXML
>> >>> > >
>> >>> > > Maybe I missing some other way to do this?
>> >>> > >
>> >>> > > --
>> >>> > > Carlos Rovira
>> >>> > >
>> >>>https://na01.safelinks.protection.outlook.com/?url=
>> http%3A%2F%2Fabout.me
>> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>> 7C30e8d54e57f54bacdfa4
>> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>> cee1%7C0%7C0%7C63658025499754
>> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>> >>> > >
>> >>> > >
>> >>> >
>> >>> >
>> >>> > --
>> >>> > Carlos Rovira
>> >>> >
>> >>>https://na01.safelinks.protection.outlook.com/?url=
>> http%3A%2F%2Fabout.me
>> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>> 7C30e8d54e57f54bacdfa4
>> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>> cee1%7C0%7C0%7C63658025499754
>> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>> >>> >
>> >>>
>> >>>
>> >>>
>> >>> --
>> >>>
>> >>> Piotr Zarzycki
>> >>>
>> >>> Patreon:
>> >>>*https://na01.safelinks.protection.outlook.com/?url=
>> https%3A%2F%2Fwww.pa
>> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
>> %7C30e8d54e57
>> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>> cee1%7C0%7C0%7C6365
>> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
>> TkIqRPvBcx2Hs%3D&rese
>> >>>rved=0
>> >>>
>> >>><https://na01.safelinks.protection.outlook.com/?url=
>> https%3A%2F%2Fwww.pa
>> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
>> %7C30e8d54e57
>> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>> cee1%7C0%7C0%7C6365
>> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
>> TkIqRPvBcx2Hs%3D&rese
>> >>>rved=0>*
>> >>>
>> >>
>> >>
>> >>
>> >> --
>> >> Carlos Rovira
>> >>
>> >>https://na01.safelinks.protection.outlook.com/?url=
>> http%3A%2F%2Fabout.me%
>> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>> 7C30e8d54e57f54bacdfa408
>> >>d5965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>> 7C63658025499754244
>> >>8&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>> >>
>> >>
>> >
>> >
>> >--
>> >Carlos Rovira
>> >https://na01.safelinks.protection.outlook.com/?url=
>> http%3A%2F%2Fabout.me%2
>> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>> 7C30e8d54e57f54bacdfa408d5
>> >965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>> 7C636580254997542448&s
>> >data=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>>
>>
>
>
>--
>Carlos Rovira
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2
>Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C0f1c0a17831e48d6884508d5
>966360fe%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636580275929439073&s
>data=4fT2dvknAV5sj9IYdjAVD3Lj4CYYnXHhCqzXPQMlmTA%3D&reserved=0
Re: Layouts and its properties to be set via CSS
Posted by Carlos Rovira <ca...@apache.org>.
Hi Peter,
right, in Jewel I have a version of some of your layouts that uses css
rules instead of setting inline styles in html.
In Jewel I want a clean html with no inline styles at all.
For example in Jewel HorizontalLayout I have no inline styles but in
HorizontalLayoutWithPaddingAndGap I have
some rules but not the ones that depends on properties.
So in part If I can use ValuesManager to get a "gap" property from the CSS
and use is in the layout class that class will be usable in a CSS rule
as well if I could create a css rule on the fly I could make a layout
instantiated in code create some css properties based on layout properties
configurations.
2018-03-30 19:40 GMT+02:00 Peter Ent <pe...@adobe.com.invalid>:
> Gap manages the space between elements while margin will apply to the
> space around every element. So margin:10px will add a 10 pixel space to
> the left of the first element and after it, but also before and after the
> second element, giving you a gap of 20 between the elements and an edge of
> 10. Maybe you don't want that - maybe you want 10 between as well.
>
> What you could do is have a .firstElement style with margin-left:10 but no
> margin-right. A .lastElement with a margin-right of 10 but no margin left.
> Then a .middleElement with both left- and right-margin set. Apply these
> CSS style classes to the proper elements and you'll get the right look.
>
> Maybe some of the layouts should apply class selectors instead of just
> setting style properties.
>
> ‹peter
>
> On 3/30/18, 1:25 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>
> >Hi Alex,
> >
> >this last is not about the gap. In this thread I covered various things
> >and
> >maybe I should make one thread each, but I though it could be many threads
> >as well:
> >
> >1.- Problem to set properties through CSS for beads (layouts or even
> >views). I think this can be covered with Peter's emails using
> >ValuesManager. I should try it as
> >
> >2.- Problem that is maybe the most important. How to make a concrete
> >component have different beads depending on where its used. (i.e:
> >TitleBar,
> >TitleBar in Panel and TitleBar in Alert). We need to have some kind of
> >"cascade styles" for "fake" beads css declarations. Since a normal use can
> >have a very different configuration than a use as a part of another
> >component.
> >
> >3.- In my last email a mention a way to deal with 2), but as part of code.
> >It's not ideal since you could need to write a class only to change a
> >bead.
> >My question there's if I must remove the previous bead in some way to
> >avoid
> >leaks.
> >
> >regarding your comment about gap and margins (referred to 1)), in fact in
> >horizontal layout with gap and padding Peter uses margins to manage the
> >gap, so in the end we are using that, but we should decide if we can use
> >ValuesManager to capture whatever non standard property to proxy it
> >through
> >a bead. I think that would be great.
> >
> >So both problems are covered here and are valid for all kinds of beads
> >(layout, view,...)
> >
> >thanks
> >
> >
> >
> >
> >2018-03-30 18:57 GMT+02:00 Alex Harui <ah...@adobe.com.invalid>:
> >
> >> Carlos, are you looking for a general solution or is this specifically
> >> about gap?
> >>
> >> Gap is not a CSS style. Flex introduced it. I believe the CSS
> >>equivalent
> >> is to set margins on all children of a container. Why not just use
> >> margins?
> >>
> >> Thoughts?
> >> -Alex
> >>
> >> On 3/30/18, 9:51 AM, "carlos.rovira@gmail.com on behalf of Carlos
> >>Rovira"
> >> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
> >>
> >> >If I use a ViewBead to solve this, and make this:
> >> >
> >> >titleBar = new TitleBar();
> >> > titleBar.addBead(new HorizontalLayoutSpaceBetween());
> >> >
> >> >although this works ok, maybe it's not the best since there's another
> >> >ILayoutBead left with no use.
> >> >Should I make a removeBead of the one already was assigned by CSS?
> >> >If yes, how I can remove it? (some sample code will be appreciate)
> >> >
> >> >thanks
> >> >
> >> >
> >> >2018-03-30 14:57 GMT+02:00 Carlos Rovira <ca...@apache.org>:
> >> >
> >> >> Hi Piotr,
> >> >>
> >> >> is not the real class ;), just want to write a quick example, change
> >> >>that
> >> >> for a real layout class (whatever)
> >> >>
> >> >> 2018-03-30 13:36 GMT+02:00 Piotr Zarzycki
> >><pi...@gmail.com>:
> >> >>
> >> >>> Hi Carlos,
> >> >>>
> >> >>> But " verticallayout" - This is AS class ?
> >> >>>
> >> >>>
> >> >>>
> >> >>> 2018-03-30 13:19 GMT+02:00 Carlos Rovira <ca...@apache.org>:
> >> >>>
> >> >>> > Another problem I found with layouts usability:
> >> >>> >
> >> >>> > If I have a component that uses by default an horizontal layout:
> >> >>> >
> >> >>> > ControlBar
> >> >>> > {
> >> >>> > IBeadLayout: Classreference ("horizontallayout");
> >> >>> > }
> >> >>> >
> >> >>> > But this component is used in other component that wants to use
> >> >>>another
> >> >>> > layout (i.e vertical)
> >> >>> >
> >> >>> > I tried this:
> >> >>> >
> >> >>> > .alert j|ControlBar
> >> >>> > {
> >> >>> > IBeadLayout: Classreference ("verticallayout");
> >> >>> > }
> >> >>> >
> >> >>> > and this:
> >> >>> >
> >> >>> > j|Alert j|ControlBar
> >> >>> > {
> >> >>> > IBeadLayout: Classreference ("verticallayout");
> >> >>> > }
> >> >>> >
> >> >>> > but both options are not valid
> >> >>> >
> >> >>> > Some other way to do this? or this is not possible?
> >> >>> >
> >> >>> >
> >> >>> > 2018-03-30 12:42 GMT+02:00 Carlos Rovira
> >><ca...@apache.org>:
> >> >>> >
> >> >>> > > Hi
> >> >>> > >
> >> >>> > > I'm finding a usability problem with layouts. Since Layouts use
> >>to
> >> >>>be
> >> >>> > > configured via CSS (IBeadLayout), this works ok for basic
> >>layouts
> >> >>> without
> >> >>> > > properties, but if you have for example a "gap" property like in
> >> >>> > > HorizontalLayoutWithPaddingAndGap, this layout is not usable
> vía
> >> >>>CSS
> >> >>> > > since you can't set the "gap" attribute.
> >> >>> > >
> >> >>> > > So how can we overcome this issue?
> >> >>> > >
> >> >>> > > Maybe If we could write:
> >> >>> > >
> >> >>> > > SomeComponent
> >> >>> > > {
> >> >>> > > IBeadLayout: Classreference ("some.layout.with.properties.
> >> >>> > > that.need.to.be.set");
> >> >>> > > gap: 10px;
> >> >>> > > }
> >> >>> > >
> >> >>> > > And gap will be read by the layout...
> >> >>> > >
> >> >>> > > if not any layout with properties will be limited to use via
> >>MXML
> >> >>> > >
> >> >>> > > Maybe I missing some other way to do this?
> >> >>> > >
> >> >>> > > --
> >> >>> > > Carlos Rovira
> >> >>> > >
> >> >>>https://na01.safelinks.protection.outlook.com/?url=
> >> http%3A%2F%2Fabout.me
> >> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> >> 7C30e8d54e57f54bacdfa4
> >> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
> >> cee1%7C0%7C0%7C63658025499754
> >> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
> >> >>> > >
> >> >>> > >
> >> >>> >
> >> >>> >
> >> >>> > --
> >> >>> > Carlos Rovira
> >> >>> >
> >> >>>https://na01.safelinks.protection.outlook.com/?url=
> >> http%3A%2F%2Fabout.me
> >> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> >> 7C30e8d54e57f54bacdfa4
> >> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
> >> cee1%7C0%7C0%7C63658025499754
> >> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
> >> >>> >
> >> >>>
> >> >>>
> >> >>>
> >> >>> --
> >> >>>
> >> >>> Piotr Zarzycki
> >> >>>
> >> >>> Patreon:
> >> >>>*https://na01.safelinks.protection.outlook.com/?url=
> >> https%3A%2F%2Fwww.pa
> >> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> >> %7C30e8d54e57
> >> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
> >> cee1%7C0%7C0%7C6365
> >> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
> >> TkIqRPvBcx2Hs%3D&rese
> >> >>>rved=0
> >> >>>
> >> >>><https://na01.safelinks.protection.outlook.com/?url=
> >> https%3A%2F%2Fwww.pa
> >> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> >> %7C30e8d54e57
> >> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
> >> cee1%7C0%7C0%7C6365
> >> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
> >> TkIqRPvBcx2Hs%3D&rese
> >> >>>rved=0>*
> >> >>>
> >> >>
> >> >>
> >> >>
> >> >> --
> >> >> Carlos Rovira
> >> >>
> >> >>https://na01.safelinks.protection.outlook.com/?url=
> >> http%3A%2F%2Fabout.me%
> >> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> >> 7C30e8d54e57f54bacdfa408
> >> >>d5965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> >> 7C63658025499754244
> >> >>8&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
> >> >>
> >> >>
> >> >
> >> >
> >> >--
> >> >Carlos Rovira
> >> >https://na01.safelinks.protection.outlook.com/?url=
> >> http%3A%2F%2Fabout.me%2
> >> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> >> 7C30e8d54e57f54bacdfa408d5
> >> >965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> >> 7C636580254997542448&s
> >> >data=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
> >>
> >>
> >
> >
> >--
> >Carlos Rovira
> >https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me%2
> >Fcarlosrovira&data=02%7C01%7Cpent%40adobe.com%
> 7Caa1936c6f2524c09bf0e08d596
> >6360d0%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636580275919485587&sda
> >ta=LZQ%2FLol99Bzc82RfYoOly19vxyH4GlEgv%2FzzK%2BrcZ5E%3D&reserved=0
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Layouts and its properties to be set via CSS
Posted by Alex Harui <ah...@adobe.com.INVALID>.
IIRC, there are some tricky calculations when both top and bottom margin
are in effect. I don't think you get 20px. The layout code itself can
set margin-top to 0 on the first element and margin-bottom to 0 on the
last element.
Of course, I could be wrong...
-Alex
On 3/30/18, 10:40 AM, "Peter Ent" <pe...@adobe.com.INVALID> wrote:
>Gap manages the space between elements while margin will apply to the
>space around every element. So margin:10px will add a 10 pixel space to
>the left of the first element and after it, but also before and after the
>second element, giving you a gap of 20 between the elements and an edge of
>10. Maybe you don't want that - maybe you want 10 between as well.
>
>What you could do is have a .firstElement style with margin-left:10 but no
>margin-right. A .lastElement with a margin-right of 10 but no margin left.
>Then a .middleElement with both left- and right-margin set. Apply these
>CSS style classes to the proper elements and you'll get the right look.
>
>Maybe some of the layouts should apply class selectors instead of just
>setting style properties.
>
>‹peter
>
>On 3/30/18, 1:25 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
><carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>
>>Hi Alex,
>>
>>this last is not about the gap. In this thread I covered various things
>>and
>>maybe I should make one thread each, but I though it could be many
>>threads
>>as well:
>>
>>1.- Problem to set properties through CSS for beads (layouts or even
>>views). I think this can be covered with Peter's emails using
>>ValuesManager. I should try it as
>>
>>2.- Problem that is maybe the most important. How to make a concrete
>>component have different beads depending on where its used. (i.e:
>>TitleBar,
>>TitleBar in Panel and TitleBar in Alert). We need to have some kind of
>>"cascade styles" for "fake" beads css declarations. Since a normal use
>>can
>>have a very different configuration than a use as a part of another
>>component.
>>
>>3.- In my last email a mention a way to deal with 2), but as part of
>>code.
>>It's not ideal since you could need to write a class only to change a
>>bead.
>>My question there's if I must remove the previous bead in some way to
>>avoid
>>leaks.
>>
>>regarding your comment about gap and margins (referred to 1)), in fact in
>>horizontal layout with gap and padding Peter uses margins to manage the
>>gap, so in the end we are using that, but we should decide if we can use
>>ValuesManager to capture whatever non standard property to proxy it
>>through
>>a bead. I think that would be great.
>>
>>So both problems are covered here and are valid for all kinds of beads
>>(layout, view,...)
>>
>>thanks
>>
>>
>>
>>
>>2018-03-30 18:57 GMT+02:00 Alex Harui <ah...@adobe.com.invalid>:
>>
>>> Carlos, are you looking for a general solution or is this specifically
>>> about gap?
>>>
>>> Gap is not a CSS style. Flex introduced it. I believe the CSS
>>>equivalent
>>> is to set margins on all children of a container. Why not just use
>>> margins?
>>>
>>> Thoughts?
>>> -Alex
>>>
>>> On 3/30/18, 9:51 AM, "carlos.rovira@gmail.com on behalf of Carlos
>>>Rovira"
>>> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>>>
>>> >If I use a ViewBead to solve this, and make this:
>>> >
>>> >titleBar = new TitleBar();
>>> > titleBar.addBead(new HorizontalLayoutSpaceBetween());
>>> >
>>> >although this works ok, maybe it's not the best since there's another
>>> >ILayoutBead left with no use.
>>> >Should I make a removeBead of the one already was assigned by CSS?
>>> >If yes, how I can remove it? (some sample code will be appreciate)
>>> >
>>> >thanks
>>> >
>>> >
>>> >2018-03-30 14:57 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>>> >
>>> >> Hi Piotr,
>>> >>
>>> >> is not the real class ;), just want to write a quick example, change
>>> >>that
>>> >> for a real layout class (whatever)
>>> >>
>>> >> 2018-03-30 13:36 GMT+02:00 Piotr Zarzycki
>>><pi...@gmail.com>:
>>> >>
>>> >>> Hi Carlos,
>>> >>>
>>> >>> But " verticallayout" - This is AS class ?
>>> >>>
>>> >>>
>>> >>>
>>> >>> 2018-03-30 13:19 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>>> >>>
>>> >>> > Another problem I found with layouts usability:
>>> >>> >
>>> >>> > If I have a component that uses by default an horizontal layout:
>>> >>> >
>>> >>> > ControlBar
>>> >>> > {
>>> >>> > IBeadLayout: Classreference ("horizontallayout");
>>> >>> > }
>>> >>> >
>>> >>> > But this component is used in other component that wants to use
>>> >>>another
>>> >>> > layout (i.e vertical)
>>> >>> >
>>> >>> > I tried this:
>>> >>> >
>>> >>> > .alert j|ControlBar
>>> >>> > {
>>> >>> > IBeadLayout: Classreference ("verticallayout");
>>> >>> > }
>>> >>> >
>>> >>> > and this:
>>> >>> >
>>> >>> > j|Alert j|ControlBar
>>> >>> > {
>>> >>> > IBeadLayout: Classreference ("verticallayout");
>>> >>> > }
>>> >>> >
>>> >>> > but both options are not valid
>>> >>> >
>>> >>> > Some other way to do this? or this is not possible?
>>> >>> >
>>> >>> >
>>> >>> > 2018-03-30 12:42 GMT+02:00 Carlos Rovira
>>><ca...@apache.org>:
>>> >>> >
>>> >>> > > Hi
>>> >>> > >
>>> >>> > > I'm finding a usability problem with layouts. Since Layouts use
>>>to
>>> >>>be
>>> >>> > > configured via CSS (IBeadLayout), this works ok for basic
>>>layouts
>>> >>> without
>>> >>> > > properties, but if you have for example a "gap" property like
>>>in
>>> >>> > > HorizontalLayoutWithPaddingAndGap, this layout is not usable
>>>vía
>>> >>>CSS
>>> >>> > > since you can't set the "gap" attribute.
>>> >>> > >
>>> >>> > > So how can we overcome this issue?
>>> >>> > >
>>> >>> > > Maybe If we could write:
>>> >>> > >
>>> >>> > > SomeComponent
>>> >>> > > {
>>> >>> > > IBeadLayout: Classreference ("some.layout.with.properties.
>>> >>> > > that.need.to.be.set");
>>> >>> > > gap: 10px;
>>> >>> > > }
>>> >>> > >
>>> >>> > > And gap will be read by the layout...
>>> >>> > >
>>> >>> > > if not any layout with properties will be limited to use via
>>>MXML
>>> >>> > >
>>> >>> > > Maybe I missing some other way to do this?
>>> >>> > >
>>> >>> > > --
>>> >>> > > Carlos Rovira
>>> >>> > >
>>> >>>https://na01.safelinks.protection.outlook.com/?url=
>>> http%3A%2F%2Fabout.me
>>> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>>> 7C30e8d54e57f54bacdfa4
>>> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>>> cee1%7C0%7C0%7C63658025499754
>>> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>>> >>> > >
>>> >>> > >
>>> >>> >
>>> >>> >
>>> >>> > --
>>> >>> > Carlos Rovira
>>> >>> >
>>> >>>https://na01.safelinks.protection.outlook.com/?url=
>>> http%3A%2F%2Fabout.me
>>> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>>> 7C30e8d54e57f54bacdfa4
>>> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>>> cee1%7C0%7C0%7C63658025499754
>>> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>>> >>> >
>>> >>>
>>> >>>
>>> >>>
>>> >>> --
>>> >>>
>>> >>> Piotr Zarzycki
>>> >>>
>>> >>> Patreon:
>>> >>>*https://na01.safelinks.protection.outlook.com/?url=
>>> https%3A%2F%2Fwww.pa
>>> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
>>> %7C30e8d54e57
>>> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>>> cee1%7C0%7C0%7C6365
>>> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
>>> TkIqRPvBcx2Hs%3D&rese
>>> >>>rved=0
>>> >>>
>>> >>><https://na01.safelinks.protection.outlook.com/?url=
>>> https%3A%2F%2Fwww.pa
>>> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
>>> %7C30e8d54e57
>>> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>>> cee1%7C0%7C0%7C6365
>>> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
>>> TkIqRPvBcx2Hs%3D&rese
>>> >>>rved=0>*
>>> >>>
>>> >>
>>> >>
>>> >>
>>> >> --
>>> >> Carlos Rovira
>>> >>
>>> >>https://na01.safelinks.protection.outlook.com/?url=
>>> http%3A%2F%2Fabout.me%
>>> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>>> 7C30e8d54e57f54bacdfa408
>>> >>d5965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>>> 7C63658025499754244
>>> >>8&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>>> >>
>>> >>
>>> >
>>> >
>>> >--
>>> >Carlos Rovira
>>> >https://na01.safelinks.protection.outlook.com/?url=
>>> http%3A%2F%2Fabout.me%2
>>> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>>> 7C30e8d54e57f54bacdfa408d5
>>> >965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>>> 7C636580254997542448&s
>>> >data=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>>>
>>>
>>
>>
>>--
>>Carlos Rovira
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%
>>2
>>Fcarlosrovira&data=02%7C01%7Cpent%40adobe.com%7Caa1936c6f2524c09bf0e08d59
>>6
>>6360d0%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636580275919485587&sd
>>a
>>ta=LZQ%2FLol99Bzc82RfYoOly19vxyH4GlEgv%2FzzK%2BrcZ5E%3D&reserved=0
>
Re: Layouts and its properties to be set via CSS
Posted by Peter Ent <pe...@adobe.com.INVALID>.
Gap manages the space between elements while margin will apply to the
space around every element. So margin:10px will add a 10 pixel space to
the left of the first element and after it, but also before and after the
second element, giving you a gap of 20 between the elements and an edge of
10. Maybe you don't want that - maybe you want 10 between as well.
What you could do is have a .firstElement style with margin-left:10 but no
margin-right. A .lastElement with a margin-right of 10 but no margin left.
Then a .middleElement with both left- and right-margin set. Apply these
CSS style classes to the proper elements and you'll get the right look.
Maybe some of the layouts should apply class selectors instead of just
setting style properties.
‹peter
On 3/30/18, 1:25 PM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>Hi Alex,
>
>this last is not about the gap. In this thread I covered various things
>and
>maybe I should make one thread each, but I though it could be many threads
>as well:
>
>1.- Problem to set properties through CSS for beads (layouts or even
>views). I think this can be covered with Peter's emails using
>ValuesManager. I should try it as
>
>2.- Problem that is maybe the most important. How to make a concrete
>component have different beads depending on where its used. (i.e:
>TitleBar,
>TitleBar in Panel and TitleBar in Alert). We need to have some kind of
>"cascade styles" for "fake" beads css declarations. Since a normal use can
>have a very different configuration than a use as a part of another
>component.
>
>3.- In my last email a mention a way to deal with 2), but as part of code.
>It's not ideal since you could need to write a class only to change a
>bead.
>My question there's if I must remove the previous bead in some way to
>avoid
>leaks.
>
>regarding your comment about gap and margins (referred to 1)), in fact in
>horizontal layout with gap and padding Peter uses margins to manage the
>gap, so in the end we are using that, but we should decide if we can use
>ValuesManager to capture whatever non standard property to proxy it
>through
>a bead. I think that would be great.
>
>So both problems are covered here and are valid for all kinds of beads
>(layout, view,...)
>
>thanks
>
>
>
>
>2018-03-30 18:57 GMT+02:00 Alex Harui <ah...@adobe.com.invalid>:
>
>> Carlos, are you looking for a general solution or is this specifically
>> about gap?
>>
>> Gap is not a CSS style. Flex introduced it. I believe the CSS
>>equivalent
>> is to set margins on all children of a container. Why not just use
>> margins?
>>
>> Thoughts?
>> -Alex
>>
>> On 3/30/18, 9:51 AM, "carlos.rovira@gmail.com on behalf of Carlos
>>Rovira"
>> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>>
>> >If I use a ViewBead to solve this, and make this:
>> >
>> >titleBar = new TitleBar();
>> > titleBar.addBead(new HorizontalLayoutSpaceBetween());
>> >
>> >although this works ok, maybe it's not the best since there's another
>> >ILayoutBead left with no use.
>> >Should I make a removeBead of the one already was assigned by CSS?
>> >If yes, how I can remove it? (some sample code will be appreciate)
>> >
>> >thanks
>> >
>> >
>> >2018-03-30 14:57 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>> >
>> >> Hi Piotr,
>> >>
>> >> is not the real class ;), just want to write a quick example, change
>> >>that
>> >> for a real layout class (whatever)
>> >>
>> >> 2018-03-30 13:36 GMT+02:00 Piotr Zarzycki
>><pi...@gmail.com>:
>> >>
>> >>> Hi Carlos,
>> >>>
>> >>> But " verticallayout" - This is AS class ?
>> >>>
>> >>>
>> >>>
>> >>> 2018-03-30 13:19 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>> >>>
>> >>> > Another problem I found with layouts usability:
>> >>> >
>> >>> > If I have a component that uses by default an horizontal layout:
>> >>> >
>> >>> > ControlBar
>> >>> > {
>> >>> > IBeadLayout: Classreference ("horizontallayout");
>> >>> > }
>> >>> >
>> >>> > But this component is used in other component that wants to use
>> >>>another
>> >>> > layout (i.e vertical)
>> >>> >
>> >>> > I tried this:
>> >>> >
>> >>> > .alert j|ControlBar
>> >>> > {
>> >>> > IBeadLayout: Classreference ("verticallayout");
>> >>> > }
>> >>> >
>> >>> > and this:
>> >>> >
>> >>> > j|Alert j|ControlBar
>> >>> > {
>> >>> > IBeadLayout: Classreference ("verticallayout");
>> >>> > }
>> >>> >
>> >>> > but both options are not valid
>> >>> >
>> >>> > Some other way to do this? or this is not possible?
>> >>> >
>> >>> >
>> >>> > 2018-03-30 12:42 GMT+02:00 Carlos Rovira
>><ca...@apache.org>:
>> >>> >
>> >>> > > Hi
>> >>> > >
>> >>> > > I'm finding a usability problem with layouts. Since Layouts use
>>to
>> >>>be
>> >>> > > configured via CSS (IBeadLayout), this works ok for basic
>>layouts
>> >>> without
>> >>> > > properties, but if you have for example a "gap" property like in
>> >>> > > HorizontalLayoutWithPaddingAndGap, this layout is not usable vía
>> >>>CSS
>> >>> > > since you can't set the "gap" attribute.
>> >>> > >
>> >>> > > So how can we overcome this issue?
>> >>> > >
>> >>> > > Maybe If we could write:
>> >>> > >
>> >>> > > SomeComponent
>> >>> > > {
>> >>> > > IBeadLayout: Classreference ("some.layout.with.properties.
>> >>> > > that.need.to.be.set");
>> >>> > > gap: 10px;
>> >>> > > }
>> >>> > >
>> >>> > > And gap will be read by the layout...
>> >>> > >
>> >>> > > if not any layout with properties will be limited to use via
>>MXML
>> >>> > >
>> >>> > > Maybe I missing some other way to do this?
>> >>> > >
>> >>> > > --
>> >>> > > Carlos Rovira
>> >>> > >
>> >>>https://na01.safelinks.protection.outlook.com/?url=
>> http%3A%2F%2Fabout.me
>> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>> 7C30e8d54e57f54bacdfa4
>> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>> cee1%7C0%7C0%7C63658025499754
>> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>> >>> > >
>> >>> > >
>> >>> >
>> >>> >
>> >>> > --
>> >>> > Carlos Rovira
>> >>> >
>> >>>https://na01.safelinks.protection.outlook.com/?url=
>> http%3A%2F%2Fabout.me
>> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>> 7C30e8d54e57f54bacdfa4
>> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>> cee1%7C0%7C0%7C63658025499754
>> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>> >>> >
>> >>>
>> >>>
>> >>>
>> >>> --
>> >>>
>> >>> Piotr Zarzycki
>> >>>
>> >>> Patreon:
>> >>>*https://na01.safelinks.protection.outlook.com/?url=
>> https%3A%2F%2Fwww.pa
>> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
>> %7C30e8d54e57
>> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>> cee1%7C0%7C0%7C6365
>> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
>> TkIqRPvBcx2Hs%3D&rese
>> >>>rved=0
>> >>>
>> >>><https://na01.safelinks.protection.outlook.com/?url=
>> https%3A%2F%2Fwww.pa
>> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
>> %7C30e8d54e57
>> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
>> cee1%7C0%7C0%7C6365
>> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
>> TkIqRPvBcx2Hs%3D&rese
>> >>>rved=0>*
>> >>>
>> >>
>> >>
>> >>
>> >> --
>> >> Carlos Rovira
>> >>
>> >>https://na01.safelinks.protection.outlook.com/?url=
>> http%3A%2F%2Fabout.me%
>> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>> 7C30e8d54e57f54bacdfa408
>> >>d5965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>> 7C63658025499754244
>> >>8&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>> >>
>> >>
>> >
>> >
>> >--
>> >Carlos Rovira
>> >https://na01.safelinks.protection.outlook.com/?url=
>> http%3A%2F%2Fabout.me%2
>> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
>> 7C30e8d54e57f54bacdfa408d5
>> >965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
>> 7C636580254997542448&s
>> >data=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>>
>>
>
>
>--
>Carlos Rovira
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2
>Fcarlosrovira&data=02%7C01%7Cpent%40adobe.com%7Caa1936c6f2524c09bf0e08d596
>6360d0%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636580275919485587&sda
>ta=LZQ%2FLol99Bzc82RfYoOly19vxyH4GlEgv%2FzzK%2BrcZ5E%3D&reserved=0
Re: Layouts and its properties to be set via CSS
Posted by Carlos Rovira <ca...@apache.org>.
Hi Alex,
this last is not about the gap. In this thread I covered various things and
maybe I should make one thread each, but I though it could be many threads
as well:
1.- Problem to set properties through CSS for beads (layouts or even
views). I think this can be covered with Peter's emails using
ValuesManager. I should try it as
2.- Problem that is maybe the most important. How to make a concrete
component have different beads depending on where its used. (i.e: TitleBar,
TitleBar in Panel and TitleBar in Alert). We need to have some kind of
"cascade styles" for "fake" beads css declarations. Since a normal use can
have a very different configuration than a use as a part of another
component.
3.- In my last email a mention a way to deal with 2), but as part of code.
It's not ideal since you could need to write a class only to change a bead.
My question there's if I must remove the previous bead in some way to avoid
leaks.
regarding your comment about gap and margins (referred to 1)), in fact in
horizontal layout with gap and padding Peter uses margins to manage the
gap, so in the end we are using that, but we should decide if we can use
ValuesManager to capture whatever non standard property to proxy it through
a bead. I think that would be great.
So both problems are covered here and are valid for all kinds of beads
(layout, view,...)
thanks
2018-03-30 18:57 GMT+02:00 Alex Harui <ah...@adobe.com.invalid>:
> Carlos, are you looking for a general solution or is this specifically
> about gap?
>
> Gap is not a CSS style. Flex introduced it. I believe the CSS equivalent
> is to set margins on all children of a container. Why not just use
> margins?
>
> Thoughts?
> -Alex
>
> On 3/30/18, 9:51 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>
> >If I use a ViewBead to solve this, and make this:
> >
> >titleBar = new TitleBar();
> > titleBar.addBead(new HorizontalLayoutSpaceBetween());
> >
> >although this works ok, maybe it's not the best since there's another
> >ILayoutBead left with no use.
> >Should I make a removeBead of the one already was assigned by CSS?
> >If yes, how I can remove it? (some sample code will be appreciate)
> >
> >thanks
> >
> >
> >2018-03-30 14:57 GMT+02:00 Carlos Rovira <ca...@apache.org>:
> >
> >> Hi Piotr,
> >>
> >> is not the real class ;), just want to write a quick example, change
> >>that
> >> for a real layout class (whatever)
> >>
> >> 2018-03-30 13:36 GMT+02:00 Piotr Zarzycki <pi...@gmail.com>:
> >>
> >>> Hi Carlos,
> >>>
> >>> But " verticallayout" - This is AS class ?
> >>>
> >>>
> >>>
> >>> 2018-03-30 13:19 GMT+02:00 Carlos Rovira <ca...@apache.org>:
> >>>
> >>> > Another problem I found with layouts usability:
> >>> >
> >>> > If I have a component that uses by default an horizontal layout:
> >>> >
> >>> > ControlBar
> >>> > {
> >>> > IBeadLayout: Classreference ("horizontallayout");
> >>> > }
> >>> >
> >>> > But this component is used in other component that wants to use
> >>>another
> >>> > layout (i.e vertical)
> >>> >
> >>> > I tried this:
> >>> >
> >>> > .alert j|ControlBar
> >>> > {
> >>> > IBeadLayout: Classreference ("verticallayout");
> >>> > }
> >>> >
> >>> > and this:
> >>> >
> >>> > j|Alert j|ControlBar
> >>> > {
> >>> > IBeadLayout: Classreference ("verticallayout");
> >>> > }
> >>> >
> >>> > but both options are not valid
> >>> >
> >>> > Some other way to do this? or this is not possible?
> >>> >
> >>> >
> >>> > 2018-03-30 12:42 GMT+02:00 Carlos Rovira <ca...@apache.org>:
> >>> >
> >>> > > Hi
> >>> > >
> >>> > > I'm finding a usability problem with layouts. Since Layouts use to
> >>>be
> >>> > > configured via CSS (IBeadLayout), this works ok for basic layouts
> >>> without
> >>> > > properties, but if you have for example a "gap" property like in
> >>> > > HorizontalLayoutWithPaddingAndGap, this layout is not usable vía
> >>>CSS
> >>> > > since you can't set the "gap" attribute.
> >>> > >
> >>> > > So how can we overcome this issue?
> >>> > >
> >>> > > Maybe If we could write:
> >>> > >
> >>> > > SomeComponent
> >>> > > {
> >>> > > IBeadLayout: Classreference ("some.layout.with.properties.
> >>> > > that.need.to.be.set");
> >>> > > gap: 10px;
> >>> > > }
> >>> > >
> >>> > > And gap will be read by the layout...
> >>> > >
> >>> > > if not any layout with properties will be limited to use via MXML
> >>> > >
> >>> > > Maybe I missing some other way to do this?
> >>> > >
> >>> > > --
> >>> > > Carlos Rovira
> >>> > >
> >>>https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me
> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> 7C30e8d54e57f54bacdfa4
> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C0%7C63658025499754
> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
> >>> > >
> >>> > >
> >>> >
> >>> >
> >>> > --
> >>> > Carlos Rovira
> >>> >
> >>>https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me
> >>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> 7C30e8d54e57f54bacdfa4
> >>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C0%7C63658025499754
> >>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
> >>> >
> >>>
> >>>
> >>>
> >>> --
> >>>
> >>> Piotr Zarzycki
> >>>
> >>> Patreon:
> >>>*https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fwww.pa
> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> %7C30e8d54e57
> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C0%7C6365
> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
> TkIqRPvBcx2Hs%3D&rese
> >>>rved=0
> >>>
> >>><https://na01.safelinks.protection.outlook.com/?url=
> https%3A%2F%2Fwww.pa
> >>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com
> %7C30e8d54e57
> >>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178de
> cee1%7C0%7C0%7C6365
> >>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6
> TkIqRPvBcx2Hs%3D&rese
> >>>rved=0>*
> >>>
> >>
> >>
> >>
> >> --
> >> Carlos Rovira
> >>
> >>https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me%
> >>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> 7C30e8d54e57f54bacdfa408
> >>d5965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C63658025499754244
> >>8&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
> >>
> >>
> >
> >
> >--
> >Carlos Rovira
> >https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me%2
> >Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%
> 7C30e8d54e57f54bacdfa408d5
> >965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636580254997542448&s
> >data=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Layouts and its properties to be set via CSS
Posted by Alex Harui <ah...@adobe.com.INVALID>.
Carlos, are you looking for a general solution or is this specifically
about gap?
Gap is not a CSS style. Flex introduced it. I believe the CSS equivalent
is to set margins on all children of a container. Why not just use
margins?
Thoughts?
-Alex
On 3/30/18, 9:51 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>If I use a ViewBead to solve this, and make this:
>
>titleBar = new TitleBar();
> titleBar.addBead(new HorizontalLayoutSpaceBetween());
>
>although this works ok, maybe it's not the best since there's another
>ILayoutBead left with no use.
>Should I make a removeBead of the one already was assigned by CSS?
>If yes, how I can remove it? (some sample code will be appreciate)
>
>thanks
>
>
>2018-03-30 14:57 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>
>> Hi Piotr,
>>
>> is not the real class ;), just want to write a quick example, change
>>that
>> for a real layout class (whatever)
>>
>> 2018-03-30 13:36 GMT+02:00 Piotr Zarzycki <pi...@gmail.com>:
>>
>>> Hi Carlos,
>>>
>>> But " verticallayout" - This is AS class ?
>>>
>>>
>>>
>>> 2018-03-30 13:19 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>>>
>>> > Another problem I found with layouts usability:
>>> >
>>> > If I have a component that uses by default an horizontal layout:
>>> >
>>> > ControlBar
>>> > {
>>> > IBeadLayout: Classreference ("horizontallayout");
>>> > }
>>> >
>>> > But this component is used in other component that wants to use
>>>another
>>> > layout (i.e vertical)
>>> >
>>> > I tried this:
>>> >
>>> > .alert j|ControlBar
>>> > {
>>> > IBeadLayout: Classreference ("verticallayout");
>>> > }
>>> >
>>> > and this:
>>> >
>>> > j|Alert j|ControlBar
>>> > {
>>> > IBeadLayout: Classreference ("verticallayout");
>>> > }
>>> >
>>> > but both options are not valid
>>> >
>>> > Some other way to do this? or this is not possible?
>>> >
>>> >
>>> > 2018-03-30 12:42 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>>> >
>>> > > Hi
>>> > >
>>> > > I'm finding a usability problem with layouts. Since Layouts use to
>>>be
>>> > > configured via CSS (IBeadLayout), this works ok for basic layouts
>>> without
>>> > > properties, but if you have for example a "gap" property like in
>>> > > HorizontalLayoutWithPaddingAndGap, this layout is not usable vía
>>>CSS
>>> > > since you can't set the "gap" attribute.
>>> > >
>>> > > So how can we overcome this issue?
>>> > >
>>> > > Maybe If we could write:
>>> > >
>>> > > SomeComponent
>>> > > {
>>> > > IBeadLayout: Classreference ("some.layout.with.properties.
>>> > > that.need.to.be.set");
>>> > > gap: 10px;
>>> > > }
>>> > >
>>> > > And gap will be read by the layout...
>>> > >
>>> > > if not any layout with properties will be limited to use via MXML
>>> > >
>>> > > Maybe I missing some other way to do this?
>>> > >
>>> > > --
>>> > > Carlos Rovira
>>> > >
>>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me
>>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C30e8d54e57f54bacdfa4
>>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63658025499754
>>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>>> > >
>>> > >
>>> >
>>> >
>>> > --
>>> > Carlos Rovira
>>> >
>>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me
>>>%2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C30e8d54e57f54bacdfa4
>>>08d5965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63658025499754
>>>2448&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>>> >
>>>
>>>
>>>
>>> --
>>>
>>> Piotr Zarzycki
>>>
>>> Patreon:
>>>*https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.pa
>>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%7C30e8d54e57
>>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365
>>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6TkIqRPvBcx2Hs%3D&rese
>>>rved=0
>>>
>>><https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.pa
>>>treon.com%2Fpiotrzarzycki&data=02%7C01%7Caharui%40adobe.com%7C30e8d54e57
>>>f54bacdfa408d5965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C6365
>>>80254997542448&sdata=M28nPMMFQUG3whBAJwbqIaRwpNUBl6TkIqRPvBcx2Hs%3D&rese
>>>rved=0>*
>>>
>>
>>
>>
>> --
>> Carlos Rovira
>>
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%
>>2Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C30e8d54e57f54bacdfa408
>>d5965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C63658025499754244
>>8&sdata=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
>>
>>
>
>
>--
>Carlos Rovira
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2
>Fcarlosrovira&data=02%7C01%7Caharui%40adobe.com%7C30e8d54e57f54bacdfa408d5
>965e80b2%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636580254997542448&s
>data=tTkfzUIHWdklaYJeEM3MqTYeiU3hkv4SPRTHDOp1jTQ%3D&reserved=0
Re: Layouts and its properties to be set via CSS
Posted by Carlos Rovira <ca...@apache.org>.
If I use a ViewBead to solve this, and make this:
titleBar = new TitleBar();
titleBar.addBead(new HorizontalLayoutSpaceBetween());
although this works ok, maybe it's not the best since there's another
ILayoutBead left with no use.
Should I make a removeBead of the one already was assigned by CSS?
If yes, how I can remove it? (some sample code will be appreciate)
thanks
2018-03-30 14:57 GMT+02:00 Carlos Rovira <ca...@apache.org>:
> Hi Piotr,
>
> is not the real class ;), just want to write a quick example, change that
> for a real layout class (whatever)
>
> 2018-03-30 13:36 GMT+02:00 Piotr Zarzycki <pi...@gmail.com>:
>
>> Hi Carlos,
>>
>> But " verticallayout" - This is AS class ?
>>
>>
>>
>> 2018-03-30 13:19 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>>
>> > Another problem I found with layouts usability:
>> >
>> > If I have a component that uses by default an horizontal layout:
>> >
>> > ControlBar
>> > {
>> > IBeadLayout: Classreference ("horizontallayout");
>> > }
>> >
>> > But this component is used in other component that wants to use another
>> > layout (i.e vertical)
>> >
>> > I tried this:
>> >
>> > .alert j|ControlBar
>> > {
>> > IBeadLayout: Classreference ("verticallayout");
>> > }
>> >
>> > and this:
>> >
>> > j|Alert j|ControlBar
>> > {
>> > IBeadLayout: Classreference ("verticallayout");
>> > }
>> >
>> > but both options are not valid
>> >
>> > Some other way to do this? or this is not possible?
>> >
>> >
>> > 2018-03-30 12:42 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>> >
>> > > Hi
>> > >
>> > > I'm finding a usability problem with layouts. Since Layouts use to be
>> > > configured via CSS (IBeadLayout), this works ok for basic layouts
>> without
>> > > properties, but if you have for example a "gap" property like in
>> > > HorizontalLayoutWithPaddingAndGap, this layout is not usable vía CSS
>> > > since you can't set the "gap" attribute.
>> > >
>> > > So how can we overcome this issue?
>> > >
>> > > Maybe If we could write:
>> > >
>> > > SomeComponent
>> > > {
>> > > IBeadLayout: Classreference ("some.layout.with.properties.
>> > > that.need.to.be.set");
>> > > gap: 10px;
>> > > }
>> > >
>> > > And gap will be read by the layout...
>> > >
>> > > if not any layout with properties will be limited to use via MXML
>> > >
>> > > Maybe I missing some other way to do this?
>> > >
>> > > --
>> > > Carlos Rovira
>> > > http://about.me/carlosrovira
>> > >
>> > >
>> >
>> >
>> > --
>> > Carlos Rovira
>> > http://about.me/carlosrovira
>> >
>>
>>
>>
>> --
>>
>> Piotr Zarzycki
>>
>> Patreon: *https://www.patreon.com/piotrzarzycki
>> <https://www.patreon.com/piotrzarzycki>*
>>
>
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Layouts and its properties to be set via CSS
Posted by Carlos Rovira <ca...@apache.org>.
Hi Piotr,
is not the real class ;), just want to write a quick example, change that
for a real layout class (whatever)
2018-03-30 13:36 GMT+02:00 Piotr Zarzycki <pi...@gmail.com>:
> Hi Carlos,
>
> But " verticallayout" - This is AS class ?
>
>
>
> 2018-03-30 13:19 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>
> > Another problem I found with layouts usability:
> >
> > If I have a component that uses by default an horizontal layout:
> >
> > ControlBar
> > {
> > IBeadLayout: Classreference ("horizontallayout");
> > }
> >
> > But this component is used in other component that wants to use another
> > layout (i.e vertical)
> >
> > I tried this:
> >
> > .alert j|ControlBar
> > {
> > IBeadLayout: Classreference ("verticallayout");
> > }
> >
> > and this:
> >
> > j|Alert j|ControlBar
> > {
> > IBeadLayout: Classreference ("verticallayout");
> > }
> >
> > but both options are not valid
> >
> > Some other way to do this? or this is not possible?
> >
> >
> > 2018-03-30 12:42 GMT+02:00 Carlos Rovira <ca...@apache.org>:
> >
> > > Hi
> > >
> > > I'm finding a usability problem with layouts. Since Layouts use to be
> > > configured via CSS (IBeadLayout), this works ok for basic layouts
> without
> > > properties, but if you have for example a "gap" property like in
> > > HorizontalLayoutWithPaddingAndGap, this layout is not usable vía CSS
> > > since you can't set the "gap" attribute.
> > >
> > > So how can we overcome this issue?
> > >
> > > Maybe If we could write:
> > >
> > > SomeComponent
> > > {
> > > IBeadLayout: Classreference ("some.layout.with.properties.
> > > that.need.to.be.set");
> > > gap: 10px;
> > > }
> > >
> > > And gap will be read by the layout...
> > >
> > > if not any layout with properties will be limited to use via MXML
> > >
> > > Maybe I missing some other way to do this?
> > >
> > > --
> > > Carlos Rovira
> > > http://about.me/carlosrovira
> > >
> > >
> >
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
> >
>
>
>
> --
>
> Piotr Zarzycki
>
> Patreon: *https://www.patreon.com/piotrzarzycki
> <https://www.patreon.com/piotrzarzycki>*
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Layouts and its properties to be set via CSS
Posted by Piotr Zarzycki <pi...@gmail.com>.
Hi Carlos,
But " verticallayout" - This is AS class ?
2018-03-30 13:19 GMT+02:00 Carlos Rovira <ca...@apache.org>:
> Another problem I found with layouts usability:
>
> If I have a component that uses by default an horizontal layout:
>
> ControlBar
> {
> IBeadLayout: Classreference ("horizontallayout");
> }
>
> But this component is used in other component that wants to use another
> layout (i.e vertical)
>
> I tried this:
>
> .alert j|ControlBar
> {
> IBeadLayout: Classreference ("verticallayout");
> }
>
> and this:
>
> j|Alert j|ControlBar
> {
> IBeadLayout: Classreference ("verticallayout");
> }
>
> but both options are not valid
>
> Some other way to do this? or this is not possible?
>
>
> 2018-03-30 12:42 GMT+02:00 Carlos Rovira <ca...@apache.org>:
>
> > Hi
> >
> > I'm finding a usability problem with layouts. Since Layouts use to be
> > configured via CSS (IBeadLayout), this works ok for basic layouts without
> > properties, but if you have for example a "gap" property like in
> > HorizontalLayoutWithPaddingAndGap, this layout is not usable vía CSS
> > since you can't set the "gap" attribute.
> >
> > So how can we overcome this issue?
> >
> > Maybe If we could write:
> >
> > SomeComponent
> > {
> > IBeadLayout: Classreference ("some.layout.with.properties.
> > that.need.to.be.set");
> > gap: 10px;
> > }
> >
> > And gap will be read by the layout...
> >
> > if not any layout with properties will be limited to use via MXML
> >
> > Maybe I missing some other way to do this?
> >
> > --
> > Carlos Rovira
> > http://about.me/carlosrovira
> >
> >
>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
--
Piotr Zarzycki
Patreon: *https://www.patreon.com/piotrzarzycki
<https://www.patreon.com/piotrzarzycki>*
Re: Layouts and its properties to be set via CSS
Posted by Carlos Rovira <ca...@apache.org>.
Another problem I found with layouts usability:
If I have a component that uses by default an horizontal layout:
ControlBar
{
IBeadLayout: Classreference ("horizontallayout");
}
But this component is used in other component that wants to use another
layout (i.e vertical)
I tried this:
.alert j|ControlBar
{
IBeadLayout: Classreference ("verticallayout");
}
and this:
j|Alert j|ControlBar
{
IBeadLayout: Classreference ("verticallayout");
}
but both options are not valid
Some other way to do this? or this is not possible?
2018-03-30 12:42 GMT+02:00 Carlos Rovira <ca...@apache.org>:
> Hi
>
> I'm finding a usability problem with layouts. Since Layouts use to be
> configured via CSS (IBeadLayout), this works ok for basic layouts without
> properties, but if you have for example a "gap" property like in
> HorizontalLayoutWithPaddingAndGap, this layout is not usable vía CSS
> since you can't set the "gap" attribute.
>
> So how can we overcome this issue?
>
> Maybe If we could write:
>
> SomeComponent
> {
> IBeadLayout: Classreference ("some.layout.with.properties.
> that.need.to.be.set");
> gap: 10px;
> }
>
> And gap will be read by the layout...
>
> if not any layout with properties will be limited to use via MXML
>
> Maybe I missing some other way to do this?
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Layouts and its properties to be set via CSS
Posted by Carlos Rovira <ca...@apache.org>.
Hi Peter,
I'll try to do something like you propose and experiment a bit with it.
I'll report my findings
thanks for your help a suggestions! :)
2018-03-30 16:24 GMT+02:00 Peter Ent <pe...@adobe.com.invalid>:
> "IBeadLayout" and friends are not real CSS style properties which means we
> can have our own properties. The HorizontalLayoutWithPaddingAndGap should
> try to use ValuesManager and get its gap and padding values from the
> style(s) associated with the strand component.
>
> SomeComponent {
> IBeadLayout:
> ClassReference("org.apache.royale.html.beads.layouts.
> HorizontalLayoutWithGa
> pAndPadding");
> gap: 10px;
> padding: 8px;
> }
>
> That should work assuming the layout looks for those if its properties are
> not set.
> ‹peter
>
> On 3/30/18, 6:42 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>
> >Hi
> >
> >I'm finding a usability problem with layouts. Since Layouts use to be
> >configured via CSS (IBeadLayout), this works ok for basic layouts without
> >properties, but if you have for example a "gap" property like in
> >HorizontalLayoutWithPaddingAndGap, this layout is not usable vía CSS
> since
> >you can't set the "gap" attribute.
> >
> >So how can we overcome this issue?
> >
> >Maybe If we could write:
> >
> >SomeComponent
> >{
> > IBeadLayout: Classreference
> >("some.layout.with.properties.that.need.to.be.set");
> > gap: 10px;
> >}
> >
> >And gap will be read by the layout...
> >
> >if not any layout with properties will be limited to use via MXML
> >
> >Maybe I missing some other way to do this?
> >
> >--
> >Carlos Rovira
> >https://na01.safelinks.protection.outlook.com/?url=
> http%3A%2F%2Fabout.me%2
> >Fcarlosrovira&data=02%7C01%7Cpent%40adobe.com%
> 7C947a4da3ad454e41b5a308d596
> >2b0765%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%
> 7C636580033926916536&sda
> >ta=%2F6sMPKv420V%2BMUL1M7eiFVFN8YdOwdbugU%2B5PJDwde4%3D&reserved=0
>
>
--
Carlos Rovira
http://about.me/carlosrovira
Re: Layouts and its properties to be set via CSS
Posted by Alex Harui <ah...@adobe.com.INVALID>.
Couple of things:
1) The compiler will prune styles with non-compliant values like
ClassReference from the final CSS output. The values with ClassReference
still end up in the encoded CSS used by ValuesManager
2) The SimpleCSSValuesImpl does not handle advanced selectors. That's why
it is called Simple. My preference would be that we don't use any
advanced selectors at all (there are other ways to do most or all of what
advanced selectors are used for), but I've noticed you seem to want to use
them since they do work on JS. In order to get SWF-side equivalence, you
will need to write a more advanced CSSValuesImpl.
3) styles that take compliant values are not pruned and if the style name
is not valid CSS, I think some browsers may throw exceptions. So if you
want to introduce a new style like gap, you'll have to teach the compiler
to filter it out, or use compliant style names like -royale-gap
HTH,
-Alex
On 3/30/18, 7:24 AM, "Peter Ent" <pe...@adobe.com.INVALID> wrote:
>"IBeadLayout" and friends are not real CSS style properties which means we
>can have our own properties. The HorizontalLayoutWithPaddingAndGap should
>try to use ValuesManager and get its gap and padding values from the
>style(s) associated with the strand component.
>
>SomeComponent {
> IBeadLayout:
>ClassReference("org.apache.royale.html.beads.layouts.HorizontalLayoutWithG
>a
>pAndPadding");
> gap: 10px;
> padding: 8px;
>}
>
>That should work assuming the layout looks for those if its properties are
>not set.
>‹peter
>
>On 3/30/18, 6:42 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
><carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>
>>Hi
>>
>>I'm finding a usability problem with layouts. Since Layouts use to be
>>configured via CSS (IBeadLayout), this works ok for basic layouts without
>>properties, but if you have for example a "gap" property like in
>>HorizontalLayoutWithPaddingAndGap, this layout is not usable vía CSS
>>since
>>you can't set the "gap" attribute.
>>
>>So how can we overcome this issue?
>>
>>Maybe If we could write:
>>
>>SomeComponent
>>{
>> IBeadLayout: Classreference
>>("some.layout.with.properties.that.need.to.be.set");
>> gap: 10px;
>>}
>>
>>And gap will be read by the layout...
>>
>>if not any layout with properties will be limited to use via MXML
>>
>>Maybe I missing some other way to do this?
>>
>>--
>>Carlos Rovira
>>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%
>>2
>>Fcarlosrovira&data=02%7C01%7Cpent%40adobe.com%7C947a4da3ad454e41b5a308d59
>>6
>>2b0765%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636580033926916536&sd
>>a
>>ta=%2F6sMPKv420V%2BMUL1M7eiFVFN8YdOwdbugU%2B5PJDwde4%3D&reserved=0
>
Re: Layouts and its properties to be set via CSS
Posted by Peter Ent <pe...@adobe.com.INVALID>.
"IBeadLayout" and friends are not real CSS style properties which means we
can have our own properties. The HorizontalLayoutWithPaddingAndGap should
try to use ValuesManager and get its gap and padding values from the
style(s) associated with the strand component.
SomeComponent {
IBeadLayout:
ClassReference("org.apache.royale.html.beads.layouts.HorizontalLayoutWithGa
pAndPadding");
gap: 10px;
padding: 8px;
}
That should work assuming the layout looks for those if its properties are
not set.
‹peter
On 3/30/18, 6:42 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlosrovira@apache.org> wrote:
>Hi
>
>I'm finding a usability problem with layouts. Since Layouts use to be
>configured via CSS (IBeadLayout), this works ok for basic layouts without
>properties, but if you have for example a "gap" property like in
>HorizontalLayoutWithPaddingAndGap, this layout is not usable vía CSS since
>you can't set the "gap" attribute.
>
>So how can we overcome this issue?
>
>Maybe If we could write:
>
>SomeComponent
>{
> IBeadLayout: Classreference
>("some.layout.with.properties.that.need.to.be.set");
> gap: 10px;
>}
>
>And gap will be read by the layout...
>
>if not any layout with properties will be limited to use via MXML
>
>Maybe I missing some other way to do this?
>
>--
>Carlos Rovira
>https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fabout.me%2
>Fcarlosrovira&data=02%7C01%7Cpent%40adobe.com%7C947a4da3ad454e41b5a308d596
>2b0765%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636580033926916536&sda
>ta=%2F6sMPKv420V%2BMUL1M7eiFVFN8YdOwdbugU%2B5PJDwde4%3D&reserved=0