Icon View Thread

The following is the text of the current message along with any replies.
Messages 1 to 8 of 8 total
Thread Web apps for mobile and scaling for different resolutions
Wed, Oct 24 2018 4:01 AMPermanent Link

Paul Coshott

Avatar

Hi All,

I need to write a mobile app as a companion app to my web app. I started that today, but I'm not sure how to make sure all objects within each form scale to fit the phone, regardless of the screen resolution.

I have a galaxy S8 and I can change the resolution to 3 different settings. Is there any way to make it look right on all of the different resolutions?

Thanks,
Paul
Wed, Oct 24 2018 4:27 AMPermanent Link

Mark Brooks

Slikware

Avatar

Paul Coshott wrote:

<<Hi All,

I need to write a mobile app as a companion app to my web app. I started that today, but I'm not sure how to make sure all objects within each form scale to fit the phone, regardless of the screen resolution.

I have a galaxy S8 and I can change the resolution to 3 different settings. Is there any way to make it look right on all of the different resolutions? >>

I also have to do this a lot. In my experience, the EWB Layout functionality is easily good enough for me to actually create a single app that is responsive based on device resolution. You should explore this functionality if you have not done so already, along with the Autosize functionality. The only area where I have had to "tweak" things is the removal of scrollbars on mobile devices.
Wed, Oct 24 2018 5:03 AMPermanent Link

Uli Becker

Hi Mark,

> I also have to do this a lot. In my experience, the EWB Layout functionality is easily good enough for me to actually create a single app that is responsive based on device resolution. You should explore this functionality if you have not done so already, along with the Autosize functionality. The only area where I have had to "tweak" things is the removal of scrollbars on mobile devices.

I agree. In addition: As a rule of thumb a width of 350px at design time will work to see how the mobile app will look like. There is also an emulator on Chrome.
As of the scrollbars: there is a (quite new) property "ScrollSupport" for all scrollable controls which allows to switch off the scrollbars without losing the scroll-functionality.

Cheers Uli




Wed, Oct 24 2018 6:28 AMPermanent Link

Paul Coshott

Avatar

Thanks guys. So for my main form, what Layout properties should I start with?

Position to TopLeft
but what about the stretch?

Thanks,
Paul
Wed, Oct 24 2018 7:51 AMPermanent Link

Uli Becker

Paul,

> Thanks guys. So for my main form, what Layout properties should I start with?
>
> Position to TopLeft
> but what about the stretch?

There are different approaches for mobile web applications. I tried them all <vbg>

Here is what I do with all my mobile apps:

1. MainForm
Layout.Position := lpTopLeft;
Layout.Stretch := lsBottomRight;

2. Toolbar (and Menu)
Layout.Position := lpTopLeft;
Layout.Stretch := lsRight;
Consumption := lcBottom;

3. ScrollPanel
Layout.Position := lpTopLeft;
Layout.Stretch := lsBottomRight;
Scrollbars := sbNone;
ScrollSupport := ssVertical;

All Forms of the app are now parented to MainForm.ScrollPanel, e.g.:

ChildForm:
Parent := MainForm.ScrollPanel;
Height := xy;
Layout.Position := lpTopLeft;
Layout.Stretch := lsRight; (not lsBottomRight)

Uli
Wed, Oct 24 2018 8:05 AMPermanent Link

Mark Brooks

Slikware

Avatar

Paul Coshott wrote:

<<Thanks guys. So for my main form, what Layout properties should I start with?

Position to TopLeft
but what about the stretch?>>

Pretty much agree with Uli to be honest. Certainly an excellent starting point. Just remember that if your app is to be desktop AND mobile then I think you still need to adjust the scrollbar visibility in code somewhere at startup.
Wed, Oct 24 2018 9:01 AMPermanent Link

Paul Coshott

Avatar

Awesome, thanks guys. Appreciate the advice.

Cheers,
Paul
Tue, Oct 30 2018 2:33 PMPermanent Link

Tim Young [Elevate Software]

Elevate Software, Inc.

Avatar

Email timyoung@elevatesoft.com

Paul,

<< Thanks guys. So for my main form, what Layout properties should I start with? >>

Some good things to remember:

1) The Application.Surface (TSurface instance) is, by default, set as Position: Top-Left, Stretch: Bottom-Right.  Whether you alter these layout properties depends upon whether you wish to have the entire application scrollable via native browser scrollbars or not.  If you do, then get rid of the Stretch: Bottom-Right and just make it stretch to the Right. Then, simply adjust the height of the surface as-necessary to accommodate your needs.

2) As Uli indicates, it may be easier to use a main form with a scroll panel as the parent because it gives you the option of designing one main container form that has common application elements like a menu or toolbar.  You can then parent any other forms into the main scroll panel.

Tim Young
Elevate Software
www.elevatesoft.com
Image