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.
Figura: Um exemplo de 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 como criar perfis, consulte Criar perfil personalizado.
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);
Quando o código de widget personalizado estiver pronto, registre o widget com o mecanismo de script usando registerConfig
API para Form Bridge. Ele utiliza 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 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" |