Découvrez comment programmer avec Wakanda en moins de temps qu’il n’en faut pour lire ce document. Nous allons vous montrer comment construire une application de type “Employés/Sociétés” en créant le modèle avec ses classes de données (datastore class), puis en ajoutant des données à notre application, et finalement nous afficherons ces données dans un navigateur, pour qu’un utilisateur puisse les manipuler. Des notions de base en JavaScript sont nécessaires pour suivre ce guide.

SOMMAIRE

Après un rapide survol de l’architecture, nous vous montrerons comment :
-    Créer la classe Employee,
-    Créer une page html permettant d’afficher une liste d‘employés,
-    Créer de nouveaux employés depuis le navigateur,
-    Créer une classe Company, avec sa page HTML,
-    Créer un attribut de type "relation" entre Employee et Company.
-    Importer des données dans le datastore, et
-    Améliorer les pages d’interface pour afficher les employés avec leurs sociétés et vice versa.

À la fin de ce guide, vous aurez appris les fondamentaux de Wakanda. À tout moment, vous trouverez également de nombreuses informations dans le Wakanda Doc Center et dans le Learning Center.

Note : Wakanda évolue très vite. Il se peut que certaines copies d’écran ne correspondent pas exactement aux interfaces que vous observerez. D’autant que Wakanda est distribué sur plusieurs canaux de diffusion , notamment le canal de production et le canal de développement.

WAKANDA : LA PLATE-FORME

• Wakanda Server : application sans interface (faceless) avec un serveur http tournant au dessus d’une base de données objet (le datastore). L’accès aux données s’effectue via des classes spécifiques (les datastore class) et JavaScript (Server-Side JavaScript, ou SSJS).
• Wakanda Application Framework (« WAF ») : framework applicatif contenant des API AJAX côté client (navigateur) et des API sur le serveur (accès aux fichiers, …). Dans le navigateur, WAF casse, littéralement, la barrière qui existe usuellement entre des données sur un serveur et  leur affichage dans des widgets d’interface sur le client.
• Wakanda Studio : application desktop comprenant un IDE (Integrated Development Environment) et des éditeurs WYSIWYG. Le Studio est un outil complet vous permettant de créer vos applications métier intuitivement.

INSTALLER ET LANCER WAKANDA

Installation

L’installation de Wakanda est extrêmement simple : après avoir téléchargé les produits, vous les placez où vous voulez sur votre disque. Généralement dans le dossier stockant les applications, mais cela n’est pas obligatoire.

Quand Wakanda Studio et Wakanda Server sont côte à côte, le studio peut lancer le serveur automatiquement. Si vous placez le studio et le serveur dans des endroits différents, le studio vous demandera de localiser le serveur à utiliser.

SOLUTIONS ET PROJETS

Dans Wakanda, vous créez un projet  pour regrouper les différents fichiers (.js, .html, .css, .jpg, etc.) utilisés par votre application. Wakanda peut regrouper plusieurs projets ensemble pour constituer une solution. L’architecture de base peut être schématisée ainsi :

Wakanda Studio

                Solution

                               Projet A

                               Projet B

                               . . .

Note : à ce jour Wakanda ne permet d’ouvrir qu’une solution à la fois

Chaque projet est constitué d’un certain nombre de fichiers rangés dans des répertoires : fichiers textes (HTML, JavaScript, logs, …) et fichiers binaires (gérés par Wakanda, comme le fichier de données, ou gérés par le développeur, comme les images du site web). Certains fichiers ont des extensions propriétaires mais sont en fait des fichiers texte, généralement XML (.waSettings ou .waModel par exemple).

Dans le cadre de ce guide, nous souhaitons afficher des données de type Employés/Sociétés sur un site web. Nous devons donc créer des classes correspondantes, des datastore class. Nous parlerons plus en détail de ces classes un peu plus loin. La description de ces classes est stockée dans le modèle, le datastore model.

Lors de l’exécution, lorsque nous accèderons aux données nous parlerons :

