Código QR (web)
Esse componente gera um código QR a partir do texto informado pelo bloco de programação Alterar valor do campo (cliente ou servidor).
Figura 1 - Ao ler esse QR Code você verá a frase “Olá mundo!”
QR Code
Código QR (sigla do inglês Quick Response, resposta rápida em português) é um código de barras bidimensional que pode ser facilmente escaneado usando a maioria dos telefones celulares equipados com câmera. Esse código é convertido em texto (interativo), um endereço URI, um número de telefone, uma localização georreferenciada, um e-mail, um contato ou diversas outras informações. Veja mais detalhes em Código QR.
Principais propriedades
Aba de Propriedades
Na tabela abaixo estão descritas as principais propriedades do componente.
Nome | Propriedade | Função |
|---|---|---|
Identificador | id | Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente. |
Código QR | qr | Habilita o código QR. Opções: Sim e Não. |
Valor | ng-model | Propriedade Cronapp MVC que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação. |
Estilo | style | Altera o estilo geral do componente da forma inline. |
Exibir | ng-show | Propriedade Cronapp MVC 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 | Abre a janela de seleção dos grupos com permissões para visualização ou edição. |
Skin | crn-skin | Permite selecionar um skin que afetará apenas o componente selecionado. |
Classes CSS | class | Adiciona classes CSS que já foram criadas. |
Aba de Eventos
Na tabela abaixo estão descritos os eventos disponíveis para o componente.
Nome | Propriedade | Função |
|---|---|---|
Ao Clicar | ng-click | Executa uma ação quando o componente receber um clique com o mouse ou um toque na tela. |
Ao Duplo Clicar | ng-dblclick | Executa uma ação quando o usuário clica duas vezes seguidas com o botão do mouse em um componente. |
Ao Entrar com Mouse | ng-mouseenter | Executa uma ação quando o ponteiro do mouse é movido de fora para dentro do componente. |
Ao Iniciar | ng-init | Executa uma ação assim que o componente é renderizado na tela. |
Ao Mover Mouse | ng-mousemove | Executa uma ação enquanto o ponteiro do mouse está sendo movido sobre o componente. |
Ao Sair com Mouse | ng-mouseleave | Executa uma ação quando o ponteiro do mouse é movido de dentro para fora do componente. |
Aba de Estilos
O componente não possui propriedades específicas de estilo.
Alterar valor do componente
Para alterar o conteúdo Código QR, utilize o bloco Alterar valor do campo (categoria Formulário) nas funções de blocos de programação Servidor ou cliente (mobile e web).
Na janela do bloco de programação, acesse a janela de configurações do bloco de programação (item 1 da figura 2) e no campo Formulário de Referência selecione a página onde está o componente QR Code. Arraste o bloco Alterar valor do campo, selecione no parâmetro Campo o componente QR (item 2 da figura 2) e insira o texto que será exibido no QR Code no parâmetro Valor do bloco.
Após isso será necessário configurar um evento para executar o bloco de programação, como por exemplo, o evento Ao iniciar (ng-init) do próprio componente.
Figura 2 - Inserindo conteúdo no componente QR Code
Crie o bloco de Programação tipo Web (Localização:
Blocos de Programação/Web) com o Nome do Arquivo "QRCode" e o Nome da Função "AlterarQRCode". Acesse a janela de Configurações do bloco e no campo Formulário de Referência selecione a página onde está o componente QR Code;Arraste o bloco Alterar valor do campo (categoria Formulário), no parâmetro Campo selecione o valor do componente QR Code (2) e no parâmetro Valor escreva o texto “Olá, mundo!”.
Após isso volte ao componente QR Code, selecione a aba Eventos dentro de Propriedades e associe o bloco QRCode ao evento Ao iniciar (ng-init) do próprio componente.
Ajustar tamanho da imagem
O tamanho da imagem pode ser ajustado clicando no ícone de Redimensionar elemento, como na Figura 3 e, em seguida, arrastando as laterais da imagem ou clicando nos ícones de menos (para diminuir) e mais (para aumentar). O ajuste também pode ser feito ajustando o Estilo do componente.
Figura 3 - Redimensionar elemento
Observações
O código QR é uma série de códigos em uma imagem quadrada. Caso o ajuste realizado na imagem não esteja no formato correto, a imagem será reajustada na aplicação para que todos os lados tenham o mesmo tamanho do menor lado definido.
Nome em inglês
QR Code
Nesta página
Compatibilidade
Formulário web
Equivalente mobile
Botão do Componente
Imagem no Editor Visual