Histoire de code s'exécutant coté serveur

Ah cela faisait un petit bout temps que je ne suis pas venu écrire un petit morceau ici....

Et bien voilà je profite de l'occasion d'avoir élucider un petit truc hier à propos de l'exécution de code coté serveur. En effet pour ceux qui ont un peu bidouillé Wakanda, il est possible de faire tout un tas de script coté Client, via les événements associés au widget que l'on a soigneusement déposé sur la page. Mais voilà qu'un cas m'a ammené à réfléchir où allais je mettre le code, je l'expose brievement ici :

L'idée est de générer un ensemble de lignes dans une nouvelle classe de données à partir d'information stockées dans une autre classe de données. Et ceci sera déclanché par l'utilisateur en cliquant sur le bouton "Générer".
A partir de là deux options se présentent :

1. J'écris tous le code dans le "OnClick" du bouton
2. J'écris le code dans un fichier qui sera exécuté coté serveur

La première solution est facile, rapide, mais je pense qu'il y aura trop d'impact réseaux, en effet les données risquent de faire des "va et vient" entre le client et le serveur, et si plus tard nous souhaitons limiter l'exposition des données coté client, cela ne sera plus possible puisque nous devrions les manipuler du coté client....
Donc la logique pousserait plutôt dans le choix de la seconde methode....

Mais comment fait on ceci ?, alors voici un petit exemple ;-) ! :

Pour l'exemple je vais reprendre la solution démo que j'ai commencé précédament:

Paramétrage de l'interface

Édition du style de la grille de donnée:

Nous allons aligner notre grille de données ( dataGrid1) en haut en s'ajustant à 10 points de chaque bord (sauf celui du bas).

1. Cliquez sur l'édition de la page (pgArticle),
2. Cliquez sur le widget 
3. Dans la parie de droite sélectionnez "Style"

Et saisissez les valeurs suivantes :


Sauvegardez

Ajout d'un bouton

Ajoutez un bouton à l'interface :

Ouvrir la page de scirpt associé à l'évènement "OnClick"

A partir de cette endroit il est possible d'ajouter du code :

WAF.onAfterInit = function onAfterInit() {

// @region namespaceDeclaration
    var btnAdd = {};    // @button
// @endregion

// eventHandlers

    btnAdd.click = function btnAdd_click (event)
    {
        alert("J'ai cliqué sur le bouton ;-) !!!");
    };

// @region eventManager
    WAF.addListener("btnAdd", "click", btnAdd.click, "WAF");
// @endregion
};

Seule la partie colorée en orange a été ajoutée, le reste est auto-généré par l'édietur

Le test :

Exécuter la page en cliquant sur le bouton "Flèche verte/Page blanche"  et cliquez sur le bouton:

Ajout d'un module JS (code coté serveur)

 Un module JS consistera en un page de code dans laquelle nous allons exposer des fonctions qui seront (moyennement un petit paramétrage) accessible coté client.

Création d'un moduleJS

Dans cette exemple nous utiliserons le "Mode RPC" (Remote Procedure Call).
Ensuite une fenêtre avec un exemple de code apparait, peur ceux qui parlent l'anglais allez voir le lien proposé c'est encore la meilleur source d'information : par ici.

Pour les autres j'espère que je serais assez claire...

Structure d'une fonction appelable depuis le client

Si nous regardons de plus prêt le code, nous constatons que nous définissons une fonctions qui sera affecté à une variable du type : exports.<nomDeMaFonction>, voici l'exemple proposé en standard :

exports.helloWorld = function helloWorld () {
    return ('Hello world');
  
};

Notez au passage qu'aucun type n'est nécessaire pour les arguments de fonction (ici il n'y en pas de toute façon) ou pour les information de retour. Je pense que le mode string sera le plus simple.

Ajout de notre fonction AjouteArticle()

exports.ajouteArticle = function ajouteArticle(nomArticle, codeArticle) {

    try {
        // Log
        console.log("Début de la fonction(après le try)");
       
        var newArticle = ds.Article.createEntity();  // Création d'une nouvelle entité
           
       
        // Log
        console.log("Après la création de l'entité nouvelle ID=" + newArticle.getKey());   
        
       
        // Affectation des valeurs aux attributs
        newArticle.code = codeArticle;
        newArticle.nom = nomArticle;
       
        // Log
        console.log("Avant le Save");
       
        newArticle.save(); // Enregistrement de l'entité
       
        // Log
        console.log("Article '%s' ['%s'] a été ajouté ID=%d.", nomArticle, codeArticle, newArticle.getKey());
       
        return "Ok";
    }
    catch(ErrorEvt)
    {
        console.log("ERREUR lors de l'ajout de l'article '%s' ['%s'].", nomArticle, codeArticle);
        return "KO";
    };

};

Utilisation de la nouvelle fonction dans notre bouton

Ajout d'une référence à notre module

Retourner dans l'éditeur graphique de la page pgArticle, puis cliquez dans le fond blanc, ou sélectionnez l'objet "Document" (Partie Gauche > Outline > Document)

Dans la partie de droite (Properties), vous pouvez cliquer sur le petit (+) vers en face de "Module", ceci va nous permettre d'ajouter une référence à moduleJS dans notre page...

Dans notre cas vous choisirez le module pgArticleAction (correspond au nom du fichier que nous avons créé précédament), et vous pouvez par exemple donner le nom "vArticleAction" au namespace. C'est par cet identifiant que nous pourrons appeler notre fonction.

N'oubliez pas de sauvegarder après modification ;-) !

Modification du code OnClick du bouton

Maintenant éditons le code OnClick associé à notre bouton pour utiliser notre code

    btnAdd.click = function btnAdd_click (event)
    {
       
        alert(
            vArticleAction.ajouteArticle("Crêpe au caramel", "CREPECARA")
            );
    };

Puis save....

Test

Affichage de la console (dans la fenêtre de debug) :

Et voilà....

PS: pour voir le résultat dans la grille, il faut faire encore un "F5", cela doit pouvoir s'améliorer ;-) !!!