Prise en main de Wakanda

Par :
jmbiraghi
lun, 03/09/2012 - 17:52
Niveau :
Facile

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

Architecture

Wakanda est une plate-forme JavaScript unifiée, du serveur au client, permettant de créer des applications métiers taillées pour Internet. Wakanda est constitué de trois parties, dont seules les deux premières sont utilisées lors de l’exécution :

  • 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.

image pict699103.en.png

 

JavaScript Everywhere

Un seul langage est utilisé pour gérer la logique métier dans Wakanda : JavaScript.

 

  • Sur le serveur : créez des règles métiers puissantes, simples ou complexes. Wakanda fournit des API JavaScript permettant de gérer les données (recherche, création, suppression, …), les fichiers systèmes, les images, …
  • Sur le client : pour gérer l’interface et accéder aux données, via le WAF.
Configuration système

La plate-forme Wakanda requiert au minimum les contextes suivants :

Wakanda Server

  • Windows Vista 32 ou 64 bits, ou Windows Server 2008
  • Mac OS 10.6 (Snow Leopard)
  • Linux 64 bits (Wakanda Server a été testé avec Ubuntu 2.6)
  • RAM 2Go

Wakanda Studio

  • Windows Vista 32 ou 64 bits, ou Windows Server 2008
  • Mac OS 10.6 (Snow Leopard)
  • RAM 2Go

Navigateurs

  • Internet Explorer 9
  • Firefox 6
  • Google Chrome 11
  • Safari 5

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.

Lancement

Une fois que les applications sont installées, double-cliquez sur l’icône de Wakanda Studio. Il n’est pas nécessaire de lancer le serveur, le Studio s’en chargera généralement automatiquement. Il est également possible de lancer le serveur en cliquant le bouton « Start Server » de la barre d’outils.

Voici une installation typique sur Windows, avec Wakanda Server et Wakanda Studio dans le même dossier :

pict699108.en.png

 

Voici la même installation sur Mac OS 

pict699106.en.png

 

Fenêtre principale

La fenêtre principale contient l’écran d’accueil, car aucune solution n’est ouverte pour le moment (voir ci-dessous pour plus de détails sur ce qu’est une solution). L’écran d’accueil peut changer dans le temps par rapport à cette copie d’écran : 

pict699110.en.png

 

Il y a trois parties principales dans cette fenêtre :

  • Une barre d’outils. Dans la partie supérieure de la fenêtre, la barre d’outils contient les boutons de raccourcis des actions le plus souvent réalisées. Cette barre d’outils peut être personnalisée en utilisant le bouton « Display » : 

pict699112.en.png

  • L’Explorateur de solution (Solution Explorer). À gauche, l’onglet « Home » est disponible par défaut. Depuis cet onglet, il est possible de créer ou d’ouvrir une solution. Lorsqu’une solution est ouverte, un onglet supplémentaire est ajouté, dont le libellé est le nom de la solution. Cet onglet contient une liste des éléments (fichiers et dossiers) de la solution (cf. la solution « Contacts » dans les chapitres qui suivent).
  • La zone de travail (Workspace Area). Dans cette partie, vous pourrez voir :
    • L’écran d’accueil
    • Les fichiers ouverts depuis la solution. Chaque fichier, une fois ouvert, s’affiche dans son propre onglet et son propre éditeur : Code Editor (pour les fichiers .js, .css, etc.),  GUI Designer (pages html), ou Datastore Model Designer (pour la définition des classes)

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 ».

pict699114.en.png

  • 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 » : 

pict699117.en.png

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 : 

pict856486.en.png

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 : 

pict699121.en.png

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é) : 

pict699125.en.png

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 : 

pict699127.en.pngpict699129.en

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. 
pict699131.en.png

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 ! 
pict699133.en.png
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. 
pict699135.en.png
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? » 
pict699137.en.png

 

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 : 

pict699143.en.png

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 : 

pict699143.en.png

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) : 

pict699148.en.png

 

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é. 

pict699150.en.png

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 

pict699153.en.png

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

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. 
pict699157.en.png

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. 

pict699158.en.png

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. 

pict699159.en.png

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 

pict699161.en.png

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

pict699163.en.png

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 

pict699165.en.png

 

Modifier la grille