• D’entité (entity), qui représente une entrée dans la classe, comme un enregistrement dans une base de données classique. Par exemple, la société « 4D ».
• De collection d’entités (entity collection), qui est une liste d’entités (par exemple « toutes les sociétés françaises »).

NOTRE PREMIER PROJET

Pour créer un nouveau projet :

• Choisir « File » -> « New » -> « Project », ou cliquez sur le bouton « New Project… »
• Dans le dialogue qui s’ouvre (« New Project From Template »), choisir « Blank » et cliquer sur le bouton « Create ».

• Lorsque le dialogue standard de création de document de votre système s’ouvre, choisissez l’emplacement du stockage, donnez le nom « Contacts » au projet, puis cliquez sur le bouton « Create ».

Comme il n’y a pas encore de solution, Wakanda en crée une du même nom. Nous avons ainsi la solution « Contacts », qui contient le projet « Contacts ». Un nouvel onglet vient s’ajouter à côté de « Home » : 

Wakanda Studio crée tous les fichiers nécessaires au fonctionnement du projet. Nous reviendrons sur certains de ces fichiers plus tard.

CREER UNE DATASTORE CLASS

À propos des datastore class

Le but principal des datastore class est de vous permettre de vous concentrer sur la logique métier, les règles métier, de votre application :

Datastore class = Objet + Règles

Une datastore class contient un ou plusieurs attributs. Ainsi, la classe Employee aura les attributs lastName et firstName. Vous pouvez également créer des méthodes en JavaScript (les règles), associées à la classe, qui vous permettront d’initialiser, de valider, de calculer, etc.

Les datastore class sont au cœur de Wakanda. Avec Wakanda, vous passerez du temps à bien définir vos classes dans votre modèle. Une fois cette étape franchie, vous gagnerez énormément de temps lors de l’accès aux données et lors de la maintenance de votre code. Par exemple, modifier une règle métier ne nécessitera pas de changer les pages d’interface.

Création de la classe Employee

Pour commencer, nous devons tout d’abord ouvrir le modèle dans le Datastore Model Designer, outil permettant de créer graphiquement ses classes. Si besoin, déployez le projet « Contacts » pour afficher son contenu (le modèle - .fichier waModel – les réglages, le dossier WebFolder, …). Un double-clic sur Contacts.waModel l’ouvre dans le DataStore Model Designer, dans un nouvel onglet du Studio : 

Note : pour plus d’informations sur le Datastore Model Designer, voir  « Wakanda Studio Reference Guide » (en anglais) à cette adresse : http://doc.wakanda.org/Wakanda-Studio/help/Title/en/page751.html

Pour créer une nouvelle classe, cliquer sur le bouton « New Class » dans la barre d’outils : 

La nouvelle classe est créée puis affichée dans la fenêtre. Elle a un nom donné par défaut, « DataClass1 », et un nom de collection par défaut (correspondant au nom de la classe auquel le suffixe « Collection » est ajouté) : 

Quelques conseils :

• Le nom de la classe doit être mis au singulier.
• Le nom de la collection, qui représente une liste d’entités, doit avoir le suffixe « Collection », ou alors utiliser la forme plurielle du nom de la classe. Par exemple EmployeeCollection ou Employees. Pour une classe Person, le nom de la collection pourrait être PersonCollection ou People.

Note : Donner des noms au pluriel/singulier est important sur le plan sémantique, mais n’est absolument pas obligatoire dans Wakanda : vous pouvez nommer vos classes et collections comme bon vous semble, tant que le nom donné est accepté par JavaScript.

Choisissez « Employee » comme nom de classe (quand bien même ce document est rédigé en français, notre exemple est développé en anglais). Wakanda définit automatiquement le nom de la collection : 

Le nom de la classe peut également être saisi directement depuis la barre de titre de la classe, il suffit de double-cliquer dessus pour entrer en édition.

Par défaut, Wakanda crée automatiquement l’attribut ID pour chaque classe nouvellement créée. Ne vous attardez pas sur cet attribut pour le moment, mais ne le supprimez pas (nous en avons besoin pour les exemples, plus loin).

