* * *

Author Topic: Best practices for Multiplatform GUI portability  (Read 1273 times)

Raul_ES

  • New member
  • *
  • Posts: 37
Best practices for Multiplatform GUI portability
« on: September 04, 2017, 05:26:39 pm »
Hello,  :)

I do really love Lazarus/FPC/CodeTyphon for it's powerfull set of components and it's multiplatform
capabilities but it really stress me sometimes when it comes to port the GUI of an application from one system to another.

For instance, I develop under BSD/GTK a program an when I switch to Ubuntu Linux/GTK or
Windows/Win64 (it's possible to use GTK with the same theme under Windows?) fonts are larger or smaller, they appear at a slightly different possition, the edit box heigth is different... aaaaarg it's difficult to keep coherence between all these platforms.
Surely I'm doing something or many few things wrong, probably basic ones. What I am missing?

I would like to hear about your experience in this matter and how you handle this odds. As sofware
developers with expertice you are, what kind of good engineering practices would you advice or recommend to a rookie?

thank you all,
« Last Edit: September 06, 2017, 04:42:25 pm by Raul_ES »
Raúl
Student of Computer Science - UOC

Thaddy

  • Hero Member
  • *****
  • Posts: 4439
Re: Best practices for Multiplatform GUI portability
« Reply #1 on: September 04, 2017, 05:43:33 pm »
Mindset problem:

Widgetsets, be it Windows, GTKXXX, QtXXX or whatever always have a default design.  Lazarus tries (and succeeds) in keeping those default designs.
Do NOT try to change it, because you will change the experience that the user on those different platforms expect.
Usually it is only programmers that want everything to look the same... That's OK.... but then go all the way and make it look the same... ;D That's YOUR programming sikills.... >:(

Get it?
"Logically, no number of positive outcomes at the level of experimental testing can confirm a scientific theory, but a single counterexample is logically decisive."

cpicanco

  • Sr. Member
  • ****
  • Posts: 364
    • My Portfolio
Re: Best practices for Multiplatform GUI portability
« Reply #2 on: September 04, 2017, 06:02:07 pm »
Hi Raul_ES, do not be upset with the grumpy Thaddy. He is old. Just try to learn from the wise Thaddy, he is very experienced. And the wise Thaddy is right. What he was trying to say: changing defaults for cross-platform requires a lot of expertise and hard work.

Also, for now the easy to use LCL is (as far as I know) constrained to desktop. I am considering to move to fpGui... people say that it is better for cross-platform.

JD

  • Hero Member
  • *****
  • Posts: 1593
Re: Best practices for Multiplatform GUI portability
« Reply #3 on: September 04, 2017, 07:20:39 pm »
@Raul_ES

It is practically impossible when you use the native widgetsets on each platform to get the default Look-And-Feel. There will always be differences and don't count on those differences going away soon.

Best you can do IMHO is to use frames designed for each widgetset (think virtual environments like VirtualBox; a pain, I know but I've not found a better way). The frame that is loaded by the form will then be based on which widgetset is being used. The application will then look better at run time avoiding the native font problem, height of controls and so on.

If you keep the code to handle the events on the form, you'll be able to keep code duplication as low as possible.

Cheers and good luck,

JD
« Last Edit: September 04, 2017, 07:30:54 pm by JD »
Windows (10, 7) - Lazarus 1.8RC4/FPC 3.0.4 (also Delphi occasionally)
Linux Mint Cinnamon  - Lazarus 1.6.4/FPC 3.0.2
Indy 10.6 series; Zeos 7.2.1; SQLite, Firebird, PostgreSQL & MariaDB

jmpessoa

  • Hero Member
  • *****
  • Posts: 937
Re: Best practices for Multiplatform GUI portability
« Reply #4 on: September 04, 2017, 08:06:59 pm »

Quote
...keep the code to handle the events on the form...
O:-)   +1
Lamw: Lazarus Android Module Wizard
https://github.com/jmpessoa/lazandroidmodulewizard

RAW

  • Sr. Member
  • ****
  • Posts: 491
Re: Best practices for Multiplatform GUI portability
« Reply #5 on: September 04, 2017, 10:28:05 pm »
What about MSE IDE... If you want the same appearance on many platforms and you don't want to do it yourself, then I would take at least a look at it...  :)
Windows 7 Pro (x64 Sp1) And Windows XP Pro (x86 Sp3) - LAZARUS 1.8.0RC4 FPC 3.0.4

Raul_ES

  • New member
  • *
  • Posts: 37
Re: Best practices for Multiplatform GUI portability
« Reply #6 on: September 04, 2017, 11:44:29 pm »
Hi Raul_ES, do not be upset with the grumpy Thaddy. He is old. Just try to learn from the wise Thaddy, he is very experienced. And the wise Thaddy is right. What he was trying to say: changing defaults for cross-platform requires a lot of expertise and hard work.

Also, for now the easy to use LCL is (as far as I know) constrained to desktop. I am considering to move to fpGui... people say that it is better for cross-platform.

Thank you friends, I'm not upset  :D :D :D I see both of your valuable points.

fpGui is it "experimental" or it's a mature and reliable project for
enterprise software development? Sounds interesting.

regards
Raúl
Student of Computer Science - UOC

Raul_ES

  • New member
  • *
  • Posts: 37
Re: Best practices for Multiplatform GUI portability
« Reply #7 on: September 04, 2017, 11:59:25 pm »
@Raul_ES

Best you can do IMHO is to use frames designed for each widgetset (think virtual environments like VirtualBox; a pain, I know but I've not found a better way). The frame that is loaded by the form will then be based on which widgetset is being used. The application will then look better at run time avoiding the native font problem, height of controls and so on.

If you keep the code to handle the events on the form, you'll be able to keep code duplication as low as possible.

Thank you JD,

I was actually thinking about implementing a solution with frames but I was confused about how to eliminate redundant code. I am really new to TFrames.


Actually I have tried 3 solutions:


1) Run-time property management:

{$ifdef windows}
Label1.font.size := 0;
Label1.position ...
{$endif}
 
... painfull solution having to manually correct all the controls. This solution ties you to edit forms under the same envoironment and switch
exclusively to verify the misplacement or alterations of controls under the others.

2) Creating multiple clones of the same form, each one edited under it's corresponding envoironment. Manteinment problems.

USES

    {$ifdef WINDOWS}Unit_Form1Windows,....{$endif}
    {$ifdef UNIX}Unit_Form1_GTK,....{$endif}

3) Selecting the corresponding frame in runtime which I think is the way to go. But I have several issues about this solution that I
have not solved yet.