Lorsque la datastore class Employee a été déposée sur la Grid, tous ses attributs ont été ajoutés. Vous pouvez maintenant modifier le widget, par exemple :

  • Le retailler
  • Retirer l’attribut ID
  • Modifier les libellés

Sélectionnez la Grid et utilisez une de ses poignées pour la retailler et modifier sa hauteur et sa largeur (cela peut également être réalisé depuis l’onglet Styles).

À présent, activez l’onglet Properties, et dans la section Columns :

  • Supprimez la colonne « ID » en cliquant sur la croix rouge qui apparaît lorsque la souris survole cette définition

Déplacez la colonne « firstName » juste au dessus de « lastName », en faisant glisser l’icône 

pict680849.en.png pict699167.en.png

  • Double-cliquez sur le libellé « firstName » afin de le sélectionner et changez-le en « First Name ». Faites de même pour « Last Name », et enfin modifiez « salary » en « Salary ».

Votre Grid a maintenant l’apparence suivante : 

pict699169.en.png

Vous pouvez également retailler chaque colonne en positionnant le curseur au niveau de l’en-tête, sur la ligne séparant deux en-têtes. Vous pouvez aussi aller dans l’onglet Styles, puis sélectionner la partie de la Grid que vous souhaitez formater : en-tête, pied, corps, lignes paires, …

Vous avez probablement remarqué le dialogue pop-up qui s’affiche lorsque le curseur se trouve dans un des libellés. Ce dialogue permet de formater la colonne. Ici par exemple, nous souhaitons afficher le salaire en utilisant les séparateurs de milliers. Pour modifier ce format, il faut saisir # pour chaque chiffre à afficher, « 0 » pour un chiffre qui sera remplacé par un zéro (par exemple, "000" affichera "001" pour la valeur 1), une virgule pour indiquer le séparateur de milliers, et le point comme séparateur décimal. Voici notre format : 

pict699171.en.png

La colonne affichera « 123 456,00 » avec un navigateur Français, et « 123,456.00 avec un navigateur anglais.

Vous pouvez également souhaiter modifier les styles de la Grid. Sélectionnez la Grid puis allez dans l’onglet Styles, et modifiez les zones qui vous intéressent : en-tête (header), pied (footer), lignes paires/impaires (even / odd rows), etc. 

pict699174.en.png

Ici, par exemple, nous voulons que le salaire soit aligné à droite : 

pict699176.en.png

Vous pouvez également modifier le fond (image ou couleur), ainsi que n’importe quel style de texte comme  vous le voulez.

En quelques minutes, vous avez créé une page web simple, qui affiche les employés de la base de données.

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 

pict699198.en.png

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

pict699200.en.png

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.

 

Création de la page web

Dans la partie gauche du Solution Explorer, sélectionnez le projet lui-même, puis cliquez sur le bouton New Page et choisissez « For Desktop ». Nommez la page « companies ». Wakanda Studio crée la page web et l’ouvre dans un nouvel onglet du GUI Designer. Notez qu’à présent, l’onglet Model contient nos deux classes, Company et Employee : 

pict699202.en.png

Faites glisser une Grid et déposez-la dans la zone de dessin. Faites glisser la classe Company et déposez-la sur la Grid, comme vous l’avez fait lors de la création de la page des employés : modifiez la taille, changez les styles, adaptez l’interface à vos besoins.

Maintenant, lancez la page dans le navigateur et créez deux sociétés. Voici les nôtres : 

pict699204.en.png

 

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 : 

pict699206.en.png

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

pict699208.en.png

  • 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 : 

pict699210.en.png

  • 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

pict699212.en.png

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 

pict699214.en.pngpict699214.en.png

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

pict699216.en.png

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

pict699218.en.png

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 : 

pict699220.en.png

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  pict664416.en.png 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.

 pict699222.en.png

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éation de la page « Bind-Emp-Comp »

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 : 

pict699224.en.png

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é : 

pict699226.en.png

Voici à quoi ressemble notre page : 

pict699228.en.png

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 : 

pict699230.en.png

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 

pict699234.en.png

 

Ajouter du JavaScript au bouton

Le bouton sélectionné, ouvrez l’onglet Events puis cliquez le bouton  pict664416.en.png situé à côté de l’événement « On Click » : 

pict699236.en.png

La première fois que vous associez du code JavaScript à un événement (pour un widget ou pour la page elle-même), le Studio réalise automatiquement les actions suivantes :

  • Création d’un fichier JavaScript (avec l’extension « .js ») dont le nom est le même que celui de la page. Il place ce fichier dans le dossier « scripts » à l’intérieur du « WebFolder » : 