Nous pouvons maintenant ajouter trois attributs à cette classe. Le type de chaque attribut est indiqué dans le tableau suivant :

Attribut

Type

lastName

string

firstName

string

salary

number

 

Pour chaque élément listé dans le tableau ci-dessus, nous ajoutons un attribut à la classe, entrons son nom puis lui assignons un type.

Pour ajouter un attribut à une datastore class :

1. Cliquez sur le bouton « + », situé à droite de l’en-tête « Attributes »
2. Entrez « lastName » en remplacement du nom par défaut « attribute1 », puis appuyez sur la touche de tabulation. Cela vous amène à la colonne du type, qui affiche une liste avec autocomplétion
3. Cliquez « string » (type sélectionné par défaut), ou utilisez les flèches du clavier pour naviguer, puis utilisez la touche Retour (ou Enter)

Pour ajouter un autre attribut, appuyez à nouveau sur Retour. Le premier attribut est créé, et un nouvel attribut est ajouté juste en dessous. 

Répétez les étapes 1 à 4 pour créer les deux autres attributs. Pour le type « number », saisissez juste le début du nom du type (ici, « n »), puis éventuellement utilisez les flèches du clavier pour naviguer dans la liste de saisie prédictive, puis appuyez sur la touche Retour.

Lorsque le dernier attribut est créé (« salary », type « number »), un nouvel attribut est automatiquement ajouté à sa suite. Appuyez une fois encore sur Retour pour arrêter la création d’attributs pour cette classe.

Bravo, vous venez juste de créer votre première Datastore Class ! 

Note : si par erreur vous validez la saisie d’un attribut supplémentaire, cliquez dans un espace libre à côté de la classe, puis sélectionnez l’attribut (simple clic) et passez le curseur au dessus de lui, puis cliquez sur l’icône de suppression qui apparaît. 

Sauvegardez le modèle en cliquant sur le bouton « Save » dans la barre d’outils. Vous pouvez également fermer l’onglet et valider le dialogue « File has been modified, would you like to save it? » 

 

CREATION DE LA PAGE DES EMPLOYES

Après avoir créé notre classe Employee, nous pouvons utiliser le GUI Designer pour créer la page d’interface – une page HTML – qui contiendra des widgets Wakanda afin d’afficher les données.

Depuis le Solution Explorer, sectionnez votre projet, et cliquez le bouton New Page, puis sélectionnez « For desktop » dans le menu qui s’affiche : 

Note : si vous ne voyez pas ce bouton dans la barre d’outils, cliquez sur le bouton « Display » et son popup menu local, puis choisissez « New Page » dans le sous-menu « Toolbar Content ».

Entrez « employees » dans le dialogue qui s’ouvre alors. Inutile d’ajouter le suffixe « .html », Wakanda Studio le fait pour vous. Une fois le dialogue validé, le fichier est créé puis ouvert dans le GUI Designer, dans un nouvel onglet.

Note : Vous pouvez nommer vos pages comme bon vous semble, tant que le nom est valide une fois utilisé dans une URL

Le fichier « employees.html » créé est placé dans le dossier « WebFolder » du projet : 

Si vous faites un clic droit sur votre fichier et choisissez « open Enclosing Folder », le Studio affiche alors le document dans l’Explorateur (Windows) ou le Finder (Mac) : 

Aperçu du GUI Designer

Le GUI Designer permet d’éditer les pages d’interface, dans lesquelles vous pouvez ajouter de puissants widgets. Une des principales forces de Wakanda est que, grâce au WAF (Wakanda Application Framework), la barrière qui existe entre un navigateur et les données sur le serveur est supprimée.

Nous allons maintenant ajouter un widget de type grille (Grid), et le lier à la datasource Employee (nous définirons plus loin le concept de datasource).

Le GUI Designer contient quatre grandes parties :

