2.6. Étendre Business Central

Depuis la version 6.1 de JBoss BPM Suite , Business Central peut être configuré pour ajouter de nouveaux écrans, des menus, des éditeurs, des splashscreens et des perspectives par l'administrateur. Ces éléments peuvent étendre les fonctionnalités de Business Central et sont accessibles via le menu Extensions et sont classifiées Gestion de plugins
Vous pouvez maintenant définir vos propres plugins basés Javascript ou HTML pour étendre Business Central et les ajouter sans vous soucier de copier les fichiers dans le système de fichiers sous-jacent. Ajouter un nouvel écran au système pour afficher les options de base de cette fonctionnalité.

2.6.1. Gestion des plugins

Vous pouvez accéder a l'écran Gestion Plugin en cliquant sur Extensions → Gestion Plugin. Vous afficherez ainsi l'écran Plugin Explorer qui donne la liste de tous les plugins : Plugin Perspective, Plugin Écran, Editor Plugin, Plugin Splashscreen et Menu dynamique. Ouvrez-en une et vous verrez tous les plugins existants pour chaque catégorie, y compris ceux qui ne sont as modifiables et qui sont générés par le système.
Nous allons créer un nouveau plugin qui fait écho à « Hello World » lorsque les utilisateurs visitent l'écran de ce plugin. En général, les étapes pour créer un nouveau plugin sont les suivantes :
  • Créer un nouvel écran
  • Créer une nouvelle perspective (et y ajouter le nouvel écran)
  • Créer un nouveau menu (et y ajouter le nouvel écran)
  • Apps (en option)

Ajouter un nouvel écran

Cliquer sur le bouton Nouvel ... et sélectionner Nouvel écran. On vous invitera à saisir le nom de ce nouvel écran. Saisir "HelloWorldJS" et appuyer sur le bouton OK. L'éditeur du plugin d'écran apparaîtra divisé en 4 sections : Modèle, CSS, JavaScript et Media.

Note

Tous les éléments créés manuellement entrent dans des catégories respectives, au cas où vous souhaitez les modifier plus tard. Dans ce cas, pour ouvrir l'éditeur de plugin d'écran à nouveau si vous le fermez, ouvrez la catégorie Plugin Écran et passez les écrans générés par le système pour aller vers le plugin créé manuellement, et cliquer dessus pour ouvrir l'éditeur de plugins d'écran à nouveau.
Le modèle est l'endroit où votre HTML ira, CSS est pour le style, JavaScript pour vos fonctions et Media pour télécharger et charger des images.
Comme nous faisons un simple plugin de Hello World, saisir le code suivant dans la section Template (Modèle) : < div >Mon ecran Helloworld< / div >. Il peut s'agir de n'importe quel code HTML, et vous pouvez utiliser les exemples Angular et Knockout fournis. Pour les besoins de cet exemple, nous n'utilisons pas un de ces exemples, mais vous pouvez en choisir un en le sélectionnant dans le menu déroulant au bas dans la section Template.
Saisir votre code JavaScript dans la section JavaScript. Certaines méthodes et propriétés sont définies pour vous, y compris main, on_close et on_open. Pour cette démo, sélectionnez on_open et saisir ce qui suit : function () { alert('Hello World'); }
Cliquer sur le bouton Enregistrer pour terminer la création de l'écran.

Ajouter une nouvelle Perspective

Une fois que l'écran est créé, vous devez créer une perspective sur laquelle cet écran va se trouver. Les perspectives peuvent être créées de la même façon que celle dont un écran est créé en cliquant sur le boutonNouvelle... (nouvelle perspective) puis, en sélectionnant Nouvelle Perspective. Cela ouvrira un éditeur de plugin de perspective, un peu comme dans l'éditeur Screnn Plugin.
L'éditeur de perpective est comme un générateur de grille que l'on peut glisser / déplacer pour les écrans et composants HTML. Retirer les grilles existantes dans la partie droite, puis faites glisser une grille 6 6 sur le côté droit.
Ensuite, ouvrir la catégorie Composants et faites glisser un élément d'écran sur le côté droit (dans une grille). Ceci ouvrira la boîte de dialogue Modifier Composant où vous pouvez entrer votre écran créé à l'étape précédente (HelloWorldJS). Cliquer sur le bouton OK, puis sur le bouton pour sauvegarder cette perspective. Saisir HelloWorldPerspective, puis Accueil dans le champ de nom de balise (et cliquer sur le bouton Ajouter Balise). Enfin, cliquer sur le bouton OK pour terminer l'enregistrement
Si vous avez besoin de charger cette perspective à nouveau, vous aurez besoin du nom que vous lui avez donnée car cette perspective n'apparaît pas dans la liste des perspectives. Pour charger, cliquer sur le bouton et saisir le nom de la perspective.

