Création de formulaires avec le framework Webix

Cet article a été révisé par des pairs par Simon Codrington et Mallory Van Achterberg. Merci à tous les pairs examinateurs de SitePoint pour avoir fait du contenu SitePoint le meilleur possible!

En tant que concepteur Web, il est probable que vous deviez créer des formulaires Web sur une base assez régulière. Il s'agit souvent d'une tâche ingrat et d'une maux de tête (surtout si vous faites quelque chose de plus complexe, comme la création d'un formulaire en plusieurs étapes). Dans de tels cas, il peut être préférable d'utiliser un cadre d'interface utilisateur pour soulager la douleur et accélérer le processus de développement. Dans cet article, je décrire divers conseils et astuces qui vous permettent de créer différents types de formulaires rapidement et avec un minimum de tracas en utilisant le framework Webix.

Les plats clés

• Simplicité et vitesse: l'utilisation de la bibliothèque de l'interface utilisateur de Webix JavaScript simplifie considérablement le processus de création de formulaire, permettant un développement rapide et une intégration de formes complexes telles que des formes multi-étapes et multiples.
• Volyvylity in Form Creation: Webix propose une variété d'éléments et de configurations de formulaires, y compris des formulaires simples, des formulaires avec plusieurs options de sélection et des utilisations innovantes de widgets comme le widget d'arbre dans les formulaires.
• Personnalisation et flexibilité: le cadre prend en charge des options de personnalisation approfondies, y compris la création de skins personnalisés et l'utilisation d'un outil de concepteur visuel pour la création de l'interface utilisateur de glisser-déposer, répondant à des exigences de conception spécifiques.
• Fonctionnalités avancées: Webix fournit des fonctionnalités avancées comme la sélection et les suggestions multi-combo, améliorant l'interface utilisateur et l'expérience des formulaires.
• Intégration et compatibilité: le cadre est compatible avec diverses méthodes d'inclusion dans les projets, prend en charge les principaux navigateurs et appareils, et peut être utilisé aux côtés d'autres frameworks JavaScript, ce qui le rend adaptable à divers environnements de développement.

Qu'est-ce que Webix?

Webix est la bibliothèque JavaScript UI des composants HTML5 qui facilite la création d'applications Web mobiles et de bureau. Il vous fournit une grande variété de composants d'un bouton simple au widget de feuille de calcul qui peut être utilisé pour développer des applications de type Excel. Outre la collection de composants d'interface utilisateur, il existe un mécanisme de traitement des événements, un support en mode hors ligne et un tas d'outils de développement. Vous pouvez également créer vos propres skins à l'aide du constructeur de peau, utiliser Visual Designer pour la création d'interface utilisateur glisser-déposer et jouer avec le code dans le code de jeu du code source en ligne. Le projet a également une documentation exhaustive.

J'ai déjà écrit un article d'introduction qui décrit les caractéristiques clés et les bases de l'utilisation de ce cadre, alors n'hésitez pas à donner un look à l'avance si vous êtes intéressé.

y compris webix

Il existe une variété de façons dont vous pouvez inclure les fichiers JavaScript et CSS requis dans votre projet. Si vous téléchargez le package de la bibliothèque, vous trouverez ces fichiers dans le dossier CodeBase. Vous pouvez les inclure comme suit:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

Alternativement, vous pouvez utiliser CDN:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="http://cdn.webix.com/edge/webix.js"</span>></span><span><span></script</span>></span>
</span>

Vous pouvez également utiliser Nuget:

nuget <span>install Webix
</span>

où si vous utilisez Microsoft Visual Studio, exécutez-le à partir de la console de gestionnaire de package:

install-package Webix

ou essayez Bower:

bower install webix

Création d'une forme simple

Maintenant, avec les bibliothèques en place, voyons comment fonctionne le widget du formulaire Webix.