1. En haut, une barre d’outils. À gauche, les boutons Design et Source permettent de basculer d’un mode à l’autre. Source affiche le code HTML dans l’éditeur de code, alors que Design vous permet de construire votre page graphiquement.
2. Sur la gauche, vous trouvez :
   1. Les widgets disponibles, que vous glissez-déposez dans la zone de dessin
   2. Les datastore class de votre modèle, et les datasources créées pour cette page
   3. Au milieu se trouve la zone de dessin dans laquelle vous allez créer votre interface
   4. Enfin, à droite vous trouvez des listes de propriétés, dont le contenu change en fonction de l’objet sélectionné. 

Pour ajouter un widget à la page :

• Sélectionnez le widget voulu,
• Placez-le dans la zone de dessin par glisser-déposer,
• Puis, éventuellement, associez-le à une datasource.

Vous pouvez modifier les propriétés du widget sélectionné, ajouter du JavaScript (par exemple, pour réagir au clic sur un bouton), et définir le look & feel de votre page.

Formatage de la page

Nous allons créer une page simple, affichant une liste d’employés, et contenant une petite mise en forme.

Glissez-déposez un widget Grid dans la zone de dessin 

• Glissez-déposez la datastore class Employee sur cette Grid. 

Par défaut, le GUI Designer charge le modèle de données de votre projet, de telle sorte que les classes définies soient disponibles en tant que datasources.

Une datasource est, comme son nom l’indique, une source de données. Une datasource est utilisée pour définir le contenu d’un widget d’interface. Pour remplir notre Grid avec une liste d’employés, nous avons besoin d‘une datasource liée à la datastore class Employee. Le GUI Designer crée la datasource liée à la datastore class lorsque vous glissez la classe depuis l’onglet Model. Par défaut, le nom de la datasource est le même que celui de la classe à laquelle elle est liée, mais la première lettre est automatiquement passée en minuscule (Employee -> employee, UserAccount -> userAccount, etc.).

Note : une datasource représente ici des données stockées sur le serveur, mais les datasources peuvent aussi être liées à des objets JavaScript « locaux » (déclarés uniquement sur le navigateur) : variables scalaires, objets, tableaux. Par exemple, vous pouvez afficher le contenu d’un tableau JavaScript dans une Grid.

Après avoir déposé la datastore class Employee sur la Grid :

• Pour chaque attribut de la classe, une colonne est ajoutée à la Grid.

• L’onglet Model bascule sur Datasources et une nouvelle datasource est créée, nommée employee.

Lorsque la Grid est sélectionnée, l’onglet Properties (sur la droite) est rempli avec ses propriétés. Nous voulons d’abord formater la page elle-même (nous nous occuperons de la Grid un peu plus tard). La zone des propriétés est constituée d’onglets : Properties, Events, Skins et Styles. Ils permettent d’ajouter un titre à la page, de modifier le thème, de modifier la couleur de fond, ajouter une image en fond de page, … Dans ce document nous allons voir comment modifier le titre de la page.

Cliquez sur une zone vide (afin de désélectionner la Grid). L’onglet Properties affiche maintenant les propriétés générales de la page. Modifiez le titre en « The Employees » (par défaut, le nom est celui de la page). Pour le moment, vous pouvez ignorer les autres propriétés. 

Dans l’onglet Skins, vous pouvez définir une classe (au sens CSS du terme), un thème, et une palette de couleur à utiliser pour votre page. Des valeurs par défaut ont été présélectionnées. N’hésitez pas à tester différents thèmes et couleurs pour voir comment la page et la Grid sont modifiées. 

Dans l’onglet Styles, vous pouvez modifier l’aspect de la page, changer l’image de fond, … Cliquez sur le bouton « Color » pour afficher le sélecteur de couleurs et choisir une couleur de fond qui vous convient. 

Pour afficher une image comme fond de page, vous pouvez simplement glisser déposer une image depuis votre disque vers le champ Image de la section Background : 

Dans cet exemple, après avoir déposé l’image, la page apparaît ainsi : 

Wakanda crée automatiquement un dossier « Images » (s’il n’existait pas déjà) dans le « WebFolder », et y recopie les images. Vous pouvez le constater depuis le Solution Explorer : 

