Conhecendo as Actions Widgets & Variables e Miscellaneous do Axure RP 6.5

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Veja neste artigo um pouco das Actions do tipo Widgets And Variables e Miscellaneous presentes no Axure RP 6.5. Mostraremos alguns exemplos e no artigo fonte estará um uso básico de cada uma delas.

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).

Janela Case Editor com as Actions do tipo Widgets and Variables selecionadas

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.

Widgets Button e Text Panel com os seus textos já alterados

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.

Janela Case 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.

Janela Set Variable and Widget Values. Ela diz que o valor da variável OnLoadVariable será igual a OnLoadVariable + 1

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:

Configuração da ação

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 ]]

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.

Exemplo do prótotipo mostrando que o botão Set Variable/Widget foi clicado 29 vezes

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.

Na opção Edit Selected Style é possível alterar as cores e fontes do widget quando este for selecionado

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.

Action Wait Time com a especificação em milisegundos

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.

Links

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?