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.
widget padrão e personalizadoFigura: um exemplo do widget padrão e personalizado
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.
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);
Quando o código do widget personalizado estiver pronto, registre o widget com o mecanismo de scripts usando registerConfig
API para Form Bridge. É necessário o widgetConfigObject como entrada.
window.formBridge.registerConfig("widgetConfig",
{
".<field-identifier>":"<name-of-the-widget>"
}
);
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" |