Four Js Development Tools Forum

General => Ask Reuben => Topic started by: Reuben B. on December 14, 2020, 05:22:49 am

Title: Ask Reuben 59 - Emulating Stretch
Post by: Reuben B. on December 14, 2020, 05:22:49 am
During Christophe’s plenary session at our recent Online WordWide Developer Conference, at around and in slides 19-25, he talked about a proposed extension to STRETCH and its use in making your UI responsive.

What you might not have realised is that STRETCH is an existing attribute, only it is currently limited in the range of widgets it can be used with.  As the documentation says " …This attribute is typically used with form items that can be re-sized like IMAGE, TEXTEDIT, or WEBCOMPONENT fields. "

Part of what was proposed for the next release was extending the range of widgets that the STRETCH attribute can be used with, and Christophe’s demonstration showed it being used with an EDIT widget.

With Grid based layouts, there is a clause in the rendering rules that I want to highlight.   That reads “… When resizing a window, the content will either grow with the window or be packed in the top left position.  If elements in the window can grow, they will follow the window container and resize accordingly. ...The way resizable form items can grow is controlled by the STRETCH attribute. The window content is packed horizontally, vertically or in both directions, if none of the elements can grow in that direction..."

It is this rule that I make use of  in an earlier Ask-Reuben article whereby adding a widget that can stretch (in that case an empty IMAGE), this can influence the appearance.  The “If elements in the window can grow” condition is now fulfilled by the addition of the one IMAGE widget with STRETCH attribute.

Although the STRETCH attribute for more widgets as proposed in Christophe’s presentation for 4.00 isn’t available yet, you can achieve the same result by using the same technique as in the earlier Ask-Reuben article, and that is to add an empty stretchable IMAGE widget to your GRID.  When the form is resized, this image widget will stretch and stretch other widgets as a result.