Nesse artigo abordaremos um pouco sobre as Actions Widgets & Variables e Miscellaneous no software Axure RP 6.5. Para tal desenvolvimento desse artigo, faremos uma breve introdução de variáveis.
Uma introdução sobre o que são as Actions e outros tipos pode ser encontrada no artigo Conhecendo as Actions Links e Dynamic Panels do Axure RP 6.5.
Actions Widgets and Variables?
As Actions do tipo Widgets and Variables, como o próprio nome já diz, estão diretamente relacionadas às ações e eventos de Widgets e Variáveis. Algumas gerais (Enable Widget) e outras específicas (Enable Tree Node).
Figura 1: Janela Case Editor com as Actions do tipo Widgets and Variables selecionadas
As actions do tipo Widgets and Variables são as seguintes:
- Set Variable/Widget value(s);
- Scroll to Image Map Region;
- Enable Widget(s);
- Disable Widget(s);
- Set Widget(s) to Selected State;
- Set Focus on Widget;
- Expand Tree Node(s);
- Colapse Tree Node(s);
Para exemplificarmos a Set Variable/Widget Value(s) devemos ter ideia do que é uma variável.
O objetivo de uma variável em uma prototipação é somente um: persistir com uma informação por várias páginas. Ou seja, armazenar temporariamente aquele número, string, data, coordenadas X-Y, etc. para utilizá-la futuramente. Existem as variáveis locais, globais e funções.
Poderíamos dedicar um artigo somente para as variáveis, mas por hora, fiquemos com esse entendimento básico para seguirmos adiante, pois é o bastante para nosso objetivo neste artigo.
No menu Wireframe->Manage Variables... podemos criar novas variáveis e editar/excluir as variáveis existentes. Por padrão, visualizaremos somente uma: OnLoadVariable. Para o exemplo a seguir, trabalharemos com esta mesmo.
Criaremos um Widget do tipo Button e faremos com que a cada clique o valor da variável some mais um. Por exemplo, ao clicarmos 15 vezes no botão, a valor armazenado da variável, caso esta seja iniciada em 0, será 15.
Criarmos também um Widget Text Panel para mostrarmos nele o valor atual da variável.
Figura 2: Widgets Button e Text Panel com os seus textos já alterados
Antes de tudo, é necessária uma Label para o Text Panel para o identificarmos com facilidade daqui a pouco. Pode ser text_reload, por exemplo.
Agora, abriremos a janela Case Editor do botão selecionando-o e clicando um novo evento do tipo OnClick para ele.
Com a janela Case Editor aberta (Figura 3) selecionaremos a Action Set Variable/Widget Value(s) e depois o botão Open Set Value Editor.
Figura 3: Janela Case Editor
Ao clicar no botão Open Set Value Editor, abriremos a janela na qual tudo acontece: Set Variable and Widgets Values. Nela atribuímos valores às variáveis e widgets, utilizamos as funções, criamos variáveis locais, etc. Para o nosso exemplo, copiaremos [[OnLoadVariable+1]] no único campo disponível.
Figura 4: Janela Set Variable and Widget Values. Ela diz que o valor da variável OnLoadVariable será igual a OnLoadVariable + 1
Okay! Ainda não acabou. Apenas configuramos a variável, ainda falta mostrá-la em um Widget.
Então, de acordo com a Figura 4, clicamos no “+” para adicionar uma ação. Esta nova ação deterá das seguintes configurações:
Figura 5: Configuração da ação
E ao clicar em Edit Text... adicionaremos o seguinte código:
OnLoadVariable:[[OnLoadVariable]]
![Janela Enter Text. Aqui editamos o texto que ficará no widget no momento do clique. Uma variável é reconhecida quando está cercada pelos [[ e ]]](http://arquivo.devmedia.com.br/artigos/Carlos_Tiago/Actions_Widgets_Axure/Actions_Widgets_Axure6.jpg)
Figura 6: Janela Enter Text. Aqui editamos o texto que ficará no widget no momento do clique. Uma variável é reconhecida quando está cercada pelos [[ e ]]
Já configuramos a lógica do botão (ao ser clicado, será dado um auto-incremento à variável OnLoadVariable) e o Text Panel para mostrar o valor atual da variável.
Figura 7: Exemplo do prótotipo mostrando que o botão Set Variable/Widget foi clicado 29 vezes
As outras Actions não utilizam variáveis, logo, seu exemplo é mais simplificado.
A Scroll the Image Map Region, por exemplo, tem o seu uso relacionado ao Widget Image Map Region. Ao clicar em outro widget, a página rolará (vertical e/ou horizontalmente) até o onde está o Image Map Region.
As funções Enable/Disabled Widget se assemelham ao HTML quando deixamos um <select> ou <input> com/sem o atributo disabled.
Porém, a Set Widget to Selected State lembra as características do CSS quando um elemento tem o seu estilo alterado quando é clicado. Para exemplificar esta Action, devemos utilizar o Widget Button Shape, pois nele é possível alterar os estilos de acordo com o evento: Rollover, Mouse Down, Selected e Disabled.
Figura 8: Na opção Edit Selected Style é possível alterar as cores e fontes do widget quando este for selecionado
A Set Focus on Widget(s) se auto explica. Faz com que o Focus esteja com o widget selecionado.
Já as opções Expand Tree Node/Collapse Tree Node estão relacionadas ao Widget de nome Tree. Essas Actions podem ser atribuídas a um widget externo (um botão, um link, etc.), pois o próprio widget já vem habilitado com as opções expandir/recuar a tree.
Miscellaneous
Este grupo de Action é composto por apenas dois elementos: o Wait Time e o Other.
O sugestivo Wait Time coloca um intervalo (milissegundos) antes ou depois de outro evento. Para carregar uma página, por exemplo, e utilizar o Wait Time 1000ms no widget de disparo (antes do evento de abrir a página) significa que a página só será carregada após 1 segundo.
Figura 9: Action Wait Time com a especificação em milisegundos
A Action Other é utilizada na geração das Especificações. Ela poderá ser utilizada o Widget e seu evento. Ao testá-la em um protótipo abrirá um Popup com o seu texto.
Conclusão
Então pessoal, chegamos ao fim do nosso artigo. Nele podemos trabalhar com uma variável padrão (onLoadVariable), entender as Actions do tipo Widget And Variables e Miscellaneous. Foram exemplificadas algumas das principais Actions, mas todas estão contidas no arquivo fonte (*.rp) em anexo. Caso tenham dúvidas, sugestões ou críticas, comentem abaixo, pessoal! Abraço e até a próxima.
