Subscribe for automatic updates: RSS icon RSS

Login icon Sign in for full access | Help icon Help
Advanced search

Pages: [1]
  Reply  |  Print  
Author Topic: Ask Reuben 59 - Emulating Stretch  (Read 4863 times)
Reuben B.
Four Js
Posts: 1116


« 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.

Read more at https://4js.com/ask-reuben/ig-59/

Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
Pages: [1]
  Reply  |  Print  
 
Jump to:  

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines