How to build a responsive UI for desktop

[Jean-Paul]

Hi to all,

I'm not really a new user of LC as I started to learn and practice it many years ago (8-10?), but I lost my login details because I haven't been back on this forum for a long, long time.

I'm trying to update an old application I made with LC version six community and I would like this application to be responsive as the todays screens are much larger than before.

I looked in the dictionary for new properties that could handle this problem but found old ones like resizeStack, maxWidth, minWidth, etc.
I also did a search on the forum but so far without success.
Same for lessons.

I would like to point out that this application is designed for desktops and NOT for mobiles.

If anyone can direct me to some tutorials or dictionary entries, thanks in advance.

Kind regards, Jean-Paul.

[dunbarx]

Hi.

Welcome back.

Reading your post I right away assumed it was speaking about mobil. When I realized that was not so, I then wondered what exactly the issue was. I never had a problem with a too large monitor, only a too small one. Please give an example or use case where a large monitor is an annoyance, or an actual barrier to success.

Craig

[Jean-Paul]

Hi Craig,

It's not really an issue but a search on what are the good practice to build such interface.

Regards, Jean-Paul.

[richmond62]

I would like this application to be responsive as the todays screens are much larger than before.

Indeed: and?

By 'responsive' do you mean you want your app to resize to fill the whole screen?

Or something else?

Because what you do mean by 'responsive' is unclear.

[SWEdeAndy]

Screens come in all sizes, from laptop to ultrawide etc, so it seems very natural to me that you'd want to build in some responsiveness in your UI. To me, 'responsive' means that the UI adapts when the stack rect changes. On mobile that normally means adapting to different full screen dimensions.

On desktop/laptop however, you rarely want the app to go full screen, but allow the user to decide how much of the screen the app can cover, and have the UI make the best use of the chosen app/stack rect.

I tend to design my UIs to work on a laptop, but to be optimal on a large screen. While many UI elements will still be the same size, I often want scrolling fields to expand when screen size allows, to make the content more readable and accessible. I also want bottom edge objects to stay at the bottom (obviously) and right-hand objects to stay to the right etc. As we all know, if you just pull the bottom-right corner of an LC stack, the rect changes, but the content stays where it is - so we need to code the responsiveness.

(Or, buy and try to understand the under-documented 'responsive design' feature. I have so far preferred to roll my own, so that I'm fully in control of what's going on.)

Thus, resizeStack and resizeControl are your friends. Work with groups as containers for your UI elements. In the card script, use the resizeStack handler to catch the resizing and set the rects of the top groups. Perhaps you have two groups that should occupy half of the stack rect each. You set their rects here.

Then, in each of the group scripts, you use the resizeControl handler. If the group contains groups, set the rects of those, and have a resizeControl handler in each etc. You need to set the sizes of the controls within the groups in a smart order. E.g. if you have a label, a field and a button (arranged vertically), you set the top of the label to the top of the group (or with some margin), set the bottom of the button to the bottom of the group, and finally set the the rect of the field (which you want to expand) relative to the bottom of the label and the top of the button (again with suitable margin).

My Browser Animation stack is a good example of how this looks and works:
https://wheninspace.com/browseranimation/

[Jean-Paul]

Hi to all

@richmond62

By 'responsive' do you mean you want your app to resize to fill the whole screen?

Also but not only

@SWEdeAndy

Thus, resizeStack and resizeControl are your friends. Work with groups as containers for your UI elements. In the card script, use the resizeStack handler to catch the resizing and set the rects of the top groups. Perhaps you have two groups that should occupy half of the stack rect each. You set their rects here.

resizeControl handler, that's the one I've been missing and it came since version one of LC!

Thanks a lot for your help and your teaching,

Regards, Jean-Paul.

[stam]

I would add that when designing a responsive layout, I find it helpful to start with the smallest possible size that works and then set that as the stack's minimum dimensions in its property inspector - to avoid overlapping controls when users try to make this smaller.

You then need to plan how things will expand/move with increasing sizes. The built in geometry manager does a half-decent job of it but is error prone - if you change the name or grouping of controls under its influence for example, it will silently crash and put all controls in crazy positions often well off-screen.

So it's also a matter of saving often, testing and immediate closing down and reopening if an error occurs.
It is also helpful to run:

Code: Select all

revCacheGeometry true

with layout changes and confirm it works by running revUpdateGeometry (which will be needed on navigating to new card.

Sometimes you may want text resized as well for example, or do some changes that aren't possible in the GM, so you'll use resizeStack - just make sure that if you've used the GeometryManager to start the handler with revUpdateGeometry first.

You could go 'full hog' and just code everything by hand but if you have any number of controls that gets tedious quickly. I personally use a combination of GM and resizeStack.