Escolha o estilo de introdução de dados nativo adequado para a sua interface no macOS

Os sistemas operativos modernos continuam a evoluir os seus controlos nativos para proporcionar uma experiência de utilizador mais consistente e aperfeiçoada. Com a introdução do Liquid Glass no macOS, os objetos de entrada ganham uma nova aparência, com cantos mais arredondados e mais espaço entre o texto e a borda.

Embora este novo aspeto se integre naturalmente nas interfaces mais recentes do macOS, também pode ter um impacto nas aplicações 4D existentes. Um preenchimento interno mais generoso significa que um objeto de entrada pode ficar mais alto e apresentar menos texto com a mesma largura.

A partir do 4D 21 R5, pode controlar esta alteração com um novo estilo de borda: «System rounded».

Duas aparências nativas para objetos de entrada

No macOS, a Apple disponibiliza duas aparências nativas para os objetos de entrada: a aparência tradicional de «cantos quadrados» e a aparência mais recente de «cantos arredondados».

O 4D disponibiliza agora ambas as aparências através da propriedade de estilo de borda:

• «System» mantém a aparência nativa tradicional de entrada.
• «System rounded» utiliza a aparência arredondada mais recente, com a cor de borda definida pelo sistema e um preenchimento interno aumentado.

Isto significa que pode escolher a aparência que melhor se adequa ao design existente da sua aplicação.

Ter ambos os estilos disponíveis permite-lhe adotar a nova aparência de forma progressiva, em vez de ter de redesenhar imediatamente os formulários existentes.

Escolha o seu estilo

Pode selecionar «Sistema arredondado» diretamente a partir da propriedade de estilo de borda de um objeto de entrada no Editor de Formulários.

Isto facilita a escolha da aparência certa para cada formulário, quer esteja a atualizar uma aplicação existente ou a conceber uma nova.

A mesma opção também está disponível em tempo de execução com OBJECT SET BORDER STYLE.

OBJECT SET BORDER STYLE(*; "myInput"; Border System Rounded)

Também pode definir o estilo da borda utilizando CSS, o que permite aplicar diferentes aspetos nativos consoante o tema do formulário:

@media (form-theme: mac-classic) {
  input {
    borderStyle: system;
  }
}

@media (form-theme: liquid-glass) {
  input {
    borderStyle: systemRounded;
  }
}

Isto permite-lhe alternar automaticamente entre as aparências quadrada e arredondada, sem ter de alterar cada objeto de entrada individualmente.

Para ir mais longe, pode combinar estes estilos de borda com preenchimento personalizado para imitar outros controlos nativos do macOS, como um campo de pesquisa ao estilo do Finder com espaço para um ícone de lupa.

Uma experiência nativa em todas as plataformas

O «System rounded» foi concebido para respeitar a aparência nativa de cada plataforma.

No macOS, apresenta o novo estilo de entrada arredondado.

No Windows, o «System rounded» utiliza a mesma aparência nativa que o «System». No Windows Clássico, os objetos de entrada têm cantos quadrados; na Fluent UI, os seus cantos são ligeiramente arredondados.

Pode, portanto, utilizar «System rounded» em formulários multiplataforma sem ter de introduzir lógica específica da plataforma apenas para preservar uma aparência nativa.

Uma transição suave para o novo aspeto do macOS

O Liquid Glass traz uma nova aparência nativa aos objetos de entrada do macOS, mas não é necessário redesenhar os seus formulários existentes para a adotar.

Com «Sistema» e «Sistema arredondado», pode escolher o estilo de entrada nativo que melhor se adapta à sua aplicação e fazer a transição para a nova aparência do macOS ao seu próprio ritmo.

Pronto para dar um novo aspeto aos seus objetos de entrada? Consulte a documentação para saber mais sobre a nova propriedade de estilo de borda e como utilizá-la nos seus formulários.