pict699238.en.png

  • Chaque fois que l’utilisateur sélectionne une ligne dans la Grid, l’entité correspondante (un employé ou une société) devient automatiquement l’entité courante dans la datasource. Par exemple, si vous cliquez sur la ligne « Claire Webb », la datasource employee est mise à jour de telle sorte que Claire Webb devienne l’employé couramment sélectionné et chargé.

À présent, copiez-collez ce code dans l’éditeur :

 

// Create the association

sources.employee.company.set( sources.company );

// Save the employee

sources.employee.save();

 

Votre fichier JavaScript devrait ressembler à ceci : 

pict699243.en.png

Sauvegardez le fichier, puis basculez sur l’onglet de la page web… 

pict699248.en.png

…et lancez-la : 

pict699250.en.png

 

Lier les employés et les sociétés

Une fois la page ouverte dans le navigateur, suivez ces étapes pour chaque employé :

  1. Cliquez sur la ligne d’un employé
  2. Cliquez sur la ligne de la société pour laquelle l’employé travaille
  3. Cliquez sur le bouton « Bind »

Voici des copies d’écran de nos trois employés après les avoir liés à une société : 

pict699252.en.png

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 : 

pict699254.en.png

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 :

pict699256.en.png

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 pict699430.en.png.  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

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 

pict699258.en.png

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 

pict699262.en.png

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 : 

pict699264.en.png

 

Modifier la Grid

Dans l’onglet Properties, placez la souris au-dessus de la colonne « Salary ». Quand le bouton pict699426.en.png apparaît, cliquez dessus pour supprimer la colonne : 

pict699266.en.png

Faites de même pour la colonne « Works For ».

Réduisez la largeur de la Grid, de telle sorte que seuls le nom et le prénom soient visibles.

 

Ajouter un Form affichant les détails d’un employé

Dans la partie inférieure gauche, cliquez sur le bouton Datasources et déployez la datasource employee : 

pict699269.en.png

Faites des Ctrl-clic (Windows) ou Commande-clic (Mac) sur les attributs lastName, firstName et salary, puis ajoutez-les par glisser-déposer dans une zone libre du Designer : 

pict699271.en.png

Le dialogue « Auto generated widgets » s’affiche, vous demandant quels types de widgets vous souhaitez utiliser pour ces attributs : 

pict699291.en.png

Choisissez (en haut à droite), de créer un « Form ». Puis, modifiez les libellés pour les adapter à vos besoins. Changez « lastName » en « Last Name » ou en « Nom » par exemple. Lorsque vous cliquez sur le bouton « Create », le GUI Designer crée un widget de type Container, qui englobe un widget Text Input pour chaque attribut : 

pict699295.en.png

