Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.

Função

Esse Da mesma maneira que o caixa de seleção fixa, esse componente apresenta uma lista de opções para o usuário escolher. No , no entanto , a diferença é que essas opções vêm do banco de dados.

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

Menu de 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éPara realizar configurações na caixa de seleção são feitas através do menu de “...”, que abrirá uma janela que contém 5 abas.

Image Modified

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

Geral

Onde toda a configuração de fonte de dados, tipo de filtragem, definição dos campos, utilização da máscara, entre outros, é feita. Para fazer com que o componente atue de forma correta, o primeiro passo é fazer a conexão com o banco de dados e para realizar tal feito, precisa adicionar determina qual é a tabela a ser utilizada pela caixa de seleção.
  1. Fonte de dados: define a classe que fornecerá os dados para serem as opções do auto completar.
    • "+": adiciona uma fonte de dados.
Fonte de Dados
    • "...": configura uma fonte de dados.

      Informações
      titleDica
    • Para saber mais sobre como configura uma fonte de dados,

clique aqui.

Caso exista uma folha de dados na tela em que o componente caixa de seleção dinâmica se encontra, ele irá aparecer na listagem do campo. Caso contrário, nenhuma lista irá aparecer e terá que adicionar através do botão + que fará a abertura de uma janela para configurar a folha de dados.

Tipo Filtro

define a forma como será feita a pesquisa.

  • Contendo: mostra as opções que contêm as letras digitadas.
    1. 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.
    2. 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
    Iniciando com mostra as opções que comecem com
      • as letras digitadas.
      • Final com
    mostra
      • : mostra as opções que terminam com as letras digitadas.
    1. Campo Texto
    escolhe o atributo que fará a exibição dos dados
    1. define os valores a serem exibidos na caixa de seleção. Nele são apresentados os atributos da fonte de dados selecionada.
    2. Campo Valor

    escolhe o atributo da tabela que terá seus dados retornados pro sistema a partir da seleção da opção na caixa de seleção.

    Caso ainda possua duvidas, esse pode ajudá-lo.

    Máscara
    1. 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.
    2. Máscara: 
    1. define a forma como será apresentado o valor. Apesar de ter uns exemplos prontos, é possível editá-los ou criar um.
    2. Rótulo
    1. tem a mesma ideia que um placeholder, que é mostrar um texto enquanto o conteúdo estiver vazio. No entanto, ele pode ser selecionado caso não queria fazer a seleção de nenhuma das opções da lista e isso faz com que nenhum campo valor seja retornado.
    2. Valor Inicial
    1. determina qual será a primeira
    entrada de dado na seleção
    1. 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.
    2. Ao iniciar usar valor do primeiro registro
    1. quando marcada essa opção, irá aparecer na caixa de seleção o primeiro registro adicionado no atributo escolhido.
    2. Usar valor primitivo
    1. é o valor default, utilizado quando tinha-se os problemas de integração com os valores dos objetos que eram repassados para a caixa.
    2. Alterar cursor ao modificar
    1. coloca o cursor
    no
    1. do registro selecionado na caixa de seleção dinâmica no banco de dados.

    Templates

    Podendo ser cabeçalho e/ou rodapé, ele cria uma área para fazer um ajuste na caixa de seleção e para fazê-lo, utiliza-se as tags de HTML.

    Valor chave e valor exibição

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

    Por exemplo, tem-se a opção com o valor de exibição chamado oi e seu valor chave é hello. Enquanto na tela será exibido oi, o sistema estará usando hello no lugar.

    Template Cabeçalho

    Ele cria

    Template cabeçalhoadiciona

    uma área no início da lista de opções exibidas na caixa de seleção utilizando tags de HTML, podendo ser

    um texto

    de parágrafo,

    uma

    imagem, etc.

     

    Template

    rodapé

    Rodapé

    adiciona

    Ele cria uma área no fim da

    lista 

    lista de opções exibidas na caixa de seleção utilizando tags de HTML, podendo ser

    um text

    de parágrafo,

    uma

    imagem, etc.

    Painel
    titleNessa Página

    Índice

    Painel
    titleBotão do componente

     

    Painel
    titleImagem no Editor Visual

    Image Added