Trabalhando com as condicionais no Axure 6.5 RP

Nesse artigo nós entenderemos o funcionamento das condicionais no Axure RP 6.5, especialmente as condicionais usadas para analisar valores de variáveis. O protótipo desenvolvimento para exemplificar tais funcionalidades demonstra que questões lógicas também são importantes para justificar o uso da técnica de prototipagem, e não somente interfaces, layouts e wireframe.

As condicionais e o Exemplo

Podemos definir as condicionais de um Widget no Axure através da janela Case Editor e clicando no link Add Condition.

Figura 1: Janela Case Editor com as Actions no painel do lado esquerdo e o link Add Condition ao centro em cima

Figura 2: Janela Condition Builder. É nela que criaremos nossas condições para que definiremos as condições (afirmações)

Existem 12 tipos de condições. Para este artigo, focaremos naquelas que trabalham com valores numéricos de variáveis.

O nosso protótipo de exemplo será um sistema que, com as notas de um aluno, será capaz de dizer se ele está aprovado com louvor, aprovado e reprovado.

As regras

• O aluno será aprovado com louvor se obtiver uma média de notas maior ou igual a 9;
• O aluno será aprovado se obtiver uma média de notas maior ou igual a 6 menor que 9;
• O aluno será reprovado se obtiver uma média de notas menor que 6.

As variáveis

Por hora, criaremos uma variável global: MediaFinal. A MediaFinal armazenará o resultado da divisão do somatório das quatro notas por quatro.

Para criá-la, iremos no menu Wireframes->Manage Variables.

Figura 3: Janela Manage Variables com as variáveis MediaFinal já criada

Os widgets

Os widgets que utilizaremos são 4 do tipo text field e 2 buttons. Além de text panel’s para ilustrar o nosso exemplo.

Não devemos esquecer de nomear cada um desses widgets.

Figura 4: Formulario do protótipo

Abaixo do botão Ver resultado mostraremos um texto se o aluno foi ou não aprovado.

Para os text field das notas, utilizamos o padrão de label:

• input_nota1, input_nota2, input_nota3 e input_nota4.

Text Panel com:

• loading, resultado_media_final e resultado_frase_aluno

E para os botões:

• botão_fazer_calculo e botao_ver_resultado.

Observação: Podemos adicionar um text panel abaixo do botão Ver Resultado para utilizarmos a Action Wait Time e dar a impressão de processamento. Isso fica a critério, mas estará no arquivo fonte com a label loading já citada acima.

A lógica

Essa parte é a mais importante do desenvolvimento do protótipo. Devemos escolher um ou mais widgets para centralizar as ações e assim gerar o resultado esperado. No nosso exemplo, utilizaremos os 2 botões: Fazer Cálculo e Ver Resultado. E ao clicarmos no Fazer Cálculo, a lógica se iniciará assim:

• Mostra um widget do tipo text panel com o texto “aguarde”;
• Aguarda 3 segundos;
• Desabilita o Widget “Aguarde”;
• Pega e soma os valores dos input das notas, divide-as por 4 e armazena na variável MediaFinal;
• Habilita o botão Ver Resultado.

O botão Ver Resultado fará o controle:

• Mostrará a MediaFinal no Widget resultado_media_final
• Se a variável MediaFinal for maior ou igual a nove, mostra no Widget resultado_aluno a frase Aprovado Com Louvor.
• Se a variável MediaFinal for entre 6 e 9, mostra no Widget resultado_aluno a frase Aprovado.
• Se a variável MediaFinal for menor que 6, mostra no Widget resultado_aluno a frase Reprovado.
• Caso nenhum dos casos acima sejam aceitos (uso de virgula e letras), mostraremos um popup de erro (está no código-fonte).

Configurando os Widgets

Com a lógica entendida, vamos fazer as interações do botão Fazer Cálculo.

Figura 5: Widget Properties do Botao Fazer Cálculo

Criamos um Case OnClick chamado Fazer Cálculo que será composto por 5 actions:

• A primeira escreverá o texto “Aguarde...” no widget Loading;
• Wait 3000ms para ilustrar um tempo;
• A terceira apagará o texto “Aguarde...” do widget Loading;
• A quarta e mais importante vai fazer o cálculo da média das 4 notas e armazenar na variável MediaFinal.

A Action é Set Variable/Widget Value(s) e abriremos o Open Set Value Editor

