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 2020/05/06 18:40:35 UTC

jewel itemrenderer defaults to horizontal layout

Hi,

I notice that jewel itemrenders defaults to horizontal layout, but nothing
is really configured that way.

I think the default should be basic layout and then add other layout ,
HGroup or VGroup to layout inner elements

I'm going to see it and try to solve it, but want to expose first here, if
anyone here see something wrong about this.

This change will require users add some layout in his item renders, but
maybe better to solve now that we're before a 1.0 release

Thoughts?

-- 
Carlos Rovira
http://about.me/carlosrovira

Re: jewel itemrenderer defaults to horizontal layout

Posted by Carlos Rovira <ca...@apache.org>.
I forgot to mention that almost all renders has an easy change (mostly
adding the same layout line)
only NavigationGroupExampleItemRenderer (
CollapsibleNavigationSectionRenderer) was more challenging, since it
involves the creation of a sublist, but I put some docs in all that classes.

To resume: that renders doesn't accept a custom layout since it needs a
VerticalLayout to work properly (fold/unfold) the sub list. Also it can use
a fixed height, since that will make the renderer unable to change the size
to show the sublist. So you need instead to layout sub elements with a
convenience container as we do in TDJ (
NavigationGroupExampleItemRenderer.mxml)


El mié., 13 may. 2020 a las 17:32, Carlos Rovira (<ca...@apache.org>)
escribió:

> Hi all,
>
> just let you now that I finished the changes for jewel item renderer
> layouts.
>
> NOTE: That change probably will require changes in your application code.
>
> The problem: Jewel renderers was laying out the user defined mxml ui
> elements in horizontal layout.
>
> Solution: Normally we want containers start laying elements in absolute
> positioning (BaseLayout).
>
> So ListItemRenderer, that's the base for List based components (List,
> Navigation, TabBar, ComboBox,...), put this practice in place.
>
> * By defaults use BasicLayout
> * custom list renders like TourDeJewel's IconListItemRender change this to
> layout horizontally:
>
> <j:beads>
> ...
> <j:HorizontalLayout gap="8" itemsVerticalAlign="itemsCenter"/>
> </j:beads>
>
> This as well means that I could simplify the layout of those renders
> removing CSS custom configurations (In that case adding the gap=8 means I
> could remove the margin-right in the icon set to 24px in CSS). As well we
> align vertically the items to the center of the render without extra CSS
> rules, but the ones in the layout.
>
> css code like the following can be removed.  * .iconListItemRenderer
> .fonticon {   margin-right: 24px;   }*
>
> ListItemRender Internal style (.mxmlContent) was removed too. Is not
> needed anymore.
>
> Side Note: In refactoring all the renders I could as well remove all the
> extra checks we needed in bindings expressions that many months ago was
> causing errors. Since Bindings now works almost perfect, this extra code
> was not needed anymore. TDJ, is now clean of that code.
>
> As I said at the start of this thread, you probably will need to change
> your actual renders. Check how I refactored the TDJ renders to see what is
> needed to look as before.
>
> With this change I think renders get a more robust layout from now on.
>
> Thanks
>
>
>
>
>
>
>
>
> El mié., 6 may. 2020 a las 20:40, Carlos Rovira (<ca...@apache.org>)
> escribió:
>
>> Hi,
>>
>> I notice that jewel itemrenders defaults to horizontal layout, but
>> nothing is really configured that way.
>>
>> I think the default should be basic layout and then add other layout ,
>> HGroup or VGroup to layout inner elements
>>
>> I'm going to see it and try to solve it, but want to expose first here,
>> if anyone here see something wrong about this.
>>
>> This change will require users add some layout in his item renders, but
>> maybe better to solve now that we're before a 1.0 release
>>
>> Thoughts?
>>
>> --
>> Carlos Rovira
>> http://about.me/carlosrovira
>>
>>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>

-- 
Carlos Rovira
http://about.me/carlosrovira

Re: jewel itemrenderer defaults to horizontal layout

