Texto

Configuração Geral

Esse tipo de campo permite que o desenvolvedor crie de forma rápidas inputs para a inserção e atualização de dados, onde o usuário final informar os seus dados para que possam ser alocados no banco de dados.

Tipo do Dado

Define o tipo do campo na aplicação. Neste caso devemos selecionar Texto.

Label

Define o título que será exibido no campo ao executar a aplicação. A terminologia utilizada na interface é fundamental para que seu sistema tenha uma boa usabilidade, devemos utilizar nomes e termos familiares para o usuário final da aplicação, ao invés de utilizarmos termos originados no sistema.

Por exemplo, este campo texto que na tabela possui o nome nomevendedor, o cliente teria um entendimento melhor da funcionalidade do campo ao definirmos a label como Nome do Vendedor.

Alem de um texto fixo, o atributo Label permite a utilização de lang para definir o título do campo, possibilitando assim a internacionalização de sua Aplicação.

Preenchimento automático do navegador

Define se o campo permitirá o preenchimento automático do navegador. Por padrão, o preenchimento automático dos campos é permitido.

• Quando estiver desabilitado, o campo permitirá o preenchimento automático pelo navegador.
• Quando estiver habilitado, o preenchimento automático do campo será bloqueado.

Etiqueta abaixo do campo

Define a mensagem a ser exibida abaixo do campo.

Marca d’água

Informando um texto para a Marca d’água será exibido no input um texto com um exemplo do que pode ser informado no campo. O resultado após configurado será esse:

Valor Inicial(tipo)

Possibilita a definição de um valor inicial para o campo quando o formulário estiver em modo de inclusão. É possível escolher entre duas opções:

Valor Definido: Ao selecionar esta opção, o atributo Valor Inicial será disponibilizado, onde devemos informar o valor inicial do campo.
Por exemplo, meu valor inicial é Arlindo, ao inserir um novo registro, o campo Nome do Vendedor será iniciado com Arlindo.

Data do Sistema: Ao selecionar esta opção, o valor inicial será a data atual do sistema do seu computador.

Quantidade de Caracteres

Permite configurar a largura do input do campo texto de acordo com a quantidade de caracteres informada. Entretanto, se a quantidade digitada for maior do que a configurada, o texto será empurrado para a equerda, com o intuito de garantir a quantidade máxima de caracteres configurada.

Mostrar Conteúdo HTML

Habilitando essa opção, será exibido no campo todo o conteúdo HTML, CSS e Javascript que estão inseridas no banco de dados junto com o valor principal.

Imagem de Validação

Ao habilitar está opção, uma imagem será mostrada ao lado do campo(conforme as imagens abaixo) informado se o campo está de acordo com as configurações de Tamanho Mínimo e Tamanho Maximo definidos em Formatação dos Valores.

No exemplo abaixo, o campo foi configurado para receber no mínimo 5 caracteres, veja o que ocorre ao informar apenas 4 caracters:

Entretanto se informar 5 ou mais caracteres o campo será mostrado dessa forma:

Campo tipo Senha

Habilitando essa opção, o campo texto será convertido para o formato utilizado nos campos de senhas. Ao executar a aplicação, o texto escrito será convertido para o formato de senha, como o exemplo:

Mostrar caracteres da senha

Habilitando essa opção, irá ser exibido no campo da senha um botão para que a senha seja exibida quando clicado.

Gravar Variável

Permite gravar uma variável de sessão(variável global) com o valor do campo, para ser utilizado em outras aplicações.

Por exemplo, no formulário de login o nome do usuário pode ser salvo em sessão e exibido no cabeçalho de outras aplicações.

Nome da Variável

Neste atributo devemos definir o nome da variável de sessão, habilitado no item anterior, que receberá o valor do campo.

Devemos informar apenas o nome da variável, - var_rating.

A recuperação do valor é feita em forma de variável global.

Máscara de Exibição:

Define a máscara de exibição do campo. São dois os tipos de máscara descritos na tabela abaixo:

Por exemplo, é possível configurar a máscara para a exibição de um número de telefone:

Ele irá aparecer com a seguinte formatação na execução:

Também é possível configurar a máscara de exibição da seguinte maneira:

Exemplos de máscaras:

Validar com Máscara

Habilitando essa opção é possível inserir os dados com a máscara que foi configurada na opção Máscara de Exibição .

Completar à Esquerda Com

Ao realizar a configuração dessa opção, o valor definido será adicionado ao começo da informação inserida no campo caso o valor seja menor ao máximo configurado na opção Tamanho Máximo.

Tamanho do Campo

Define o tamanho do campo em relação ao tamanho que foi configurado na base dados. Por padrão esse valor já é configurado automaticamente quando a aplicação é gerada.

Campo Escondido

Habilitando essa opção, o campo em questão será escondido na aplicação no momento de execução.

Campo Label

Habilitadno essa opção, o campo será alterado para apenas um label onde será exibida a informação, não sendo possível realizar alterações ou inserções no campo configurado como label.

