Approche globale du framework Tango.js

PALETTE DE COMPOSANTS D'INTERFACE

Gestion des Tiers

Construisez des interfaces utilisateurs modernes et responsives, et intégrez vos propres composants.

Les composants, visuels ou non visuels, s'intègrent directement dans les vues et sont facilement accessibles depuis les contrôleurs.

Profitez du mode développeur pour accéder aux propriétés de vos objets composants directement sur le rendu final de vos pages, depuis un navigateur Web.

Composants de base :


Objet générique d'héritage de composant.

Les composants crées héritent d'un objet générique "Tgx", fournissant les fonctionnalités et comportements supportés par le noyau, offrant une totale liberté de manipulation et d'interaction entre les différents composants.

Les propagations d'état permettent une synchronisation des différents étapes de construction ou destruction des composants, quelques soit le niveau de profondeur ou d'imbrication des vues de l'application.


Composant "Vue" (visuel). Composant générique d'interface (page HTML) pouvant accueillir la déclaration de tout autre composant (y compris d'autres vues).

  • Exemple de création d'une vue :
    <div name="myView" data-tgx-object="tgxView" data-tgx-url="res/res_person/lists/view.html"></div>
  • Exemple de changement de propriétés dans un contrôleur :
    $tgx('/myView').set({ url: "app/login.html" });


Composant "Contrôleur" (non visuel). Composant générique pouvant manipuler tout type de composant.

  • Exemple de création dans une page HTML :
    <div name="myController" data-tgx-object="tgxController" data-tgx-dependencies="res/res_person/lists/view.controller.js" data-tgx-controller="resPersonController"></div>
  • Exemple d'appel à une fonction spécifique d'un contrôleur :
    $tgx('/myController').load();


Composant "routeProvider" (non visuel). Composant permettant le pilotage de création des pages (routage d'interface) et la synchronisation avec les urls d'interface.


Composant "routeLink" (visuel ou non visuel) : composant permettant la création de liens (cliquable ou automatique) entre pages

  • Exemple de création dans une page HTML :
    <a name="myRouteLink" data-tgx-object="tgxRouteLink" data-tgx-state="expGtaExecutedGlobal" data-tgx-target="/mainView/moduleView" data-tgx-url="exp/exp_gta_executed/global/view.html">Cliquez moi!</a>
  • Exemple d'appel à une fonction spécifique d'un contrôleur :
    $tgx('/myRouteLink').click();


Composants fournisseurs :


Composant "Fournisseur de service" (non visuel). Ce composant permet la définition et l'accès aux services d'une instance :

  • Services hébergés par l'instance, accessibles en local et/ou des instances tierces
  • Services hébergés par des instances tierces et accessibles à l'instance

Consultez la section "Services et codes mutualisés" pour en savoir plus!


Composant "Fournisseurs de notifications" (visuels). Ce composant permet l'affichage de notifications auprès des utilisateurs.

Associé au composant tgxServicesProvider ou au composant tgxCom, il autorise l'affichage de notifications push ou broadcast issues d'autres instances Tango.


Composant "Fournisseur de fenêtres popup" (visuel). Ce composant permet la gestion et l'affichage de popup de tous type : confirmations, messages d'erreurs, fenêtre de sélection, assistants, vues fenêtrées...


Composant "Fournisseur de base de données" (non visuel). Ce composant permet la gestion et l'accès à différentes bases de données.

Indispensable au du service dataApi, il lui permettra la manipulation des bases de données.


Composant "Fournisseur de fichier" (non visuel). Ce composant permet la gestion et l'accès à différents sources de stockage de fichiers, tels que le système de fichier interne à la cible ou bien des Clouds externes.

Associé au composant "tgxServiceProvider", il peut manipuler des fichiers d'un système de fichiers d'une instance tierce, et associé au composant "ODF" permet de faciliter la lecture ou la génération de fichiers OpenDocument


Composant "Fournisseur de document OpenDocument" (non visuel). Ce composant permet la gestion et la manipulation de documents au format OpenDocument :

  • Lecture
  • Création
  • Modification
  • Conversion PDF (nécessite l'installation d'une instance soffice)

Composant "Fournisseur de cartographie" (non visuel). En association avec le service "Map", ce composant permet la gestion de données cartographiques, pour les appels à différentes API tierces tels que GoogleMap, BingMap ou OpenStreetMap :

  • Récupération de fonds cartographique
  • Géocodage
  • Recherche d'itinéraires

Composant "Fournisseur d'agenda" (non visuel). Ce composant permet la gestion et la manipulation d'entrées d'agenda.

  • Compatibilité avec les formats ICS

Composant "Fournisseur d'agenda Google Agenda" (non visuel). Ce composant permet la gestion et la manipulation des agendas Google Agenda : lecture, création, modification...

  • Support des comptes de services Google

Composants de structuration d'interface :


Composant "Form" (visuel). Ce composant permet la structuration de pages découpées en deux sections (verticales ou horizontales) avec support de splitters et de comportements responsifs.


Composant "Tiltre de form" (visuel). Ce composant permet l'inclusion de titres dynamique dans les composants tgxForm.


Composant "Tiltre de form" (visuel). Ce composant permet l'inclusion de barres d'outils dans les composants tgxForm.


Composant "Onglets" (visuel). Ce composant permet de présenter différents composants tgxView sous forme d'onglets.


Composant "Expander" (visuel). Ce composant permet de créer des blocs d'interfaces ouvrables et fermables.


Composant "Docking" (visuel). Ce composant permet de créer des zones de docking d'interfaces, pour organiser, déplacer, supprimer des éléments déplaçables, tel que des widgets.


Composant "Barre d'outils" (visuel). Ce composant permet de créer des barres d'outils (ex : raccourcis d'accès rapides...).