Posted by Carlos Rovira <ca...@apache.org>.
I forgot to mention that almost all renders has an easy change (mostly
adding the same layout line)
only NavigationGroupExampleItemRenderer (
CollapsibleNavigationSectionRenderer) was more challenging, since it
involves the creation of a sublist, but I put some docs in all that classes.

To resume: that renders doesn't accept a custom layout since it needs a
VerticalLayout to work properly (fold/unfold) the sub list. Also it can use
a fixed height, since that will make the renderer unable to change the size
to show the sublist. So you need instead to layout sub elements with a
convenience container as we do in TDJ (
NavigationGroupExampleItemRenderer.mxml)


El mié., 13 may. 2020 a las 17:32, Carlos Rovira (<ca...@apache.org>)
escribió:

> Hi all,
>
> just let you now that I finished the changes for jewel item renderer
> layouts.
>
> NOTE: That change probably will require changes in your application code.
>
> The problem: Jewel renderers was laying out the user defined mxml ui
> elements in horizontal layout.
>
> Solution: Normally we want containers start laying elements in absolute
> positioning (BaseLayout).
>
> So ListItemRenderer, that's the base for List based components (List,
> Navigation, TabBar, ComboBox,...), put this practice in place.
>
> * By defaults use BasicLayout
> * custom list renders like TourDeJewel's IconListItemRender change this to
> layout horizontally:
>
> <j:beads>
> ...
> <j:HorizontalLayout gap="8" itemsVerticalAlign="itemsCenter"/>
> </j:beads>
>
> This as well means that I could simplify the layout of those renders
> removing CSS custom configurations (In that case adding the gap=8 means I
> could remove the margin-right in the icon set to 24px in CSS). As well we
> align vertically the items to the center of the render without extra CSS
> rules, but the ones in the layout.
>
> css code like the following can be removed.  * .iconListItemRenderer
> .fonticon {   margin-right: 24px;   }*
>
> ListItemRender Internal style (.mxmlContent) was removed too. Is not
> needed anymore.
>
> Side Note: In refactoring all the renders I could as well remove all the
> extra checks we needed in bindings expressions that many months ago was
> causing errors. Since Bindings now works almost perfect, this extra code
> was not needed anymore. TDJ, is now clean of that code.
>
> As I said at the start of this thread, you probably will need to change
> your actual renders. Check how I refactored the TDJ renders to see what is
> needed to look as before.
>
> With this change I think renders get a more robust layout from now on.
>
> Thanks
>
>
>
>
>
>
>
>
> El mié., 6 may. 2020 a las 20:40, Carlos Rovira (<ca...@apache.org>)
> escribió:
>
>> Hi,
>>
>> I notice that jewel itemrenders defaults to horizontal layout, but
>> nothing is really configured that way.
>>
>> I think the default should be basic layout and then add other layout ,
>> HGroup or VGroup to layout inner elements
>>
>> I'm going to see it and try to solve it, but want to expose first here,
>> if anyone here see something wrong about this.
>>
>> This change will require users add some layout in his item renders, but
>> maybe better to solve now that we're before a 1.0 release
>>
>> Thoughts?
>>
>> --
>> Carlos Rovira
>> http://about.me/carlosrovira
>>
>>
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>

-- 
Carlos Rovira
http://about.me/carlosrovira

Re: jewel itemrenderer defaults to horizontal layout

Posted by Carlos Rovira <ca...@apache.org>.
Hi all,

just let you now that I finished the changes for jewel item renderer
layouts.

NOTE: That change probably will require changes in your application code.

The problem: Jewel renderers was laying out the user defined mxml ui
elements in horizontal layout.

Solution: Normally we want containers start laying elements in absolute
positioning (BaseLayout).

So ListItemRenderer, that's the base for List based components (List,
Navigation, TabBar, ComboBox,...), put this practice in place.

* By defaults use BasicLayout
* custom list renders like TourDeJewel's IconListItemRender change this to
layout horizontally:

