requer um equilíbrio cuidadoso entre desempenho, facilidade de manutenção e clareza.
Ao longo deste documento, exploraremos as principais abordagens para alcançar esse equilíbrio, tais como:
Tipos de abordagem
Casos de uso de abordagem
Como implementar cada abordagem de forma eficiente
Esses conceitos vêm originalmente do mundo do web design e aplicativos multiplataforma, mas agora são essenciais em HMIs industriais, onde o mesmo aplicativo pode ser exibido em dispositivos muito diferentes.
Abordagem escalável:
Uma abordagem escalável em uma interface consiste em redimensionar proporcionalmente, mantendo o layout, o posicionamento e a legibilidade, independentemente da resolução do dispositivo.
Por exemplo: Um layout projetado em 1920×1080 que também se encaixa corretamente em 1280×720 ou 3840×2160.
Abordagem adaptável:
Uma abordagem adaptativa em uma interface consiste em ajustar seu layout com base no dispositivo ou resolução, carregando diferentes estruturas de acordo.
Por exemplo: Um painel que é exibido compacto em um tablet e expandido em um PC com painel industrial.
Abordagem responsiva:
Uma abordagem responsiva em uma interface reorganiza seu conteúdo em tempo real, dependendo do espaço disponível, sem alternar páginas.
Exemplo: Uma grade que muda de 4 para 2 colunas conforme a janela é redimensionada.
Quando usar cada abordagem
A tabela abaixo mostra a abordagem recomendada para cada cenário de interface:
Por exemplo, para criar um cabeçalho, use um objeto
Painel
e defina seu alinhamento horizontal como
Alongar
. Isso garante que, independentemente da resolução final, o objeto abranja toda a largura disponível.
IMPORTANTE:
A atribuição de tamanhos fixos a objetos de contêiner impede que a interface seja dimensionada em diferentes resoluções de tela. Atribua tamanhos fixos somente se necessário.
Tamanho
Resultado
800px
1280px
DICA:
Defina o alinhamento do contêiner como
Alongar
para permitir a distribuição automática de espaço com base na resolução. Mesmo que o aplicativo seja desenvolvido em uma resolução fixa, os elementos serão escalados em tempo de execução para se adaptarem ao contêiner.
Tamanho
Resultado
800px
1280px
Implementar uma abordagem adaptativa
Ao projetar para resoluções muito diferentes (por exemplo, 1920x1080 vs. 480x272), você deve criar layouts separados. Use o
controle Carregador de painel
para carregar dinamicamente diferentes layouts com base na resolução.
Para determinar a resolução da tela, use as propriedades
Largura
e
Altura
do
MainWindow
. Defina
Alterar regra de modelagem
dessas propriedades como
Obrigatório
para garantir que esses valores estejam disponíveis em tempo de execução.
IMPORTANTE:
O uso do recurso
Alterar regra de modelagem
destina-se apenas a usuários avançados. Você só poderá exibir esse recurso se tiver ativado o
Modo avançado
no painel
Opções do FactoryTalk Optix Studio
.
Limite o uso desse recurso a esse escopo específico para evitar comportamentos inesperados.
DICA:
É uma boa prática armazenar valores calculados em variáveis auxiliares dentro do
MainWindow
, especialmente se eles forem usados em vários lugares. Isso evita a repetição de
Vínculos dinâmicos complexos
compostos por vários conversores, reduzindo a contagem de nós e melhorando o desempenho.
Implementar uma abordagem responsiva
Além de usar o
Carregador de painel
, a visibilidade condicional é fundamental para um design responsivo. Por exemplo, um menu lateral só pode aparecer acima de uma determinada largura de tela, enquanto um botão de alternância aparece abaixo desse limite.
O
LayoutDeGrade
é essencial para organizar o conteúdo dinamicamente. Permite definir o número de linhas e colunas.
