API WEBIX

API WEBIX

JavaScript plugin for data visualisation

 

Table des matières

Résumé. 3

Introduction. 4

Histoire. 5

Création et approfondissement du JavaScript 5

Evolution des langages. 6

Utilisation des framework dans le développement 6

Framework Webix. 7

Téléchargement et installation. 7

Importation dans les feuilles JS et CSS. 8

Développer avec Webix. 9

Structure de base du code JS. 9

Premier module à l’aide de Webix. 9

Ajout de deux modules sur une même ligne. 10

Traitements et fonctions avec un module. 12

Récapitulatif et conclusion. 15

Récapitulatif 15

Conclusion. 17

Bibliographie. 18

 

 

Résumé

The Webix API is a complete framework for dynamic creation and statistics management in a web page. It allows through the JavaScript code to create tables of data, an online sales system or different graphics for data analysis.

The integration of the code in HTML pages is very simple: the framework contains many functions previously created. Simply call these different functions in our JavaScript sheet to make them work in our HTML pages. It’s also possible to customise all the native function to permit the best experience for users and make your code as close as possible to desired features.

The JavaScript API “Webix” contains over 30 different models of functions that allow you to make a website or a web application as complete as possible. Through the framework, you can build different things with a multiview system, accordion menu, colour board, calendar, forms and charts for the best user experience.

 

 

Introduction

Depuis la création du web [1] en 1989, celui-ci n’a cessé d’évoluer. Le contenu des pages web a dû s’adapter aux différentes utilisations et besoins que le web proposait, ce qui a entrainé de nombreuses évolutions au niveau des langages du web ainsi que dans le travail des développeurs.

Si, au tout début, le web n’était uniquement que du contenu hypertexte ne servant seulement qu’à échanger quelques données entre utilisateurs chevronnés permettant de construire un réseau d’informations professionnel à travers le monde, il s’est rapidement retrouvé sous le feu des projecteurs grâce aux utilisateurs lambda, étant ainsi utilisé pour transmettre et communiquer de nombreuses autres informations, telles des photos, musiques ou de nombreuses autres informations sur différents supports.

Pour répondre à ces différentes demandes, il a donc fallu faire évoluer le web et trouver une méthode permettant de faire transiter toutes ces informations et rendre les pages web plus attrayantes et dynamiques que de simples pages contant du texte. C’est donc à ce moment-là, après que le CSS permettant l’application de style ai été mis en place, que le Javascript fit son entrée dans le monde du web.

La création du JavaScript et les différentes évolutions des langages du web nous ont amenés à trouver de meilleures façons de coder, plus précises, plus propres et plus efficaces que de simplement effectuer du langage web « à la main ». L’apparition des framework font alors leurs arrivés dans le web rendant ainsi le codage de pages web plus rapide, respectant le « cahier des charges » du web et normalisation ainsi la majeure partie des sites web ainsi que leurs contenus.

Parti tous ces framework se trouve l’API Webix. Nous allons donc voir en quoi consiste ce framework, comment l’utiliser au travers d’une page web, comment celui-ci fonctionne et quelles fonctionnalités il peut apporter au dynamisme des différents contenu des pages web.

 

 

Histoire

Création et approfondissement du JavaScript

 

Au cours de l’année 1995, Brendan Eich inventa le JavaScript [2]. Le JavaScript est un langage de programmation de scripts. Il permet de dynamiser les pages afin d’effectuer différents traitements dynamiques sans avoir à recharger une page web ou encore d’effectuer des changements visuels sur celle-ci en temps réel. De plus, le JavaScript est un langage orienté objet à prototypes, ce qui lui permet de comporter de nombreuses fonctionnalités préalablement établies.

En revanche, le fonctionnement « objet » du JavaScript n’est pas exactement le même que dans d’autres langages fonctionnant sur l’orienté objet. Dans celui-ci, il n’y a pas d’instances de classes à proprement parler. Les objets sont uniquement composés de constructeurs permettant de créer leurs propriétés, ce qui va en faire des objets hérités des classes natives au JavaScript, mais en aucun cas des instanciations de classes dites « classiques ».

Initialement, le JavaScript fut inventé en 10 jours. La syntaxe de celui-ci est grandement inspirée de celle du Java. Elle fut simplifiée afin que de nombreux débutants puissent comprendre et utiliser le langage. Le réel but premier de la création du JavaScript fut de renforcer une offre commerciale proposée par la société « Mosaic Communications Corporation ». Le langage était destiné à fonctionner uniquement côté serveur et fut nommé LiveScript par son créateur.

