Saturday, July 13, 2024

Delphi Tip of the Day: Always Use the MenuBar for FMX Desktop Applications

A couple months ago, I watch the video replay "The fundamental secrets of good UI design" done by Ian Barker. Around the 33:15 mark, Barker talks about supporting "dark mode", have a listen:

Transcript:

"One of the things you really should do at a very bare minimum if you do nothing else please support dark mode. And this is kind of a personal beg from me. As I said before I do get these floaters in my eyes, I can see perfectly well you know, I'm not blind or anything like that. I'm shortsighted which is why I have glasses but if you support dark mode you will make my life a lot easier. And other people that have visual  issues as well some people get migraines and things like that dark mode helps."

https://www.youtube.com/live/TL2YVio_eTo?si=GUzsPoZriiIdyfbj&t=1995

I never considered supporting dark mode

Until I watched this video, I never considered supporting dark mode in the current rewrite of my Zilch software. So I began looking into how to incorporate FMX styles. It was confusing at first. Then I got the hang of it. I decided to go with the "Air.Style" that comes with Delphi.

David Cornenelius' book "Fearless Cross-Platform Development with Delphi" and Andrea Magni's book "Delphi GUI Programming with Delphi" were big helps understanding FMX styles.

There were a couple of tweaks I had to make. The Air.Style is a vector style which means it does not use the bitmap designer. It is similar to how Cascading Style Sheets are used in web development. The graphic elements are drawn using SVG paths. 

FMX Main Menu component can't be styled 

The biggest surprise was the TMainMenu component. It turns out the FMX Main Menu component can't be styled. The Embarcadero FMX Style Viewer was showing a Main Menu that was styled how come my Main Menu wasn't styled?

fmx-style-viewer-air
FMX Style Viewer - Air.Style

I didn't want my application to have some stuff styled and some stuff not styled. Then I discovered FMX includes a MenuBar component which does take styling. And that is what is used by the FMX Style Viewer. So, I slowly and methodically swapped out the MainMenu component for the MenuBar component.

Always use the MenuBar for FMX desktop applications


FMX MainMenu vs MenuBar

My recommendation is to skip using the MainMenu component when developing FMX desktop applications and ALWAYS use the MenuBar component.

You will be happy. Your customers will be happy.

Enjoy!
Semper Fi
Gunny Mike
https://zilchworks.com