Créer des apparences personnalisées dans les formulaires HTML5

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. Consultez la section Framework d’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é
Figure : Exemple de widget par défaut et 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 du framework des widgets qui peut être étendu pour créer d’autres 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 être d’un type pouvant être actif. Par exemple, <a>, <input> et <li>. L’élément renvoyé est utilisé comme $userControl. Si $userControl indique la contrainte ci-dessus, les fonctions de la classe AbstractWidget fonctionnent comme prévu. Dans le cas contraire, une partie des API communes (focus, clic) 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 clés sont les options fournies au widget et les valeurs sont les fonctions qui sont appelées lorsqu’une modification de cette option est détectée. 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 s’accompagne de la nouvelle valeur de 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ù « identifiant » 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’identifiant dans différents cas :

Type d’identificateur formulaire 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 NumericField, DateField, etc.). : Identificateur : « div.type » Dans Timefield et DateTimeField, le type est textfield, ces champs n’étant plus pris en charge.
Tous les champs Identifiant : « div.field »

Sur cette page