Par la suite, Brendan Eich développa le JavaScript qui fut mis en utilisation au grand public en 1996 par la société NetScape [3] dans son navigateur « Netscape Navigator 2.0 ». L’énorme essor connu par le navigateur va alors contribuer à l’adoption rapide du JavaScript parmi les différents utilisateurs du web et ainsi connaitre la croissance technique et technologique jusqu’au JavaScript que nous connaissons de nos jours. Nous sommes actuellement à la version 5 du JavaScript. De nouvelles versions doivent sûrement être en cours de développement afin de continuellement faire évoluer le JavaScript pour qu’il soit au plus près des utilisateurs et des besoins de l’économie et de l’utilisation de chacun.

 

 

Evolution des langages

Utilisation des framework dans le développement

 

Au fur et à mesure des années, le développement et les langages utilisés, ayant besoin de s’adapter aux nécessités des utilisateurs, sont devenu de plus en plus riche et complexe dans leurs compositions. Il a donc fallu établir différents standards de programmation dans le web, afin que le nombreux site naissant soient « formatés » de manières à ce que le contenu du web soit homogène.

C’est ainsi que l’idée des framework a fait son entrée dans le web. L’idée est simple : coder une seule fois de nombreuses fonctionnalités présentent dans la majeure partie des sites internet et correspondant aux standards utilisés, tel que le menu ou encore des boutons d’action, afin de rendre le code plus simple et rapide à utiliser et mettre en place.

Nous pouvons donc, lorsque nous parlons de framework, de parler de modèle de conception dans différents langages ainsi que dans différents supports. Il existe de nombreux framework dans de nombreux langages pour différentes utilisations. Parmi les plus connus et les plus utilisés, se trouvent Bootstrap ou encore Materialize pour la conception pure de sites web, ou encore Symfony qui est un framework PHP permettant le développement plus efficacement dans ce langage.

C’est ici que notre API Webix fait son entrée : elle vient s’ajouter à la famille des framework mais cette fois-ci pour le JavaScript. Cette API comporte de nombreuses fonctionnalités permettant le traitement et l’affichage de données. Elle permet ainsi d’intégrer différents graphiques ou encore des camemberts de données dans un site web facilement et rapidement. Elle permet également d’effectuer des tableaux de comparaison, un menu facilitant l’accès aux différentes parties qui composent les statistiques mises à disposition du lecteur ou encore créer une web application permettant l’achat de produits sur internet.

Nous allons donc découvrir plus en détail ce framework, exposer les différentes fonctionnalités qu’il comporte et effectuer une page web de test afin de comprendre et utiliser le fonctionnement de celui-ci.

 

 

Framework Webix

Téléchargement et installation

 

Les framework dédiés au web fonctionnent de manières générales de la façon suivante : les différentes fonctionnalités réparties entre le CSS et le JavaScript sont écrites dans leurs feuilles de styles respectives et doivent être intégrées dans notre feuille HTML afin de pouvoir être utilisée dans notre code et connues par le navigateur web.

Il va donc falloir récupérer les feuilles de styles dédiées au framework sur le site de l’API et les télécharger afin de pouvoir les disposer dans nos dossiers de CSS et de JavaScript et ainsi pouvoir les utiliser dans notre code.

Pour ce faire, il suffit de se rendre sur le site https://webix.com/ et de télécharger le paquet contenant les feuilles de style.

 

 

Une fois une adresse mail, afin de recevoir le lien de téléchargement, renseignée, il vous faudra décompresser le fichier téléchargé afin de récupérer l’ensemble des composants de l’API Webix.

Le package est composé de nombreux dossier, mais les fichiers qui nous intéressent se trouvent dans le dossier « webix ». Les fichiers se trouvant à l’intérieur vont nous permettre d’intégrer l’API Webix à nos différentes feuilles JavaScript et CSS afin de pouvoir commencer à coder.

 

 

Une fois rentré dans ce dossier, rendez-vous dans le dossier « codebase ». Une fois l’intérieur de ce dossier il ne vous reste plus qu’à copier respectivement les fichiers « webix.css » et « webix.js » dans vos dossiers respectifs de CSS et de JavaScript afin de pouvoir les intégrer à vos feuilles internet.

 

 

 

