Forms (formulários adaptáveis e formulários HTML5) use as bibliotecas jQuery, Backbone.js e Underscore.js para obter 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 disponíveis do jQuery no Forms. Você também pode implementar uma lógica específica do formulário enquanto captura dados de usuários como restrições leadDigits/trailDigits ou implementar cláusulas de imagem. Os desenvolvedores de formulários podem criar e usar percepções personalizadas para melhorar a experiência de captura de dados e torná-la mais fácil de usar.
Este artigo destina-se a desenvolvedores com conhecimento suficiente dos 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 seguir estão 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 nas 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 registrar 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. |
role | A 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 container, 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 (da esquerda para a direita) e rtl (da direita para a esquerda). |
Além dessas opções, a estrutura fornece outras opções que variam dependendo do tipo de campo. Os detalhes das opções específicas dos campos 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 exibir esses eventos, alguns dos scripts gravados no formulário desse campo não funcionarão.
Evento | Descrição |
---|---|
XFA_ENTER_EVENTO | Esse evento é acionado sempre que o campo está em foco. Isso permite que o script "enter" seja executado no campo. A sintaxe para acionar o evento é (widget)._trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENTO) |
XFA_EXIT_EVENTO | Esse evento é acionado sempre que o usuário sai do campo. 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_EVENTO) |
XFA_CHANGE_EVENTO | 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_EVENTO) |
XFA_CLICK_EVENTO | Esse evento é acionado sempre que o campo é clicado. 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_EVENTO) |
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 o foco no campo e chama XFA_CLICK_EVENTO. |
markError:function(errorMessage, errorType) Observação: Aplicável somente 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 somente para formulários HTML5. |
Chamado se os erros no campo foram corrigidos. O widget oculta o erro. |
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.
Opção | Descrição |
---|---|
multiline | True se o campo suportar 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 somente para formulários HTML5 |
Especifica o comportamento do campo de texto quando a largura do texto excede a largura do widget. |
Opção | Descrição |
---|---|
valor |
Matriz de valores selecionados. |
items |
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 somente para formulários HTML5. |
Se o valor for verdadeiro, a entrada de texto personalizada será ativada no widget. |
displayValue |
Matriz de valores a serem exibidos. |
multiselect |
True se várias seleções forem permitidas, caso contrário false. |
Função | Descrição |
---|---|
addItem: function(itemValues) |
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() |
Limpa todas as opções da lista. |
Opções | Descrição |
---|---|
dataType | String que representa o tipo de dados do campo (inteiro/decimal). |
leadDigits | Máximo de dígitos à esquerda permitidos no número decimal. |
fracDigits | Máximo de dígitos de fração permitidos no número decimal. |
zero | Representação de string de zero na localidade do campo. |
decimal | Representação de string de decimal na localidade do campo. |
Opções | Descrição |
---|---|
values | Matriz de valores (ligado/desligado/neutro). É uma matriz de valores para os diferentes estados de checkButton. values[0] é o valor quando o estado está ON, values[1] é o valor quando o estado está OFF, |
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). |
Opção | Descrição |
---|---|
dias | Nome de dias localizado 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. |