Mario Guzman republishes Mac HIG

Mac OS X HIG, some useful details in here.


The sudden realisation that this :

…implies that the WINDOW size must change in response to a language change.
You can only balance this way once you know the size of the widest texts, both left and right.

If your use swift pour macOS
Cocoacompose is great for create settings windows

1 Like

Or SwiftUI will do that automatically for you.

1 Like

True but if dislike SwiftUI :slight_smile:

1 Like

Yass, this is gold. The spacing notes I always wanted!

1 Like

The canonical example for me was always a Save button. Save in English = Sauvegarder in French, nearly a tripling in # of characters. Back when I did an OS9 version of one of my UIs, I solved it by consulting a DB table of words and phrases. If there was a match, it had been translated, and I would find the longest in characters of all languages, scoring capital letters over lower case by some rough factor I came up with, and then sizing the control for the largest score. Wasn’t perfect in theory, but worked out great in practice.

I could have simply sized it by the current language’s translation text for the control, but the spec required the ability to change languages on the fly without restarting; also performance limitations of the time demanded I design everything statically for the worst case and then just insert the desired text. It was a visual compromise but this was an internal use product and the users were all marketroids anyway.

I believe auto layout will as well

Or you do a LOT of grunt work and recalculate all this on language change for yourself (like in Xojo)

1 Like

You still have options.
Declarative UI is a mind bender, I think it does help if you have experience writing HTML, but even then, understanding how to do things can take a while. I started to casually learn it earlier on in the year, and I’ve spent the last 3 weeks really trying to learn it and there’s still so much I don’t get, but I am becoming more and more capable.

If you don’t like SwiftUI, but still would like to learn Declarative UI, Google have Flutter, Facebook have React Native and I seem to recall @thorstenstueker says you can use FXML with Java.

If you’re thinking about Xojo options, there might be a pre-made library somewhere, but basically it is up to you to handle it. Last time I tried, I got so frustrated with Xojo, because they refuse to expose system APIs that would help you better resize GUI elements, instead showing how little they understand as they say you can just use the graphics class…

I thought you’d like it.

I think it is the Uno framework that has created a C# declarative syntax as an alternative to XAML.

And I suppose one must consider XAML itself as an alternative, although something about it really puts me off.

1 Like

I just made a quick demo to illustrate how Declarative UI can automatically adjust the UI for different languages. You’ll have to excuse the translations as I can’t write in German or Mandarin and therefore used Google Translate, but for I believe for the purpose of this demo, it should suffice.

As you can see, the only thing I did differently was to supply different labels, in a proper app you wouldn’t do that, you’d instead supply alternative strings in the correct format within the application package and let the OS deal with it.

I also want to make clear that I’m still learning, so there are probably better ways to do this, especially if I want to use one codebase for all devices.

1 Like

Correct, JavaFX comes with FXML Support and also the SceneBuilder, a Drag and Drop UI Designer for JavaFX-fxml. It is an adult system and works well. With complete css Support for the UI. Makes in my eyes real fun. Can be used for Desktop, Web and Mobile.


Bonus: in Xcode preview, with SwiftUI, the UI look for different languages can be checked without touching user preferences.

1 Like

You can also use the SizeToFit method to adjust the control based on its current caption, then do maths to layout your controls on the window.

Is there a fix in declarative UI for making sure the Save button isn’t smaller than Cancel as Mario suggests?

1 Like

Good Stuff. Has anybody done this for Web?

There are modifiers for every property of a view object that allow to fine-tune size, color ….

I haven’t found an automatic option for this yet. Sometimes I need to know how to search for a SwiftUI answer and sometimes it feels like no-ones uses it for Mac.

I bizarrely found that if you use a toolbar on a sheet, it gets converted to buttons at the bottom, maybe I should look into that more.

Just watched this video which shows you how to create a custom HStack that will keep all the buttons the same width to the widest button in the stack.

Using that as a base, I could now create a custom HStack that ensures the default button is at least the same width as the cancel button :slight_smile:

1 Like