stretching two joined fields keeping the join stationary

[jameshale]

Hi Everyone,
I have finally gotten around to using the "responsive layout" and so far it is looking promising.
However, there is one thing I can't seem to get, either with it or the Geometry Manager.
I have two fields side by side on my card.
I would like them to have the following properties.
The left edge of the leftmost field stick to the left edge of the card.
The right edge of the rightmost field to stick to the right edge of the card.
The place where the fields touch to stay in the middle of the card.
So initially it might look like this:

But if the card widens it looks like this:

So both fields have stretched but their join stays in the middle.

Can this be done with either the GM or the responsive layout?

[dunbarx]

James.

I have not used responsive layout at all. But your issue seems simple to solve. First, are you going to use the "resizeStack" message to adjust these fields?

If so, then in the card script:

Code: Select all

on resizeStack
   get the width of this card / 2
   set the width of fld 1 to it
   set the width of fld 2 to it
   set the left of fld 1 to the left of this card
   set the right of fld 2 to the right of this cd
end resizeStack

Craig

[jameshale]

Hi craig,
Thanks, but I know how to script it.
I was hoping it could be done with the GM or RL.

I am using the responsive layout for other controls on the card and was hoping it could include this.

These two fields sit below another field which stretches as well but in both axes, above the duel fields.
The card will have a nav bar at the top and bottom and the three fields between them.
Given its for mobile I need to adjust the fields for orientation.

The other thing I am wondering, if I have to scrip this is what message triggers the responsive layout to do its thing, as my scripting would nee to happen AFTER its done its fob on the other control.

[bn]

Hi James,

I tried it using Geometry Manager:

small.png (8.83 KiB) Viewed 4454 times

enlarged.png (9.58 KiB) Viewed 4454 times

the setting images in following post

Kind regards
Bernd

[bn]

The setting images

settingsField1.png (19.4 KiB) Viewed 4452 times

settingsField2.png (21.22 KiB) Viewed 4452 times

Field1 is the left field created first, Field2 is the right field.

I tried different settings and cleared the setting via Geometry Manager before trying new settings.
The left object for field2 is field1.

These settings seem to work.

Kind regards
Bernd

[stam]

Is the GM still going to be present in v10?
It's greyed out in my copy of 10 DP4...

[FourthWorld]

The other thing I am wondering, if I have to scrip this is what message triggers the responsive layout to do its thing, as my scripting would nee to happen AFTER its done its fob on the other control.

The resizeStack message is sent whenever a stack is resized, before the stack contents are rendered to screen. On mobile OSes this includes the resizing done to fit the device display that occurs when a stack is opened, or when display metrics change with changed orientation.

This works great for development because you can see how your resize handling works right in the IDE while you're working on it by just resizing the window, without having load it on a device.

There is another message worth noting that can simplify some resize logic: resizeControl is sent to a group whenever the group is resized, whether by the user with the Pointer tool or by any script.

This differs from how resizeControl is sent to individual controls, where it's limited to direct user interaction with the Pointer tool. This addition for groups was added several years ago for custom controls made from groups, like the DataGrid, allowing us a LOT more flexibility with how we handle resizing logic.

Whether resizeControl is useful in your layout is not something I would have an opinion on without seeing the full layout and understanding the goals. But it's so helpful it's worth keeping in mind when writing layout logic, since most UIs are composed of sections and there are times when writing layout code is much simpler when local to the section group.

For example, imagine a UI with a toolbar group and a group containing a set of fields. The card script could handle the resizeStack message by adjusting the two groups to fit the current window bounds; then each group can use the resizeControl message to take care of placing its own internal objects. This not only keeps the groups portable, but simplifies metrics by letting you use points relative to "me" (eg, "the top of me"), so the internal objects never need to consider where their parent group has been placed on the card.

Whether you put all your layout code in one handler or break it up to handle some groups individually, it all begins with the resizeStack message sent to the card.

And whether you write your own lean purpose-built code to handle your layout, or rely on complex libraries that generalize the task with hundreds or thousands of lines of script that parse user-defined properties and interpret positioning from those, all such scripts rely on the resizeStack message as their trigger.

[jameshale]

Thank You @Bernd
Here is a mock up of what I wanted, now working as desired.

