Pular para o conteúdo principal

Estados de Interface

Neste tutorial, iremos aprender como utilizar estados de interface, também chamados de UI States.

Introdução​

Enquanto alguns dados devem ser persistidos em tabelas, como informações de usuários, produtos, etc., outros dados, como indicadores de carregamento (loading), são temporários e devem ser mantidos apenas enquanto o usuário interage com a aplicação. Esses dados temporários são chamados de estados de interface, ou UI States.

Criando um UI State​

Os UI States são definidos no parâmetro State Definitions dos Blocks. Para criar um novo estado:

  1. Clique em State Definitions.
  2. Clique em + Add Item.
  3. Clique no estado que foi adicionado para editá-lo.
  4. Em Key, digite o nome do estado.
  5. Em Component, selecione o tipo desse estado. Por exemplo, data2-core-primitives@Boolean para um estado que pode ser true ou false.
  6. Em Initial Value, coloque o valor inicial do estado.

Para acessar um UIState, utilizamos o componente data2-core-types@Getter com Module como UIState e Prop como o Block que contém o estado, e State Prop como o nome do estado.

Para alterar um UIState, utilizamos o componente data2-core-types@Setter com Module como UIState, Prop como o Block que contém o estado, State Prop como o nome do estado e Value como o novo valor.

Exemplo: Botão com estado Loading​

Neste exemplo, criaremos um botão com estado de loading. O botão terá um UI State chamado loading de valor false e tipo data2-core-primitives@Boolean. No On Click desse botão, mudaremos o estado loading para true e, após 2 segundos, voltaremos o estado para false.

Passo a Passo​

  1. Crie um Artboard e desenhe um Block que servirá botão.
  2. Selecione o Block que foi desenhado.
  3. Clique em State Definitions. Adicione um State Definitions e crie um estado chamado loading com tipo data2-core-primitives@Boolean e valor false.
  4. Volte ao início do Inspector clicando em < Inspector.
  1. Em On Click, clique no f() e selecione Series.
info

O Series é um componente que executa uma lista de ações em sequência. Cada ação é executada após a anterior ser concluída.

  1. Clique no On Click e em Actions para navegar para a lista de ações.
  2. Clique em + Add Item. Mude o tipo dela para Setter clicando em f() e selecionando setter.
  3. Clique para navegar para a primeira ação. Em Module, selecione UIState.
  4. Em Prop, clique em Pick Component e selecione o Block que contém o estado loading. Se você não conseguir clicar no nome do estado, não se preocupe, depois de selecionar o Block, é possível selecionar o estado que você deseja adicionar através da lista em State Prop.
  5. Em Value, clique no f(), selecione Boolean e coloque o valor como true (habilite o controle).
  6. Volte para a lista de ações.
  7. Clique em + Add Item para adicionar outra ação.
  8. Mude o tipo dela para Delay clicando em f() e selecionando Delay.
  9. Clique para editar a ação. Em Delay, coloque 2000 (2 segundos).
  10. Volte para a lista de ações.
  11. Adicione outra ação.
  12. Agora podemos copiar a primeira ação que adicionamos. Passe o mouse em cima da ação e aperte Ctrl + C (ou CMD + C no Mac) para copiar.
  13. Coloque o mouse em cima da última ação e aperte Ctrl + V (ou CMD + V no Mac) para colar.
  14. Clique nessa ação e altere o Value de true para false.

Agora, iremos utilizar o valor de loading para mostrar um texto diferente no botão. Para isso, vamos adicionar um Text ao Block e mudar o texto de acordo com o valor de loading.

  1. Volte para a raiz do Inspector.
  2. Mude o tipo de Text para If.
  3. Clique no If para editar. Em Compare, clique em f() e clique em ui ao lado do getter. Isso fará com que o Getter veio pré-preenchido com o UIState.
  4. Clique no Compare para editar o Getter, e selecione o Block que contém o estado loading. Em State Prop, não esqueça de selecionar loading.
  5. Agora, volte para o If. No Then, teremos o texto quando o loading for true, portanto, coloque Carregando....
  6. No Else, coloque Clique aqui.
  1. Salve o Block clicando no botão de Save do Inspector ou desselecionando o Block.
  2. Clique no botão Preview do Artboard para ver o resultado.

Resultado​