Exibição de imagens

Visualização das imagens no cadastro associado

Podemos visualizar as imagens associadas aos cadastros através do próprio cadastro, onde veremos o campo xImages do tipo grade.

No arquivo x-model do cadastro, deve ser inserida a definição do campo do tipo mestre-detalhe para mostrar as imagens associadas. Existe uma peculiaridade muito importante sobre este campo que nos leva, obrigatoriamente, a definir este campo com o nome xImages. Isto é necessário para simplificarmos a API de manipulação desta funcionalidade. Segue um exemplo da definição do campo xImages do cadastro de imagens de usuários:

var fld = this.field('xImages', 'grid');
fld.order = 105000;
fld.label = "Imagens";
fld.classKey = -1898141861; /* Imagens de Usuários */
fld.masterFieldNames = "iKey";
fld.detailFieldNames = "iGroupUser";

No arquivo x-view do cadastro, é possível configurar a visualização das imagens no cadastro associado. Observe que a classe Raiz já possui uma configuração padrão que se aplica a todos os cadastros do sistema. Sugerimos que a alteração dessa configuração seja sempre realizada na classe Raiz, a fim de manter a consistência visual do sistema.

• this.imageWidth (opcional): largura padrão, em pixels, da imagem associada a este registro, caso exista uma. Esta largura também será utilizada na visualização das fontes de dados que exibam esta imagem. Por padrão, foi definida uma largura de 80 pixels.

• this.imageHeight (opcional): altura padrão, em pixels, da imagem associada a este registro, caso exista uma. Esta altura também será utilizada na visualização das fontes de dados que exibam esta imagem. Por padrão, foi definida uma altura de 80 pixels.

• this.zoomImageWidth (opcional): indica a largura padrão, em pixels, da imagem associada a este registro quando está sendo exibida a ampliação dela, normalmente ativa quando ela recebe o foco do mouse. Esta largura também será utilizada na visualização das fontes de dados que exibam esta imagem. Por padrão, foi definida uma largura de 225 pixels.

• this.zoomImageHeight (opcional): indica a altura padrão, em pixels, da imagem associada a este registro quando está sendo exibida a ampliação dela, normalmente ativa quando ela recebe o foco do mouse. Esta altura também será utilizada na visualização das fontes de dados que exibam esta imagem. Por padrão, foi definida uma altura de 225 pixels.

• this.zoomImageOnHover (opcional): quando definido com valor lógico verdadeiro (true), indica que haverá ampliação ao passar o cursor do mouse sobre uma imagem associada a este registro. Por padrão, foi definido o valor true.

Caso um cadastro tenha imagens vinculadas, todos os campos que apontam para esse cadastro passam a exibir, ao lado do valor do campo, a imagem miniatura em questão, o thumbnail. A apresentação do thumbnail é automática para todos os cadastros com imagens associadas. Caso se deseje desligar essa visualização automática, basta inserir a linha de código a seguir na classe do cadastro vinculado às imagens:

Exemplo da definição na classe do cadastro:

this.thumbnail.visible = false;

Devido ao conceito de herança de nosso sistema de arquivos, para desligar a visualização do thumbnail de todas as classes, basta definir essa mesma linha de código em um x-view no diretório Raiz.

Exemplo da definição no campo do cadastro:

var fld = grid.field('iGroupUser', 'int64');
fld.classKey = -1898187809; /* Usuários */
fld.lookupType = LookupType.RECORD;
fld.thumbnail.visible = false;

Exibindo imagens em visualizações de uma fonte de dados

Veja o exemplo de uso Exibindo imagens em visualizações para mais detalhes.