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.