CREATION DE LA CLASSE SOCIETE ET DE SA PAGE D’INTERFACE

Création de la classe

Revenez à présent à votre modèle. S’il n’est pas déjà ouvert, double-cliquez sur le fichier « Contacts.waModel », ou cliquez sur le bouton Model de la barre d’outils.

Pour créer la datastore class Company, suivez les mêmes étapes que celles utilisées pour créer la classe Employee, avec les différences suivantes :

• Saisissez « Company » dans le champ Class Name, et gardez « CompanyCollection » comme nom de collection 

• Créez un seul attribut : « name », de type « string » 

Enregistrez les modifications en cliquant le bouton Save de la barre d’outils. Puis, cliquez sur le bouton Reload Model, pour indiquer à Wakanda Server que le modèle a été modifié et qu’il doit le recharger.

CREATION DE LA RELATION ENTRE EMPLOYE ET SOCIETE

Nous allons maintenant créer un attribut de type Relation entre les classes Employee et Company. Jusqu’à présent, nous avons créé des attributs de type Storage. Un attribut Relation est une déclaration qui indique à Wakanda : « Lors de l’exécution, cet employé peut – si besoin – être chargé avec des informations sur la société pour laquelle il travaille ». Il y a deux types d’attributs Relation:

• N->1 : dans notre cas, cela signifie que « plusieurs employés travaillent pour une société »
• 1->N : dans notre cas, cela signifie que « une société a plusieurs employés »

Note : en fait, il est tout à fait possible qu’une société n’ait aucun employé, et qu’un employé ne travaille pour aucune société. Si vous êtes familiers de la pattern ActiveRecord, vous avez probablement déjà reconnu les classiques belongs_to et has_many.

Pour créer la relation N->1, suivez ces étapes :

• Ouvrez le modèle. S’il n’est pas déjà ouvert, cliquez le bouton Model de la barre d’outils
• Déplacez vos deux classes de telle sorte qu’elles soient côte à côte : 

• Ajoutez un nouvel attribut à la classe Employee, nommez le « company » 

• Dans la colonne du type de l’attribut, tapez la lettre « c ». Comme vous pouvez le constater, les noms de classe et de collection (Company et CompanyCollection) sont à présent disponibles en tant que types d’attributs : 

• Puisque nous voulons créer une relation vers une seule société, nous choisissons « Company », et validons ce choix en utilisant la touche Return (ou Enter) 

Vous pouvez noter que :

• Wakanda dessine une relation entre les deux classes
• Note : si vous ne voyez pas cette relation, utilisez le bouton Relations et choisissez See all dans son pop-up menu 

• L’attribut company a bien été créé dans la classe Employee, et Wakanda lui donne le type N->1 : 

• Wakanda a également créé, automatiquement, l’attribut relationnel inverse, nommé employeeCollection, qui part d’une société et liste tous ses employés : 

Note : les noms peuvent varier selon la façon dont vous avez nommé vos classes et vos collections

Nous renommons, dans Company, « employeeCollection » en « allEmployees » : un double-clic sur le libellé « employeeCollection » permet de l’éditer et de le modifier : 

Deux attributs de type Relation viennent d’être créés : N->1 et 1->N. En utilisant la notation à point de JavaScript, nous pouvons accéder à n’importe quel attribut de la classe Company depuis un Widget dont la datasource est reliée à Employee.

Par exemple, si vous souhaitez afficher le nom de la société dans la Grid de la page « employees.html » :

• Double-cliquez sur « employees.html » pour l’ouvrir (ou cliquez sur son onglet s’il est déjà ouvert)
• Sélectionnez la Grid
• Dans l’onglet Properties, zone Columns, cliquez le bouton   pour ajouter une colonne
• Entrez « Works For » comme libellé
• Entrez « company.name » comme attribut.

Tout au long de la saisie de « company.name », le menu local de saisie prédictive vous aide à choisir l’attribut. Sitôt que vous tapez « . » après « company », vous accédez aux attributs de la classe reliée.