Raúl
Student of Computer Science - UOC

mse

  • Full Member
  • ***
  • Posts: 228
Re: Best practices for Multiplatform GUI portability
« Reply #8 on: September 05, 2017, 08:44:33 am »
Thank you friends, I'm not upset  :D :D :D I see both of your valuable points.
fpGui is it "experimental" or it's a mature and reliable project for
enterprise software development? Sounds interesting.
If you need a cross platform toolkit for Free Pascal with the same look and feel on all platforms I also suggest MSEide+MSEgui. A "mature and reliable project for enterprise software development". Development started in 1999, it is used in production since more than 15 years.
https://sourceforge.net/projects/mseide-msegui/
http://wiki.freepascal.org/MSEide_&_MSEgui
Mailinglist:
https://sourceforge.net/projects/mseide-msegui/lists/mseide-msegui-talk
Mail archive:
http://www.mail-archive.com/mseide-msegui-talk@lists.sourceforge.net/

In order to make font size independent GUI's one should use floating layouts with anchors, TSplitter, TSpacer and TLayouter instead to use fix widget positions.

Thaddy

  • Hero Member
  • *****
  • Posts: 4439
Re: Best practices for Multiplatform GUI portability
« Reply #9 on: September 05, 2017, 10:57:44 am »
@mse
You succeeded in what I told him: a lot of hard work. And it looks the same on all supported platforms. (KUDOS) That is quite an achievement!
You deliberately failed in following other widget sets design guidelines..
I hope you agree with this summary.
« Last Edit: September 05, 2017, 11:03:39 am by Thaddy »
"Logically, no number of positive outcomes at the level of experimental testing can confirm a scientific theory, but a single counterexample is logically decisive."

JuhaManninen

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 3086
  • I like bugs.
Re: Best practices for Multiplatform GUI portability
« Reply #10 on: September 05, 2017, 11:04:44 am »
I would like to here about your experience in this matter and how you handle this odds.
Use Autosize and anchors (using AnchorEditor) for LCL layouts.
The differences you mentioned are because LCL uses native widgets. Looking native on each platform is a good thing.
Please look at the various windows of Lazarus IDE as an example. Controls are typically anchored to each other, thus the layout looks good even when themes and fonts change.
Note: Delphi does not support anchors. It only has the more limited Align property.

