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

Última atualização: 4 de maio de 2023

Criado para:

  • Usuário
CAUTION
AEM 6.4 chegou ao fim do suporte estendido e esta documentação não é mais atualizada. Para obter mais detalhes, consulte nossa períodos de assistência técnica. Encontre as versões compatíveis here.

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

Este artigo é para desenvolvedores com conhecimento suficiente de 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 enter e exit.
  • A aparência é necessária para implementar um conjunto de funções. Algumas das funções são comuns, enquanto outras são específicas para funções de tipo de campo.

Opções comuns

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

PropriedadeDescrição
nameUm identificador usado para especificar esse objeto ou evento em expressões de script. Por exemplo, essa propriedade especifica o nome do aplicativo host.
valorValor real do campo.
displayValueEsse valor do campo é exibido.
screenReaderTextOs Reader de tela usam esse valor para narrar informações sobre o campo. O formulário fornece o valor e você pode substituir o valor .
tabIndexA 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.
funçãoFunção do elemento, por exemplo, Cabeçalho ou Tabela.
alturaA altura do widget. É especificado em pixels.
larguraA largura do widget. É especificado em pixels.
accessControles usados para acessar o conteúdo de um objeto de contêiner, como um subformulário.
paraStylesA propriedade para de um elemento XFA para o widget.
dirA 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 de acordo com o tipo de campo. Os detalhes das opções específicas de campos são listados abaixo.

Interação com o quadro 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 lançar esses eventos, alguns dos scripts escritos no formulário para esse campo não funcionarão.

Eventos acionados pelo widget

EventoDescrição
XFA_ENTER_EVENTEsse evento é acionado sempre que o campo está em foco. Ele permite que o script "enter" seja executado no campo. A sintaxe para acionar o evento é
(widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT)
XFA_EXIT_EVENTEsse evento é acionado sempre que o usuário deixa o campo . Ele permite que o mecanismo defina o valor do campo e execute seu script de "saída". A sintaxe para acionar o evento é
(widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT)
XFA_CHANGE_EVENTEsse 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_EVENT)
XFA_CLICK_EVENTEsse evento é acionado ao clicar no campo. 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_EVENT)

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çãoDescrição
foco: function()Coloca o foco no campo.
clique em: function()Coloca foco no campo e chama XFA_CLICK_EVENT.

markError:function(errorMessage, errorType)

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

Observação: Aplicável apenas 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 apenas para formulários HTML5.

Chamado se os erros no campo forem 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 diferentes campos, o widget deve estar em conformidade com as diretrizes desse campo específico.

Edição de texto: Campo de texto

OpçãoDescrição
multilineTrue se o campo suporta a inserção de um caractere de nova linha, caso contrário false.
maxCharsNúmero máximo de caracteres que podem ser inseridos no campo.

limitLengthToVisibleArea

Observação: Aplicável apenas aos formulários HTML5

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

Lista de opções: ListaSuspensa, CaixaLista

OpçãoDescrição
valorMatriz de valores selecionados.
itensMatriz 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 apenas para formulários HTML5.

Se o valor for true, a entrada de texto personalizada será ativada no widget.
displayValueMatriz de valores a serem exibidos.
multisseleçãoTrue se várias seleções forem permitidas, caso contrário false.

API

FunçãoDescrição
addItem: function(itemValues)
itemValues: objeto que contém o valor de exibição e salvamento
{sDisplayVal: <displayvalue>, sSaveVal: <save value="">}		Adiciona um item à lista.
deleteItem : function(nIndex)
nÍndice: índice do item a ser removido da lista		Exclui uma opção da lista.
clearItems: function()Apaga todas as opções da lista.

NumericEdit: NumericField, DecimalField

OpçõesDescrição
dataTypeSequência de caracteres que representa o tipo de dados do campo (inteiro/decimal).
leadDigitsDígitos máximos à esquerda permitidos no número decimal.
fracDigitsDígitos da fração máxima permitidos no número decimal.
zeroRepresentação de string de zero na localidade do campo.
decimalRepresentação de string do decimal na localidade do campo.

Botão de Verificação: RadioButton, CheckBox

OpçõesDescrição
values

Matriz de valores (ativado/desativado/neutro).

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

states

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çãoDescrição
diasNome localizado de dias para esse campo.
mesesNomes de mês localizados para esse campo.
zeroO texto localizado para o número 0.
clearTextO texto localizado para o botão limpar.
Página anterior
Próxima página

Experience Manager