lundi 10 décembre 2012

Comment ajouter des données à une classe de données "manuellement"

Dans ce poste je vais exposer un petit point qui m'a pris un peu de temps avant de le résoudre complètement :

Comment ajouter une entité (cad une ligne de données) dans une Classe de données (ie: une table) de manière programmée (cad sans utiliser les fonctions helper du widget Datagrid). De plus dans l'exemple ci dessous, il y a une notion de lien (utilisation de référence sur d'autre classe de données).

Le modèle de données

Voici rapidement le modèle de données utilisée :

L'idée de ce modèle (tiré de ma première vrai application en Wakanda) est de générée une commande type (qui est unique dans le système), et une commande type est un ensemble de ligne liant un membre (classe de données "Membre") et un article (classe de données "Article"). Cette liason sera réalisée dans la classe de donnés "CmdType"

La classe de données  "CmdType" contient donc un référence aux classe "Membre" et "Article"

L'interface Graphique

Voici maintenant l'écran qui permet d'éditer le contenue de la Classe de données "CmdType" :


Cette écran est divisé en 3 parties :
  • La partie du haut qui est un DataGrid connecté à une source de données correspondant à la classe de données "CmdType"
  • La partie bas gauche qui permet de choisir un membre dans la liste des membre disponible via un DataGrid connecté à une source de données correspondant à la classe de données "Membre", puis un article dans la liste déroulante (connecté à la source de données correspondant à la classe de données "Article"), et enfin un slider qui permet de définir le nombre d'unités désiré. Le bouton ajouter contiendra le code qui créera la nouvelle entité de la classe "CmdType".
  • La partie bas droite qui permet de générer une commande en fonction d'une date de livraison.

Le code du bouton ajouté

Mon problème a été de choisir les bonne fonction entre addNewEntity(), newEntity() etc...

Je suis arrivé au code suivant :

btnAddArticle.click = function btnAddArticle_click (event)
{
// Ajout d'une ligne dans la commande type

var tMemberID = sources.membreList.getCurrentElement();
var tArticleID = sources.articleList.getCurrentElement();

var newCmdLine = ds.CmdType.newEntity();

if (newCmdLine == null) alert("newCmdLine is Null !!!");

newCmdLine.qte.setValue($("slNbUnite").getValue());
newCmdLine.membreID.setValue(tMemberID);
newCmdLine.articleID.setValue(tArticleID);


newCmdLine.save({
          onSuccess:function(event)
          {
               sources.cmdType.addEntity(newCmdLine);
               sources.cmdType.serverRefresh();
          },
          onError:function(event)
          {
               alert("Erreur !");
         }
     });

};



Les deux premières lignes permettent la récupération des références sur le membre sélectionné et l'article.
Ensuite nous devons créer une nouvelle entité ds.CmdType.newEntity(), lors de la première tentative j'ai voulu utiliser cette version source.cmdType.addNewEntity(), le propblème c'est que je ne pouvais pas modifier les informations concenrant les références sur l'article et le membre.

Les trois lignes suivantes hormis le if, permettent de modifier les attributs de l'entité nouvellement créée.
Ensuite vient la fonction .save() qui permet donc de sauvegarder l'entitée nouvellement créée.

Si nous nous arrêtons là, cela fonctionne correctement, mais il est nécessaire de faire un <F5> dans le browser pour que la grille de données soit rafraîchie avec les nouvelles données.

Pour faire le rafraichissement, j'ai bien tenté d'utiliser la commande .sync(), mais cette dernière ne fonctionne que sur des données locales et dans le code ici nous avons ajouté notre entité sur le serveur (ceci est du au faite de l'utilisation de ds à la place de sources). Donc la première chose à faire est d'ajouter notre nouvelle entité à la collection en utilisant la fonction .addEntity(<nouvelle entité>) puis de demander un rafraichissement de la fenêtre utilisateur via le commande .serverRefresh(). Ces deux fonctions s'appliquent sur la source "locale" (sources).




Aucun commentaire:

Enregistrer un commentaire