LIER UN EMPLOYE A UNE SOCIETE AU RUNTIME

Dans l’exemple suivi jusqu’à présent :

• La classe Employee contient trois employés
• La classe Company contient deux sociétés

Nous voulons à présent lier, depuis un navigateur, chaque employé à une société pour arriver à ce résultat :

Employee

Company

John Doe

Acme

Alan Smith

SuperWak

Claire Web

Acme

Créez une nouvelle page en cliquant le bouton New page et en choisissant « For desktop » dans son menu local. Nommez la page « bind-emp-comp ». Le Studio crée la page et l’ouvre dans un nouvel onglet du GUI Designer : 

Suivez ces étapes :

• Donnez à la page un titre qui vous convient et si vous le souhaitez, modifiez le thème, la palette de couleur et le fond de la page
• Glissez et déposez une Grid dans la page
• Depuis l’onglet Model, glissez et déposez Employee sur la Grid
• Mettez la Griden forme :
  • Supprimez les attributs « ID » et « Salary »
  • Modifiez les libellés
  • Ajoutez une colonne dont le libellé est « Works For » et l’attribut est « company.name »
  • Retaillez la Grid afin que toutes les colonnes soient visibles
  • Créez une autre Grid, glissez et déposez (depuis l’onglet Model) la classe Company sur la Grid, mettez-la en forme, supprimez son attribut « ID ».
  • Disposez la Grid des employés à gauche et celle des sociétés à droite, en laissant la place pour un bouton entre les deux

Note : le GUI Designer contient tous les outils d’alignement dont vous avez besoin pour aligner à gauche/droite/haut/bas/milieu, pour distribuer les widgets horizontalement ou verticalement. Sélectionnez deux widgets ou plus (ctrl-clic sur Windows, commande-clic sur Mac) et utilisez le bouton approprié : 

Voici à quoi ressemble notre page : 

Dans cette capture d’écran, la Grid des employés est sélectionnée. Vous pouvez noter que la colonne « Works For » est bien liée à company.name. Si vous publiez cette page dans votre navigateur (ici, Chrome sur Mac OS), elle apparaîtra comme ceci : 

Dans la mesure où aucun employé n’est lié à une société, la colonne “Works For” est bien entendu vide. Depuis le GUI Designer, glissez puis déposez un widget « Button » entre les deux Grids : 

IMPORTER DES DONNEES (SERVER-SIDE JAVASCRIPT)

Nous allons à présent importer des employés et des sociétés. Il y a plusieurs façons d’importer des données dans un datastore Wakanda. Dans notre exemple, nous allons utiliser du code Server-Side JavaScript pour importer un fichier texte. Le document est délimité par des tabulations et contient les colonnes suivantes :

Nom de société -> Nom -> Prénom

Pour chaque ligne, nous commencerons par chercher la société dans le datastore . Si elle n’est pas trouvée, nous la créons. Cet exemple se veut simple : nous ne gérons pas le fait que des sociétés différentes peuvent avoir le même nom.

Tout d’abord, sélectionnez le projet « Contacts » dans le Solution Explorer, puis cliquez le bouton New JS : 

Un dialogue vous demande de nommer votre fichier. Inutile d’ajouter l’extension « .js », le Studio le fera. Nommez le fichier « import ». Wakanda Studio crée le fichier, le place dans le dossier du projet, puis l’ouvre dans un nouvel onglet :

Il y a quatre zones dans l’éditeur de code (deux sont cachées par défaut)

• Une barre d’outils permettant d’exécuter le script, de déployer/contracter des blocs de code, de trouver du texte, …
• L’éditeur de code lui-même
• Sur la droite, vous pouvez afficher le squelette (outline) du code en cliquant sur le bouton .  Cela affiche la structure du code : fonctions, variables, etc. Un clic sur un élément de l’outline sélectionne l’élément dans l’éditeur.

• Quand vous exécutez le fichier, une zone de sortie (output) est ajoutée dans la partie inférieure de la fenêtre, affichant le résultat de l’exécution.