Importation dans les feuilles JS et CSS

 

Il ne reste plus qu’une seule étape à effectuer afin que les fichiers de notre API soient fonctionnels : les intégrer dans nos différentes feuilles de style afin de pouvoir commencer à coder nos premiers modules.

Pour ce faire, il va falloir insérer les liens des différentes feuilles que vous allez utiliser dans le head de votre page HTML. Il est conseillé d’utiliser un chemin relatif plutôt qu’un chemin absolu, car le moindre déplacement de votre dossier complet du site internet pourrait entrainer une erreur de cheminement ce qui risquerait de casser l’ensemble de votre code.

Dans mon exemple, il y’a trois lien intégrés au head de ma feuille d’exemple HTML : un lien pour la feuille de JS de Webix, un lien pour la feuille de style de Webix et un lien vers une feuille « test_webix » qui va contenir l’ensemble de mon code permettant d’implémenter l’API.

Voici donc un aperçu de mon head après la mise en place des différents liens nécessaires au bon fonctionnement de l’ensemble de l’API :

 

 

 

 

 

Développer avec Webix

Structure de base du code JS

 

Comme tous les framework, Webix utilise une structure particulière de codage permettant l’utilisation de son framework. Découvrons ensemble au travers d’un premier module l’implémentation de ce framework.

Avant de coder, il faut comprendre que l’ensemble des « fonctions » utilisées dans notre code, sont gérées et contrôlée par une fonction qui s’appelle webix.ui(). Cette fonction là permet d’utiliser toutes les fonctions de Webix. Il va donc falloir placer notre code dans cette fonction là si on veut que tout le reste fonctionne correctement. Pour être sûr que la fonction est bien appelée, nous allons intégrer la fonction précédente dans une autre fonction propre à Webix qui permet d’appeler cette fonction une fois seulement que l’ensemble de la page à été chargée par le navigateur.

Voici donc le code résultant de toutes ces explications :

 

 

Ces deux lignes de code doivent se trouver OBLIGATOIREMENT au début de votre fichier « text_webix .js » si vous voulez que l’ensemble des codes Webix fonctionnent.

Nous pouvons maintenant nous attaquer à notre tout premier petit module de l’API Webix.

 

 

 

Premier module à l’aide de Webix

 

L’API fonctionne de la même manière que les autres framework, c’est-à-dire sur un système de lignes et de colonnes (rows et cols). Il faut donc, afin de remplir notre page, effectuer l’ajout de rows permettant de créer une nouvelle ligne de contenu à l’intérieur de notre page et ainsi insérer du contenu dans cette rows afin de structurer notre page.

Nous allons donc rajouter une bande de titre ainsi qu’une petite phrase d’introduction afin d’expliquer notre page est entièrement créer à l’aide du framework Webix.

Nous avons donc à mettre en place une rows de structure et ensuite lui intégrer deux types de contenu : un header permettant d’insérer un titre, et ensuite un second contenu permettant de rentrer notre ligne d’introduction qui explique que notre page est codée avec Webix.

Voici le code le permettant d’implémenter tout ça :

 

Vous l’aurez compris, le type permet de spécifier le type de contenu qui va devoir être rajouté à l’intérieur de la row. Chaque instruction doit être intégrée entre accolades, et séparée par une virgule pour respecter les normes d’écritures du JavaScript. Une fois les différentes lignes correctement implémentées, vous devez obtenir ce résultat :

 

 

 

Ajout de deux modules sur une même ligne

 

Bien évidemment, créer cette simple ligne est gratifiante mais elle ne sert pas à grand-chose. Il serait intéressant d’apprendre comment insérer plusieurs modules sur une même ligne ou encore créer un module un peu plus complexe permettant de gérer l’insertion ou la suppression de données à partir d’un formulaire dans une liste. Nous allons donc dans un premier temps nous pencher sur l’insertion de deux modules dans une seule ligne.

Pour ce faire, nous allons pouvoir utiliser le fameux attribut « cols » permettant d’ajouter des colonnes. Pour rappel, l’attribut « rows » permet de rajouter une ligne dans notre page, et l’attribut « cols » permet d’ajouter des colonnes à cette rows. Une fois que nous connaissons le principe, il est facile de structurer notre code suivant nos besoins et ce que l’ont souhaite effectuer comme traitement.

