Versões comparadas
Chave
- Esta linha foi adicionada.
- Esta linha foi removida.
- A formatação mudou.
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ção.feita através do toque (touchscreen, mesa digitalizadora ou mouse) e obter o conteúdo assinado através de uma imagem.
Image AddedImage Removed
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.
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes | ||
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 | - | - |
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. Como a imagem é convertida em base64, é necessário concatenar o Data URI scheme com a base64, como mostra a figura 2.
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 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. OBS: é necessário vincular o bloco de programação a um formulário de referência, confira no tópico Propriedades do Blockly da documentação Bloco de programação.
Image RemovedImage Added
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 32.1.
Image RemovedImage Added
Figura 2.1 - Adicionando o componente botão e imagem.
Agora Por fim, basta associar o evento Ao Clicar do botão ao bloco de programação criado na figura 12. Em seguida execute a aplicação, o resultado obtido pode ser visto na figura 2.2.
Image Added
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
InputSignature Pad
Nesta página
Índice |
---|
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Image RemovedImage Added
Imagem no Editor Visual
Image RemovedImage Added