Ajout d'un nouveau menu

La dernière étape dans la création de notre plugin est d'ajouter un menu dynamique d'où le nouvel écran/ou la nouvelle perspective peuvent être appelés. Pour ce faire, aller dans Extensions → Gestion Plugin puis cliquer sur le bouton Nouveau... pour sélectionner Nouveau Menu Dynamique. Nommer ce menu dynamique (HelloWorldMenu), puis cliquer sur le bouton OK. L'éditeur de menu dynamique s'ouvrira.
Saisir le nom de perspective (HelloWorldPerspective) comme Id d'activité, ainsi que le nom de la liste déroulante (HelloWorldMenuDropDown). Cliquer sur OK, puis cliquer sur le bouton Enregistrer.
Ce nouveau menu sera ajouté à votre plan de travail la prochaine fois que vous réactualiserez Business Central. Réactualiser maintenant pour voir HelloWorldMenu ajouté dans votre menu de niveau supérieur. Cliquer dessus pour que HelloWorldMenuDropDown apparaisse, et si vous cliquer dessus, votre écran ou perspective s'ouvrira accompagné de Hello World.
Vous venez de créer votre premier plugin !

Travailler avec des applications (optionnel)

Si vous créez plusieurs plugins, vous pourrez utiliser la fonctionnalité de répertoire d'applications pour organiser vos composants et plugins, au lieu de dépendre uniquement des entrées qui se trouvent dans le menu supérieur.
Quand vous sauvegardez une nouvelle perspective, vous pouvez ajouter des étiquettes (balises) et ces étiquettes (balises) sont utilisées pour associer une perspective à un répertoire d'applications. Vous pouvez ouvrir les répertoires d'applications en cliquant sur Extensions → Apps.
Le répertoire d'applications fournit un autre moyen d'ouvrir votre perspective. Lorsque vous avez créé votre HelloWorldPerspective, vous avez entré la balise Accueil de page d'accueil. L'annuaire d'applications par défaut contient un répertoire unique appelé Accueil auquel vous avez associé votre perspective. C'est là où vous le trouverez quand vous ouvrirez le répertoire d'applications. Vous pouvez cliquer dessus pour exécuter la perspective maintenant.
Vous pouvez créer plusieurs répertoires et associer des perspectives à ces répertoires en fonction des besoins fonctionnels et verticaux. Par exemple, vous pourriez créer un répertoire de ressources humaines et ensuite associer tous les perspectives HR à ce répertoire pour mieux gérer les applications.
Vous pouvez créer un nouveau répertoire en cliquant sur :

2.6.2. API JavaScript (JS) API pour Extensions

L'extensibilité de Business Central est réalisée grâce a un API de JavaScript (JS) sous-jacent qui sera automatiquement chargé s'il est présent dans le dossier plugins de l'application web de Business Central (normalement : {INSTALL_DIR}/business-central.war/plugins/) ou il peut être chargé par des appels réguliers de JavaScript.
Cet API est divisé en ensembles multiples suivant sa fonctionnalité.
  • API Register Perspective : permet la création dynamique de perspectives. L'exemple ci-dessous crée un panneau par la méthode registerPerspective : 
    				
$registerPerspective({
    id: "Home",
    is_default: true,
    panel_type: "org.uberfire.client.workbench.panels.impl.MultiListWorkbenchPanelPresenter",
    view: {
        parts: [
            {
                place: "welcome",
                min_height: 100,
                parameters: {}
            }
        ],
        panels: [
            {
                width: 250,
                min_width: 200,
                position: "west",
                panel_type: "org.uberfire.client.workbench.panels.impl.MultiListWorkbenchPanelPresenter",
                parts: [
                    {
                        place: "YouTubeVideos",
                        parameters: {}
                    }
                ]
            },
            {
                position: "east",
                panel_type: "org.uberfire.client.workbench.panels.impl.MultiListWorkbenchPanelPresenter",
                parts: [
                    {
                        place: "TodoListScreen",
                        parameters: {}
                    }
                ]
            },
            {
                height: 400,
                position: "south",
                panel_type: "org.uberfire.client.workbench.panels.impl.MultiTabWorkbenchPanelPresenter",
                parts: [
                    {
                        place: "YouTubeScreen",
                        parameters: {}
                    }
                ]
            }
        ]
    }
});
  • API Editor : vous permet de créer des éditeurs de façon dynamique et de les associer à un type de fichier. L'exemple ci-dessous crée un exemple d'éditeur et l'associe au type de fichier filename. 
    
