Le nouveau design de macOS Tahoe s’invite dans vos applications 4D

Avec macOS Tahoe, Apple Inc. lance un nouveau langage visuel appelé Liquid Glass. Dans cette version, nous adoptons ce style d’interface afin de rester en phase avec les dernières évolutions du design de macOS.

À partir de 4D 21 R3, vos applications de bureau 4D adoptent automatiquement cette nouvelle interface Liquid Glass. Aucune mise à jour des formulaires, modification du code ou refonte n’est nécessaire.

Pour faciliter cette transition, 4D a adapté son rendu afin de se conformer aux nouvelles contraintes Liquid Glass introduites par macOS. 4D prend en charge la complexité de l’évolution de l’interface utilisateur, permettant ainsi à vos applications de rester à jour avec un minimum d’effort. Les utilisateurs Mac bénéficient ainsi d’une interface cohérente avec le style visuel actuel du système, sans effort supplémentaire de la part des développeurs.

Qu’est-ce que Liquid Glass ?

Selon Apple, Liquid Glass est un nouveau style de rendu d’interface basé sur des matériaux translucides, un flou dynamique et des effets d’éclairage subtils. Ces éléments s’adaptent au contenu en arrière-plan et apportent une plus grande sensation de profondeur tout en préservant la lisibilité.

Intégration native et automatique

Le rendu Liquid Glass est géré directement par macOS. 4D exploite le moteur graphique du système pour appliquer automatiquement ces mises à jour visuelles aux fenêtres d’application et aux contrôles standard.

Aucune configuration, aucun code supplémentaire ni aucune migration de formulaire n’est nécessaire. Lorsqu’une application 4D s’exécute sur macOS Tahoe, elle bénéficie du rendu fourni par le système.

Cette approche garantit que vos interfaces restent conformes aux normes du système d’exploitation tout en préservant vos investissements existants.

Conseils de transition lors de l’adoption de Liquid Glass dans les applications 4D

Bien que Liquid Glass soit appliqué automatiquement, la révision de certains éléments de l’interface utilisateur peut aider à maintenir la cohérence visuelle et l’intégrité de la mise en page.

Boutons

Portez une attention particulière aux variantes de boutons. Dans Liquid Glass :

• Les boutons de variante standard ont une apparence carrée.
• Les boutons de la variante « Large » ont une forme plus arrondie.

Le changement visuel se produit avec une différence de hauteur d’un seul pixel. Si vos formulaires contiennent des séquences de boutons dont les hauteurs sont légèrement incohérentes, vous pourriez voir un mélange de styles carrés et arrondis.

Prenez le temps de vérifier la hauteur des boutons afin de garantir un alignement visuel cohérent.

Boutons radio et cases à cocher

Les boutons radio et les cases à cocher apparaissent légèrement plus grands sous Liquid Glass.

Vérifiez l’espacement et l’alignement autour de ces contrôles pour garantir la lisibilité et l’équilibre visuel avec les nouvelles tailles des contrôles.

Listes déroulantes

Avec Liquid Glass, les listes déroulantes utilisent désormais un rendu translucide. Ainsi, des éléments d’arrière-plan qui étaient auparavant invisibles peuvent apparaître à travers la liste déroulante.

Si vos formulaires contiennent des objets qui se chevauchent, examinez attentivement ces zones. Vous devrez peut-être ajuster la visibilité des objets d’arrière-plan à l’aide de code afin de préserver la clarté et d’éviter l’affichage d’objets indésirables.

Adaptation de votre interface utilisateur avec CSS et le thème FORM

Bien que Liquid Glass soit appliqué automatiquement, 4D fournit également des outils pour affiner votre interface si nécessaire.

Vous pouvez utiliser des requêtes média CSS pour adapter votre style en fonction du thème de formulaire actuel. Cela est particulièrement utile pour gérer les différences entre macOS Classic, macOS Liquid Glass, Windows Classic et Windows Fluent UI.

@media (form-theme: liquid-glass) {
    .panel {
        borderRadius: 10px;
        fill: #F5F7FA;
        stroke: #CDD6E0;
    }
}

@media (form-theme: mac-classic) {
    .panel {
        borderRadius: 4px;
        fill: #F2F2F2;
        stroke: #D0D0D0;
    }
}

Dans cet exemple, l’apparence de la classe « .panel » est automatiquement ajustée en fonction du thème de formulaire actif, ce qui permet à votre interface de s’adapter aux caractéristiques visuelles de Liquid Glass ou du style macOS classique sans logique supplémentaire.

De plus, la commande FORM theme vous permet de détecter le mode de rendu actuel par programmation. Elle renvoie désormais des valeurs telles que LiquidGlass ou Classic, ce qui facilite l’ajustement du comportement lorsque cela est nécessaire.

Cette approche vous offre une grande flexibilité : la plupart du temps, aucune modification n’est nécessaire, mais vous gardez un contrôle total lorsque des ajustements précis s’imposent.

À propos de la désactivation de Liquid Glass

Il existe une distinction importante à comprendre.

Pour les applications 4D et 4D Server fonctionnant avec 4D 21 R3 sur macOS 26 Tahoe, Liquid Glass ne peut pas être désactivé. Le rendu est géré en natif par le système d’exploitation et s’applique automatiquement.

Cependant, pour les applications basées sur un moteur, il est possible de désactiver Liquid Glass pendant une phase de transition. Pour ce faire, ajoutez la clé « UIDesignRequiresCompatibility » au fichier « Info.plist » de l’application. Cela permet à l’application du moteur de conserver le style visuel précédent pendant que vous adaptez votre interface.

Cette flexibilité peut faciliter les migrations. À long terme, l’adoption du rendu natif du système garantit une meilleure cohérence visuelle et une meilleure intégration.

Conclusion

Grâce à la prise en charge de Liquid Glass sur macOS Tahoe, les applications 4D adoptent automatiquement le style visuel actuel du système, sans nécessiter de modifications du code ou des formulaires.

Cette intégration native met en évidence l’un des principaux avantages de 4D : les applications évoluent avec les normes d’interface utilisateur du système d’exploitation avec un minimum d’effort, alors que d’autres technologies peuvent nécessiter une refonte ou une adaptation manuelle.

Les développeurs peuvent ainsi se concentrer sur les fonctionnalités tout en proposant des interfaces visuellement à jour.