Criar aparências personalizadas em formulários HTML5

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 do
widget padrão e personalizadoFigura: um exemplo do 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 a criação de perfis, consulte Criação de Perfis personalizados.

Criar um widget

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 estendido para gravar um novo widget. O novo widget só pode ser ativado se você estender/substituir 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 funcionam conforme 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_EVENTO,
}
Este exemplo mostra que o desfoque é um evento HTML e XFA_EXIT_EVENTO é um evento XFA correspondente.
getOptionsMap Retorna um mapa que fornece detalhes sobre a ação a ser executada ao alterar uma opção. As teclas 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 ao inserir o evento, o rawValue do campo é exibido. Essa função é chamada para mostrar o rawValue ao usuário.
showDisplayValue Por padrão, em XFA no evento exit, o formattedValue do campo é exibido. Essa 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, 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 mecanismo de script XFA 

Quando o código do widget personalizado estiver pronto, registre o widget com o mecanismo de scripts usando registerConfigAPI para Form Bridge. É necessário 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 principais), onde a chave identifica os campos e o valor representa o widget a ser usado com esses campos. Uma configuração de amostra é semelhante a:

*{*

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

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

Tipo de identificador Identificador Descrição
Campo específico com nome 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 é textField, pois esses campos não são suportados.
Todos os campos Identificador: "div.field"

Nesta página