Générer tree à partir BD

Version imprimable

30/03/2009, 11h54
pupkri64

Générer tree à partir BD

bonjour, je débute en Dojo. J'aimerai générer un arbre à partir de données contenues dans une base de données, seulement j'ai beaucoup de données à récupérer et j'aimerai le faire au fur et à mesure quand c'est nécessaire (je m'explique) :
par exemple j'ai différents produits de différentes catégories :
+ fruits
+ légumes
+ viandes

au début je ne récupère que les catégories de produits dans la base
et lorsque on clique sur fruits j'aimerais effectuer une requete dans la base qui permette de récupérer les éléments appartenant à cette catégorie et de les charger pour avoir le résultat suivant qui s'affiche :

- fruits
banane
pomme
poire

si vous pouviez m'aider : me mettre sur la voie, me conseiller des tutoriels...

je vous en remercie d'avance...

P.S : j'utilise le result type json (struts2) afin de générer mes données au format json
30/03/2009, 14h26
*.Har(d)t
Salut,

J'ai passé pas mal de temps sur les arbres Dojo ces derniers temps.
Je ne maîtrise pas encore le sujet, et j'ai encore pas mal de bugs, mais bon, voici quelques pistes:

L'arbre sous Dojo est en fait composé de 3 éléments :
1. Un composant Tree (dijit.Tree)
2. Un composant Model (qui sert à représenter ton modèle de données)
3. Un composant Store, c'est-à-dire tes données.
On commence par créer le Store.
C'est un jeu de données, pouvant provenir de différentes sources (flux Atom, base de données etc...)

Ensuite tu crées un élément Model qui va servir enfin à construire l'élément arbre.

Jette un coup d'oeil sur la doc :

http://docs.dojocampus.org/dijit/Tree

Pour faire du lazy loading, tu devras utiliser un type de Model qui gère ça.
Ce n'est pas sur l'arbre directement que tu pourras gérer ça, mais sur le Model.

En fait l'arbre est la représentation graphique du Model.

Je ne sais pas si ça t'aide beaucoup...

Tu peux aussi jeter un coup d'oeil sur mes derniers posts dans ce forum, il y en a quelques-uns sur les arbres, et j'ai été bien dépanné par emmanuel.remy.
Ce sera peut-être instructif...
30/03/2009, 20h18
pupkri64

merci, toutes les réponses sont bonnes à prendre, j'ai regardé ce dont tu me parlé j'ai un peu mieux compris le fonctionnement global d'un tree, mais je vois toujours pas comment je peux récupérer les données au fur et à mesure que l'on veut afficher, en fesant des appels vers la base en conséquence...Donc initialement je n'ai pas l'ensemble des données au format json... dans l'ensemble des exemples que j'ai vu toutes les données sont contenues dans le fichier Json utilisé...:?
31/03/2009, 01h14
emmanuel.remy

Citation:

Envoyé par pupkri64

merci, toutes les réponses sont bonnes à prendre, j'ai regardé ce dont tu me parlé j'ai un peu mieux compris le fonctionnement global d'un tree, mais je vois toujours pas comment je peux récupérer les données au fur et à mesure que l'on veut afficher, en fesant des appels vers la base en conséquence...Donc initialement je n'ai pas l'ensemble des données au format json... dans l'ensemble des exemples que j'ai vu toutes les données sont contenues dans le fichier Json utilisé...:?

Dans l'API des stores (dojo.data.api) tu as deux notions très importantes:

- isItemLoaded: function(/* anything */ something) { ... } qui indique à dojo si l'item a été loadé
et
- loadItem: function(/* object */ keywordArgs){... } qui permet à dojo de charger un item.

En bref la technique consiste à redéfinir isItemLoaded en renvoyant false quand tu as des données à obtenir de ta base, et ensuite à redéfinir loadItem pour charger le cas échéant tes données complémentaires.

Ces deux liens sont intéressants pour la démarche.

Regarde ici: http://archive.dojotoolkit.org/night..._LazyLoad.html

Et ici: http://archive.dojotoolkit.org/night...ReadStore.html

Et pour finir, un excellent article de synthèse: http://www.ibm.com/developerworks/we...l_johnson.html

A+,

ERE
07/04/2009, 17h08
pupkri64

Merci pour les liens, j'ai regardé l'ensemble et j'ai testé l'exemple sur le site d'ibm, et ça marche pour mon exemple, malheureusement je dois encore voir s'il n'y a pas moyen de l'optimiser un peu plus pour charger le moins possible...parce que là par exemple si j'ai :
+légumes
si je clique sur le + cela va m'afficher les enfants de légumes et me charger (effectuer les requêtes) ses petits fils...
alors que j'aimerais vraiment charger seulement le niveau qu'on affiche....
un autre problème, avec l'exemple d'ibm je n'arrive pas à récupérer le nom du nœud sélectionné quand je clique dessus, je m'y prends peut etre mal (je débute en dojo et en javascript tout court....). Merci d'avance pour vos réponses et merci pour les réponses déjà postés.
07/04/2009, 18h26
emmanuel.remy

Peux tu faire un zip et passer l'ensemble de ton code ?

J'y jetterai un oeil.

;)

