Espaçamento e alinhamento vertical: ajustar com precisão a disposição do texto em campos de entrada e áreas de texto

O que é possível fazer no 4D 21 R5

A animação abaixo mostra o que pode conseguir ao combinar o alinhamento vertical e o preenchimento num objeto de entrada.

Alinhamento vertical

A propriedade «Alinhamento Vertical» está agora disponível na Lista de Propriedades do Editor de Formulários para objetos «Área de Texto» e «Entrada», com quatro valores: «padrão», «topo», «meio» e «fundo». Quando mantida no valor «padrão», a renderização permanece inalterada em comparação com a situação anterior à introdução desta funcionalidade, pelo que nada muda nos formulários existentes, a menos que opte explicitamente por ativá-la.

Também é possível definir o alinhamento programaticamente com o comando existente `OBJECT SET VERTICAL ALIGNMENT `, cujo comportamento efetivo foi agora alargado a estes dois objetos:

// Alinhamento vertical
OBJECT SET VERTICAL ALIGNMENT(*; "txtInput"; Align center)
$align:=OBJECT GET VERTICAL ALIGNMENT(*; "txtInput")

Preenchimento

Estão disponíveis quatro novas propriedades de preenchimento na Lista de Propriedades do Editor de Formulários para os objetos Área de Texto e Entrada: Preenchimento à esquerda, Preenchimento à direita, Preenchimento superior e Preenchimento inferior

A par destas propriedades, dois novos comandos permitem-lhe controlar com precisão o espaçamento interno: OBJECT SET PADDING e OBJECT GET PADDING . Ambos aceitam (ou devolvem) um objeto comos atributostop,bottom,left eright, expressos em píxeis:

// Preenchimento baseado em objeto
OBJECT SET PADDING(*; "txtInput"; {top: 8; right: 12; bottom: 10 left: 5})
$resolvedPadding:=OBJECT GET PADDING(*; "txtInput")
// Pode especificar apenas os atributos de preenchimento de que necessita; os atributos omitidos assumem o valor padrão 0
OBJECT SET PADDING (*; "txtInput"; {top: 8; bottom: 10})

$resolvedPadding:=OBJECT GET PADDING(*; "txtInput")

⚠️Nota: Estes comandos também funcionam com objetos «List Box »: apenas os valores «top» e «left» são tidos em conta, e cada um é aplicado simetricamente (o «top» tanto na parte superior como na inferior, e o «left» tanto à esquerda como à direita).

Um comportamento consistente, em todos os pontos de entrada

Independentemente da forma como configurar o alinhamento e o preenchimento (Editor de Formulários, propriedade JSON/objeto do formulário, CSS ou comandos 4D), o resultado apresentado é o mesmo. São suportados nomes de propriedades CSS padrão, a par das chaves específicas do 4D:

#txtInput {
vertical-align: middle;
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
}

O alinhamento e o preenchimento também se mantêm corretos à medida que os objetos alteram de tamanho: no Editor de Formulários, ao redimensionar um objeto, o seu alinhamento é recalculado automaticamente; em tempo de execução, os objetos com redimensionamento dinâmico mantêm o preenchimento consistente e recalculam o alinhamento à medida que são redimensionados.

Conclusão

Com estes novos controlos, tem mais liberdade para tornar cada formulário perfeito. Agora pode:

• Escolher o alinhamento vertical superior, central, inferior ou predefinido para os objetos «Texto Estático » e «Entrada de Texto ».
• Adicionar espaçamento independente nas partes superior, inferior, esquerda e direita.
• Utilizar o Editor de Formulários, o JSON do formulário, CSS ou comandos 4D, dependendo da forma como preferir criar os seus formulários.

E os seus formulários existentes também estão em boas mãos: quando não utilizam estas propriedades, continuam a ser apresentados exatamente como antes.

Para se aprofundar ainda mais neste tema, consulte a documentação da 4D ou visite o fórum da 4D se tiver alguma dúvida.