Principais abordagens

A otimização de aplicativos
FactoryTalk® Optix™
 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:
Cenário
Abordagem recomendada
Procedimento de execução
Resoluções diferentes, mas mesmo layout
Escalável
Layout otimizado para cada dispositivo
Adaptativo
Layout flexível dentro da mesma página
Responsiva

Implementar uma abordagem escalável

Você pode facilmente obter escalabilidade no
FactoryTalk® Optix™
 usando as propriedades de alinhamento de contêineres.
OBSERVAÇÃO: Consulte Configurar um layout em escala
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.
Você também pode usar os recursos
LayoutVertical
 e
LayoutHorizontal
 definindo o atributo
Quebra automática
 como
Ativo
 no painel
Propriedades
.
AVISO: Isso pode causar estouro de layout. Nesse caso, envolva o
LayoutDeGrade
 em um
ExibiçãoDeRolagem
 para manter a visibilidade total.
Dê sua opinião
Tem dúvidas ou comentários sobre esta documentação? Por favor, envie seu comentário aqui.
Normal