ERE
07/04/2009, 21h12
pupkri64

1 pièce(s) jointe(s)

voici un zip avec le code de ibm dans lequel j'ai seulement modifier certains champs, il y a ma jsp et mon action qui permet de récupérer les données à afficher. On peut voir le format des données générées dans le fichier A.json (c'est un copier coller que j'ai fait, vu que tu ne peux pas tester le code). Si t'as besoin d'autres chose...Merci d'avance.
P.S : si tu veux tester l'exemple d'ibm c'est sur la page que tu m'as mise en lien.

Salut,

Suis en déplacement aujourd'hui mais je testerai ce soir.

Pour récupérer l'item sur lequel tu cliques, inscris cela dans ton tree:
Code:

1 2 3 4 5 6 7 //le store se nomme store <script type="dojo/method" event="onClick" args="item"> alert("libelle:" + store.getLabel(item) + ", value:" + store.getValue(item, "attribut")); console.log(item); </script>
ERE

ben en fait dans un fichier AccountTreeWidget je défini le store, le model et le tree, j'ai ajouté le onclick à mon tree et ça marche ça m'affiche bien l'identifiant de la sélection :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
  this.store = new ibmtreedemo.AccountTreeStore({
                data: data["treeStructure"],
cachedTransactionObjects: data["cachedTransactionObjects"],
                cachedchildren: data["cachedchildren"]});
            var myModel = new dijit.tree.ForestStoreModel({
                store: this.store,
                query:{type:'topLevelAccount'},
                rootId: "accts",
                rootLabel: 'data'});                
            this.tree = new dijit.Tree({
            		model: myModel,
            		onClick: function(item) {console.debug("item selection : "+myModel.store.getValue(item,"id"))
}           	         
            		});
            this.treeAttachPoint.appendChild(this.tree.domNode);
            this.tree.startup();

mais j'aimerais l'afficher dans un des contentpane de ma jsp :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<script>
 
var combobox=" ";
var _treeWidget;
function _loadTreeDemo()
{
    console.debug("_loadTreeDemo, Function Started");
    try{
        var treeWidgetAttach = document.getElementById("_treeWidgetAttach");
 
        var params = {
                      };
        try {
            _treeWidget = new ibmtreedemo.AccountTreeWidget(params, treeWidgetAttach);
 
        } catch (err) {
            alert(err);
            console.debug("_loadTreeDemo, error creating widget: " + err );
        }
    } catch(err){
        alert(err);
        console.debug("_loadTreeDemo, error rendering: " + err );
    }
    console.debug("_loadTreeDemo, Function Ended");
}
 
</script>     
 
</head>
 
<body class="soria">
 
 
 
 
<div id="main" dojoType="dijit.layout.BorderContainer" liveSplitters="false" design="sidebar">
 
 
  <div dojoType="dijit.layout.AccordionContainer" id="accordion" region="leading">
    <div dojoType="dijit.layout.AccordionPane" title="Bienvenue" selected="true">
 
    </div>
    <div dojoType="dijit.layout.AccordionPane" title="Tree">
 
                    <div class="tundra" id="_treeWidgetAttach">
 
                    </div>
 
 
    </div>
</div>
<div dojoType="dijit.layout.TabContainer" id="tabs" region="center">
 <div dojoType="dijit.layout.ContentPane" title="First" closable="true">
 
 
 
  </div>
</div>

Une idée?

Si je comprends bien ce que tu veux faire, dans ton ContentPane, crée une balise avec un id et utilise l'id pour l'afficher. Ou crée le noeud à la volée (document.createElement):
Code:

1 2 3 4 5 6 7 8 9 10 11 12 this.tree = new dijit.Tree({ model: myModel, onClick: function(item) { dojo.byId("resultat").innerHTML= myModel.store.getValue(item,"id"); } }); ... <span id="resultat></span>
ERE