Skip to end of metadata
Go to start of metadata

Função

Esse componente faz a seleção de múltiplas opções dentro da uma lista. Utilizado em situações que o usuário faz a busca para mais de um objeto ou inserir mais informações em um mesmo tipo de campo. Na IDE esse componente faz a seleção das opções para alimentar o banco de dados, sendo a relação entre as classes construídas precisa ser de n-m ou 1-n, para adicionar mais informações do mesmo tipo a um mesmo atributo.

Figura 1 - Caixa de seleção múltipla

Por exemplo, usar esse componente para adicionar jogos cadastrados, em uma classe, à um usuário. Para isso deve-se ter um relacionamento de n-n entre essas classes no banco de dados.

Configuração

A configuração do componente é a mais importante das propriedades, pois é através dela que todos os ajustes sobre as opções que irão aparecer na caixa de seleção dinâmica, a fonte de dados que será a provedora das opções, quais serão as opções e entre outros estão presentes.

Ao selecionar o componente na área de trabalho da IDE, será apresentado a aba de propriedades no campo direito. O menu de ... que aparece ao lado do campo de configuração permite que você faça as configurações e nela contém as abas geral, template cabeçalho e template rodapé.

Figura 2 - Menu de configuração

Geral

  1. Fonte de dados: define a classe que fornecerá os dados para serem as opções do auto completar.
    • "+": adiciona uma fonte de dados.
    • "...": configura uma fonte de dados.

       

      Dica

      Para saber mais sobre como configura uma fonte de dados, acesse o link ao lado: Fonte de Dados

  2. Placeholder: mostra um texto na caixa de seleção que serve para auxiliar o usuário o que ele precisa fazer, mas seu uso é opcional. Ao lado do campo, tem-se o ícone para fazer a internacionalização do texto do placeholder.
  3. Tipo Filtro: define a forma de filtragem dos dados, podendo ser:
    • Iniciando com: mostra as opções que comecem com as letras digitadas.
    • Contendo: mostra as opções que contêm as letras digitadas.
    • Final com: mostra as opções que terminam com as letras digitadas.
  4. Campo Texto: define os valores a serem exibidos na caixa de seleção. Nele são apresentados os atributos da fonte de dados selecionada.
  5. Campo Valor: define qual valor será enviado ao sistema após a seleção da opção. Nele são apresentados os atributos da fonte de dados selecionado, a partir do atributo selecionado no campo texto, o campo valor correspondente será enviado ao sistema.
  6. Fonte relacionada: adiciona a segunda fonte de dados que representa a ligação das classes.
  7. Campo relacionado: define os atributos da fonte de dados selecionada na fonte relacionada que serão exibidos.

Campo Texto e Campo Valor

Campo Valor define o conteúdo que será utilizado pelo sistema, enquanto o Campo Texto irá mostrar as opções na caixa de seleção. Eles podem ser iguais ou não.

Por exemplo, tem-se a opção com o Campo Texto chamado título e seu Campo Valor é id. Enquanto na tela será exibido os títulos dos jogos, o sistema estará usando o id no lugar.

Template Cabeçalho

Ele cria uma área no início da lista de opções exibidas na caixa de seleção utilizando tags de HTML, podendo ser de parágrafo, imagem, etc.

Figura 3 - Configuração e resultado na adição de um template cabeçalho

Template Rodapé

Ele cria uma área no fim da lista de opções exibidas na caixa de seleção utilizando tags de HTML, podendo ser de parágrafo, imagem, etc.

Figura 4 - Configuração e resultado na adição de um template rodapé

Nessa Página

Compatibilidade

Formulário web

Botão do componente

Imagem no Editor Visual

 

  • No labels