The nav bars will have different icons (graphics and function)
The fields will not have borders nor scrollbars, also the fields will adjust font size according to their size.
I had done all this with scripting, using individual buttons instead of navbars but it was a pain. And of course all broke with iOS16!
[this is the "Heartease" app in the App Store]
LC 9.69 rc3 to be released soonish, fixes the iOS16 issue [Seems Apple made some changes in orientation in iOS 16]
Now with the responsive layout and you GM settings it all done without my code (still have to add the font resizing).
Very happy.

Oh @stam, I launched the app in lc10 dp4 and it still worked, so it appears the GM settings still apply, it only the GM interface in the PI that doesn't

[FourthWorld]

I had done all this with scripting, using individual buttons instead of navbars but it was a pain. And of course all broke with iOS16!
[this is the "Heartease" app in the App Store]
LC 9.69 rc3 to be released soonish, fixes the iOS16 issue [Seems Apple made some changes in orientation in iOS 16]
Now with the responsive layout and you GM settings it all done

The Responsive Layout tool is script, no? How is it responding to the resizeStack message differently from your code that it isn't affected by the engine bug that affected your script?

[jameshale]

@fourthworld,
Yes it is a script, but one I didn’t have to write (nor maintain).
As for the engine bug, it will be fixed in rc3.
I haven’t tried this new solution in rc2 on iOS16 (I should)
So I don’t know whther the responsive layout was impacted by the bug.
However my previous code which was triggered on the mobile messages orientation changed
https://quality.livecode.com/show_bug.cgi?id=23941 was.

[jacque]

I've been trying responsive layout off and on for a couple of weeks and I still don't understand what some of the options do. Heather said that better documentation is on the list but I guess other tasks have higher priority.

When the settings are correct the thing works beautifully and I'm hoping to use it once I understand it. It's far simpler than writing resizing scripts, particularly if you have hundreds of controls to deal with. But "simpler" depends on knowing how each component works, and so far I have only a rudimentary understanding.

After some hours I finally got a layout to do what I wanted but it was trial and error and I'm not sure how I did it. Panos said the current version has a bug so things may be easier in the next release. Complete documentation would sure help.

[FourthWorld]

@fourthworld,
Yes it is a script, but one I didn’t have to write (nor maintain).

A good choice. A one-off to put objects where you want them in a layout is one thing, but writing and maintaining a generalized script to put all objects where you might want them on all possible layouts is orders of magnitude more difficult. Useful that someone else has attempted it, even better that it's doing what you want.

As for the engine bug, it will be fixed in rc3.
I haven’t tried this new solution in rc2 on iOS16 (I should)
So I don’t know whther the responsive layout was impacted by the bug.
However my previous code which was triggered on the mobile messages orientation changed
https://quality.livecode.com/show_bug.cgi?id=23941 was.

A good read. Thank you for including the report link. FWIW the orientationChanged message is sent in a subset of cases where resizeStack is sent. Sometimes that narrow range is useful, but for layout resizeStack will handle more cases, including orientation change. We can view resizeStack as one-stop-shopping for any circumstance where adjusting the layout for the current device metrics will be needed.

[bwmilby]

A good read. Thank you for including the report link. FWIW the orientationChanged message is sent in a subset of cases where resizeStack is sent. Sometimes that narrow range is useful, but for layout resizeStack will handle more cases, including orientation change. We can view resizeStack as one-stop-shopping for any circumstance where adjusting the layout for the current device metrics will be needed.

I'll note that the bug results in no resizeStack being sent (the screen doesn't rotate at all). I've tested an early build of rc3 and it does correct the issue on the SivaSiva app (which uses the resizeStack message), so once they finish the other things needed to get that one out we will have a solution to this bug.

[jacque]

It took me a while but I was able to reproduce the two fields as described using the Responsive Layout magic palette. However, the card container needs to be set to "row" which may not agree with any other controls on the same card, it depends on what else is in there. I'm sure this could be done a different way but I'm still stumbling my way through it all.

Below is a screenshot of the card settings. Each field has only one setting; container = "expanded". All the other field settings are empty. The fields are not grouped, but I expect there's a way to do this with a group instead so the card doesn't have to be "row".

[jameshale]

Thanks @jacque but no.
The card settings you use wrecks the layout od the other controls on the card.

Interestingly though I see you have a letter version of the MP than I.
Another unannounced update to the bundle.

Also it took me a while to discover how to select a CARD for the MP.
control-click on the card and select "project browser", makes sense.
Only actually selecting the card in the project browser does not get reflected in the MP.
Another bug to report.