<j:beads>
...
<j:HorizontalLayout gap="8" itemsVerticalAlign="itemsCenter"/>
</j:beads>

This as well means that I could simplify the layout of those renders
removing CSS custom configurations (In that case adding the gap=8 means I
could remove the margin-right in the icon set to 24px in CSS). As well we
align vertically the items to the center of the render without extra CSS
rules, but the ones in the layout.

css code like the following can be removed.  * .iconListItemRenderer
.fonticon {   margin-right: 24px;   }*

ListItemRender Internal style (.mxmlContent) was removed too. Is not needed
anymore.

Side Note: In refactoring all the renders I could as well remove all the
extra checks we needed in bindings expressions that many months ago was
causing errors. Since Bindings now works almost perfect, this extra code
was not needed anymore. TDJ, is now clean of that code.

As I said at the start of this thread, you probably will need to change
your actual renders. Check how I refactored the TDJ renders to see what is
needed to look as before.

With this change I think renders get a more robust layout from now on.

Thanks








El mié., 6 may. 2020 a las 20:40, Carlos Rovira (<ca...@apache.org>)
escribió:

> Hi,
>
> I notice that jewel itemrenders defaults to horizontal layout, but nothing
> is really configured that way.
>
> I think the default should be basic layout and then add other layout ,
> HGroup or VGroup to layout inner elements
>
> I'm going to see it and try to solve it, but want to expose first here, if
> anyone here see something wrong about this.
>
> This change will require users add some layout in his item renders, but
> maybe better to solve now that we're before a 1.0 release
>
> Thoughts?
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>

-- 
Carlos Rovira
http://about.me/carlosrovira

Re: jewel itemrenderer defaults to horizontal layout

Posted by Carlos Rovira <ca...@apache.org>.
Hi all,

just let you now that I finished the changes for jewel item renderer
layouts.

NOTE: That change probably will require changes in your application code.

The problem: Jewel renderers was laying out the user defined mxml ui
elements in horizontal layout.

Solution: Normally we want containers start laying elements in absolute
positioning (BaseLayout).

So ListItemRenderer, that's the base for List based components (List,
Navigation, TabBar, ComboBox,...), put this practice in place.

* By defaults use BasicLayout
* custom list renders like TourDeJewel's IconListItemRender change this to
layout horizontally:

<j:beads>
...
<j:HorizontalLayout gap="8" itemsVerticalAlign="itemsCenter"/>
</j:beads>

This as well means that I could simplify the layout of those renders
removing CSS custom configurations (In that case adding the gap=8 means I
could remove the margin-right in the icon set to 24px in CSS). As well we
align vertically the items to the center of the render without extra CSS
rules, but the ones in the layout.

css code like the following can be removed.  * .iconListItemRenderer
.fonticon {   margin-right: 24px;   }*

ListItemRender Internal style (.mxmlContent) was removed too. Is not needed
anymore.

Side Note: In refactoring all the renders I could as well remove all the
extra checks we needed in bindings expressions that many months ago was
causing errors. Since Bindings now works almost perfect, this extra code
was not needed anymore. TDJ, is now clean of that code.

As I said at the start of this thread, you probably will need to change
your actual renders. Check how I refactored the TDJ renders to see what is
needed to look as before.

With this change I think renders get a more robust layout from now on.

Thanks








El mié., 6 may. 2020 a las 20:40, Carlos Rovira (<ca...@apache.org>)
escribió:

> Hi,
>
> I notice that jewel itemrenders defaults to horizontal layout, but nothing
> is really configured that way.
>
> I think the default should be basic layout and then add other layout ,
> HGroup or VGroup to layout inner elements
>
> I'm going to see it and try to solve it, but want to expose first here, if
> anyone here see something wrong about this.
>
> This change will require users add some layout in his item renders, but
> maybe better to solve now that we're before a 1.0 release
>
> Thoughts?
>
> --
> Carlos Rovira
> http://about.me/carlosrovira
>
>

-- 
Carlos Rovira
http://about.me/carlosrovira