Gravar tags HTML

Habilitando essa opção, ela permite que tags HTML’s que sejam inseridas no campo sejam inseridas junto com o dado, ao invés de ser interpretada.

Entrada de texto em Javascript

Habilitando essa opção, será exibido no campo todo o conteúdo Javascript que estiver inserido no banco de dados junto com o valor principal.

Essa opção só é executada utilizando o formato Grid Editável View.

Preenchimento automático do navegador

Define se o campo permitirá o preenchimento automático pelo navegador. Por padrão, o preenchimento automático dos campos é permitido.

• Quando estiver desabilitado, o campo permitirá o preenchimento automático pelo navegador.
• Quando estiver habilitado, o preenchimento automático do campo será bloqueado.

Desabilitar campo

Permite desabilitar o campo, impossibilitando que o usuário digite um valor de acordo com a opção definida pelo desenvolvedor.

As opções disponíveis são: Não - Valor inicial do atributo, esta opção não desabilita o campo.
Modo de Atualização - Esta opção desabilita o campo apenas na edição dos registros.
Modo de Inserção - Esta opção desabilita o campo apenas inserção de novos registros.
Modo de Atualização / Inserção - Esta opção desabilita o campo tanto na edição quanto na inserção de novos registros.

Tipo HTML

Objeto HTML usado para exibir o campo no formulário.

Tipo SQL

Informa o tipo do campo no banco de dados.

Configuração do Filtro

Usar autocomplete:

O campo se transforma em autocomplete automaticamente de acordo com os valores existentes na base de dados.

Usar Select2

Essa opção permite a utilização do novo componente para selecção de dados, permitindo pesquisas na caixa de seleção.

Quantidade de caracteres

Define a quantidade mínima de caracteres para o inicio da busca no Select2.

Quantidade de linhas

Define a quantidade de linhas que será mostrada na busca do Select2.

Quantidade de caracteres:

Define a quantidade de caracteres para iniciar a pesquisa.

Quantidade de linhas:

Define o número máximo de linhas para listar o resultado da pesquisa.

Largura:

Define a largura em pixels para a caixa de resultados.

Opções de pesquisa:

Define a validação que será feita para buscar o resultado da pesquisa.

Início igual: Irá trazer os resultados com o inicio igual ao da busca.
Qualquer parte: Irá trazer os resultados onde existe a busca em qualquer parte do registro.
Final igual: Irá trazer os resultados com o final igual ao da busca.

Posição entre valores:

Define a posição que os objetos serao exibidos.

Texto entre valores:

Texto que aparecerá entre os valores.

Submeter no Onchange:

Permite quando ativada, submeter o filtro quando houver alterações no campo.

Exibir Condição:

Permite quando ativada exibir ou não a condição do filtro, a mesma só funcionará se o filtro tiver ao menos uma opção.

Configuração de Visualização

Permite definir valores de CSS para o campo individualmente. Desta forma, por exemplo, podemos destacar um campo dos demais na aplicação.
As propriedades CSS do campo, quando alteradas, são adicionadas à uma classe criada automaticamente pelo Scriptcase para cada campo da aplicação.

As configurações individuais do CSS dos campos, quando informadas, sobrepõem as configurações do tema(CSS das Aplicações (Temas)) selecionado para a aplicação.

As configurações de visualização são divididas em três blocos de propriedades, estes blocos são:

CSS do Título

Que possibilita a alteração das propriedades do CSS da Label(Título) do campo.

No exemplo abaixo, podemos visualizar a diferença nas configurações do titulo do campo.
Enquanto os campos Fornecedor e Categoria possuem a mesma formatação, herdada do tema da aplicação, o campo Avaliação do Produto possui uma formatação diferente dos demais, proveniente das alterações realizadas no CSS do campo.

CSS do Campo

Que altera as propriedades do CSS da <td> onde o Objeto Input(onde informamos os dados para inserção em um formulário) está posicionado. Na imagem abaixo, podemos visualizar onde as alterações são aplicadas.

Campo com alterações nas propriedades do CSS do Campo, alterando a cor de fundo e o alinhamento horizontal

CSS do Objeto Input

Que altera as propriedades do CSS no Objeto Input do campo, onde digitamos os dados em um formulário.

Campo com alterações nas propriedades do CSS do Objeto Input, alterando a cor de fundo e cor da fonte do input

Propriedades CSS

As opções de configuração disponíveis são basicamente as mesmas para cada um dos blocos de configuração mencionados acima.

Descrição dos atributos da configuração disponíveis

Fonte

Altera a fonte do texto de acordo com as fontes selecionadas, utilizando a propriedade font-family.

Nesta opção, disponibilizamos alguns tipos de fontes(conforme imagem abaixo).

Tamanho

Altera o tamanho da fonte do texto utilizando a propriedade font-size na classe do campo.

Devemos selecionar o valor disponível em nossa lista, a medida utilizada para esta propriedade é o pixel.