$registerEditor({
    "id": "sample editor",
    "type": "editor",
    "templateUrl": "editor.html",
    "resourceType": "org.uberfire.client.workbench.type.AnyResourceType",
    "on_concurrent_update":function(){
        alert('on_concurrent_update callback')
        $vfs_readAllString(document.getElementById('filename').innerHTML, function(a) {
            document.getElementById('editor').value= a;
        });
    },
    "on_startup": function (uri) {
        $vfs_readAllString(uri, function(a) {
            alert('sample on_startup callback')
        });
    },
    "on_open":function(uri){
        $vfs_readAllString(uri, function(a) {
            document.getElementById('editor').value=a;
        });
        document.getElementById('filename').innerHTML = uri;
    }
});
    En plus des méthodes on_startup et on_open vues dans les exemples précédents, l'API expose les événements de callback (rappels) suivants pour le cycle de vie de l'éditeur :
    • on_concurrent_update;
    • on_concurrent_delete;
    • on_concurrent_rename;
    • on_concurrent_copy;
    • on_rename;
    • on_delete;
    • on_copy;
    • on_update;
    • on_open;
    • on_close;
    • on_focus;
    • on_lost_focus;
    • on_may_close;
    • on_startup;
    • on_shutdown;
    Vous pouvez afficher cet éditeur via un modèle html : 
    <div id="sampleEditor">
    <p>Sample JS editor (generated by editor-sample.js)</p>
    <textarea id="editor"></textarea>

    <p>Current file:</p><span id="filename"></span>
    <button id="save" type="button" onclick="$vfs_write(document.getElementById('filename').innerHTML, document.getElementById('editor').value,  function(a) {});">Save</button>
    <br>

    <p>This button change the file content, and uberfire send a callback to the editor:</p>
    <button id="reset" type="button" onclick="$vfs_write(document.getElementById('filename').innerHTML, 'Something else',  function(a) {});">Reset File</button>
</div>
  • API PlaceManager : les méthodes de cet API vous permettent de demander à Business Central d'afficher un composant particulier associ. à une cible : $goToPlace("componentIdentifier");
  • API Register plugin : les méthodes de cet API vous permettent de créer des plugins dynamiques de façon dynamqiue (qui seront transformées dans les écrans de Business Central) via l'API JS. 
    $registerPlugin( {
    id: "my_angular_js",
    type: "angularjs",
    templateUrl: "angular.sample.html",
    title: function () {
        return "angular " + Math.floor(Math.random() * 10);
    },
    on_close: function () {
        alert("this is a pure JS alert!");
    }
});
    Le plugin se réfère au modèle angular.sample.html : 
    
<div ng-controller="TodoCtrl">
    <span>{{remaining()}} of {{todos.length}} remaining</span>
    [ <a href="" ng-click="archive()">archive</a> ]
    <ul class="unstyled">
        <li ng-repeat="todo in todos">
            <input type="checkbox" ng-model="todo.done">
            <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
    </ul>
    <form ng-submit="addTodo()">
        <input type="text" ng-model="todoText" size="30" placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
    </form>
    <form ng-submit="goto()">
        <input type="text" ng-model="placeText" size="30" placeholder="place to go">
        <input class="btn-primary" type="submit" value="goTo">
    </form>
</div>
    Un plugin peut être ajouté a un événement de Business Central par une série de rappels (callback) JavaScript :
    • on_concurrent_update;
    • on_concurrent_delete;
    • on_concurrent_rename;
    • on_concurrent_copy;
    • on_rename;
    • on_delete;
    • on_copy;
    • on_update;
    • on_open;
    • on_close;
    • on_focus;
    • on_lost_focus;
    • on_may_close;
    • on_startup;
    • on_shutdown;
  • API Register Splash Screen : utilise les méthodes de cette API pour créer des écrans de démarrage. 
    $registerSplashScreen({
    id: "home.splash",
    templateUrl: "home.splash.html",
    body_height: 325,
    title: function () {
        return "Cool Home Splash " + Math.floor(Math.random() * 10);
    },
    display_next_time: true,
    interception_points: ["Home"]
});
  • API Virtual File System (VFS) API : avec cette API, vous pouvez lire ou écrire un fichier sauvegardé dans un système de fichiers par un appel asynchrone. 
    $vfs_readAllString(uri,  function(a) {
  //callback logic
});
    
$vfs_write(uri,content,  function(a) {
  //callback logic
})