Criar aparências personalizadas em formulários 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.

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
Figura: Um exemplo de widget padrão e personalizado

Integração de widgets personalizados com formulários HTML5

Criar um perfil 

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 Criar perfil personalizado.

Criar um widget

Os formulários HTML5 fornecem uma implementação da estrutura do widget que pode ser estendida para criar novos widgets. A implementação é um widget jQuery abstractWidget que pode ser estendida para gravar um novo widget. O novo widget só pode ser funcional 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 HTML padrão do widget. O elemento HTML padrão deve ser do tipo focalizável. Por exemplo, <a>, <input>e <li>. O elemento retornado é usado como $userControl. Se $userControl especificar a restrição acima, as funções da classe AbstractWidget funcionarão conforme esperado, caso contrário, algumas das APIs comuns (foco, clique) exigirão 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 na alteração de uma opção. As chaves são as opções fornecidas para o 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 valor e displayValue)
getCommitValue A estrutura Widget carrega a função sempre que o valor do widget é salvo no XFAModel (por exemplo, no evento exit de um textField). A implementação deve retornar o valor salvo no widget. O manipulador é fornecido com o novo valor para a opção .
showValue Por padrão, no XFA on enter event, o rawValue do campo é exibido. Essa função é chamada para mostrar o rawValue ao usuário.
showDisplayValue Por padrão, no evento XFA on exit , o formattedValue do campo é exibido. Essa função é chamada para mostrar o formattedValue ao 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, a variável 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 

Quando o código de widget personalizado estiver pronto, registre o widget com o mecanismo de script usando registerConfigAPI para Form Bridge. Ele utiliza o widgetConfigObject como entrada.

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

widgetConfigObject

A configuração do widget é fornecida como um objeto JSON (uma coleção de pares de valores chave), onde a chave identifica os campos e o valor representa o widget a ser usado com esses campos. Uma configuração de amostra tem a seguinte aparência:

*{*

*“identifier1” : “customwidgetname”,
“identifier2” : “customwidgetname2”,
..
}*

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

Tipo de identificador Identificador Descrição
Campo específico com nome do campo Identificador: "div.fieldname" Todos os campos com o nome "nome do campo" são renderizados usando o widget.
Todos os campos do tipo "type" (onde o tipo é NumericField, DateField e assim por diante).: Identificador: "div.type" Para Timefield e DateTimeField, o tipo é campo de texto, pois esses campos não são compatíveis.
Todos os campos Identificador: "div.field"

Nesta página