Vous pouvez ajouter des widgets personnalisés aux formulaires pour périphériques mobiles. Vous pouvez étendre les widgets jQuery existants ou développer vos propres widgets personnalisés. Le moteur XFA utilise différents widgets, voir Structure de l’apparence pour les formulaires adaptatifs et HTML5 pour obtenir des informations détaillées.

Exemple d’un widget par défaut et d’un widget personnalisé
Exemple d’un widget par défaut et d’un widget personnalisé

Intégration de widgets personnalisés dans des formulaires HTML5

Création d’un profil 

Vous pouvez créer un profil ou choisir un profil existant pour ajouter un widget personnalisé. Pour plus d’informations sur la création de profils, voir Création d’un profil personnalisé.

Création d’un widget

Les formulaires HTML5 fournissent une implémentation de la structure des widgets qui peut être étendue pour créer de nouveaux widgets. L’implémentation est un widget jQuery abstractWidget qui peut être étendu afin d’écrire un nouveau widget. Le nouveau widget peut être rendu fonctionnel uniquement par l’extension/le remplacement des fonctions mentionnées ci-dessous.

Fonction/classe Description
render La fonction de rendu renvoie l’objet jQuery à l’élément HTML par défaut du widget. L’élément HTML par défaut doit pouvoir recevoir l’accent. Par exemple, <a>, <input> et <li>. L’élément renvoyé est utilisé comme $userControl. Si le $userControl indique la contrainte ci-dessus, les fonctions de la classe AbstractWidget fonctionnent comme prévu, sinon une partie des API communes (focus, cliquez sur) nécessitent des modifications. 
getEventMap Renvoie un mappage pour convertir les événements HTML en événements XFA. 
{
blur : XFA_EXIT_EVENT,
}
Cet exemple indique que le flou est un événement HTML et que XFA_EXIT_EVENT est l’événement XFA correspondant. 
getOptionsMap Renvoie un mappage qui fournit des détails sur l’action à exécuter lors de la modification d’une option. Les touches sont les options fournies au widget et les valeurs sont les fonctions qui appelées à chaque changement de cette option qui est détecté. Le widget fournit des gestionnaires pour toutes les options courantes (à l’exception de value et displayValue)
getCommitValue La structure de Widget charge la fonction à chaque fois que la valeur du widget est enregistrée dans XFAModel (par exemple sur l’événement de sortie d’un objet textField). L’implémentation doit renvoyer la valeur qui est enregistrée dans le widget.Le gestionnaire est fourni avec la nouvelle valeur pour l’option.
showValue Par défaut, lors de l’événement d’entrée dans XFA, la rawValue du champ s’affiche. Cette fonction est appelée pour afficher la rawValue à l’utilisateur. 
showDisplayValue Sur l’événement de sortie dans XFA, la valeur formattedValue du champ s’affiche par défaut. Cette fonction est appelée pour afficher la formattedValue à l’utilisateur. 

Pour créer votre propre widget, dans le profil créé précédemment, ajoutez les références du fichier Javascript qui contient les fonctions remplacées et les nouvelles fonctions ajoutées. Par exemple, le widget sliderNumericFieldWidget est un widget pour les champs numériques. Pour utiliser le widget dans votre profil dans la section d’en-tête, incluez la ligne suivante :

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

Enregistrement du widget personnalisé avec le moteur de script XFA 

Lorsque le code d’un widget personnalisé est prêt, enregistrez le widget avec le moteur de script à l’aide de l’API registerConfig  pour Form Bridge. widgetConfigObject est utilisé comme entrée.

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

widgetConfigObject

La configuration du widget est fournie sous la forme d’un objet JSON (ensemble de paires clé/valeur) où la clé identifie les champs et la valeur représente le widget à utiliser avec ces champs. Voici un exemple de configuration :

{

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

où « identifier » est un sélecteur CSS jQuery qui représente un champ spécifique, un ensemble de champs d’un type particulier ou tous les champs. La liste suivante regroupe les valeurs de l’identificateur dans différents cas :

Type d’identificateur Identificateur  Description
Champ particulier avec le nom fieldname Identificateur : « div.fieldname » Toutes les zones appelées « fieldname » sont générées à l’aide du widget.
Tous les champs de type « type » (où type est un champ numérique, un champ de date, etc.): Identificateur : « div.type » Le texte dans Timefield et DateTimeField est de type textfield, ces champs n’étant plus pris en charge.
Tous les champs Identificateur :  « div.field »  

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne