layoutUpdated - Responsivelayout

[jameshale]

Well the Responsive layout simplified my initial layout issues for my project but seems to have hit a bug.
There is a message "layoutUpdated" which supposedly is sent once the library has done its thing.
Reading the docs within the responsivelayout library...
"Use the layoutUpdated message if you want to create layout rules after the library finishes wrapping the user interface."

I have a text field in which I wish to adjust the font size to ensure it is all visible lines are without line wraps.
Before I employed the responsive layout I simply called a routine to do this after a resize or orientation changed.
Worked great until ios16 broke the orientationchanged (this is fixed in the next rc release).
Anyway I tried the responsive layout as a solution while waiting for the rc release and it has worked a treat Except for calling my text routine.

I only need to begin to resize the card and this message fires.
i.e. place pointer tool at card corner and press mouse to begin drag and BOOM the message fires.
Worse, if you are thrown into (or choose to) go into debug mode you will end up in an almost endless loop of unresponsiveness (spinning beachball on a Mac)

put a beep on a layout updated handler and you get a machine gun

on layoutUpdated
beep
end layoutUpdated

has anyone used the layout updated message successfully?
If not has anyone worked out how to know when the responsivelayout has actually finished?

James

[jacque]

Have you found any complete documentation? I gave up for now because the short descriptions in the dictionary didn't give me enough info to do anything more than the simplest of layouts, and even those took me a long time to get right.

For your question, you could try setting a script local variable that tracks the time between the messages. If the time is more than a few milliseconds the resizing is probably finished. At that point you can start the timer again when the next message is sent. Just a guess. We shouldn't need to go to that much trouble but it might work.

[jameshale]

the documentation is a tad sparse and esoteric. for example layout breakpoints seem to be a big thing but what are they?
The flex factor is another..."If non-zero, the amount of space the control can occupy on the main axis is determined by dividing the free space (after placing the hard controls) by the flex factors of the soft controls."
Hard controls? Soft controls? What are these?
I opened the message watcher to see a bit more after adding a wait with messages to the LayoutUpdated handler before calling my text routine.
LayoutUpdated was called four times after I simply told the magic palette to change orientation! So much being the last message sent!
BTW this was after setting the wait time to 250 ms.

[jacque]

I think breakpoints are what other apps call snapshots, a way to store the current state of the layout. You can reload one if further adjustments cause problems, sort of like a revert command, only you can choose where to revert to. However, since I rarely can get even one to work without a lot of experimentation, I haven't used these.

I don't know what hard and soft controls are, but maybe hard controls are fixed and soft ones adjust? I'm in the dark about the flex setting.

[stam]

I think breakpoints are what other apps call snapshots, a way to store the current state of the layout. You can reload one if further adjustments cause problems, sort of like a revert command, only you can choose where to revert to. However, since I rarely can get even one to work without a lot of experimentation, I haven't used these.

I don't know what hard and soft controls are, but maybe hard controls are fixed and soft ones adjust? I'm in the dark about the flex setting.

Actually I think 'breakpoints' are the bootstrap-type breakpoints used in dynamic web design. Usually there are 4 - one for mobile, 1 for 'medium' devices like tablets, a large for desktops and an XL size.

Breakpoints in this context refer to screen width; bootstrap is set to adjust resize containers within a specific 'breakpoint' but if the screen width increases or decreases, the number of permitted columns of containers increases or decreases respectively - the idea is that on mobile you only have one column for example, with all containers stacked vertically onto of each other; but with increasing screen width you permit more columns so that content spreads horizontally on larger screens. I think the philosophy is 'mobile first - then adapt for desktop'.

Designing this way is a bit different as it's not really WYSIWYG, but it does provide a phenomenally flexible system for layouts of different sizes. If you want to play around with this and have a Setapp subscription on Mac, check out RapidWeaver (although you'd need the 'blocks' plugin to check this out - free trial). Mind you, if you indulge in spot of web design on Mac, you probably should invest in RapidWeaver anyway...
Or just go hardcore, download bootstrap and sit through online tutorials

S.

[jameshale]

Thanks for the attempted explanation stam, but as I haven't coded websites for a long time (just straight HTML, Dreamweaver was nice when it first came out, and Wordpress) I have no idea what a breakpoint is, let alone a bootstrap type breakpoint. I mean bootstrap takes me back to loading the CPU with a paper tape before I could load the main prog. It sounds like a trigger of some sort. But given breakpoint does have a specific meaning in livescript, some explanation with the plug-in would have been nice telling us 'livescripters' "here we are using the term "breakpoint" to mean....
<rant on>
I just think it is really cheeky (I am being polite here) to sell a product that come with bugger all documentation, and what little documentation uses familiar terms in a different non defined way. All that has been provided was an incomplete lesson that showed a couple of basic features leaving out what now seems to be a major part of the library. Surely the actual developer had more documentation, a design brief a specification of some sort. None of which seems to be available to the suckers who bought it.
<rant off>

[jacque]

I asked Heather about docs for Responsive Layout and she said she's asked for those more than once. They are a little late on the next LC release and I suspect they're working full out on it. I'm hoping the docs will follow after that.

[stam]

A much better explanation than I can muster:

https://getbootstrap.com/docs/5.0/layout/breakpoints/

[jameshale]

Thank you stam.
After my little rant I thought perhaps I needed to step back and remember where I had heard the term “responsive layout” before and I remembered it was to do with web layouts being responsive to viewing platform. Looking through the article even explained to me what media queries (in terms of the library) are. I foolishly thought they were concerned with media in the sense of video/graphic/sound.
A little context goes a hell of a long way towards making something understandable.
Still, it doesn’t excuse the provided documentation.

[stam]

Still, it doesn’t excuse the provided documentation.

Absolutely agree.
In fact I pointed this out in a comment on the LC 'lesson' on this already in August last year (see comments at the end): https://lessons.livecode.com/m/4071/l/1 ... ive-layout