Note : tous les scripts ne peuvent pas être lancés directement depuis l’éditeur de code. Typiquement, un script associé à une page html ne peut pas être exécuté sur le serveur. Si vous cliquez sur le bouton Run pour un .js associé à une page html, le Studio ouvre la page dans le navigateur.

Voici le code d’importation. Il évite d’importer des doublons : si vous lancez le script plusieurs fois de suite, les données ne seront pas dupliquées.

Copiez-collez le code suivant. Juste après, nous expliquons son déroulement plus en détail.

Notes :

• La solution complète associée à ce document contient déjà les données, ainsi que le fichier à importer et le fichier « import.js ».
• Si vous suivez ce guide pas à pas, vous pouvez également télécharger le fichier à importer (Import-folder-to-paste-in-the-project.zip). Une fois décompacté, placez le dossier « Import » au premier niveau de votre projet (vous devez avoir : \Contacts\Contacts\Import\emps_comps.txt)

// A simple log for the output
var log = "Count employees-before: " + ds.Employee.length + ", Count companies-before: " + ds.Company.length;

// Main function
function doImportEmpsAndComps () {
/* The doc. to import is in the solution folder, in a subfolder
named "Import". We load the full document in one shot (loadText) 
and split it in an array (one line = one element).
*/
var lines = loadText( ds.getModelFolder().path + "Import/emps_comps.txt" ).split("\n");
/* Declare the variable that will hold the columns of each line.
We know the columns will be:
columns[0] Name of the company
columns[1] Last name of the employee
columns[2] First name
columns[3] Salary
*/
var columns = [];
// Now, loop for each entry in the array 
lines.forEach( function(oneLine) {
// Get the columns for current line 
columns = oneLine.split("\t");

// Get the company. Create it if needed.
var theComp = ds.Company.find("name = :1", columns[0]);
if(theComp == null) { // Not found => create it
theComp = new ds.Company({
name : columns[0] 
});
// Save it 
theComp.save();
} 
// Get the employee. Create it if needed. 
var theEmp = ds.Employee.find("lastName = :1 and firstName = :2", columns[1], columns[2]);
if(theEmp == null) {
theEmp = new ds.Employee( {
lastName : columns[1],
firstName : columns[2],
salary : columns[3],
company : theComp // This is how you bind two entities with Wakanda!
}); 
} else {
theEmp.salary = columns[3],
theEmp.company = theComp;
}
theEmp.save();
});
}
// Call the function 
doImportEmpsAndComps ();

// Log result
log += " / Count employees-after: " + ds.Employee.length + ", Count companies-after: " + ds.Company.length;

Voici quelques explications sur ce code. Toutes les API utilisées sont documentées sur http://doc.wakanda.org.

