Layout manager Jayaya.Front

Histoire de Jayaya.Front

Lors d’un projet d’étude, le but était la réalisation d’un Customer Relationship Manager hébergé sur un serveur NodeJS. Plusieurs modules ont donc été utilisés côté serveur mais du côté client, une question importante s’est posée… Quel framework utiliser en excluant définitivement JQuery des possibilités? Plusieurs solutions ont été envisagées, trop peu sont parvenues à convenir aux attentes réelles. La dernière solution envisagée était l’utilisation de Javascript pur qui n’impliquait donc aucune contrainte si ce n’est que plus de travail serait nécessaire. Cette solution a été retenue puis a évoluée finalement. Concrètement, l’application commençait à prendre une forme précise et c’est ainsi que s’est imposé la création de classes javascript avec la nécessité d’un protocole multi-directionnel entre les classes, c’est ainsi que Jayaya.Front, un framework à l’origine lié à JayayaCRM mais désormais indépendant est né.

Principe fondamental de Jayaya.Front

Jayaya.Front est un framework de gestion de disposition de divers éléments graphiques au sein d’une page web. Ce type de gestionnaire de disposition (aussi appelé Layout Manager en général), consiste à créer, au sein de la page web, des conteneurs capable de contenir soit des éléments graphiques prédéfinis, soit d’autres conteneurs. Dans les langages de type Java par exemple, plusieurs systèmes de dispositions sont disponibles, on retrouve notamment un dispositionnement avec un BorderLayout, permettant de placer les conteneurs à des positions prédéfinies (gauche, droite, haut, bas, etc…). On y également quelques autres type de LayoutManager que l’on retrouve sur la Javadoc ou le Tuto d’oracle. Le LayoutManager Jayaya ressemble un peu au GridLayout que l’on retrouve dans Java. En effet, il fonctionne selon un découpage de l’espace dans lequel il se trouve en compartiments horizontaux ou verticaux, appelés VerticalLayout et HorizontalLayout. Chaque couche / sous-couche est également dimensionnable afin de rendre plus souple la disposition des éléments.

Le protocole de communication

Dans Jayaya.Front, le protocole de communication utilisé entre les objets est réalisé grâce au Pattern Coupleur également créé à l’occasion du projet Jayaya. Grâce aux Coupleurs, qui se rapproche beaucoup du contrôleur amélioré dans un modèle MVC, chacun des éléments de l’interface sont capable de communiquer et de réagir aux événements utilisateur.

Les éléments graphiques de base

Jayaya.Front fournit un certains nombre d’éléments graphiques de base afin de permettre l’utilisation de Jayaya.Front sans la nécessité de créer de nouvelles classes. Actuellement au nombre de 8, les classes de base ainsi que leur description sont les suivantes:

  • GraphicalConnexion : Définit un écran de connexion basique avec un champs login et mot de passe. Généralement utilisé comme premier écran rendu.
  • GraphicalContainer : Un élément graphique basique, n’ayant aucune représentation particulière mais qui est apte à contenir n’importe quel autre élément graphique ou n’importe quel code HTML.
  • GraphicalEditInput : Élément graphique représentant un champ texte modifiable grâce à un bouton « modifier ».
  • GraphicalForm : Constitue un formulaire avec plusieurs type de contenus disponibles.
  • GraphicalList : Représentation sous forme verticale d’une liste d’éléments.
  • GraphicalNavigator : Un navigateur du site, généralement retrouvé en haut de page ou sur le côté, utilisé pour parcourir l’ensemble des pages du site.
  • GraphicalPopup : Comme son nom l’indique, permet la création d’une fenêtre popup destinée à s’ouvrir lors d’une réaction à un événement utilisateur.
  • GraphicalTable : Représentation graphique d’une galerie d’éléments (image, vidéos, autres…)

Chacun de ces éléments possède un css de base qui permet d’avoir un style prédéfini du framework. Rien n’est cependant fixé puisque des méthodes sont prévues pour la personnalisation du css de chaque classe.

Chargement des données

Étant programmé par défaut pour nodeJS, Jayaya.Front possède la faculté de communiquer de manière asynchrone avec le serveur par le biais de socket.io. Aussi, pour des raisons d’économie du traffic de données, le framework est programmé pour enregistrer, dans une certaine mesure, l’ensemble des données qu’il reçoit provenant de la base de données. Bien entendu, la base de données pouvant être modifiée par différents utilisateurs, Jayaya gère un système de version des données dans la base de données, afin de recharger les données qui ont été modifiées. Grâce à socket.io, une gestion dynamique des signaux et des méthodes associées est également existante dans Jayaya. En effet,  un potentiel développeur pourrait écrire ses propres méthodes de communication socket.io avec son propre signal d’une façon très simple grâce au système de gestion dynamique des événement de Jayaya.

Système de traduction dynamique

Jayaya.Front fournira également un système de traduction dynamique (actuellement en cours de développement). En l’état actuel, un système permettant d’utiliser une langue par défaut existe, la sérialisation de chaque chaine de caractère est également disponible et fonctionnelle.