Explorando o campo ImageView

Tutoriais
, ,
1

Visão Geral

O objeto Formulário do LATROMI dispõe de diversos recursos avançados que facilitam o gerenciamento de dados e a criação de interfaces ricas. Dentre as ferramentas visuais disponíveis, este tutorial focará nas formas de implementação do ImageView — o componente responsável pela exibição de imagens na tela.

O campo ImageView, pode apresentar a imagem de duas formas:

  • Fonte de dados: Utilizando uma coluna do tipo byte array, disponível na fonte dados configurado em seu formulário.
  • Extrator de Arquivos: Objeto responsável por extrair arquivos da origem indicada em sua configuração.

Usando fonte de dados

Esta abordagem é ideal para cenários onde o conteúdo da imagem já está armazenado diretamente em uma tabela do seu banco de dados. Para exibir essa imagem na tela, siga o passo a passo abaixo

Configurando a fonte de dados

  1. Na aba lateral do seu Formulário, localize o menu Fonte de Dados.
  2. Adicione uma nova consulta estruturada para retornar a coluna que contém o arquivo da imagem. Sua instrução SQL será semelhante a esta:
SELECT
    ...,
    conteudo_arquivo
FROM tabela
WHERE id = {?PARAM.id}
lembre-se de utilizar parâmetros, como o {?PARAM.id} do exemplo, para garantir que o formulário carregue apenas a imagem correspondente do registro desejado.

Vincular o ImageView

  1. Com a Fonte de Dados pronta, adicione o campo ImageView na área de layout do seu formulário.
  2. Selecione o componente e acesse a janela de Propriedades.
  3. Na seção Dados, localize a propriedade Coluna de origem e selecione a coluna da consulta que carrega a imagem.

Pronto! Ao carregar o formulário, o LATROMI fará a leitura da coluna especificada e renderizará a imagem automaticamente no componente.

Usando extrator de arquivos

A abordagem utilizando o objeto Extrator de Arquivos é ideal para cenários mais complexos, onde a imagem pode vir de diferentes tipos de origem. Além disso, é a melhor prática para a reutilização de código, pois a lógica de extração fica centralizada em um único objeto, podendo ser consumida por vários formulários diferentes. Para realizar esta configuração com sucesso, veja o seguinte passo a passo.

Configurar o Extrator de arquivos

  1. Acesse o LATROMI Client e crie um novo objeto do tipo Extrator de Arquivos.
  2. Na seção Parâmetros, adicione um parâmetro chamado id (defina o tipo como Number). Ele servirá para filtrar a imagem correta.
  3. Na seção Fontes de Dados, adicione uma nova consulta com uma instrução SQL semelhante a esta:
SELECT
    nome_arquivo,
    conteudo_arquivo
FROM tabela
WHERE id = {?PARAM.id}
  1. Agora, navegue até a seção Origens e adicione uma nova origem. Embora existam vários tipos suportados (como URL ou Diretório), para este exemplo selecionaremos o tipo Binário.
  2. Vincule a Fonte de Dados que você criou no Passo 3 a esta origem.
  3. Selecione o tipo da origem como Binário.
  4. Faça o mapeamento das colunas retornadas pelo banco:
    • Em Conteúdo do Arquivo, selecione a coluna que carrega os dados da imagem (Ex.: conteudo_arquivo).
    • Em Nome do Arquivo, selecione a coluna correspondente (Ex.: nome_arquivo).
  5. Salve seu Extrator de Arquivos.

Vincular ImageView

  1. Com o Extrator de Arquivos criado, adicione o campo ImageView em seu formulário.
  2. Selecione o componente e acesse a janela de Propriedades.
  3. Na seção Dados, localize a propriedade Extrator de Arquivos e selecione o objeto criado nos passos anteriores.

Conclusão

Chegamos ao fim deste guia! As abordagens de implementação apresentadas aqui refletem as configurações mais comuns e recomendadas para o componente ImageView. Esperamos que este conteúdo sirva como um material de apoio prático para agilizar o seu dia a dia de desenvolvimento com a plataforma

Agora queremos ouvir você! Você já realizou alguma implementação diferente, usou algum truque de interface ou lidou com imagens de uma forma inovadora no sistema?

Se sim, deixe um comentário abaixo e compartilhe a sua experiência! A sua solução pode enriquecer ainda mais as formas de utilizar este recurso e inspirar outros desenvolvedores da nossa comunidade. :grinning_face_with_smiling_eyes:

Veja também