Com ele aberto seguiremos as opções da figura abaixo (Value of Variable, MediaFinal, value);

Figura 6: Janela Set Variable and Widget Value

No campo em branco, vamos ao Fx montar a função;

Ao clicar em Fx, se abrirá a janela chamada Edit Text, nela possamos inserir as variáveis já existentes, bem como utilizar funções, montar equações e criar variáveis locais.

Figura 7: Janela Edit Text

No espaço Local Variables criamos 4 variáveis locais (funcionam somente dentro da própria Action) e cada uma armazena o valor de cada nota do aluno. No campo de cima, escrevemos a função [[(LVAR1+LVAR2+LVAR3+LVAR4) / 4]] que somará as 4 variáveis e dividirá por 4. Todos os colchetes e parênteses devem estar presentes. Esta Action está finalizada.

• A última Action do Case Fazer Cálculo habilitará o botão Ver Resultado, que por padrão vem bloqueado.

Já o Widget botão Ver Resultado terá suas interações conforme a figura abaixo.

Figura 8: Bloco Widgets Properties do botão Ver Resultado

No código-fonte do exemplo existe uma última condição, para quando as notas vierem com virgula ou letra, pois com elas a conta dará erro. Focaremos nos 3 principais: Aprovado com Louvor, Aprovado com Ressalvas e Reprovado.

Vamos primeiro editar as condições. Depois suas Actions, ok?

No primeiro, abriremos a Janela Condition Builder e a editaremos as suas opções de acordo com a regra do Case Aprovado com Louvor, ou seja, MediaFinal Maior ou Igual a 9. Logo, as opções serão Value of Variable – MediaFinal - is greater or equals - value e no campo em branco digitamos 9.

Figura 9: Condition Builder para o Case Aprovado com Louvor

Notamos que existe a opção Satisfy. Ela, na verdade, mostra que o resultado só será verdadeiro se todas as condições forem (all, conjunção, e, and) ou o resultado para ser verdadeiro basta que uma seja (any, disjunção, ou, or).

Já para o segundo (Aprovado) é um pouco diferente, pois são duas condições:

• Menor que 9 e
• Maior ou igual que 6.

Figura 10: Condition Builder para o Case Aprovado com Ressalvas

Neste caso, o Satisfy não poderá ser Any pois as duas condições têm que ser verdadeiras. Caso o aluno tenha uma média de 5, por exemplo, ele é aceito na primeira condição mas não na segunda. Logo, não basta uma, devem ser as duas aceitas – Satisfy All.

Para ele ser reprovado, deve respeitar a condição abaixo:

Figura 11: Condition Builder para o Case Reprovado

Pronto, agora que já criamos os cases e suas condições, vamos para as Actions. A função delas para este widget (botão Ver Resultado) será bastante simples: mostrar a variável MediaFinal e o texto referente aos 3 Cases.

As Actions são praticamente idênticas. Exemplifico abaixo as Actions referentes ao Case Aprovado com Louvor.

São duas Actions Set Variable/Widget Value(s). A primeira alterará o widgets resultado_media_final e a segunda o resultado_frase_aluno.

Figura 12: Actions para o aluno Aprovado com Louvor

Entendemos até este ponto que a variável MediaFinal do aluno foi maior ou igual a 9, preenchendo assim a condição para entrar no Case Aprovado com Louvor e os dois widgets acima (resultado_media_final e resultado_frase_aluno) terão seus textos diferenciados no seu respectivo botão Edit Text.

Figura 13: Janela Enter Text do Widget resultado_media_final

Note que existem configurações de fonte e estilos e a variável está dentro de duplos colchetes. A fonte está amarela pois na página o fundo é preto.

Figura 14: Janela Enter Text do Widget resultado_frase_aluno

Para os outros Cases, alteraremos somente o texto desta última janela.

Conclusão

Então pessoal, chegamos ao fim de mais um artigo. Nele podemos perceber que a prototipagem não abrange somente questões de interface ou layout, mas a parte lógica também tem sua importância. Utilizamos variáveis globais e locais, bem como entendemos um ponto importante diante de várias condições - Satisfy all ou any. É isso. Até a próxima.

Leia mais sobre o Axure RP 6.5

• Introdução a prototipação e apresentação do Axure RP 6.5
• Criando o primeiro protótipo no Axure 6.5 RP
• Conhecendo as Actions Links e Dynamic Panels do Axure RP 6.5