Pour mon exemple, ma première colonne va contenir un simple calendrier qui peut servir par la suite à gérer un système de réservation en ligne ou encore un agenda par exemple.

La seconde colonne de ma rows ne contiendra rien du tout, je vous laisse le choix dans le contenu de cette colonne afin de vous exercer sur le code de votre choix.

Voici donc le code permettant de créer les deux colonnes dans notre row :

 

 

On peut voir que l’attribut cols, à l’aide du jeu d’accolades, se trouvent bien dans notre row de départ et étant donné qu’il a été ajouté dans un nouveau jeu d’accolades comme les éléments précédents, chacun de ces éléments ont été ajoutés à la ligne mais toujours dans notre row de départ.

Nous pouvons ainsi empiler du contenu de différents types dans une seule et même row. Une fois notre code implémenté, voici le résultat de notre page web avec l’ensemble de notre code dans notre navigateur :

 

 

Nous voyons donc qu’un calendrier à été rajouté à notre page web en dessous de nos deux lignes d’introduction, et que la page est effectivement bien partagée en deux colonnes pouvant contenir deux modules différents. La documentation de Webix en ligne permet l’implémentation de l’ensemble de leurs modules. Elle est beaucoup trop fournie pour être étudiée entièrement et permet d’effectuer de nombreux traitement différent sur différents projets. Nous allons pouvoir nous intéresser maintenant à la dernière partie de la présentation de l’API Webix permettant d’effectuer des traitements.

 

 

Traitements et fonctions avec un module

 

Maintenant que l’on sait créer de simples lignes, des colonnes comportant des contenus différents dans une row, nous allons nous pencher sur le fonctionnement encore plus complexe de l’API qui permet d’effectuer des traitements à l’aide des modules mis à disposition.

Pour notre exemple, nous allons créer sur plusieurs lignes et colonnes, un système permettant d’ajouter un film dans une liste. L’ensemble de ce module sera composé de deux boutons « ajouter » et « supprimer » permettant de rajouter un film ou d’en supprimer un de la liste, d’une partie gauche permettant, si l’on veut rajouter un film, de rentrer son nom et son année de sortie, et une partie droite qui va permettre de lister l’ensemble de tous les films qui ont été ajoutés.

La fonction ajouter ne fera qu’ajouter le film comme son nom l’indique, mais la fonction supprimer devra effectuer une vérification auprès de l’utilisateur afin d’obtenir une confirmation de la part de l’utilisateur s’il souhaite effectivement supprimer le film de la liste ou non.

La création de ce module va donc être effectué en deux temps : le premier temps va concerner la création de module front-end contenant les boutons, une liste de film de base afin que la liste ne soit pas vide, et les deux zones de texte permettant d’insérer le titre et l’année du film. Le second temps va concerner la création des différentes fonctions permettant le traitement des données en back-end. C’est-à-dire, la gestion de l’ajout du film dans la liste en récupérant ce qui a été écrit dans les deux zones de texte, et la suppression du film avec la vérification auprès de l’utilisateur avant suppression.

Voici le code permettant d’effectuer la partie front-end de module et ainsi d’obtenir la partie visible de l’iceberg :

 

 

 

Nous pouvons voir dans notre code, le système de row et de cols permettant de structurer le code. Les différentes parties sont appelées à l’aide des attributs « view » qui permettent d’appeler les différentes classes et fonctions codées dans l’API Webix.

Une fois le code rajouté, soit au reste du code précédent à la suite, soit dans une feuille JS totalement à part (pensez bien à faire le lien de cette feuille dans votre feuille HTML), vous devriez obtenir le résultat suivant :

 

 

Nous avons donc bien nos deux boutons permettant d’ajouter et de supprimer un film dans la liste, ainsi que nos deux zones de texte permettant à l’utilisateur de rentrer le titre et l’année du film, et notre liste de film présente sur la droite comme précédemment prévu dans notre organisation du module.

Si vous nous regardons le code de plus près, on peut savoir que dans la toute première partie du code qui permet d’implémenter nos deux boutons, se trouvent la fonction click dans les paramètres qui va permettre d’appeler nos fonctions d’ajouter et de suppression que nous allons devoir coder nous-même. Effectivement, Webix ne fournit que la partie front-end permettant d’afficher les différents modules que vous souhaitez mais ne fournit pas le code des traitements avec. Heureusement pour nous, l’API fournit quand même au travers de sa structure un moyen simple d’injecter sans trop de difficultés nos fonctions dans l’Api Webix.

