Axure RP - Condição Lógica

Neste capítulo, discutiremos a lógica condicional usada no Axure RP.

If - Then - Else in Axure

Assim como qualquer outra ferramenta de programação, o Axure também oferece suporte à lógica condicional para criar interações aprimoradas em protótipos. Depois que você estiver familiarizado com a forma de fornecer interações, fornecer lógica condicional para as interações é o próximo nível.

A seguir está o fluxo simples e conciso para lógica condicional -

Se, um widget / tela em particular for clicado
Em seguida, execute uma ação / interação específica
Caso contrário, mantenha / altere o estado do widget ou da tela

Para entender isso melhor, vamos retomar nosso fluxo do exemplo anterior. Para isso, é necessário que conheçamos o Condition Builder.

O Construtor de Condições

Clique duas vezes em qualquer uma das interações, por exemplo OnClick. Você poderá ver o Editor de Caso conforme mostrado na imagem a seguir.

Clique no botão - Adicionar condição próximo ao nome do caso. Ele será mostrado abaixo na caixa de diálogo.

Conforme mostrado na Descrição, o criador de condição criará o fluxo If-Then-Else de acordo com as condições escolhidas na seção de condição.

Vamos criar uma condição neste botão.

Queremos mostrar o botão ocultar imagem, uma vez que o painel dinâmico está visível. Tornamos o painel dinâmico visível no clique do botão Mostrar imagem no exemplo anterior. Agora, vamos deixar outro botão Ocultar imagem visível.

Feche o criador de condições e volte para a área de design.

Insira o botão Ocultar imagem das Bibliotecas nas bibliotecas comuns. Para reiterar, é uma prática recomendada nomear o elemento de interface do usuário logo após inseri-lo na área de design.

Clique com o botão direito do mouse no botão Ocultar imagem e clique em Definir oculto. O botão ficará oculto da área de design, conforme mostrado na imagem a seguir.

Agora, vamos voltar às interações do botão Mostrar imagem.

Primeiro, nas interações do botão Mostrar imagem, clique duas vezes no Caso 1 e você poderá ver o editor de caso. Use a ação Mostrar / Ocultar para selecionar hideImageButton e definir sua visibilidade para mostrar.

Da mesma forma, usando a ação Mostrar / Ocultar, selecione showImageButton e defina sua visibilidade para ocultar.

Gerenciamos a visibilidade do botão Ocultar Imagem de forma que, ao clicar no botão Mostrar Imagem, o botão seja mostrado.

Uma condição completa será mostrada na imagem a seguir.

Deixe-nos construir a condição.

Na área de design, clique no botão Ocultar imagem. Na seção Inspetor, clique em Adicionar caso.

Em Adicionar caso, clique no botão Adicionar condição. De acordo com o plano de fundo fornecido anteriormente, crie o conjunto de condições usando os valores suspensos no Construtor de Condições.