Cor da fonte

Define a cor da fonte utilizado a propriedade color na classe do campo.

Cor de fundo

Define a cor de fundo, utilizado a propriedade background-color na classe do campo.

As cores que serão utilizadas nas duas propriedade de cores listadas acima, Cor da fonte e Cor de fundo, podem ser informadas por meio da paleta de cores - - disponível ao lado do campo ou informado manualmente os valores nos formatos aceitos que são: Hexadecimal, RGB, RGBA, HSL, HSLA ou o Nome da Cor.

Paleta de Cores
Ao clicar no ícone da paleta de cores - - ao lado do campo, uma janela será aberta com algumas cores predeterminadas.

Ao selecionar uma das cores, será inserido um valor no formato hexadecimal(HEX), que representa a cor escolhida.

Hexadecimal
Sigla para hexadecimal, este código é composto do sinal de cerquilha (#) mais seis dígitos.
Os dois primeiros definem a intensidade da cor vermelha; os dois do meio dizem respeito ao verde e os dois últimos, ao azul.

Este código é representado por #000000.

Nesse sistema de representação o #000000 representa a cor preta e o #ffffff representa a cor branca.

RGB / RGBA Sigla que representa Vermelho (Red), o Verde (Green) e o Azul (Blue).
Este código é representado por RGB(255,255,255).

Os três primeiros números definem a intensidade da cor vermelha; os três números do meio dizem respeito ao verde e os três últimos números representam o azul.

HSL / HSLA

Nome das Cores
Devemos informar o nome da cor que desejamos utilizar. Este nome deve ser informado em inglês e a cor deve está dentro da lista de cores suportadas pelo navegador que iremos utilizar.

Exemplo:

Alguns sites disponibilizam uma lista de cores com cada um dos valores citados acima.

especificar as cores de diferêntes maneirasutilizando diferentes maneiras de atribuição de valores

Esta propriedade possibilita

É possível também informar valores diretamente no campo, sem a utilização da nossa paleta de cores.
Esta propriedade permite especificar as cores de diferentes maneiras de se atribuir valores para as propriedades CSS que admitem cores

Negrito

Permite aplicar o tipo negrito na fonte.

Sublinhado

Permite aplicar o tipo sublinhado na fonte.

Estilo da Borda

Define o estilo da fonte.

Collapse da Borda

Define o collapse da borda.

Tamanho da Borda

Permite aumenta o tamanho da borda do título.

Cor da Borda

Permite escolher a cor da borda, utilizando uma paleta de cores para ser aplicada no título.

Alinhamento Horizontal

Permite posicionar o label do filtro no local desejado (left,rigth,center e justify).

Alinhamento Vertical

Permite posicionar o label do fitro no local desejado (baseline, sub, super, top, text-top, middle, bottom, text-bottom).

Não disponível no CSS do Objeto Input

Largura

Para definir a largura do título.

Altura

Para definir a altura do título.

Configuração de Ajuda

Permite que o desenvolvedor adicione instruções e dicas de utilização no campo, permintindo assim que o desenvolvedores auxiliem os usuários no entendimento e na utilização do sistema.

Tipo do Help

Forma de exibição do help.

Descrição dos atributos da configuração.

Descreva Ajuda

Area destinada a inclusão do texto que será apresentado na aplicação de acordo com o tipo selecionado abaixo.

Hint

Exibe um ícone padrão ? ao lado do campo. Ao posicionar o mouse sobre o ícome, a mensagem será exibida.

O ícone exibido ao selecionar os tipos Hint ou Popup variam de acordo com o tema que está sendo utilizado. Este ícone pode ser alterado no [css dos botoes].

Texto

Exibe o texto dentro de um <span></span> ao lado do campo.

Pop-up

Exibe um ícone padrão ? ao lado do campo. Para exibir a mensagem basta clicar no ícone, um pop-up será exibido contendo o texto.

Tippy

Exibe um ícone padrão ? ao lado do campo. Ao posicionar o mouse sobre o ícome, a mensagem será exibida de forma mais amigável.

Configurações do tipo de ajuda (Tippy)

Descreva Ajuda : Define onde será exibido o botão de ajuda do campo

Posição do botão Ajuda : Define qual a posição de exibição do hint Tippy em relação ao ícone de ajuda do campo

Tempo para abrir o hint Tippy : Define o tempo em milissegundos para que o hint Tippy seja exibido após o mouse passar por cima do ícone de ajuda.

Tempo para fechar o hint Tippy : Define o tempo em milissegundos para que a dica do Tippy fique oculta após o mouse sair do ícone de ajuda.

Largura do hint Tippy : Define a largura da dica Tippy em pixels.

Posição do botão ajuda (Exceto Tippy)

Define onde o botão ajuda irá aparecer no campo da aplicação em execução. As opções são:

Ao lado: O ícone de ajuda irá aparecer ao lado do campo. Na coluna: O ícone de ajuda irá aparecer ao lado do label do campo.