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