Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
Uso do Forms (formulários adaptáveis e formulários HTML5) jQuery, Backbone.js e Underscore.js bibliotecas para aparência e script. Os formulários também usam o Interface do jQuery 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.
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 substituir o valor.
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.
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.
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)
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:
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: string representando o erro
errorType: string ("aviso"/"erro")
Nota: Aplicável somente a formulários HTML5.
Envia uma mensagem de erro e um tipo de erro para o widget. O widget exibe o erro.
clearError: function()
Nota: Aplicável somente a 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
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
Nota: 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
value
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, display: valor a ser exibido.
editável
Nota: 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 ser exibida.
multiselect
True se várias seleções forem permitidas, caso contrário, false.
API api
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 : função(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
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.
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
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.