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.
Troisième tâche
Je continue de développer les fonctionnalités de l'application créée à l'aide de la bibliothèque Webix. Dans les articles précédents, j'ai compris comment
créer une interface d' application et comment
interagir avec le formulaire . Dans cet article, je considère les tâches suivantes:
Le fonctionnement des widgets List et
Layout a été décrit dans les articles précédents.
Vous pouvez télécharger le
lien source.
L'application terminée peut être trouvée
ici .
Étape 1. Division du projet en modules
Pour éviter toute confusion dans le code, il est plus fiable de diviser le projet en modules. Pour ce faire, je vais créer les fichiers suivants et y transférer le code du widget:
- header.js - Widget de la barre d'outils ;
- apart.js - Widget de liste ;
- table.js - widget Datatable ;
- form.js - widget de formulaire;
- footer.js - un élément avec le texte: "Le logiciel est ...".
Dans les nouveaux fichiers, la description des configurations de widget se produit dans une variable ...
const footer = { height: 30, template:"The software is provided by <a href='#'>webix.com</a>. All rights reserved (c)", css:"bottom-link" }
Les fichiers créés sont inclus dans le fichier index.html dans l'ordre suivant:
<body> <script src="functions.js"></script> <script src="users_module.js"></script> <script src="products_module.js"></script> <script src="data.js"></script> <script src="header.js"></script> <script src="table.js"></script> <script src="form.js"></script> <script src="aside.js"></script> <script src="footer.js"></script> <script src="script.js"></script> </body>
Les modules résultants sont combinés dans un fichier script.js, qui contient désormais un code d'initialisation d'application simple et concis.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, table, form ] }, footer ] });
Étape 2. Onglets et basculement entre eux
Dans les cas où il n'y a pas assez d'espace libre sur la page, ou si vous devez séparer thématiquement le contenu de l'application, il est logique d'utiliser des onglets.
La commutation entre les onglets est effectuée par le composant
Multiview . Ce composant vous permet de créer le nombre nécessaire d'onglets dans l'application et n'en affiche qu'un à un certain moment.
Nous allons créer une multivue dans le fichier côté.js:
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", template:"Users" }, { id:"products", template:"Products" } ] }
Le tableau de cellules contient le code des onglets. Chaque onglet doit être ajouté avec un identifiant afin qu'il puisse être consulté et affiché. Maintenant, Multiview contient trois onglets, dont le premier est déplacé, créé avant cela, le tableau et le formulaire.
Dans le fichier script.js, je remplace les widgets Table et Form par le module Multi.
webix.ui({ rows:[ header, { cols:[ aside, {view: "resizer"}, multi ] }, footer ] });
Le rôle du basculement entre les onglets est joué par le widget
Liste . J'ai besoin de l'onglet correspondant pour l'ouvrir en cliquant sur ses éléments.
Pour plus de commodité, je définirai les éléments du widget
Liste sur le même identifiant que les onglets à vues multiples.
const aside = { view: "list", id:"mylist", scroll:false, select:true, width:200, css:"list_color", data:[ {value:"Dashboard", id:"dashboard"}, {value:"Users", id:"users"}, {value:"Products", id:"products"} ], on:{ onAfterSelect:function(id){ $$(id).show(); } } }
Lorsque vous cliquez sur un élément du widget
Liste ,
onAfterSelect est déclenché, à l'intérieur du gestionnaire dont nous obtenons l'id de l'élément sélectionné et montrons l'onglet du même nom, y accédant par id - ils, comme vous vous en souvenez, sont les mêmes.
Un exemple:
Important!
D'autres actions sur les données seront effectuées avec le serveur local en cours d'exécution.
Étape 3. Onglet «Tableau de bord» - configuration de la table
Jusqu'à présent, le projet utilisait une table dont les champs étaient générés automatiquement. Dans le cas où vous souhaitez supprimer une colonne ou en ajouter une nouvelle, les paramètres du tableau sont utilisés. Pour ce faire, dans le widget
Datatable , la propriété
autoConfig : true doit être remplacée par le tableau de
colonnes avec les paramètres de chaque colonne.
const table = { view:"datatable", id:"film_list", scroll:"y", select:true, url:"data/data.js", hover:"myhover", columns:[ { id:"rank", header:"", width:50, css:"rank"}, { id:"title", header:"Film title", fillspace:true}, { id:"year", header:"Released", width:100}, { id:"votes", header:"Votes", width:100}, { id:"rating", header:"Rating", width:100} ] }
- La valeur de la propriété id indique le champ de l'élément de données qui sera affiché dans cette colonne;
- la propriété d'en- tête dans l'élément est l'en-tête de colonne;
- toutes les colonnes sont définies sur une largeur fixe, mais la seconde d'entre elles utilise la propriété fillspace, qui permet à la colonne de titre de prendre tout l'espace libre.
Des paramètres CSS personnalisés sont utilisés dans le tableau: le survol est défini pour les lignes et l'arrière-plan est modifié dans la première colonne. Tous les paramètres sont prédéfinis dans le fichier style.css et il vous suffit d'insérer le nom de la classe.
De plus, j'ai besoin de plus de données pour la table, je vais donc les charger depuis data / data.js en la pointant à l'aide de la propriété
url .
Résultat:
Étape 4. Onglet «Utilisateurs» - dessin d'une liste et d'un diagramme
Dans le deuxième onglet, je vais créer une liste et un diagramme. Pour ce faire, dans le deuxième élément Multiview, j'indiquerai le nom du module - «utilisateurs».
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", template:"Products" } ] }
Pour les widgets eux-mêmes, je vais créer un nouveau fichier
users_module.js .
Liste . Une liste est comprise comme un widget
Liste ; auparavant, elle était utilisée lors de la création du menu. Les lignes de liste doivent être constituées de noms d'utilisateur et de noms de pays.
Liste du code du widget:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { template:"Chart" } ] }
Le tableau de lignes est utilisé pour diviser l'espace de travail en deux parties. La deuxième partie sera utilisée pour le graphique.
Dans la propriété du modèle, entre les signes #, un champ est spécifié dont la valeur est extraite de l'élément de données chargé à partir du fichier users.js.
Résultat:
Graphique . La bibliothèque prend en charge les types de
graphiques courants: ligne, cercle, radar, beignet, colonne, etc. Tous sont créés par le widget
graphique . L'aspect du graphique définit la propriété
type .
Je vais remplacer le
template:”Chart” paramètre
template:”Chart” par le code du widget:
const users = { rows:[ { view: "list", id:"user_list", select:true, url:"data/users.js", template:"#name# from #country#" }, { view:"chart", type:"bar", value:"#age#", url:"data/users.js", xAxis:{ template:"#age#", title:"Age" } } ] }
type: "bar" réglage type: "bar" définit le type de barre du graphique;- le nom du champ est passé à valeur, et il est indiqué nécessairement dans `# ... #`. Il s'agit d'une fonctionnalité du widget Graphique;
- le paramètre xAxis détermine quelles informations seront affichées sous le graphique le long de l'axe X;
- le modèle indique que sous les lignes du graphique, il y aura des chiffres d'âge;
- le titre contient le nom du graphique -
"Age" .
Le résultat du dessin de la liste et du graphique:
Étape 5. Onglet «Produits» - tableau arborescent
Pour initialiser ce composant, je vais créer le fichier
products_module.js , et dans le troisième élément du widget Multiview j'indiquerai le nom du module «products».
const multi = { view: "multiview", cells:[ { id:"dashboard", cols:[table, form ] }, { id:"users", rows:[users] }, { id:"products", rows:[products] } ] }
Pour créer une table arborescente, utilisez le widget
Treetable . L'une des colonnes du widget doit contenir le modèle requis -
{common.treetable ()} , sinon nous obtiendrons une table standard au lieu d'une arborescence. Le modèle vous permet de dessiner immédiatement des éléments caractéristiques:
- icône active pour réduire / développer les enregistrements imbriqués;
- icônes de fichiers / dossiers;
- indentation en fonction du niveau d'entrées.
const products = { view:"treetable", scrollX:false, columns:[ { id:"id", header:"", width:50 }, { id:"value", header:"Title", fillspace:true, template:"{common.treetable()} #title#" }, { id:"price", header:"Price", width:200 } ], select:"row", url:"data/products.js" }
Le composant treetable est rempli de données hiérarchiques, que j'obtiendrai du fichier products.js.
Résultat:
L'application résultante peut être trouvée
ici .
Généralisation
Étape par étape, l'application est complétée par de nouvelles fonctionnalités. Une étape importante a été la séparation du code en modules. La séparation a permis d'éviter toute confusion dans le code et a aidé à organiser une interface multi-pages. Il était intéressant d'apprendre de nouveaux widgets Webix sous forme de diagrammes et de listes de tableaux librement modifiables. Tout était aussi simple, tout est aussi harmonieux.