DocumentaçãoAEM 6.5Guia do usuário

Criar aparências personalizadas em formulários HTML5 create-custom-appearances-in-html-forms

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

Criado para:

  • Administrador
  • Usuário
  • Desenvolvedor

Você pode conectar widgets personalizados a um Forms móvel. Você pode estender widgets jQuery existentes ou desenvolver seus próprios widgets personalizados usando a estrutura de aparências. O mecanismo XFA usa vários widgets, consulte Estrutura de aparência para formulários adaptáveis e HTML5 para obter informações detalhadas.

Um exemplo de widget padrão e personalizado

Um exemplo de widget padrão e personalizado

Integração de widgets personalizados com formulários HTML5 integrating-custom-widgets-with-html-forms

Criar um perfil  create-a-profile-nbsp

Você pode criar um perfil ou escolher um perfil existente para adicionar um widget personalizado. Para obter mais informações sobre como criar perfis, consulte Criando um perfil personalizado.

Criar um dispositivo create-a-widget

Os formulários HTML5 fornecem uma implementação da estrutura de widgets que pode ser estendida para criar novos widgets. A implementação é um widget jQuery abstractWidget que pode ser estendido para gravar um novo widget. O novo widget pode se tornar funcional somente estendendo/substituindo as funções mencionadas abaixo.

Função/Classe
Descrição
renderizar
A função de renderização retorna o objeto jQuery para o elemento de HTML padrão do widget. O elemento de HTML padrão deve ser do tipo focalizável. Por exemplo, <a>, <input> e <li>. O elemento retornado é usado como $userControl. Se o $userControl especificar a restrição acima, então as funções da classe AbstractWidget funcionam como esperado, caso contrário algumas das APIs comuns (foco, clique) exigem alterações.
getEventMap
Retorna um mapa para converter eventos HTML em eventos XFA.
{
desfoque: XFA_EXIT_EVENT,
}
Este exemplo mostra que o desfoque é um evento HTML e XFA_EXIT_EVENT é um evento XFA correspondente.
getOptionsMap
Retorna um mapa que fornece detalhes sobre qual ação executar ao alterar uma opção. As teclas são as opções fornecidas ao widget e os valores são as funções que são chamadas sempre que uma alteração nessa opção é detectada. O widget fornece manipuladores para todas as opções comuns (exceto value e displayValue)
getCommitValue
A estrutura Widget carrega a função sempre que o valor do widget é salvo no XFAModel (por exemplo, no evento de saída de um textField). A implementação deve retornar o valor salvo no widget. O manipulador recebe o novo valor da opção.
showValue
Por padrão, no XFA, em inserir evento, o rawValue do campo é exibido. Esta função é chamada para mostrar rawValue para o usuário.
showDisplayValue
Por padrão, no XFA no evento de saída, o valor formatado do campo é exibido. Esta função é chamada para mostrar o formattedValue para o usuário.

Para criar seu próprio widget, no perfil criado acima, inclua referências do arquivo JavaScript que contém funções substituídas e funções recém-adicionadas. Por exemplo, o sliderNumericFieldWidget é um widget para Campos numéricos. Para usar o widget em seu perfil na seção de cabeçalho, inclua a seguinte linha:

window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);

Registrar widget personalizado com o mecanismo de script XFA  register-custom-widget-with-xfa-scripting-engine-nbsp

Quando o código de widget personalizado estiver pronto, registre o widget com o mecanismo de script usando a registerConfigAPI para o Form Bridge. É necessário widgetConfigObject como entrada.

window.formBridge.registerConfig("widgetConfig",
        {
        ".<field-identifier>":"<name-of-the-widget>"
        }
    );

widgetConfigObject widgetconfigobject

A configuração do widget é fornecida como um objeto JSON (uma coleção de pares de valores chave), em que a chave identifica os campos e o valor representa o widget a ser usado com esses campos. Um exemplo de configuração é semelhante a:

*{*

*"identifier1" : "customwidgetname",
"identifier2" : "customwidgetname2",
..
}*

onde "identifier" é um seletor CSS jQuery que representa um campo específico, um conjunto de campos de um tipo específico ou todos os campos. Veja a seguir o valor do identificador em casos diferentes:

Tipo de identificador
Identificador
Descrição
Campo específico com nome nome do campo
Identificador:"div.fieldname"
Todos os campos com o nome ‘fieldname’ são renderizados usando o widget.
Todos os campos do tipo "type"(onde type é NumericField, DateField, e assim por diante).:
Identificador: "div.type"
Para Timefield e DateTimeField, o tipo é textfield, pois esses campos não são compatíveis.
Todos os campos
Identificador: "div.field"
recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2