Composant "Popover" (visuel). Ce composant permet l'affichage de message au survol d'un élément d'interface.


Composants de menus et de routage :


Composant "Menu" (visuel). Ce composant permet l'affichage la gestion, l'organisation et l'affichage d'entrées de menu.

Associé aux composants tgxRouteProvider et tgxRouteLink il permet une navigation fluide et cohérente avec des accès par Urls spécifiques.


Composant "Barre de menu" (visuel). Ce composant permet l'affichage la gestion, l'organisation et l'affichage de barre de navigation.


Composant "routeLink" (visuel ou non visuel) : composant permettant la création de liens (cliquable ou automatique) entre pages

  • Exemple de création dans une page HTML :
    <a name="myRouteLink&quot; data-tgx-object="tgxRouteLink" data-tgx-state="expGtaExecutedGlobal" data-tgx-target="/mainView/moduleView" data-tgx-url="exp/exp_gta_executed/global/view.html">Cliquez moi!</a>
  • Exemple d'appel à une fonction spécifique d'un contrôleur :
    $tgx('/myRouteLink').click();


Composant "Raccourci de route" (visuel ou non visuel). Composant permettant la gestion de raccourcis de lien gérés par les composants tgxRouteLink .


Composant "routeProvider" (non visuel). Composant permettant le pilotage de création des pages (routage d'interface) et la synchronisation avec les urls d'interface.


Composants de saisie :


Composant "Bouton" (visuel). Ce composant permet l'affichage et la gestion de boutons.


Composant "CheckBox" (visuel). Ce composant permet l'affichage et la gestion de boîte à cocher.


Composant "Boutons radio" (visuel). Ce composant permet l'affichage et la gestion de boutons radios.


Composant "Champ texte" (visuel). Ce composant permet l'affichage et la gestion de champs texte.


Composant "Sélecteur de valeur numérique" (visuel). Ce composant permet l'affichage et la gestion de champs numériques de tout type.


Composant "Sélecteur de date" (visuel). Ce composant permet l'affichage et la gestion de champ de date et heures.


Composant "Sélecteur de couleur" (visuel). Ce composant permet l'affichage et la gestion sélection de codes couleurs.


Composant "Champ texte formaté" (visuel). Ce composant permet l'affichage et la gestion de champ texte pré-formaté.


Composant "Editeur de texte multi-lignes" (visuel). Ce composant permet l'affichage et la gestion de champs de texte multi-lignes.


Composant "Sélecteur" (visuel). Ce composant permet l'affichage et la gestion de sélecteurs de valeurs.


Composant "ComboBox" (visuel). Ce composant permet l'affichage et la gestion de sélecteurs de valeurs simple ou multiple.


Composant "ComboGrid" (visuel). Ce composant permet l'affichage et la gestion de sélecteurs affiché sous forme de grille


Composant "Grille" (visuel). Ce composant permet l'affichage et la gestion de grille de saisie.

Associé au composant tgxClientDataset, ce composant est indispensable pour diffuser et collecter l'information de manière efficace.

Associé aux modèles de données, le paramétrage des grilles se fait automatiquement : titres de colonnes, type de champs, assistants de saisie...


Composant "Grille arboresente" (visuel). Ce composant permet l'affichage et la gestion organisées par arborescence sous forme de grille de saisie.


Composant "arboresence" (visuel). Ce composant permet l'affichage et la gestion de données organisées par arborescence.


Composant "Graphique" (visuel). Ce composant permet l'affichage et la gestion de graphiques.


Composant "Kanban" (visuel). Ce composant permet l'affichage et la gestion de données sous forme de tableau kanban.

Support de navigation en sous-niveau de données, avec support du modèle de données "mod_states".


Composant "Commentaires" (visuel). Ce composant permet l'affichage et la gestion de commentaires sur des entrées de données liés à des modèles de données.

Associé au modèle de données "mod_comment", vous pouvez centraliser les commentaires d'entités enfants sur leurs entités parentes liées.


Composants d'accès aux données :


Composant "Fournisseur de base de données" (non visuel). Ce composant permet la gestion et l'accès à différentes bases de données.

Indispensable au du service dataApi, il lui permettra la manipulation des bases de données.


Composant interne d'accès aux bases de données utilisé par le composant tgxDBProvider, permettant le support des traducteurs d'accès aux base de données (dbTranslateJS/dbTranslatePHP)


Composant interne d'accès aux bases de données utilisé par le composant dbProvider, permettant le support des accès aux base de données par requêtes Node.js


Composant interne d'accès aux bases de données utilisé par le composant dbProvider, permettant le support des accès aux base de données par requêtes PHP (via script spécifique serveur dbRequest.php)


Composant "ClientDataset" (non visuel). Ce composant permet la gestion et la manipulation de données issus d'une source de données défini par un modèle de données.

Inspiré des composants "ClientDataset" historiquement proposé par les RAD Borland, il permet un traitement d'ensemble données (lecture, insertion, modification, suppression, recherche...) de façon manuelle ou bien de manière transparente et automatique en l'associant avec des composants visuels compatibles (tgxGrid, tgxCdsInput, tgxKanban, tgxScheduler...)


Composant "ClientDatasource" (non visuel). Ce composant permet la mise en relation entre un composant d'interface compatible et un composant tgxClientDataset.


Composant "CdsInput" (visuel). Ce composant la création automatique d'un composant de saisie correspondant au type spécifique d'une donnée issue d'un ensemble de données fourni par un composant tgxClientDataset et définie par un modèle de données.


Composants de manipulation de fichiers :


Composant "Fournisseur de fichier" (non visuel). Ce composant permet la gestion et l'accès à différents sources de stockage de fichiers, tels que le système de fichier interne à la cible ou bien des Clouds externes.

Associé au composant "tgxServiceProvider", il peut manipuler des fichiers d'un système de fichiers d'une instance tierce, et associé au composant "ODF" permet de faciliter la lecture ou la génération de fichiers OpenDocument


Composant "Fournisseur de document OpenDocument" (non visuel). Ce composant permet la gestion et la manipulation de documents au format OpenDocument :

  • Lecture
  • Création
  • Modification
  • Conversion PDF (nécessite l'installation d'une instance soffice)

Composant "Editeur de document texte OpenDocument" (visuel). Ce composant permet l'affichage et la modification de fichier OpenDocument au format texte (fichiers ODT)

Composant pouvant optionnellement intégrer la suite collaborative Collabora (version CODE) pour la visualisation et la modification de fichiers OpenDocument.


Composants cartographiques :


Composant "Carto" (visuel). Ce composant permet les représentations cartographiques ainsi que les recherches d'itinéraires (Leaflet inside!)


Composant "Fournisseur de cartographie" (non visuel). Ce composant permet la gestion de données cartographiques, avec notamment des fonctions abstraites pour les appels à différentes API tierces tels que GoogleMap, BingMap ou OpenStreetMap :

  • Récupération de fonds cartographique
  • Géocodage
  • Recherche d'itinéraires

Composants d'agenda :


Composant "Fournisseur d'agenda" (non visuel). Ce composant permet la gestion et la manipulation d'entrées d'agenda.

  • Compatibilité avec les formats ICS

Composant "Agenda" (visuel). Ce composant permet la représentation et la manipulation d'agenda sous tout type de forme : vue mensuelle, semaine, jours, agenda...


Composant "Fournisseur d'agenda Google Agenda" (non visuel). Ce composant permet la gestion et la manipulation des agendas Google Agenda : lecture, création, modification...

  • Support des comptes de services Google

* Composants pouvant actuellement nécessiter des librairies d'interfaces tiers (jqWidgets, leaflet, webODF, socket.io, zip.js, hammer.js ou fullscreen.js)

Vous souhaitez en savoir plus ? Parlons-en de vive voix !