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

Image Removed

, com isso é possível vincular vários itens a um registro em relacionamentos 1 para N ou N para M. Os itens selecionados aparecerão em Labels e estarão destacados em cor diferentes na lista, além disso, o seu campo possui um filtro, restringindo sua lista a medida que o usuário digita.

Image Added

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 automaticamenteArraste o componente para o editor visual para abrir a janela de Configurações. Para Abrir a janela posteriormente, dê um duplo clique sobre o componente ou clique no botão "..." da propriedade Configurações (Figura 2.1).

Figura 2 - Janela de configuração

• Fonte de dados: define a classe o conteúdo 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 Dadosdados .

  • "+": 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;exibe alguma mensagem enquanto o campo estiver vazio, é possível internacionalizar o conteúdo através do ícone de internacionalização ao final do campo.

• Tipo Filtro: define a forma de filtragem dos dados, podendo serfiltro:

  • 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 o atributo que será exibido 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;o identificador dos itens da lista.

• Fonte relacionada: adiciona a segunda fonte de dados que representa a ligação das classespara relacionamentos N para M;

• Campo relacionado: define os atributos da fonte de dados selecionada na fonte relacionada que serão exibidos;Relacionada que tem relação com a fonte de dados principal.

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

Abas Cabeçalho e rodapé

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.

Image Removed

Figura 3.1 - Adicionando um cabeçalho ao componente

Image Removed

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.

Image Removed

Figura 4.1 - Adicionando um rodapé ao componente

Image Removed

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

Utilizar Template Personalizado

Elementos

As abas cabeçalho e Rodapé permitem adicionar texto e conteúdo HTML para inserir um item no início e no fim da lista. (Figuras 2.2, 2.3 e 2.4)

Image Added

Figura 2.2 e 2.3 - Inserindo conteúdo no cabeçalho e rodapé da lista da caixa de seleção

Image Added

Figura 2.4 - Resultado da configuração da figura 2.2

Aba Elementos

Nessa aba é possível personalizar o conteúdo exibido na lista, podendo inserir texto estático ou mais de um atributo. No exemplo da figura 2.5, além da frase que irá se repetir para cada item, foram adicionados dois atributos: nome e login.

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

Image Removed

Image Added

Figura 2.5 .1 - Utilizando template personalizado

Image Removed

Image Added

Figura 5.2 - Exibição dos dados no browser2.6 - Resultado da configuração da figura 2.5

Fonte Relacionada

A caixa de seleção múltipla