DocumentaçãoAEM 6.5Guia do usuário

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

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • Usuário
  • Desenvolvedor

O Forms (formulários adaptáveis e formulários HTML5) usa as bibliotecas jQuery, Backbone.js e Underscore.js para 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 jQuery disponíveis no Forms. Você também pode implementar a lógica específica do formulário enquanto captura dados de usuários como restrições leadDigits/trailDigits ou implementa cláusulas de figura. Os desenvolvedores de formulários podem criar e usar aparê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 do 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 do tipo de campo.
  • A aparência, como parte do contrato, aciona um conjunto de eventos, como entrar e sair.
  • 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 o conjunto de opções globais. Essas opções estão disponíveis para cada campo.

Propriedade
Descrição
name
Um identificador usado para especificar este 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 substituí-lo.
tabIndex
A posição do campo na sequência de guias 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. Ele é especificado em pixels.
largura
A largura do widget. Ele é especificado em pixels.
acesso
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 algumas outras opções que variam dependendo do tipo de campo. Os detalhes das opções específicas de campo estão listados abaixo.

Interação com o framework 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 "exit". 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 sempre que o campo é clicado. ele 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 dispositivo deve implementar as seguintes funções:

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

markError:function(errorMessage, errorType)

errorMessage: cadeia de caracteres representando o erro
errorType: cadeia de caracteres ("aviso"/"erro")

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

Envia uma mensagem de erro e um 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 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 campos diferentes, o widget deve estar em conformidade com as diretrizes desse campo específico.

TextEdit: Campo de texto textedit-text-field

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

limitLengthToVisibleArea

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

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

ChoiceList: DropDownList, ListBox 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 -
save: valor a ser salvo, exibição: valor a ser exibido.

editável

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

Se o valor for true, a entrada de texto personalizado será habilitada no widget.
displayValue
Matriz de valores a serem exibidos.
multiselect
Verdadeiro se várias seleções forem permitidas, caso contrário, falso.

API api

Função
Descrição
addItem: function(itemValues)
itemValues: objeto que contém a exibição e o valor salvo
{sDisplayVal: <displayValue>, sSaveVal: <save Value>}
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 numericedit-numericfield-decimalfield

Opções
Descrição
dataType
Sequência de caracteres que representa o tipo de dados do campo (inteiro/decimal).
leadDigits
Máximo de dígitos à esquerda permitido no número decimal.
fracDigits
Máximo de dígitos fracionários permitidos no número decimal.
zero
Representação de cadeia de caracteres de zero na localidade do campo.
decimal
Representação de cadeia de caracteres do decimal no local do campo.

CheckButton: RadioButton, CheckBox checkbutton-radiobutton-checkbox

Opções
Descrição
valores

Matriz de valores (ligada/desligada/neutra).

É uma matriz de valores para os diferentes estados do checkButton. values[0] é o valor quando o estado é ON, values[1] é o valor quando o estado é OFF,
values[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) datetimeedit-datefield

Opção
Descrição
dias
Nome localizado de dias para esse campo.
meses
Nomes de meses 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
19ffd973-7af2-44d0-84b5-d547b0dffee2