Um evento normalmente espera uma interação do usuário para realizar uma ação programada, por exemplo: ao clicar em um botão, uma janela será aberta; ao mover o mouse sobre um componente, as coordenadas X,Y do ponteiro do mouse são exibidas ou ao iniciar a tela, uma mensagem de boas vindas é exibida para o usuário.
Alguns eventos são específicos para determinados componentes, outros são genéricos e podem ser usados em qualquer componente. Nessa página veremos como configurar uma ação para um evento.
Para selecionar a ação de um dos eventos, clique no botão "…" para abrir a janela seleção da ação (Figura 1). Ela possui 5 abas:
Figura 1 - Janela de seleção de ação para o evento "Ao clicar" do componente botão
Blocos de Programação, Funções, Relatórios e Formulários permitem passagem de parâmetros em suas chamadas. Dessa forma, ao selecionar uma dessas abas, podemos escolher passar valores estáticos ou expressões (dinâmicos), como no exemplo da figura 2.
A caixa de seleção Valor do campo definirá se o conteúdo passado será estático ou dinâmico e a depender da opção selecionada, um componente específico é exibido. As opções para o Valor do campo são:
ng-model
(Valor) dos componentes,Figura 2 - Seleção de um valor dinâmico da tela para o atributo Campo
Para adicionar dados que não estão listados na caixa de seleção quando o Valor do campo está apontado como Expressão, como por exemplo o identificador de um elemento HTML, basta selecionar a opção "Texto" em Valor do campo e inserir o conteúdo manualmente na caixa de texto ao lado.
Possui um campo de texto para adicionar comandos manualmente (high-code), aceita internacionalização (item 2 da figura 3). Ao selecionar uma ação em uma das outras abas, o comando resultante será exibido nessa área. No título da janela (item 1 da Figura 3) é exibido o evento que chamará essa ação,
Figura 3 - Aba Expressão da janela de seleção da ação
Permite selecionar uma função de bloco de programação (cliente ou servidor) criado no projeto como ação de um evento.
Lembramos que o uso de bloco do tipo servidor pode resultar em falhas de segurança. |
Figura 4 - Seleção de uma função na aba Bloco de Programação
<Arquivo>:<Função>( [ <Parâmetro 1> [, <Parâmetro n>] ] ) : <Retorno>
Quando usamos a aba Bloco de Programação, precisamos criar uma função dentro do arquivo blockly para depois chamá-la na ação do evento, fundamental para funções mais complexas. Porém, ações que necessitem de um único bloco de programação, como Exibir componente, Abrir url, Alterar valor do campo e outros, podem ser chamados diretamente pela aba Funções, não sendo necessário criar uma função blockly para chamar esse bloco.
A aba Funções só lista os blocos do tipo cliente e são exatamente os mesmos blocos das funções de bloco de programação, ou seja, possuem os mesmos nomes e parâmetros. Ao selecionar um bloco, seus atributos são listados abaixo (item 8 da figura 5) para definir o que será passado, podendo ser um valor estático ou expressão.
Figura 5 - A aba Funções é usada para ações onde é necessário apenas 1 bloco de programação
Utilize a aba relatório para, ao executar a ação, abrir o relatório selecionado no componente Visualizar de relatório dentro de um modal na tela. Não existe a opção de abrir relatórios em projetos mobile, sendo uma funcionalidade exclusiva para projetos web.
Figura 5 - Aba Relatório da janela de seleção da ação
Permite acessar outras páginas e formulários do projeto, inserindo parâmetros de tela e adicionando filtros à fontes de dados. Os parâmetros de tela e filtros são passados via query string.
Figura 6 - Aba Formulário da janela de seleção da ação
Os eventos a seguir executam alguma ação a partir de ações do mouse, como o movimentar do cursor do mouse sobre um componente, duplo clique, clique único etc.
Alguns eventos de mouse sendo executados
ng-click
Executa uma ação quando o componente receber um clique com o mouse ou um toque na tela.
ng-dblclick
Executa uma ação quando o usuário clica duas vezes seguidas com o botão do mouse em um componente.
ng-mouseenter
Executa uma ação quando o ponteiro do mouse é movido de fora para dentro do elemento.
ng-mouseleave
Executa uma ação quando o ponteiro do mouse é movido de dentro para fora do elemento.
ng-mousemove
Executa uma ação enquanto o ponteiro do mouse está sendo movido sobre o elemento.
Alguns componentes podem trabalhar com o mesmo evento, enquanto outros não. Isso parte da funcionalidade tanto do componente quanto de como ocorre o evento.
Execução do evento ao iniciar
ng-init
Executa uma ação assim que o componente é renderizado na tela.
ng-change
Executa uma ação assim que algo no componente é alterado.
Componentes: entrada de texto, entrada de texto com botão, entrada de texto com ícone, grade, caixa de seleção fixa, caixa de seleção dinâmica, caixa de seleção múltipla, auto completar, auto completar dinâmica e slider.
ng-focus
Executa uma ação assim que o componente é focado.
ng-slide
Executa uma ação sempre que o slider é arrastado na barra.
Componente: slider.
ng-blur
Executa uma ação assim que o componente sai do foco.
Os eventos a seguir executam ações de copiar, colar, recortar, etc.
Eventos de clipboard (copiar e colar)
ng-copy
Executa uma ação assim que o elemento é copiado do componente.
ng-paste
Executa uma ação assim que o elemento é colado no componente.
Os eventos a seguir executam alguma ação a partir de ações do teclado, como apertar ou soltar uma tecla.
Eventos de apertar e soltar uma tecla
ng-keydown
Executa uma ação assim que uma tecla é associada no teclado.
ng-keyup
Executa uma ação ao soltar uma tecla do teclado.
Os eventos a seguir executam ações a partir do componente fonte de dados.
Execução dos eventos antes de atualizar e após atualizar
on-change-status
Executa uma ação após a mudança de status (ex.: inserção ou edição).
on-before-update
Executa uma ação antes de um dado ser atualizado.
on-before-create
Executa uma ação antes de um novo dado ser criado.
on-before-delete
Executa uma ação antes de um novo dado ser excluído.
on-error
Executa uma ação quando um erro ocorre na fonte de dados.
on-after-delete
Executa uma ação após um dado ser excluído.
on-after-update
Executa uma ação após um dado ser atualizado.
on-after-create
Executa uma ação após um dado ser criado.
on-after-fill
Executa uma ação após os dados serem carregados ou atualizados na tela.
on-put
Bloqueia a requisição de atualizar dados para executar a função do bloco.
on-post
Bloqueia a requisição de inserir dados para executar a função do bloco.
on-get
Bloqueia a requisição de obter dados para executar a função do bloco.
on-delete
Bloqueia a requisição de remover dados para executar a função do bloco.
Os eventos a seguir executam ações a partir do componente grade.
Execução dos eventos ao salvar e ao salvar alterações da grade
ng-before-edit
Executa uma ação ao editar um dado na grade.
ng-cancel
Executa uma ação ao clicar no botão default de cancelar da grade.
ng-edit
Executa uma ação ao clicar no botão default de editar da grade.
ng-data-binding
Executa uma ação quando for vincular os dados.
ng-remove
Executa uma ação ao clicar no botão default de excluir da grade.
ng-save
Executa uma ação ao clicar no botão default de salvar da grade.
ng-save-changes
Executa uma ação ao clicar no botão default de salvar alterações da grade.
ng-data-bound
Executa uma ação após ter os dados vinculados.
Os eventos a seguir executam ações a partir de todos os componentes do tipo caixa de seleção, como caixa de seleção dinâmica e auto completar.
Execução dos eventos ao selecionar e ao fechar
ng-data-bound
Executa uma ação enquanto dados são carregados na caixa de seleção ou no auto completar.
ng-close
Executa uma ação assim que fecha as opções mostradas na caixa de seleção ou no auto completar.
ng-filtering
Executa uma ação assim que começa a digitar no campo da caixa de seleção ou de auto completar.
ng-select
Executa uma ação assim que selecionar a opção da caixa ou do auto completar.
ng-deselect
Executa uma ação assim que um item é removido da caixa de seleção múltipla.
Componente: caixa de seleção múltipla.
Os eventos a seguir executam ações a partir do componente editor de texto rico.
Execução do evento ao clicar no componente texto rico
ng-before-set-content
Executa uma ação antes que qualquer conteúdo possa ser inserido no componente.
ng-pre-process
Executa uma ação quando for realizar alguma ação na área de edição do editor de texto rico, como digitar ou utilizar as funcionalidades do componente.
ng-cron-change
Executa uma ação enquanto estiver ocorrendo alterações no componente, como digitar no campo ou selecionar um item.
ng-cron-click
Executa uma ação quando o mouse clica no campo de digitação do componente.
ng-cron-paste
Executa uma ação sempre que um conteúdo é colado no componente.
ng-paste-pre-process
Executa uma ação quando for colar um conteúdo na área de edição do componente.
ng-paste-post-process
Executa uma ação após colar um conteúdo na área de edição do componente.
ng-cron-undo
Executa uma ação sempre que realiza uma ação de desfazer, através do botão na barra de ferramenta ou das teclas de atalho, no componente.
ng-cron-dblclick
Executa uma ação assim que o campo de digitação do componente for clicado duas vezes.
ng-cron-mouseenter
Executa uma ação quando o ponteiro do mouse é movido de fora para dentro do componente.
ng-exec-command
Executa uma ação assim que uma funcionalidade do editor é executada na área de edição, como adicionar parágrafo ou inserir tabela.
ng-cron-focus
Executa uma ação no momento que o componente é focado pelo usuário.
ng-cron-init
Executa uma ação assim que o componente for renderizado na tela.
ng-set-content
Executa uma ação sempre que um conteúdo for inserido no componente.
ng-cron-mousemove
Executa uma ação enquanto o ponteiro do mouse está sendo movido sobre o elemento.
ng-node-change
Executa uma ação sempre que uma mudança ocorre no componente.
ng-get-content
Executa uma ação todas as vezes que o editor recebe um conteúdo.
ng-cron-redo
Executa uma ação sempre que realiza uma ação de refazer, através do botão na barra de ferramenta ou das teclas de atalho, no componente.
ng-cron-mouseleave
Executa uma ação quando o ponteiro do mouse é movido de dentro para fora do elemento.
ng-cron-blur
Executa uma ação assim que o mouse clica em outro elemento da página quando o componente texto rico estava selecionado previamente.
ng-cron-keyup
Executa uma ação sempre que uma tecla é desapertada no componente.
ng-cron-dirty
Executa uma ação sempre que algo é digitado no editor ou algo é selecionado na barra de ferramenta do editor, como torna o texto em negrito ou diminuir recuo.
ng-cron-keydown
Executa uma ação sempre que uma tecla é pressionada no componente.
ng-post-process
Executa uma ação após realizar alguma ação na área de edição do editor de texto rico, como digitar ou utilizar as funcionalidades do componente.
Os eventos a seguir executam ações ocorrem somente em componentes mobile.
Execução de um evento no mobile
on-tap
Executa uma ação sempre que um elemento é clicado.
on-double-tap
Executa uma ação sempre que um elemento é clicado duas vezes.
on-hold
Executa uma ação sempre que um elemento é pressionado sem soltar por alguns milissegundos.
on-drag
Executa uma ação sempre que um elemento é arrastado.
on-swipe
Executa uma ação sempre que é feito uma ação de swipe no elemento.
on-swipe-left
Executa uma ação sempre que é feito uma ação de swipe no elemento para o lado esquerdo.
Componentes: carrossel e lista com swipe.
on-swipe-right
Executa uma ação sempre que é feito uma ação de swipe no elemento para o lado direito.
Componentes: carrossel e lista com swipe.
Nesta página
Conteúdo complementar
Assista sobre o tema no Cronapp Academy
Caso seja seu primeiro acesso ao Cronapp Academy, crie antes uma conta gratuita e matricule-se no curso abaixo. |