jewel itemrenderer defaults to horizontal layout

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

jewel itemrenderer defaults to horizontal layout

Carlos Rovira-2
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?

--
Reply | Threaded
Open this post in threaded view
|

Re: jewel itemrenderer defaults to horizontal layout

Carlos Rovira-2
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 (<[hidden email]>) 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 (<[hidden email]>) 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?

--


--


--