Estrutura de aparência para formulários adaptáveis e HTML5

O Forms (formulários adaptáveis e formulários HTML5) usa as bibliotecas jQuery, Backbone.js e Underscore.js para obter aparência e scripts. Os formulários também usam a arquitetura jQuery UI Widgets para todos os elementos interativos (como campos e botões) no formulário. Essa arquitetura permite que o desenvolvedor de formulários use um conjunto avançado de widgets e plug-ins disponíveis do jQuery no Forms. Você também pode implementar uma lógica específica do formulário enquanto captura dados de usuários como restrições leadDigits/trailDigits ou implementar cláusulas de imagem. Os desenvolvedores de formulários podem criar e usar percepções personalizadas para melhorar a experiência de captura de dados e torná-la mais fácil de usar.

Este artigo destina-se a desenvolvedores com conhecimento suficiente dos widgets jQuery e jQuery. Ele fornece informações sobre a estrutura de aparência e permite que os desenvolvedores criem uma aparência alternativa para um campo de formulário.

A estrutura de aparência depende de várias opções, eventos (acionadores) e funções para capturar as interações do usuário com o formulário e responde às alterações no modelo para informar o usuário final. Além disso:

  • A estrutura fornece um conjunto de opções para a aparência de um campo. Essas opções são pares de valores chave e divididas em duas categorias: opções comuns e opções específicas de tipo de campo.
  • A aparência, como parte do contrato, aciona um conjunto de eventos como entrada e saída.
  • A aparência é necessária para implementar um conjunto de funções. Algumas funções são comuns, enquanto outras são específicas para funções de tipo de campo.

Opções comuns

A seguir estão as opções globais definidas. Essas opções estão disponíveis para cada campo.

Propriedade Descrição
name Um identificador usado para especificar esse objeto ou evento nas expressões de script. Por exemplo, essa propriedade especifica o nome do aplicativo host.
valor Valor real do campo.
displayValue Esse valor do campo é exibido.
screenReaderText Os Reader de tela usam esse valor para registrar informações sobre o campo. O formulário fornece o valor e você pode substituí-lo.
tabIndex A posição do campo na sequência de tabulação do formulário. Substitua tabIndex somente se desejar alterar a ordem de tabulação padrão do formulário.
role A função do elemento, por exemplo, Cabeçalho ou Tabela.
altura A altura do widget. É especificado em pixels.
largura A largura do widget. É especificado em pixels.
access Controles usados para acessar o conteúdo de um objeto de container, como um subformulário.
paraStyles A propriedade para de um elemento XFA para o widget.
dir A direção do texto. Os valores possíveis são ltr (esquerda para a direita) e rtl (direita para a esquerda).

Além dessas opções, a estrutura fornece outras opções que variam dependendo do tipo de campo. Os detalhes das opções específicas dos campos estão listados abaixo.

Interação com a estrutura de formulários

Para interagir com a estrutura de formulários, um widget aciona alguns eventos para permitir que o script de formulário funcione. Se o widget não exibir esses eventos, alguns dos scripts gravados no formulário desse campo não funcionarão.

Eventos acionados pelo widget

Evento Descrição
XFA_ENTER_EVENTO Esse evento é acionado sempre que o campo está em foco. Isso permite que o script "enter" seja executado no campo. A sintaxe para acionar o evento é
(widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENTO)
XFA_EXIT_EVENTO Esse evento é acionado sempre que o usuário sai do campo. Permite que o mecanismo defina o valor do campo e execute seu script "exit". A sintaxe para acionar o evento é
(widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENTO)
XFA_CHANGE_EVENTO Esse evento é acionado para permitir que o mecanismo execute o script "change" gravado no campo. A sintaxe para acionar o evento é
(widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENTO)
XFA_CLICK_EVENTO Esse evento é acionado sempre que o campo é clicado. permite que o mecanismo execute o script "click" gravado no campo. A sintaxe para acionar o evento é
(widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENTO)

APIs implementadas pelo widget

A estrutura de aparência chama algumas funções do widget que são implementadas nos widgets personalizados. O widget deve implementar as seguintes funções:

Função Descrição
foco: function() Coloca o foco no campo.
clique em: function() Coloca o foco no campo e chama XFA_CLICK_EVENTO.

markError:function(errorMessage, errorType)

errorMessage: string representando o erro
errorType: string ("warning"/"error")

Observação: Aplicável somente para formulários HTML5.

 Envia mensagem de erro e tipo de erro para o widget. O widget exibe o erro.

clearError: function()

Observação: Aplicável somente para formulários HTML5.

 Chamado se os erros no campo foram corrigidos. O widget oculta o erro.

Opções específicas para o tipo de campo

Todos os widgets personalizados devem estar em conformidade com as especificações acima. Para usar os recursos de campos diferentes, o widget deve estar em conformidade com as diretrizes desse campo específico.

TextEdit: Campo de texto

Opção Descrição
multiline True se o campo suportar a inserção de um caractere de nova linha, caso contrário false.
maxChars Número máximo de caracteres que podem ser inseridos no campo.

limitLengthToVisibleArea

Observação: Aplicável somente para formulários HTML5

 Especifica o comportamento do campo de texto quando a largura do texto excede a largura do widget.

ChoiceList: Lista suspensa, Caixa de listagem

Opção Descrição
valor
 Matriz de valores selecionados.
items
 Matriz de objetos a serem exibidos como opções. Cada objeto contém duas propriedades - salvar
: valor a ser salvo, exibir: valor a ser exibido.

editável

Observação: Aplicável somente para formulários HTML5.

 Se o valor for verdadeiro, a entrada de texto personalizada será ativada no widget.
displayValue
 Matriz de valores a serem exibidos.
multiselect
 True se várias seleções forem permitidas, caso contrário, false.

API

Função Descrição

addItem: function(itemValues)
itemValues: objeto que contém o valor de exibição e salvamento
{sDisplayVal: <displayValue>, sSaveVal: <salvar valor>}

 Adiciona um item à lista.
deleteItem: function(nIndex)
nIndex: índice do item a ser removido da lista


 Exclui uma opção da lista.
clearItems: function() Limpa todas as opções da lista.

NumericEdit: NumericField, DecimalField

Opções Descrição
dataType String que representa o tipo de dados do campo (inteiro/decimal).
leadDigits Máximo de dígitos à esquerda permitidos no número decimal.
fracDigits Máximo de dígitos de fração permitidos no número decimal.
zero Representação de string de zero na localidade do campo.
decimal Representação de string de decimal na localidade do campo.

CheckButton: RadioButton, CheckBox

Opções Descrição
values

Matriz de valores (ligado/desligado/neutro).

É uma matriz de valores para os diferentes estados de checkButton. valores[0] é o valor quando o estado está ATIVADO, valores[1] é o valor quando o estado está OFF,
valores[2] é o valor quando o estado é NEUTRAL. O comprimento da matriz de valores é igual ao valor da opção de estado.
estados

Número de estados permitidos.

Dois para formulários adaptáveis (Ligado, Desligado) e três para formulários HTML5 (Ligado, Desligado, Neutro).
estado

Estado atual do elemento.

Dois para formulários adaptáveis (Ligado, Desligado) e três para formulários HTML5 (Ligado, Desligado, Neutro).

DateTimeEdit: (DateField)

Opção Descrição
dias Nome de dias localizado para esse campo.
meses Nomes de mês localizados para esse campo.
zero O texto localizado para o número 0.
clearText O texto localizado para o botão limpar.

Nesta página