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

ATENÇÃO

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.

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

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

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

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

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çã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

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

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

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

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)

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.

Nesta página