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. 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 (Figura 1).

Figura 1 - Exemplo do componente rodando no browser

Principais propriedades

Na tabela abaixo estão descritas as principais propriedades para o funcionamento básico do componente.

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 abre a janela de configuração (Figura 2), apesar de que ao soltar o componente na área do formulário essa janela de configuração abre automaticamente.

Figura 2 - Janela de configuração

• Fonte de dados: define a classe que fornecerá os dados para serem as opções do auto completar. Para saber mais sobre como configura uma fonte de dados, acesse o link ao lado: Fonte de Dados

  • "+": adiciona uma fonte de dados.

  • "...": configura uma fonte de dados.

• 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;

• 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.

• Campo Texto: define os valores a serem exibidos na caixa de seleção. Nele são apresentados os atributos da fonte de dados selecionada;

• Campo Chave: 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;

• Fonte relacionada: adiciona a segunda fonte de dados que representa a ligação das classes;

• Campo relacionado: define os atributos da fonte de dados selecionada na fonte relacionada que serão exibidos;

• Usar template personalizado: ao ser selecionado, adiciona a aba Elementos na janela de configuração.

Campo Texto e Campo Chave

Campo Chave 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 Chave é id. Enquanto na tela será exibido os títulos dos jogos, o sistema estará usando o id no lugar.

Cabeçalho

Na aba cabeçalho é possível adicionar texto ou tags do HTML - podendo ser de parágrafo, imagem, entre outros - e, assim, criar uma área no início da lista de opções exibidas pelo componente.

Figura 3.1 - Adicionando um cabeçalho ao componente

Figura 3.2 - Área do cabeçalho ao executar componente no browser

Aba rodapé

Na aba rodapé é possível adicionar texto ou tags do HTML - podendo ser de parágrafo, imagem, entre outros - - e, assim, criar uma área no início da lista de opções exibidas pelo componente.

Figura 4.1 - Adicionando um rodapé ao componente

Figura 4.2 - Área do rodapé ao executar componente no browser

Utilizar Template Personalizado

Elementos

Essa aba (Figura 5.1) configura a forma de visualização das opções ao abrir a caixa de seleção, podendo mostrar alguns outros dados da folha de dados (Figura 5.2) - que precisam ser configurados de uma forma específica para exibidos, ou textos.

A forma para exibir os dados da fonte de dados é da seguinte maneira: #: data.colunadatabela #.

Figura 5.1 - Utilizando template personalizado

Figura 5.2 - Exibição dos dados no browser