webix<span>.ui({
</span>  <span>view: "form",
</span>  <span>id: "myForm",
</span>  <span>container: "areaA",
</span>  <span>width: 350,
</span>  <span>elements: [
</span>    <span>{ // first form component },
</span>    <span>{ // second form component},
</span>    <span>{ // n-th form component */}
</span>  <span>]
</span><span>});
</span>

Nous commençons par appeler la méthode d'interface utilisateur de l'objet Webix et lui passer divers paramètres pour configurer sa sortie.

• La propriété View dicte le type d'élément créé (ici, nous créons un formulaire, mais cela pourrait également être un menu ou un graphique).
• La propriété ID attribue un ID au formulaire, à travers lequel vous pouvez ensuite le référencer.
• La propriété de conteneur spécifie l'ID de l'élément HTML dans lequel la forme doit être rendue.
• La propriété de largeur est utilisée pour définir la largeur de l'élément de forme. Webix suppose que vous souhaitez utiliser des pixels comme unité de mesure ici, vous avez donc juste besoin de définir un numéro approprié.
• La propriété Elements est un tableau de composants que contiendra votre formulaire. Vous pouvez utiliser n'importe quel composant approprié dans le formulaire: champ de texte, bouton radio, case à cocher, boutons, etc.

Créons un formulaire de connexion simple. Nous aurons besoin de deux champs de texte (un pour le nom d'utilisateur et un pour le mot de passe), une case à cocher et, bien sûr, un bouton de soumission.

webix<span>.ui({
</span>  <span>...
</span>  <span>elements: [
</span>    <span>{ view: "text", label: "Username", name: "username" },
</span>    <span>{ view: "text", label: "Password", name: "password", type: "password" },
</span>    <span>{ view: "checkbox", labelRight: "I accept the terms of use", name: "accept" },
</span>    <span>{ view: "button", value: "Submit", width: 150, align: "center", click: submit }
</span>  <span>]
</span><span>});
</span>

Notez que nous spécifions les attributs de noms pour nos éléments de formulaire et notre type de paramètre: "mot de passe" pour notre champ de mot de passe, afin de masquer les caractères lorsqu'ils sont entrés. La définition de la propriété d'étiquette d'un élément définit une étiquette pour cet élément et nous pouvons utiliser la propriété Click d'un élément pour définir un gestionnaire d'événements qui sera appelé lorsque le formulaire sera soumis. Bien qu'il soit agréable d'avoir la possibilité de vérifier que tout va bien avec les données, n'oubliez pas que la validation côté client ne devrait jamais compléter la validation côté serveur.

Avant de pouvoir exécuter cette démo, nous devrons définir ce gestionnaire d'événements. Ici, j'utilise une boîte de message Webix pour donner à l'utilisateur des commentaires sur ce qui a été entré:

<span>function submit(){
</span>  webix<span>.message(JSON.stringify($$("myForm").getValues(), null, 2));
</span><span>}
</span>

Ce code utilise la méthode webix getValues ​​pour dériver les données insérées du formulaire avec un ID de MyForm, puis la convertit en une chaîne JSON à l'aide de JSON.Strifify ().

Eh bien, tout est prêt, et nous pouvons vérifier le résultat:

Après avoir inséré certaines données et appuyé sur le bouton Soumettre, vous obtiendrez le message:

voici la démo:

Voir le stylo nnbgwm par SitePoint (@SitePoint) sur Codepen.

semble que tout fonctionne bien. Maintenant, ajoutons quelque chose de plus intéressant.

Sélection et suggestions multiples

différents contrôles de formulaire vous permettent de sélectionner plusieurs éléments ou d'utiliser des suggestions. Quant à moi, le plus intéressant d'entre eux est le multicombo. Il s'agit d'un contrôle qui vous permet de choisir plusieurs valeurs pour un champ de saisie via une interface simple mais intuitive.

Remarque: Une version récente de Webix (26 avril 2016) a vu un changement dans le fonctionnement du contrôle Multicombo. Il est maintenant disponible dans la version Webix Pro uniquement (un produit payant).

Imaginez que vous souhaitez créer une page qui aidera un développeur à générer un CV. Il pourrait contenir les champs suivants:

Puisque vous vous attendez à ce que votre utilisateur connaisse plus d'un langage de programmation, vous pouvez composer une liste de ces langages et utiliser le composant multicombo pour les présenter. Voici un exemple de ce à quoi cela pourrait ressembler:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

En plus des propriétés familières, nous utilisons ici la propriété du bouton et la propriété suggérée. La propriété du bouton crée un bouton pour confirmer la sélection, tandis que la propriété suggérée définit la source des éléments à afficher dans le multi-ours. Dans notre exemple, nous utilisons la propriété Data pour spécifier le nom du tableau ainsi qu'une propriété de modèle pour spécifier la valeur à afficher. Il serait également possible de définir le chemin d'accès sur un fichier (par exemple, suggérer: "path / to / file / data.js"), faire comme ci-dessus est la meilleure option si vous souhaitez extraire différents tableaux de données d'une grande source .

Vérifions comment cela fonctionne. Après avoir cliqué sur le champ de texte, la liste déroulante apparaîtra:

Vous pouvez soit le faire défiler et sélectionner les éléments que vous souhaitez, soit commencer à taper pour affiner les suggestions:

Ce formulaire d'exemple particulier renverra un tas d'identifiant qui correspondent aux éléments sélectionnés:

Voici la démo de cet exemple.

En tant qu'alternative à Multicombo, vous pouvez vérifier les composants de Gridsuggest et DataView.

en utilisant un widget d'arbre comme élément de forme

Webix ne vous limite pas aux éléments de formulaire conventionnels tels que les champs de texte, les boutons et les cases à cocher. Vous pouvez placer n'importe quel widget que vous aimez dans votre formulaire. Jetons un coup d'œil au widget d'arbre, par exemple. Il n'a pas été initialement conçu comme un contrôle de forme, c'est pourquoi il n'y a pas de méthodes SetValue et GetValue disponibles pour cet élément. Mais ces méthodes sont nécessaires si nous voulons pouvoir renvoyer ou définir des valeurs pour ce composant. Alors, que pouvons-nous faire? Heureusement, il existe la méthode Protoui qui peut nous aider. Il permet la création de nouvelles vues sur la base de celles existantes.

essayons-le:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

Dans le code ci-dessus, nous créons une nouvelle vue appelée formtree. Nous définissons ensuite deux nouvelles méthodes qui nous permettent de définir et d'obtenir ses valeurs d'ID. Enfin, nous utilisons le widget d'arbre comme base de cette nouvelle vue.

Créons maintenant des données:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="http://cdn.webix.com/edge/webix.js"</span>></span><span><span></script</span>></span>
</span>

Vous pouvez ajouter votre nouvel élément au formulaire comme vous le feriez normalement:

nuget <span>install Webix
</span>

Nous introduisons quelques nouvelles propriétés ici: la propriété de modèle ajoute des cases à cocher aux nœuds d'arborescence et la propriété Threstate permet des cases à 3 états. Ce sont des cases où:

• Lorsque l'utilisateur vérifie / déchaîne un nœud parent, le nœud parent et tous ses nœuds enfants (de chaque niveau de nidification) sont vérifiés / non contrôlés.
• Lorsque l'utilisateur vérifie / déchaîne un nœud enfant, seul le nœud enfant individuel est vérifié / non contrôlé.

Si vous utilisez des cases à cocher à 3 États, vous devez faire attention à un petit problème. Lorsque vous sélectionnez une case à cocher, Webix redémarre l'arborescence. Si vous décidez d'utiliser votre clavier pour remplir le formulaire, lorsque vous poussez Space pour basculer la sélection d'une case à cocher (dans le cas de navigateurs basés sur WebKit tels que Chrome), cela peut entraîner la perte de concentration et vous 'aura un onglet commencer à partir du tout début de la forme.

Heureusement, il y a une solution de contournement pour cela. Vous pouvez utiliser la propriété ON pour attacher un nouveau gestionnaire à un arbre. Nous l'utiliserons avec l'événement ONITEMCHECK qui tire lorsque vous sélectionnez l'élément d'arborescence particulière. En utilisant certaines méthodes supplémentaires, nous pouvons garder la mise au point en sécurité:

install-package Webix

Cela devrait fonctionner. Mais voici l'autre problème: WebKit ne marque pas les cases à cocher pendant l'onglet. Pour contrer cela, vous pouvez utiliser du code CSS pour ajouter une ombre de contour ou de boîte aux cases ciblées. Voici un exemple:

bower install webix

Avec tout cela en place, nous pouvons cliquer sur le bouton Soumettre pour vérifier si nos méthodes faites à la main fonctionnent:

oui, les ID ont été soumis avec succès.

Vous pouvez vérifier ce formulaire ici:

Voir le stylo anjyjr par SitePoint (@SitePoint) sur Codepen.

Formes multi-tab et multi-étapes

Si vous prévoyez de rassembler une grande quantité de données d'un utilisateur, vous pouvez séparer votre formulaire en petites pièces. Jetons un coup d'œil à deux possibilités: une forme qui se compose de multiples onglets et une forme qui permet l'insertion de données étape par étape.

Composant TabView

Le composant TabView crée une collection d'éléments séparés en onglets, que l'utilisateur peut basculer. Vous pouvez utiliser un seul élément comme contenu TabView ou définir une combinaison de lignes et de colonnes qui contient les éléments que vous désirez.

Voici un exemple:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

L'idée principale derrière cette approche est de compartimenter le formulaire (ce qui le rend plus gérable pour votre utilisateur). Cependant, vous devez vous rappeler que les composants relatifs à l'ensemble du formulaire (par exemple, le bouton Soumettre ou la case «J'accepte») doit être placé à l'extérieur du composant TabView.

par exemple:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="http://cdn.webix.com/edge/webix.js"</span>></span><span><span></script</span>></span>
</span>

C'est tout ce dont vous avez besoin pour créer un formulaire à onglets. Vous pouvez vérifier le résultat ci-dessous:

Un avantage supplémentaire à cette approche est qu'il n'est pas nécessaire d'ajouter de code supplémentaire pour que ces pièces fonctionnent comme une seule. Mettez simplement le composant TabView dans votre formulaire, ajoutez la propriété Nom à chaque champ et vous pourrez obtenir toutes les valeurs insérées. Cliquez sur le bouton soumettre le confirme:

a l'air un peu désordonné mais pourtant, ce sont nos données.

Accessibilité du clavier

Si votre intention est d'utiliser un grand nombre d'onglets et que vous souhaitez utiliser la touche onglet pour basculer entre elles, vous pouvez utiliser des boutons dans la barre d'onglet. Cette approche nous permet d'ajouter les onglets à l'ordre de navigation des onglets. Tout ce que vous avez à faire est de modifier la propriété d'en-tête:

nuget <span>install Webix
</span>

Vous devez ajouter du code CSS pour rendre ces boutons natifs:

install-package Webix

Dans la démo suivante, nous utiliserons également un sélecteur de dattes. Nous devons nous assurer qu'il apparaît lorsqu'un utilisateur atteint le return , car bien que l'utilisateur ne puisse pas (actuellement) interagir avec lui via le clavier, il fournit une aide visuelle utile.

Une façon d'y parvenir serait d'utiliser la propriété de la hottesrie. Mais voici quelque chose que vous devriez réaliser. Cette propriété fonctionne sans aucun problème si vous souhaitez lier une clé à un seul élément de page. Mais il y a deux Pickers dans notre forme. Ainsi, vous devez utiliser la méthode AddHotkey pour créer un nouveau gestionnaire qui fonctionne avec tous vos dattepickers:

bower install webix

Vous pouvez voir tout cela travailler ensemble dans la démo suivante:

Voir le stylo zwjjmj par SitePoint (@SitePoint) sur Codepen.

En tant qu'alternative, vous pouvez utiliser l'accordéon pour cette tâche.

Composant multi-commentaires

Le composant MultiView nous permet de créer une séquence d'éléments qui peuvent être visualisés l'un après l'autre. Vous pouvez utiliser des onglets pour basculer entre les zones multi-commentaires, mais comme nous sommes intéressés à créer un formulaire à plusieurs étapes, ajoutons des boutons pour guider un utilisateur à travers les différentes étapes.

Tout d'abord, nous devrons créer deux fonctions pour faire fonctionner les boutons Next et Back :

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="./codebase/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="./codebase/webix.js"</span>></span><span><span></script</span>></span>
</span>

La fonction suivante utilise la méthode GetParentView de Webix pour obtenir une référence pour contenir la cellule sur le bouton cliqué (c'est-à-dire que la cellule est actuellement affichée). Il utilise ensuite la valeur d'ID du composant multivitique (FormContent) pour calculer la cellule (le cas échéant) qui vient ensuite. S'il y a une cellule suivante, elle est transmise en vue à l'aide de la méthode Show. La fonction arrière utilise le commutateur de méthode arrière le multi-view en vue précédemment active

L'élément MultiView peut être défini de la même manière que nous avons défini l'élément TabView précédemment. Cette fois cependant, nous devons placer une ligne supplémentaire au bas de chaque cellule. Cette ligne contiendra les boutons de commande. S'il n'y a qu'un seul bouton à afficher (comme dans la première cellule), nous incluons un objet vide.

Voyons à quoi cela ressemble:

<span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="http://cdn.webix.com/edge/webix.css"</span>></span>
</span><span><span><span><script</span> src<span>="http://cdn.webix.com/edge/webix.js"</span>></span><span><span></script</span>></span>
</span>

Voyons maintenant ce que nous avons fait:

Après avoir cliqué sur le bouton Suivant , la partie suivante du formulaire apparaîtra.

et vérifions si tout fonctionne comme prévu:

c'est le cas! Voici la démo finale:

Voir le stylo Anjldo par SitePoint (@SitePoint) sur Codepen.

Conclusion

Dans ce tutoriel, j'ai démontré à quel point Webix est facile pour produire des formes complexes, mais élégantes et accessibles. Le cadre place une multitude de widgets puissants à portée de main et même s'ils n'étaient pas destinés à être utilisés comme composants de forme hors de la boîte, il est assez simple de redéfinir leur comportement en utilisant la méthode Protoui.

utilisez-vous Webix dans vos projets? Ce tutoriel vous a-t-il inspiré pour essayer? Faites-moi savoir dans les commentaires ci-dessous.

Questions fréquemment posées (FAQ) sur le framework Webix

quel est le framework Webix et comment fonctionne-t-il?

Webix est une puissante bibliothèque d'interface utilisateur JavaScript qui permet aux développeurs de créer des applications Web riches et hautes performances. Il fournit plus de 100 widgets entièrement personnalisables, y compris des tables de données, des graphiques, des formulaires, etc. Webix fonctionne en permettant aux développeurs de créer des composants d'interface utilisateur à l'aide de JavaScript, qui peuvent ensuite être facilement intégrés dans n'importe quelle application Web. Le cadre est conçu pour être facile à utiliser, avec une API simple et intuitive, et elle prend également en charge une large gamme de navigateurs et d'appareils.

Comment puis-je commencer avec webix?

pour Commencez avec Webix, vous devez d'abord télécharger la bibliothèque à partir du site Web officiel de Webix. Une fois que vous avez la bibliothèque, vous pouvez l'inclure dans votre projet en ajoutant une balise de script à votre fichier HTML. De là, vous pouvez commencer à créer des composants d'interface utilisateur à l'aide de l'API Webix. La documentation officielle Webix fournit une multitude d'informations et d'exemples pour vous aider outil puissant pour le développement Web. Certaines des caractéristiques clés incluent plus de 100 widgets d'interface utilisateur, une API simple et intuitive, la prise en charge d'une large gamme de navigateurs et d'appareils, et la possibilité de créer des dispositions d'interface utilisateur complexes. En outre, Webix fournit également un certain nombre de fonctionnalités avancées, telles que la liaison des données, la gestion des événements et la prise en charge de l'AJAX.

Comment Webix se compare-t-il aux autres bibliothèques d'interface utilisateur JavaScript?

WEBIX ressorte-t-il de Autres bibliothèques d'interface utilisateur JavaScript de plusieurs manières. Tout d'abord, il offre une sélection beaucoup plus grande de widgets d'interface utilisateur que la plupart des autres bibliothèques, permettant aux développeurs de créer des applications plus complexes et riches en fonctionnalités. Deuxièmement, Webix est conçu pour être facile à utiliser, avec une API simple et intuitive qui facilite le démarrage. Enfin, Webix offre d'excellentes performances, avec des temps de rendu rapide et une utilisation efficace de la mémoire.

Puis-je utiliser Webix avec d'autres frameworks JavaScript?

Oui, Webix peut être utilisé aux côtés d'autres frameworks javascript, tels que Angular, React et Vue.js. Cela permet aux développeurs de tirer parti des forces de plusieurs cadres dans leurs applications. Par exemple, vous pouvez utiliser Angular pour ses puissantes fonctionnalités de liaison de données, tout en utilisant Webix pour sa riche sélection de widgets d'interface utilisateur.

Est-ce que Webix convient au développement mobile?

Oui, Webix est entièrement réactif et prend en charge un large éventail d'appareils, y compris les téléphones portables et les tablettes. Cela en fait un excellent choix pour les développeurs qui cherchent à créer des applications Web adaptées aux mobiles.

Comment puis-je personnaliser l'apparence de mon application Webix?

Webix fournit un certain nombre de façons de personnaliser l'apparence de votre application. Vous pouvez utiliser CSS pour styliser vos composants d'interface utilisateur, ou vous pouvez utiliser l'une des nombreuses peaux pré-faites fournies par Webix. De plus, Webix vous permet également de créer vos propres skins personnalisés à l'aide de l'outil Skin Builder.

Quel type de support est disponible pour Webix?

Webix propose une gamme d'options de support pour les développeurs. Le site Web officiel de Webix fournit une multitude de documents et d'exemples, ainsi qu'un forum où vous pouvez poser des questions et obtenir de l'aide de la communauté. En outre, Webix propose également des packages de support premium, qui incluent un accès direct à l'équipe de développement Webix.

WEBIX est-il gratuit?

Webix propose des versions gratuites et payantes de sa bibliothèque. La version gratuite comprend une sélection limitée de widgets et de fonctionnalités, tandis que la version payante donne accès à la gamme complète de widgets et de fonctionnalités, ainsi qu'un support premium.

Comment puis-je en savoir plus sur Webix?

La meilleure façon d'en savoir plus sur Webix est de visiter le site Web officiel de Webix, où vous pouvez trouver une multitude d'informations et de ressources, y compris la documentation, des exemples, des tutoriels, etc. Vous pouvez également rejoindre la communauté Webix sur GitHub, où vous pouvez trouver des ressources supplémentaires et vous connecter avec d'autres développeurs Webix.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!