Ici, la fonction click va nous permettre de passer en paramètre le nom de nos différentes fonctions afin de pouvoir les appeler et d’effectuer un traitement lors du clic d’une souris (ou de la pression d’un doigt sur un écran de smartphone ou de tablette car le système est aussi adapté aux périphériques tactiles) et de lancer ainsi directement le traitement propre à chaque fonction désirée.

Nous allons donc voir dans un premier temps comment ajouter un film dans notre liste de film. Etant donné que ce sont des fonctions différentes de l’API Webix mais qui contiennent quand même du code en lien avec Webix, il faut placer les deux fonctions à l’extérieur de nos deux premières fonctions de début sinon le code retournera une erreur et ne fonctionnera pas. Voici le code de la fonction permettant d’effectuer ce traitement-là :

 

 

Nous pouvons voir que la fonction est très basique car Webix nous simplifie la tâche en nous mettant à disposition des méthodes permettant de récupérer les id de leur formulaire facilement. Ainsi, pas besoin de passer par un formulaire HTML avec différents ID suivant les sections. Tout est directement géré par Webix en interne.

Maintenant que nous pouvons ajouter un film à notre liste, il nous faut pouvoir le supprimer aussi. Découvrons le code de la fonction supprimer qui va nous permettre de supprimer un film de la liste :

 

 

Une fois de plus, Webix nous facilite encore la tâche au niveau de la vérification de l’utilisateur à l’aide de la méthode webix.confirm(). Elle va nous permettre en interne de demander une vérification à l’utilisateur par rapport à l’action qu’il à souhaiter effectuer avant, c’est-à-dire, de supprimer un film de la liste. La fonction va, une fois de plus en interne, retourner un booléen qui sera traité en interne par Webix et permettra d’effectuer la suite du traitement ou non.

Voilà pour le code de nos deux fonctions. Il faut penser à bien les appeler au niveau du code de nos deux boutons permettant d’effectuer des actions. Si l’ensemble de votre code à correctement effectué, vous devriez pouvoir ajouter et supprimer des films de votre liste sans aucun souci.

A l’actualisation de votre page web, les différents films que vous avez rajoutés vont disparaitre et cela est totalement normal : n’étant pas connecté à une base de données ou à n’importe quel autre système de sauvegarde d’information, le traitement et l’ajout ou la suppression de film se fait dynamiquement dans le navigateur mais n’est pas effectué durablement dans le temps.

 

 

Récapitulatif et conclusion

Récapitulatif

 

Avant de conclure cette contribution sur l’API Webix et sa rapide découverte, nous allons voir l’ensemble du code afin de voir une vue globale sur l’ensemble du code permettant de créer la page entière. Voici donc le code complet permettant de créer la page de test de l’API Webix :

 

 

Et voici le résultat final de l’ensemble du code qui compose notre page web :

 

 

Nous retrouvons donc bien les différents modules qui composent notre page, avec le formulaire permettant d’ajouter et de supprimer un film de notre liste, notre calendrier et notre seconde colonne vide et nos deux petits modules permettant de présenter rapidement la page avec un titre et une phrase d’amorce.

 

 

Conclusion

 

Pour conclure, l’API Webix comporte une multitude de fonctionnalités permettant d’effectuer de nombreux traitements. De nombreuses méthodes implémentées par Webix permettent de récupérer facilement des informations au travers d’un formulaire ou encore de n’importe quel insert fournit par Webix. La documentation sur le site officiel de Webix permet d’obtenir de nombreuses informations par rapport aux nombreux modules disponibles par Webix et fournit différent exemple de projets bien plus complexe avec les codes sources correspondants. Toutes les informations sur la documentation est disponible ici.

 

 

Bibliographie

 

[1] – Source Wikipédia : https://fr.wikipedia.org/wiki/JavaScript. Dernier accès à l’article le 19/11/2017.

[2] – Source Wikipédia : https://fr.wikipedia.org/wiki/Brendan_Eich. Dernier accès à l’article le 20/11/2017.

[3] – Source Wikipédia : https://fr.wikipedia.org/wiki/Brendan_Eich. Dernier accès à l’article le 23/12/2017.

 

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *