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.

Função

Esse componente

exibe uma lista de opções

obtidas a partir de uma fonte de dados, possui um campo de pesquisa para filtrar seu conteúdo

Image Modified

Figura 1 - Caixa de seleção dinâmica

Por exemplo, em uma classe do banco de dados existe um atributo que guarda os títulos dos animes e configurando a caixa de seleção, é possível trazer todos os dados (nesse caso, os nomes das músicas) para fazer a lista de opções.

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

Image Removed

Figura 2 - Menu de configuração da caixa de seleção

Geral

1.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 janela Configuração possui diversas propriedades para personalizar e adicionar novos elementos a Caixa de seleção dinâmica. Para abrir a janela de configurações, selecione o componente no editor visual, exibindo suas propriedades no menu lateral, e clique no botão “...” da propriedade Configuração. (Figura 2.2)

Image Added

Figura 2.1 - Janela de configuração

1. Campo do item selecionado: exibe o elemento selecionado;
2. Campo de pesquisa: permite filtrar a lista;
3. Linha vazia, limpa a última seleção;
4. Cabeçalho: exibe o conteúdo inserido na aba Cabeçalho da janela de configurações;
5. Lista: exibe a lista com o filtro do campo de pesquisa;
6. Rodapé: exibe o conteúdo inserido na aba Rodapé da janela de configurações.

Aba Geral

Possui as principais propriedades da Caixa de seleção fixa.

Ao solicitar o valor do campo da Caixa de seleção dinâmica, sempre será retornado o identificador do elemento selecionado.

Image Added

Figura 2.2 - Aba Geral da janela de configurações do componente

• Fonte de dados: seleciona ou cria uma fonte de dados para alimentar o componente.

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

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

• Tipo Filtro:

• define a forma de filtragem dos dados, podendo ser:

• • Contendo:

• • mostra as opções que

• • contêm a sequência das letras digitadas

• • ;

• • Iniciando com:

• • mostra as opções que

• • comecem com a sequência das letras digitadas

• • ;

  • Final com:

• • mostra as opções que

• • terminem com

• • a sequência das letras digitadas

• • ;

• Campo Texto:

• define o campo da fonte de dados

• que será exibido para o usuário;

• Modificar texto em: modifica outro componente na tela com o conteúdo do Campo Texto;

• Campo Chave: define o identificador de retorno do campo Texto selecionado pelo usuário;

• Máscara:

• define a forma como será apresentado o valor.

• Selecione uma máscara pronta ou crie uma.

• Texto do rótulo: define o conteúdo do campo como a primeira opção (estático) da caixa de seleção. É possível internacionalizá-lo clicando no ícone no final do campo.

• Valor do rótulo: define um identificador para o conteúdo inserido no campo Texto do rótulo. É possível internacionalizá-lo clicando no ícone no final do campo.

• Permitir valor nulo: marcando essa opção, quando o usuário selecionar a opção do campo Texto do rótulo o valor nulo é retornado. O campo Valor do Rótulo fica desabilitado quando essa opção está ativa.

• Valor Inicial:

• determina qual será a primeira opção apresentada na caixa de seleção, antes de mostrar todas as opções. Esse campo fica disponível quando a opção ao iniciar usar valor do primeiro registro não está marcada.

• Sua determinação fica a critério do usuário, que pode utilizar blocos de programação, expressão ou o campo de tela

• ;

• Ao iniciar usar valor do primeiro registro:

• marque essa opção

• para deixar marcado o primeiro registro

• da fonte de dados;

• Usar valor primitivo:

• é o valor default, utilizado quando tinha-se os problemas de integração com os valores dos objetos que eram repassados para a caixa

• ;

• Alterar cursor ao modificar:

• coloca o cursor do registro selecionado na caixa de seleção dinâmica no banco de dados

• ;

• Usar Template Personalizado: ao selecionar, as abas Elementos e Valores são exibidas para personalizar, respectivamente, o modo como será exibido os elementos da lista e o modo como será exibido o item selecionado.

Cabeçalho

Na aba Cabeçalho é possível adicionar texto ou elementos HTML - podendo ser de parágrafo, imagem, entre outros - e, assim, criar

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, pelo componente.

O conteúdo inserido nessa aba será exibido na área destacada pelo item 3 da figura 2.1

Image Added

Figura 2.3 - Adicionando um cabeçalho ao componente

Aba rodapé

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

O conteúdo inserido nessa aba será exibido na área destacada pelo item 6 da figura 2.1

Image Modified

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.

Image Removed

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

2.4 - Adicionando um rodapé ao componente

Aba Elementos

A aba Elementos só será exibida ao selecionar a opção Usar Template Personalizado na aba Geral.

Nela podemos definir como serão exibidos os itens da lista para seleção, é possível inserir os atributos dos objetos de forma dinâmica e conteúdo estático, inclusive HTML. O conteúdo inserido nessa aba será exibido na área destacada pelo item 5 da figura 2.1

Para exibir os atributos dos itens da fonte de dados, use a seguinte notação: #: data.<Campo da Fonte de dados> #. 

Image Added

Figura 2.5 - Personalização dos elementos da lista

Valores

A aba Valores só será exibida ao selecionar a opção Usar Template Personalizado na aba Geral.

Nela podemos definir como será exibido o item selecionado, é possível inserir os atributos dos objetos de forma dinâmica e conteúdo estático, inclusive HTML. O conteúdo inserido nessa aba será exibido na área destacada pelo item 1 da figura 2.1

Para exibir os atributos dos itens da fonte de dados, use a seguinte notação: #: data.<Campo da Fonte de dados> #. 

Image Added

Figura 2.6 - Personalização do elemento selecionado