Função

O componente é muito similar ao entrada de texto, porém possui o subcomponente Botão e é utilizado quando se quer obter dados de entrada e executar uma ação em seguida. Por padrão o componente é iniciado com configurações básicas, mas são facilmente alteradas pelo menu de propriedades do componente.

Figura 1 - Exemplo de imagem do componente executando no browser

Um exemplo de uso desse componente seria em um cenário onde se deseja, ao clicar no botão, realizar alguma ação com os valores inseridos no campo de texto.

Principais propriedades

Aba propriedades

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

Propriedades do subcomponente input

As propriedades abaixo não são nativas do componente. Para adicionar essas ou outras propriedades, será necessário selecionar o subcomponente input, desagrupando o componente principal e inserindo, na propriedade Nova propriedade, uma das propriedades abaixo, como mostra a figura 2.

Aba de Eventos

Na tabela abaixo estão descritos os tipos de eventos disponíveis para o componente Entrada de texto com botão.

Aba de Estilos

Na tabela abaixo estão descritos os tipos de estilos disponíveis para o componente Entrada de texto com botão.

Subcomponentes

O componente Entrada de texto com botão (web) é formado por três subcomponentes agrupados: label, input e botão. Ao clicar no ícone de cadeado, na barra de opções (destaque 1 da figura 2) o componente é desbloqueado, permitindo a seleção de seus subcomponentes. Para inserir uma das propriedades mostradas na tabela de subcomponente, acesse a propriedade Nova propriedade (destaque 2 da figura 2).

Figura 2 - Desagrupar componente para acessar subcomponentes 

Tipo

No parâmetro Tipo (destaque 1 da figura 3) é possível determinar o tipo de informação que o componente Entrada de texto com botão irá receber. Como apresentado na figura 3, arrastamos 2 componentes Entrada de texto com botão e em cada um selecionamos um tipo diferente, são eles Telefone (2) e Data (3). 

Figura 3 - Selecionando tipos

Após executarmos o projeto e acessarmos a view, verificamos que os dois componentes Entrada de texto com botão inseridos anteriormente na figura 3, estão recebendo tipos de informações diferentes, o primeiro recebe um telefone e o segundo uma data (Figura 3.1).

Figura 3.1 - Exemplos de tipos

Além dos tipos mostrados acima, também possuímos outros tipos, abaixo listaremos a funcionalidade de cada um:

• Texto: recebe uma informação do tipo texto;
• Número: aceita números com casas decimais;
• Inteiro: recebe apenas números inteiros;
• Moeda: recebe números inteiros e o separa com pontos a cada 3 dígitos, ex.: 1.000 (mil);
• Decimal de moeda: recebe números e separa, além de pontos a cada 3 dígitos, também por vírgulas os números decimais, ex.: 1.000,50 (mil e cinquenta centavos);
• Senha: recebe informações do tipo senha, escondendo com "*" o valor digitado;
• Data: recebe informações do tipo Data sem hora;
• Data e hora: recebe informações do tipo Data contendo a hora;
• Data e hora local: recebe informações do tipo Data contendo a hora no fuso horário local;
• Cor: recebe cores do tipo RGB;
• E-mail: recebe informações do tipo e-mail, contendo "email@email", caso não esteja desta forma, o campo ficará vermelho dando entender ao usuário que o valor digitado não é um e-mail;
• Mês: recebe o nome do mês desejado;
• Alcance: muda o formato para uma barra que informará o alcance de 0 a 100;
• Pesquisa: recebe uma informação do tipo texto;
• Telefone: recebe números de telefones já com a máscara (DDD) 00000-0000;
• Hora: recebe informação no formato de horário, ex.: 05:17:13.
• Hora local: recebe informação no formato de horário, ex.: 05:17:13 no fuso horário local;
• Url: recebe informações do tipo Url no formato "http://exemplo.com/", caso não esteja desta forma, o campo ficará vermelho dando entender ao usuário que o valor digitado não é uma Url;
• Semana: recebe o nome do dia na semana.