If you need the exact same look and feel everywhere, pixel by pixel, then a custom drawn lib like fpGui or MSEide+MSEgui is the way to go.

JuhaManninen

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 3086
  • I like bugs.
Re: Best practices for Multiplatform GUI portability
« Reply #11 on: September 05, 2017, 11:22:58 am »
It is practically impossible when you use the native widgetsets on each platform to get the default Look-And-Feel. ...
With native widgetsets you get the default Look-And-Feel on each platform, by definition.
Somehow you misunderstood the concept.

Quote
Best you can do IMHO is to use frames designed for each widgetset (think virtual environments like VirtualBox; a pain, I know but I've not found a better way). The frame that is loaded by the form will then be based on which widgetset is being used. The application will then look better at run time avoiding the native font problem, height of controls and so on.
Why is native font and native height of controls a problem? It is an advantage!
Using frames for this "problem" sounds like a very dummy act. Besides VirtualBox has nothing to do with widget layout issues.

Raul_ES

  • New member
  • *
  • Posts: 37
Re: Best practices for Multiplatform GUI portability
« Reply #12 on: September 07, 2017, 01:31:33 am »
Thank you friends for your advice. I see that I need to improve a lot my habilities with the designer (and my general knowledge of Lazarus and pascal).

See the next two screenshots that I believe ilustrate the problem I refer to. This small example is developed under Windows 10. The second screenshot is the same program running under Linux.
Raúl
Student of Computer Science - UOC

molly

  • Hero Member
  • *****
  • Posts: 1810
Re: Best practices for Multiplatform GUI portability
« Reply #13 on: September 07, 2017, 01:49:46 am »
See the next two screenshots that I believe ilustrate the problem I refer to.
Are you expecting the two pictures to look similar ?

If the answer to that question is yes then you misunderstood the concept of Lazarus (as stated by user JuhaManninen), if the answer to that question is no then there does not seem to be a problem ?

If you want your program to have the exact same look and feel on every platform then you should be looking at something like FPGui and/or MseGUI.

avra

  • Hero Member
  • *****
  • Posts: 1085
    • Additional info
Re: Best practices for Multiplatform GUI portability
« Reply #14 on: September 07, 2017, 08:49:05 am »
See the next two screenshots that I believe ilustrate the problem I refer to. This small example is developed under Windows 10. The second screenshot is the same program running under Linux.
Your problem is quite common, and it is not exclusively cross platform related. For example, even on Windows only your application can face some pc running large fonts on 100% scale, or even worse user has chosen to have display scaling to 125% or 150%. On 4K monitors even Lazarus it self looked ugly and almost unusable until recent fixes.

You should read below wiki articles to find what are your options. If you follow them and have a conservative/defensive approach to layout (like covering worse case in label widths), with a little effort you can eliminate most of the issues. For example, with carefull layout and sizing properties, in ct2laz I have eliminated not all but the most common issues pretty easy. The only visual difference between Windows and Linux that irritated me was fixed with this simple offset that I have later applied in form creation:

Code: Pascal  [Select]
  1. const
  2.   {$IFDEF WINDOWS}
  3.   FIX_CHECKBOX_OFFSET = 0;
  4.   {$ELSE}
  5.   FIX_CHECKBOX_OFFSET = -4; // workaround for checkbox component different location on linux
  6.   {$ENDIF}

Although it might look like you will have to do this a lot, you really don't have to if you pay attention a little to layout. Upper code is the only fix I had to do manually, and that's only because I wanted it to be perfect. In reality it would not be that bad even without this manual fix.

http://wiki.lazarus.freepascal.org/GUI_design_guidelines
http://wiki.lazarus.freepascal.org/High_DPI
http://wiki.lazarus.freepascal.org/Autosize_/_Layout
http://wiki.lazarus.freepascal.org/Lazarus_known_issues_(things_that_will_never_be_fixed)#TComboBox.Height
ct2laz - Easily convert components and projects between Lazarus and CodeTyphon

 

Recent

Get Lazarus at SourceForge.net. Fast, secure and Free Open Source software downloads Open Hub project report for Lazarus