• Le code qui analyse le fichier attend un document encodé en UTF-8, utilisant un LineFeed (LF) comme fin de ligne. Pas CR ou CRLF, juste LF. Si vous modifiez le document à importer, ou si vous utilisez un document différent, prenez garde à ce que vos lignes se terminent bien par LF, ou modifiez le code pour qu’il utilise CR ou CRLF.
• loadText (http://doc.wakanda.org/Global-Application/Application/loadText.301-655198.en.html) est une API de haut niveau, qui remplit une variable chaine avec le contenu d’un document
• Pour Company et Employee, nous utilisons l’API find() et sa possibilité de substituer des critères de recherche. En pratique, au lieu d’écrire une ligne qui concatène columns[0] et columns[1], nous utilisons " :1" et " :2", ce qui indique à Wakanda Server d’‘utiliser les premier et second paramètres passés après la chaine de recherche. De cette façon, nous n’avons pas à nous préoccuper d’éventuels espaces dans les noms. Sans cette substitution, nous aurions dû utiliser un mélange de guillemets doubles et simples :

ds.company.find("name = '" + columns[0] + "'")

Note : cette technique est particulièrement intéressante lorsque vous manipulez des dates par exemple

• Dans la solution exemple accompagnant ce guide, nous utilisons l’API loadText()(http://doc.wakanda.org/Global-Application/Application/loadText.301-655198.en.html) . Si vous travaillez avec un fichier vraiment très lourd, vous pourriez avoir besoin d’utiliser plutôt un TextStream, (http://doc.wakanda.org/Global-Application/Application/TextStream.301-686651.en.html) pour éviter d’éventuels problèmes de mémoire.
• Si vous souhaitez importer beaucoup de données d’un coup, vous pouvez créer un index sur l’attribut lastName de Employee et sur l’attribut name de Company. La recherche sera alors bien plus rapide. Pour fixer un index dans le Datastore Model Designer, sélectionnez l’attribut et choisissez l’index « auto » dans ses propriétés.

Note : dans notre exemple, nous importons les sociétés par leur nom ce qui n’est pas la meilleure façon de faire puisque plusieurs sociétés peuvent avoir le même nom. La plupart du temps, vos données viendront d’une base de données avec généralement des clefs primaires et secondaires. Wakanda sait parfaitement importer ce genre de données, mais cela dépasse le cadre d’un guide de prise en main. Rapidement, disons que vous pouvez mettre dans l’attribut company de Employee l’ID de la société. Par exemple, si la société, dans la base de donnée originale, a l’ID 42, vous pourriez écrire theEmp.company = 42 afin d’associer l’employé courant à cette société.

Vous avez collé le code ci-dessus, vous pouvez cliquer le bouton Run : 

Si le serveur n’était pas encore lancé, il est démarré. Une fois le script exécuté, notre propre log s’affiche dans l’output : 

Note : notre fichier à importer contient 1 000 employés et 62 sociétés. Nous avons un total de 1 003 employés et 64 sociétés parce que nous avons créé des données dans les chapitres précédents.

ENRICHIR LA PAGE DES EMPLOYES

Dans le chapitre « Création de la Page des Employés », nous avons créé une page très simple, affichant une liste d’employés. Nous allons maintenant améliorer cette page :

• Affichage des seuls noms
• Création d’une zone affichant toute l’information
• Ajout de boutons de navigation

Dans le Solution Explorer, déployez le « WebFolder » et double-cliquez sur le fichier « employees.html ». Une fois ouvert dans le GUI Designer, sélectionnez la Grid créée précédemment : 

CREATION D’UNE PAGE LISTANT SOCIETES ET EMPLOYES

Pour notre dernière page, nous voulons afficher une liste de sociétés avec leurs employés. Chaque fois que l’utilisateur cliquera sur une ligne des sociétés, nous voulons que la liste des employés soit mise à jour.

Créez une nouvelle page, nommée « comps-emps ». Dans cette page :

1. Ajoutez une Grid
2. Reliez-la à la dataclass company, comme nous l’avons fait plusieurs fois depuis le début de ce guide.
3. Retirez la colonne « ID » de la Grid

À présent, ajoutez une autre Grid. Dans cette Grid, nous voulons afficher la liste des employés de la société couramment sélectionnée. Nous ne devons pas lier la nouvelle Grid à la classe Employee, car cela créerait une datasource liée à tous les employés du datastore. À la place :

• Déployez la datasource company
• Glissez puis l’attribut Relation allEmployees et déposez-le dans la nouvelle Grid : 

 

Maintenant que la Grid est liée à company.allEmployees, nous la formatons comme vu précédemment, par exemple, en retirant l’attribut « ID », en modifiant les libellés, etc. Nous terminons en alignant la seconde Grid à côté de la première.

ET MAINTENANT ?

Dans ce guide de prise en main, vous avez découvert plusieurs fonctionnalités fondamentales de Wakanda. Vous pouvez en apprendre plus sur Wakanda, les datastore class, le Model Driven Development, la sécurité d’accès, le Wakanda Application Framework… au travers d’autres exemples et de la documentation.

La documentation : http://doc.wakanda.org/

Le Learning Center, avec notes techniques et vidéos : http://www.wakanda.org/learning-center