Função
O componente Painel de assinatura permite a realização de uma assinatura digital de um documento de escolha do usuário contido na aplicaçãofeita através do toque (touchscreen ou mouse) e obter o conteúdo assinado através de uma imagem.
Figura 1 - Componente Painel de assinatura rodando na web.
Principais propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
|---|---|---|
| Valor | ng-model | Propriedade Angular que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão, um ID é gerado automaticamente e atribuído ao componente. |
| Estilo | style | Altera o estilo geral do componente da forma forma inline. |
Exibir | ng-show | Propriedade Angular usada para mostrar ou oculta o componente. |
| Repetir | crn-repeat | Propriedade que seleciona uma fonte de dados contida na tela e repete o componente baseado no número de itens dessa fonte de dados. |
Segurança | cronapp-security | Propriedade do Cronapp que trata as permissões de segurança da aplicação. Usado para permitir ou não edição e visualização do componente com base nos perfis de selecionados. |
| Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Propriedades do subcomponente Painel de assinatura
O componente Painel de controle possui um botão interno responsável por limpar o campo da assinatura, confira na tabela abaixo suas propriedades.
Nome | Propriedade | Função |
|---|---|---|
| Altura | height | Atributo que especifica a altura do componente em px. |
| Ao clicar | ng-click | Evento associado a um bloco de programação responsável por efetuar uma ação ao click do botão. |
| Clear | clear | Evento associado ao botão, responsável por limpar o campo da assinatura. |
| DataUrl | - | - |
| Classe CSS | class | Adiciona classes CSS que já foram criadas. |
Exemplo de uso
O componente painel Painel de assinatura por si só não realiza nenhuma função específica além de receber só recebe a assinatura do usuário e limpar limpa o campo de assinatura, para aumentar a performance do componente, assim, é preciso associa-lo a outros componentes disponíveis no Cronapp, como por exemplo um botão ou uma imagemuma fonte de dados ou obter a imagem através de um bloco de programação. No exemplo a seguir faremos os dois, iremos capturar a assinatura do usuário através de um bloco de programação, chamado por um botãoe salva-la , e a assinatura será renderizada no componente imagem. Para exibir o componente imagemComo a imagem é convertida em base64, é necessário concatenar o Data URI scheme com a base64 com a imagem, cole o caminho a seguir no campo de texto, como mostra a figura 2. data:image/png;base64,
| Informações | ||
|---|---|---|
| ||
Também é possível salvar no banco de dados a imagem capturada. Para isso, o tipo do atributo destinado a imagem tem que constar como Imagem no bancoComo o componente transforma a assinatura em imagem e depois converte para base64, é possível obter seu valor para tratar de diversas formas: salvar em banco, vincular a um campo da fonte de dados, fazer uma lógica via bloco de programação e outros. |
Criando o bloco de programação
Para realizar a captura da assinatura, inicialmente precisamos criar o bloco de programação (cliente) que irá realizar tal função, confira na imagem abaixo. Utilizaremos o bloco de programação Definir valor do atributo para obter o valor do campo assinatura. No campo parâmetro Valor do atributo estamos obtendo o valor do input (assinatura) e convertendo para base64concatenando com o Data URI Scheme, desse jeito podemos salvar renderizar a imagem no componente imagem.
Figura 2 - Bloco de programação responsável para salvar a imagem da assinatura.
| Bloco de código | ||
|---|---|---|
| ||
data:image/png;base64, |
Agora precisamos incluir o componente imagem e botão na view do junto com componente Painel de assinatura, confira na figura 3.
Figura 2.1 - Adicionando o componente botão e imagem.
Por fim, basta associar o evento Ao Clicar do botão ao bloco de programação criado na figura 1. Em seguida execute a aplicação, o resultado obtido pode ser visto na figura 2.2.
Figura 2.2 - Componente Painel de assinatura rodando na web
- Componente imagem exibindo a assinatura capturada pelo botão;
- Área destinada à assinatura;
- Botão para limpar o campo da assinatura;
- Botão responsável por capturar a assinatura.
Nome em inglês
Input
Nesta página
| Índice |
|---|
Compatibilidade
Formulário web
Equivalente mobile
Painel de assinatura
Botão do Componente
Imagem no Editor Visual