DocumentaçãoAEM 6.4Guia do Forms

Estrutura de aparência para formulários adaptáveis e HTML5 appearance-framework-for-adaptive-and-html-forms

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

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 common-options

Veja a seguir 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 em 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 narrar informações sobre o campo. O formulário fornece o valor e você pode substituir o valor .
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.
função
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 contêiner, 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 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 interaction-with-forms-framework

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 events-triggered-by-widget

Evento
Descrição
XFA_ENTER_EVENT
Esse 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_EVENT
Esse 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_EVENT
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_EVENT)
XFA_CLICK_EVENT
Esse 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 apis-implemented-by-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 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 options-specific-to-type-of-field

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 textedit-text-field

Opção
Descrição
multiline
True se o campo suporta 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 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 choicelist-dropdownlist-listbox

Opção
Descrição
valor
Matriz de valores selecionados.
itens
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 apenas para formulários HTML5.

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

API api

Função
Descriçã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 numericedit-numericfield-decimalfield

Opções
Descrição
dataType
Sequência de caracteres que representa o tipo de dados do campo (inteiro/decimal).
leadDigits
Dígitos máximos à esquerda permitidos no número decimal.
fracDigits
Dígitos da fração máxima permitidos no número decimal.
zero
Representação de string de zero na localidade do campo.
decimal
Representação de string do decimal na localidade do campo.

Botão de Verificação: RadioButton, CheckBox checkbutton-radiobutton-checkbox

Opções
Descriçã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) datetimeedit-datefield

Opção
Descrição
dias
Nome localizado de dias 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.
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da