O que são as Actions?
As Actions do Axure RP 6.5 são os resultados que podemos atribuir à widgets, painéis, páginas e variáveis a partir de movimentos, eventos, carregamentos e valores. É uma espécie de “Faça isto quando acontecer isso” ou “não faça isto quando acontecer isso” ou então “não faça isso e isto ou faça aquilo quando acontecer isto, mas não acontecer isso e aquilo”. Tudo certo?
Figura 1: Ciclo das Actions
Resumindo e entendendo, as Actions podem ser acionadas logo no carregamento da página ou diante de uma interação de um Widget, bastando selecioná-lo e clicando duas vezes no tipo do evento (onClick, onMouseEnter, onFocus, etc.) no bloco Widget Properties. Neste exemplo trabalharemos sempre com evento onClick, ou seja, as Actions só serão percebidas quando clicarmos nos widgets.
Figura 2: Evento onClick de um widget selecionado. Com o duplo clique, se abrirá a janela Case Editor contendo todas Actions
Classificação de Actions
Uma Action é classificada quanto a natureza da ação que se quer realizar:
- Links: definem se o evento abrirá ou fechará uma página interna do protótipo ou externa (http://www...), se abrirá na janela atual, pop-up, nova janela/aba ou frame.
- Dynamic Panels: definem a reação que um ou mais painéis dinâmicos tomarão. Alteram o estado, a visibilidade, a posição e sobreposição (camada) dos painéis.
- Widgets/Variables: semelhante ao anterior, porém, focado aos Widgets e Variáveis. Definem valores para variáveis e widgets, scroll na página, focus em widgets, eventos em tree também.
- Miscellaneous: eventos com o tempo e Actions customizada.
A partir de agora, faremos alguns exemplos demonstrando o uso e a consequência das principais Actions do tipo Link e Dynamic Panel.
Links
Essas são as Actions mais simples de se entender e exemplificar. São sete no total:
Open Link in
- Current Window
- New Window/Tab
- Popup Window
- Parent Window
- Frame
- Parent Frame
Close Current Window
As seis primeiras servem para abrir páginas, sendo diferentes no “onde abri-las” e uma única para fechar a página atual.
Para as três primeiras - Current Window, New Window/Tab e Popup Window - não existe tantos mistérios assim: abrir na página atual, em nova janela/aba ou em um popup, respectivamente. Logo podemos nos concentrar nas três seguintes: Parent Window, Frame e Parent Frame.
Parent Window funciona corretamente se for iniciada a partir de uma página-mãe ainda aberta. Por exemplo, estamos na página 1 que clicando em botão abra uma página 2 em uma aba ou em um pop-up. Se na nova página 2 existir um botão Parent Window, então ao clicar nele a página 1 será executada/atualizada.
Frame e Parent Frame são semelhantes, porém, dependem de um Widget particular: Inline Frame1.
Figura 3: Inline Frame. Widget requerido para utilizar as Actions Open Link(s) Frame e Open Link in Parent Frame
O Open Link(s) Frame serve para abrimos uma página dentro do Inline Frame contido na página. E o Open Link in Parent Frame funcionará corretamente se a página atual estiver dentro de um frame. Assim, ao iniciar o evento, a página que contém o frame alterará.
Figura 4: Ao clicar em Atualizar Parent Frame, o frame ficará em branco pois a página é recarregada (por ser leve, não será notado) e o estado inicial do frame é branco, sem nada
Dynamic Panels
Esse grupo de Actions é um pouco mais complexo pois precisamos entender o que é um Dynamic Panel e como ele funciona.
Um Dynamic Panel ou painel dinâmico é aquele widget ou conjunto de widgets que podem variar de estado conforme a necessidade. Esse estado pode estar relacionado à visibilidade, posição, sobreposição, estilos e cores.
Nós podemos converter o widget rectangle em um painel dinâmico clicando com o botão direito do mouse, Convert->Convert to Dynamic Panel.
Figura 5: Ao converter um widget em painel dinâmico, o bloco Dynamic Panel Manager adicionará um elemento pai (Unlabeled) e um elemento filho (State 1)
Pronto! Já temos um painel dinâmico. Ele se chama Unlabeled pois ainda não demos um nome a ele (campo Label no bloco Widget Properties) e já tem um estado chamado State 1. Ao clicar 2 vezes no State 1 nós editaremos o widget rectangle.
Agora vamos ver um exemplo de como podemos entender os estados de um painel dinâmico.
Vamos renomear o State 1 para Estado Verde (apenas 1 clique em cima) e criaremos um novo estado (botão direito do mouse/Add state) e o nomearemos de Estado Amarelo.
Observação: por padrão, ao gerar um protótipo, o painel dinâmico terá como padrão o estado 1. Ou seja, já será verde desde o início.
Figura 6: Painel dinâmico e seus dois estados
Ao abrir o Estado Amarelo, verificamos uma coisa: existe somente um pontilhado azul e nada mais. Tudo que ficar fora do pontilhado não aparecerá na página que contiver este Dynamic Panel. Esta área pode ser alterada na página que criamos o painel dinâmico.
O widget rectangle ficou no primeiro estado. Basta um copiar/colar no widget dentro do Estado Verde para o Estado Amarelo. Ai teremos um widget semelhante no tamanho e na posição nos dois estados.
Agora, editaremos os estados clicando duas vezes em cada um e pintando os seus widgets com suas respectivas cores.
Com o fim da edição dos estados, passamos agora a configurar os botões que alterarão o estado do painel dinâmico.
Figura 7: Apesar de serem estados do mesmo painel dinâmico, os dois widgets deterão de características diferentes por causa de seus estados
Na página onde criamos o painel, criaremos também mais dois botões: um para cada cor.
Selecionamos um dos botões e abrimos a janela Case Editor (Figura 2) e escolhemos a opção Set Panel State(s) to State(s). Esta é a primeira Action desse grupo.
Figura 8: Janela Case Editor do Botão Verde. 1º Seleciona a Action, 2º escolhe qual painel terá seu estado mudado pelo clique do botão e 3º para qual estado o painel vai alterar
Esse passo deve se repetir para o Botão Amarelo, alterando logicamente, o 3º passo (Estado Amarelo).
Resumindo, o que fizemos? Dizemos ao Axure que quando clicarmos no Botão Verde o Painel Dinâmico mudará para o Estado Verde e quando clicarmos no Botão Amarelo o Painel Dinâmico mudará para o Estado Amarelo.
Outra opção seria criar somente um botão (com o nome trocar cor, por exemplo) e no 3º passo, ao invés de escolher o estado, escolher as opções Next ou Previous (ambas servem, pois existem somente 2 estados e não há necessidade de ordem das cores) e marcar a opção Wrap from first to last (um loop nos estados).
Todas as outras Actions estarão presentes no arquivo fonte. Mas resumindo:
- Show Panel(s): Mostra um ou mais painéis.
- Hide Panel(s): Esconde um ou mais painéis.
- Toogle Visibility for Panel(s): Altera a visibilidade de um ou mais painéis. Se está visível, esconde e vice-verso.
- Move Panel(s): Altera a posição do painel na tela. Necessário as coordenadas X e Y
- Bring Panel(s) to Front: Traz o painel para a camada mais à frente de todo widget.
- Send Panel(s) to Back: Envia o painel para a camada mais atrás de todo widget.
Conclusão
Então pessoal, chegamos ao fim do nosso artigo.
Nele, podemos entender o que é uma Action, as Actions tipo Link e Dynamic Panels. Esta última, por sinal, conceituando e exemplificando o funcionamento com diferentes estados. Outras Actions do tipo Dynamic Panel estão presentes no nosso arquivo fonte. Não esqueçam de gerar o protótipo para ver os exemplos e postar as dúvidas e sugestões abaixo.
Até a próxima.