N’hésitez pas à aller regarder la documentation des Widgets et du GUI Designer (http://doc.wakanda.org/Wakanda-Studio-Reference-Guide/GUI-Designer.200-306826.en.html).

Un widget de type Container contient d’autres widgets. Lorsque vous déplacez un Container, son contenu se déplace avec lui. Dans l’onglet Styles pour le Container et les widgets Text Input, vous pouvez modifier leur apparence. Ainsi, vous pouvez changer leur couleur de fond, leur image de fond, leur bordure, etc. Pour chaque attribut, vous pouvez également modifier son libellé (police, taille, couleur). Pour cette initiation, nous conservons les valeurs par défaut.

Nous allons également ajouter :

  • un widget Text qui affichera le nom de la société pour laquelle l’employé travaille
  • des boutons permettant de naviguer dans la liste

Avant de commencer, il nous faut agrandir le Container, en utilisant sa poignée basse : 

pict699297.en.png

 

Ajouter le nom de la société

Glissez puis déposez un widget Text dans le Container 

pict699300.en.png

Dans son onglet Properties, saisissez sa « Source » en écrivant employee.company.name (la saisie prédictive vous aidera à le faire rapidement) : 

pict699302.en.png

Augmentez la taille de la police, centrez le texte et modifiez la bordure : 

pict699304.en.png

 

Ajouter des boutons de navigation

Glissez-déposez un widget Button dans le container : 

pict699306.en.png

Liez la datasource employee à ce bouton, en la déposant dessus : 

pict699308.en.png

La propriété « Source » du bouton affiche maintenant employee : 

pict699310.en.png

Choisissez « Previous » dans le menu « Action », pour indiquer que vous souhaitez qu’un clic sur ce bouton passe à l’entité précédente dans la datasource (et donc, ici, visuellement, dans la Grid) : 

pict699312.en.png

Wakanda a défini « Previous » comme titre du bouton mais nous souhaitons utiliser des icônes pour nos boutons. Vous pouvez associer de une à quatre icones à vos boutons, correspondant aux différents états possibles : défaut, hover, active (le bouton est pressé) et disabled (inactif). Vous pouvez aussi utiliser la même image pour tous les états.

Ouvrez le dossier « Media » en cliquant sur le bouton Media et en choisissant Media Library 

pict699314.en.png

La bibliothèque de médias s’ouvre dans le Solution Explorer :

pict746430.en.png

Glissez une icône sur le widget Button 

pict699316.en.png

Une fois l’image déposée sur le bouton, une copie du fichier est ajoutée au dossier « images » du « WebFolder »..

Si le bouton ne s’est pas retaillé tout seul aux dimensions de l’image, changez sa taille dans l’onglet Styles. Les images utilisées dans cet exemple sont de taille 24x24.

Pour associer d’autres images aux différents états, choisissez l’état qui convient dans la partie supérieure de l’onglet Styles, puis glissez-déposez une image dans la zone « Background ». Par exemple, pour associer l’image du bouton à l’état « active », sélectionnez « active », puis glissez l’image « active » correspondante : 

SetButtonBgActive.png

Note : à l’heure où est écrit ce guide, le GUI Designer continue d’évoluer. Il se peut que la façon d’associer des images aux boutons soit un peu modifiée.

Vous pouvez également utiliser un widget Image button si vous préférez, qui offre plus de possibilités de formatage.

Nous allons maintenant créer deux autres boutons : un pour naviguer vers l’entité suivante dans la liste, un autre pour enregistrer les modifications apportées au Form que nous avons créé :

  • Sélectionnez, si ce n’est déjà fait, le bouton que vous venez de créer
  • Effectuez un copier-coller afin de le dupliquer
  • Modifiez la copie :
    • Fixer l’action à « Next »
    • Associez des images aux différents états
    • Faites de même pour le bouton « Save »

Sélectionnez les trois boutons et ajustez leur position en utilisant les outils d’alignement et de répartition. Voici notre page dans le GUI Designer 

pict699323.en.png

Un point essentiel à comprendre est que tous ces widgets (une Grid, trois Text Input, un Text et trois Button) sont liés à la même datasource employee. Pour constater ce que cela signifie, testez la page dans le navigateur et vérifiez que :

  • Quand vous cliquez sur une ligne de la Grid, le Form se met à jour automatiquement.
  • Si vous naviguez avec les boutons Previous/Next, la ligne sélectionnée dans la Grid est mise à jour.
  • Si vous double-cliquez sur une cellule de la Grid et modifiez sa valeur, le Text Input correspondant est automatiquement mis à jour, et les données sont automatiquement sauvegardées sur le serveur.
  • Si vous modifiez une valeur dans un des Text Input, la cellule correspondante dans la Grid est mise à jour. Mais dans ce cas, l’entité n’est pas automatiquement sauvegardée, vous devez cliquer sur le bouton « Save ».

 

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 : 
pict699325.en.png

 

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.

Une fois la page lancée dans le navigateur, voici le résultat : 
pict699327.en.png
 
Ajouter des employés automatiquement reliés à la société

Nous pouvons ajouter des employés dans la Grid listant les employés de la société sélectionnée. Cliquez sur le bouton plusbutton.png de la Grid des employés et saisissez un nouvel employé : 

pict747869.en.png

Lorsque votre saisie est terminée, le nouvel employé est associé à la société : 

pict747871.en.png

Ici, nous venons d’ajouter Lisa Rogers à la société SuperWak.

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

Ajouter un commentaire

Filtered HTML

Plain text

CAPTCHA
Cette question permet de vérifier que vous n'êtes pas un robot spammeur :-)
 W     W  ZZZZZ  ZZZZZ   AA    GGG  
W W Z Z A A G
W W W Z Z AAAA G GG
W W W Z Z A A G G
W W ZZZZZ ZZZZZ A A GGG