Je suis un développeur front-end débutant. Maintenant, j'étudie et je m'entraîne dans une entreprise informatique de Minsk. L'apprentissage des bases de web-ui a lieu avec la bibliothèque
Webix JS à titre d'
exemple et je veux partager ma modeste expérience et l'enregistrer comme un petit tutoriel pour cette intéressante bibliothèque d'interface utilisateur.
Deuxième tâche
Dans la dernière
mission, j'ai créé une page en utilisant la bibliothèque Webix. Et maintenant, je dois définir la logique suivante pour l'interaction de l'utilisateur avec le formulaire:
Le widget principal avec lequel l'article fonctionnera est le
formulaire . De plus, il peut être lu dans la
documentation .
Vous pouvez télécharger le
lien source.
L'application de démonstration qui en résulte peut être trouvée
ici .
Étape 1. Ajout de nouvelles données à la table.
Pour la commodité de lire le code et de diviser le projet en blocs logiques, je vais créer un fichier functions.js et indiquer le chemin d'accès dans le fichier index.html. J'y définirai les fonctions responsables du comportement de l'application.
<body> <script src="data.js"></script> <script src="functions.js"></script> <script src="script.js"></script> </body>
Dans le nouveau fichier, je crée la fonction
addItem , qui ajoute de nouvelles données à la table:
const addItem = () =>{ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); }
Pour accéder à un élément de la bibliothèque Webix, utilisez
la méthode $$ , dans laquelle l'ID d'élément est passé. Dans le code ci-dessus, le formulaire est accessible à l'aide de la construction
$$("film_form") .
La fonction addItem fonctionne comme suit: j'obtiens les données actuelles du formulaire via sa méthode getValues et je les écris dans la variable item_data . En utilisant ces données, je crée un nouvel enregistrement dans la feuille en utilisant la méthode add .
Pour appeler cette fonction en cliquant sur le widget
"button" avec la valeur
"Add new" je définis la propriété
click .
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear"} ]
Par conséquent, les données du formulaire doivent être ajoutées au tableau:
Étape 2. Validation du formulaire. Message contextuel
Avant d'ajouter de nouvelles données, les informations des champs de saisie doivent être vérifiées (validées). La validation est déclenchée
par la méthode validate () , que j'appellerai à l'intérieur de la fonction
addItem immédiatement avant de travailler avec les données. Je mettrai également ici le code d'un message contextuel sur une validation réussie.
Un simple message dans Webix est créé par la fonction
webix.message () , qui prend le texte du message comme paramètre. Un message apparaîtra dans le coin supérieur droit.
const addItem = () =>{ if($$("film_form").validate()){ var item_data = $$("film_form").getValues(); $$("film_list").add(item_data); webix.message("Validation is successful!"); } }
La fonction fonctionne comme ceci. Dans la condition If , nous accédons au formulaire et appelons la méthode validate () . Si le test réussit, la méthode renvoie true et le code est exécuté plus loin. Après avoir ajouté des données à la table, une fonction est appelée avec le message - "Validation is successful!" .
Message contextuel:
Maintenant, je dois créer un objet de
règles dans
le widget de
formulaire . Il est nécessaire que la fonction
validate () vérifie la conformité des informations de tous les champs du formulaire avec les critères spécifiés.
Les conditions d'une validation réussie seront les suivantes:
- Le champ de titre ne doit pas être vide;
- L'année sur le terrain ne doit pas être inférieure à 1970 et supérieure à l'année en cours;
- le champ Rating ne doit pas être nul;
- Le champ des votes doit être supérieur à 1 et inférieur à 1 000 000.
Ensuite, le code source du widget de
formulaire avec des règles de validation sera comme ceci:
view:"form", id:"film_form", width: 350, elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ], rules:{ title: webix.rules.isNotEmpty, rating(value){ if(webix.rules.isNumber(value)){ return true; } }, votes(value){ return value < 1000000 && value >= 1; }, year(value){ return value>=1970 && value <= new Date().getFullYear(); } }
Les propriétés de l'objet règles doivent correspondre aux valeurs du
name: "…" propriété
name: "…" des éléments du formulaire. Les
règles prédéfinies webix.rules.isNotEmpty et webix.rules.isNumber sont définies dans les propriétés title, rating et votes, l'année où une fonction définit
les règles utilisateur .
Les règles doivent renvoyer true en cas de succès et false en cas d'erreur. Le formulaire passe la validation lorsque toutes les propriétés de l'objet règles retournent true. Sinon, les champs dont la validation échoue seront surlignés en rouge.
Résultat du test:
Étape 3. Message d'erreur
Les règles sont définies, j'ai maintenant besoin d'un mécanisme pour afficher un message d'erreur pour informer l'utilisateur que les données saisies ne répondent pas aux critères spécifiés. Pour ce faire, vous pouvez mettre en surbrillance le champ en rouge et ajouter un message d'erreur.
Les champs peuvent avoir la propriété
invalidMessage définie ; sa valeur est le texte avec le message d'erreur. Ce message apparaîtra sous le champ si la validation échoue.
Code:
elements:[ { type:"section", template:"EDIT FILMS"}, { view:"text", name:"title", label:"Title", invalidMessage:"Must be filled in"}, { view:"text", name:"year", label:"Year", invalidMessage:"Should be between 1970 and current" }, { view:"text", name:"rating", label:"Rating", invalidMessage:"Cannot be empty or 0" }, { view:"text", name:"votes", label:"Votes", invalidMessage:"Must be less than 100000" }, { margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ] }, {} ]
Résultat:
Étape 4. Nettoyage du formulaire
Pour effacer le formulaire, vous devez créer une fonction appelée par le bouton
"Clear" . Elle est également responsable de la sortie d'un message d'avertissement et, en cas de réponse positive, elle effacera les données saisies et réinitialisera l'indication d'erreur.
Message d'avertissement:
Je vais appeler la fonction
clearForm et y écrire le code suivant:
function clearForm(){ webix.confirm({ title:"All data will be lost!", text:"Are you sure?" }).then( () => { $$("film_form").clear(); $$("film_form").clearValidation(); } )};
La méthode de rappel
webback.confirm ({...}) est utilisée pour la fenêtre de confirmation, qui accepte un objet avec les propriétés suivantes:
texte et
titre . Puisque la méthode renvoie promesse, je peux utiliser le gestionnaire
.then . Si la réponse est oui, dans le gestionnaire .then, j'appellerai deux méthodes: clear () - pour effacer les champs du formulaire et clearValidation (), qui supprime les étiquettes d'erreur de validation.
La dernière action consiste à lier l'appel de fonction au bouton
"Clear" .
margin:10, cols:[ { view:"button", id:"btn_add", value:"Add new", css:"webix_primary", click:addItem}, { view:"button", id:"btn_clear", value:"Clear", click:clearForm} ]
Le code et la démo peuvent être consultés ici -
snippet.webix.com/17w1dodb .
Généralisation
De la source, il était clair que le code de l'article précédent est assez simple, mais avec le développement du projet, il devient progressivement plus compliqué et son nombre augmente. Afin de ne pas se perdre dans l'infinité des lignes de code, il devient important de maintenir la facilité de lecture et la simplicité de structure. Un exemple d'interaction avec un formulaire ne décrit que des méthodes de base, mais il ressort également clairement que pour donner la dynamique de la page, webix propose un petit code, lisible et intuitif. Comparé au JavaScript pur, son volume doublerait au mieux de taille.