IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Ext JS / Sencha Discussion :

Construction d'un arbre à partir d'un fichier xml


Sujet :

Ext JS / Sencha

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 13
    Points : 5
    Points
    5
    Par défaut Construction d'un arbre à partir d'un fichier xml
    Et oui navrée mais j'ai encore un soucis avec ExtJs o_0'

    En fait j'aimerai construire un arbre ExtJs à partir d'un fichier fiche.xml comme celui-ci

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <?xml version="1.0" encoding="ISO-8859-1" ?> 
    <Fiche>
    <identite>
            <Node Champs="[sas_patient].nomjf" Type="car.gif">nom de jeune fille</Node>
            <Node Champs="[sas_patient].datenaiss" Type="dat.gif">date de naissance</Node>
    </identite>
    <SAS_antecedents>
    	<Node Champs="[SAS_INFORMATIONS].hypcol" Type="liste.gif">hypercholesterolemie</Node>
    	<Node Champs="[SAS_INFORMATIONS].diabete" Type="liste.gif">diabete</Node>
    </SAS_antecedents>
    </Fiche>
    Pour cela j'utilise le code .aspx ci-dessous

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
     
    <%@ Page Language="vb" AutoEventWireup="false"%>
     
    <html>
    <head>
      <title>Test Tree Xml</title>
     
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="/lib/_extjs3/resources/css/ext-all.css" />
        <style type="text/css">
        html, body {
            font:normal 12px georgia;
            margin:0;
            padding:0;
            border:0 none;
            overflow:hidden;
            height:100%;
        }
        </style>
        <!-- ENDCSS -->
     
     	<!-- LIBSJS -->
     	<script type="text/javascript" src="/lib/_extjs3/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/lib/_extjs3/ext-all.js"></script>
        <script type="text/javascript" src="/lib/extjs/src/data/HttpProxy.js"></script>
    	<!-- ENDLIBSJS -->
        <script type="text/javascript">
     
    Ext.onReady(function(){
     
    var TreeTest = function(){
     
        // shorthand
        var Tree = Ext.tree;  
     
     
        function createXmlTree(url, callback)
        {
                // yui-ext tree
                var tree = new Tree.TreePanel({
                    el:'tree',
                    animate:true, 
                    autoScroll:true,
                    loader: new Tree.TreeLoader(),
                    enableDD:true,
                    containerScroll: true,
                    dropConfig: {appendOnly:true}
                });
     
                // add a tree sorter in folder mode
                new Tree.TreeSorter(tree, {folderSort:true});
     
                // set the root node
                var root = new Tree.AsyncTreeNode({
                    text: 'Ext JS', 
                    draggable:false, // disable root node dragging
                    id: 'source'
                });
     
                //tree.setRootNode(root);
     
                // render the tree
                //tree.render();
     
                //root.expand(false, /*no anim*/ false);
     
                var p = new Ext.data.HttpProxy({url:url});
     
                p.on("loadexception", function(o, response, e)
                {
                    if (e) throw e;
                });
                p.load(null,
                {
                    read: function(response)
                    {
                            var doc = response.responseXML;
                            tree.setRootNode(treeNodeFromXml(doc.documentElement || doc));
                    }
                }, callback || tree.render, tree);
     
                return tree;
        }  
     
        /**
            Create a TreeNode from an XML node
        */
        function treeNodeFromXml(XmlEl) 
    	{
    	var t = '';
    	if (XmlEl.tagName == undefined ) {
    		return null;
    	}
     
        if (t.replace(/s/g,'').length == 0) {
    		//Text is nodeValue to text node, otherwise it's the tag name
    	    t = ((XmlEl.nodeType == 3) ? XmlEl.nodeValue.replace(/s/g,'') : XmlEl.tagName); 
    	}
     
        //No text, no node.
        if (t.replace(/s/g,'').length == 0) {
            return null;
        }
     
    	// Special case of an element containing no attributes and just one text node
    	var leafTextNode = ((XmlEl.attributes.length == 0) && (XmlEl.childNodes.length == 1) && (XmlEl.firstChild.nodeType == 3));  
    	if (leafTextNode){
    		return new Ext.tree.TreeNode({
    			tagName: XmlEl.tagName, 
    			text: XmlEl.firstChild.nodeValue
    		 });
    	}
     
     
        var result = new Ext.tree.TreeNode({
            text : t
        });
     
    //For Elements, process attributes and children
        if (XmlEl.nodeType == 1 && XmlEl.tagName!= 'Node') { //tagName = nom de noeud principal		
    		Ext.each(XmlEl.attributes, function(a) {
    		     var c = new Ext.tree.TreeNode({
    			 text: a.nodeName //nom noeuds principaux
    			});
    			if (a.nodeName == 'Champs' || a.nodeName == 'Type') {
    				return null;
    			}
    			c.appendChild(new Ext.tree.TreeNode({
    			text: a.nodeValue //nom feuille
    			}));
     
    			result.appendChild(c);
            });
     
     
    		if (!leafTextNode) {
    			Ext.each(XmlEl.childNodes, function(el) {
    //Only process Elements and TextNodes
                 if ((el.nodeType == 1) || (el.nodeType == 3)) {
                    var c = treeNodeFromXml(el);
                        if (c) {
                            result.appendChild(c);
                        }
                }
            });
    		}
        }
             return result;
     
    	}
     
     
     
        return {
            init : function(){                       
     
            var tree1 = new createXmlTree('fiche.xml', function(){
                this.render();
                this.getRootNode().expand();
            });            
            }
        };
    }();
    Ext.EventManager.onDocumentReady(TreeTest.init, TreeTest, true);  
    });
    </script>
    </head>
    <body>
    <div id="tree"></div>
    </body>
    </html>
    et j'obtiens ceci comme arbre :

    Fiche (racine)
    => Identité
    => => Node (feuille)
    => => Node (feuille)
    => SAS_antecedents
    => => Node (feuille)
    => => Node (feuille)

    Alors que je veux obtenir ceci :

    Fiche (racine)
    => Identité
    => => nom de jeune fille (feuille)
    => => date de naissance (feuille)
    => SAS_antecedents
    => => hypercholesterolemie (feuille)
    => => diabète (feuille)

    Avez-vous déjà eu ce genre de problème? Merci d'avance

  2. #2
    Membre averti
    Profil pro
    Inscrit en
    Février 2010
    Messages
    267
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 267
    Points : 330
    Points
    330
    Par défaut
    tu devrais faire un tree avec json ...
    c'est beacoup plus simple ...

  3. #3
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 13
    Points : 5
    Points
    5
    Par défaut
    Oui en Json se serait beaucoup plus simple c'est sur. Mais malheureusement je suis en stage et toutes les donnée que je dois mettre dans un arbres sont dans un fichier XML, donc je dois construire l'arbre à partir du fichier XML 0_o'

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Février 2010
    Messages
    267
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 267
    Points : 330
    Points
    330
    Par défaut
    ah ... les stages ...

    j espere que ca se passes et que ton tuteur n'est pas trop tyranique ...

    tu pourrais transformer ton xml en json ... tu fais un appel à un fichier php ou asp, qui traite ton fichier xml et qui renvoie un json.

  5. #5
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 13
    Points : 5
    Points
    5
    Par défaut
    ça se passe bien, mon tuteur est très sympa et très compréhensif à l'égard de ma nullité en programmation donc je n'ai pas à me plaindre

    Par contre pour ton idée aurais-tu un exemple s'il te plait?

  6. #6
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 13
    Points : 5
    Points
    5
    Par défaut
    J'ai trouvé des exemples de convertisseurs XML/Json, j'ai utilisé celui se trouvant sur ce : site

    Donc la conversion se passe bien malheureusement lorsque je crée l'arbre à partir de ces données cela me donne une branche pour chaque lettre au lieu d'une branche pour chaque mot je vous laisse imaginer la longueur de l'arbre . J'ai cherché d'où pouvait provenir cette erreur et je me suis rendu compte que lors de la conversion toutes les strings étaient entourées de guillemets.

    Voici l'avant/après

    Fichier XML :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    <?xml version="1.0" encoding="ISO-8859-1"  ?> 
    <Altadir text="Altadir" leaf="false">
    <children text="identite" leaf="false">
    	<children text="nom de jeune fille" leaf="true"></children>
    	<children text="date de naissance" leaf="true" ></children>
    </children>
    <children text="SAS_antecedents" leaf="false">
    	<children text="hypercholesterolemis" leaf="true" ></children>
    	<children text="diabete" leaf="true" ></children>
    </children>
    </Altadir>
    Fichier Json :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
     
    [{
      "Altadir": {
        "text": "Altadir",
        "leaf": "false",
        "children": [
          {
            "text": "identite",
            "leaf": "false",
            "children": [
              {
                "text": "nom de jeune fille",
                "leaf": "true"
              },
              {
                "text": "date de naissance",
                "leaf": "true"
              }
            ]
          },
          {
            "text": "SAS_antecedents",
            "leaf": "false",
            "children": [
              {
                "text": "hypercholesterolemis",
                "leaf": "true"
              },
              {
                "text": "diabete",
                "leaf": "true"
              }
            ]
          }
        ]
      }
    }]
    J'ai essayé avec des données Json toutes simples et je n'ai eu aucun souci, cela fonctionne.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
     
    var exemple = [{ "text": "Altadir", "leaf": false, "children": [ 
    		{ "text": "Identité", "leaf": false, "children": [ 
    			{ "text": "Nom de jeune fille", "leaf": true }, 
    			{ "text": "Prénom", "leaf": true },
    			{ "text": "date de Naissance", "leaf": true } 
    		] }, 
    		{ "text": "Sas_Antécédent", "leaf": false, "children": [
    			{ "text": "Hypercholestérolémie", "leaf": true },
    			{ "text": "diabète", "leaf": true } 
    		]}
    		]}];
    Donc je pense que ce sont juste les guillemets autours des true et des false qui font que cela ne fonctionne pas. Mais je ne vois pas ce qu'il faut changer dans le code pour y remédier. Si quelqu'un peut m'aider

    Voici mon code aspx :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
     
    <%@ Page Language="vb" AutoEventWireup="false"%>
     
    <html>
    <head>
      <title>Outil WebStat</title>
     
        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="/stat/lib/_extjs3/resources/css/ext-all.css" />
        <style type="text/css">
        html, body {
            font:normal 12px georgia;
            margin:0;
            padding:0;
            border:0 none;
            //overflow:hidden;
            height:100%;
        }
        </style>
        <!-- ENDCSS -->
     
     	<!-- LIBSJS -->
    	<script type="text/javascript" src="jkl-parsexml.js"></script>
    	<script type="text/javascript" src="jkl-dumper.js"></script>
     	<script type="text/javascript" src="/stat/lib/_extjs3/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/stat/lib/_extjs3/ext-all.js"></script>
    	<script type="text/javascript" src="/stat/lib/extjs/src/data/HttpProxy.js"></script>
    	<!-- ENDLIBSJS -->
        <script type="text/javascript">
     
     
    Ext.onReady(function(){
     
     
    	var arbreMoyensDeTransport = new Ext.tree.TreePanel({
        el: 'tree', //l’id de l’élément html qui va contenir l’arbre (div)
        animate: true, //animer l’arbre lors des expand / collapse
        enableDD: false, //Désactiver le Drag and drop
        loader: {}, //Le composant qui va charger l’arbre// Note: no dataurl, register a TreeLoader to make use of createNode()
        autoHeight: true, //la hauteur du conteneur de l'arbre s’adapte à la hauteur de l’arbre
        selModel: new Ext.tree.DefaultSelectionModel(), //Par défaut c’est le singleSelectionModel, définit la politique de sélection dans l’arbre  
        rootVisible: true //La racine est visible
    });
     
     
        var url = 'altadirbis.xml'; //nom du fichier Xml
        var xml = new JKL.ParseXML( url );
        xml.setOutputArrayAuto();
        var data = xml.parse();
        var dumper = new JKL.Dumper();
        var text = "[" + dumper.dump( data ) + "]";
        alert( text ); //permet de voir les données XMl transformées en données Json
     
     
     
    var root = new Ext.tree.AsyncTreeNode({
        draggable: false, // Désactiver le Drag and drop sur ce noeud
        id: '1', // identifiant du noeud,
        children: text //Objet JSON contenant la structure de l’arbre
     
    });
     
    	arbreMoyensDeTransport.setRootNode(root);
    	arbreMoyensDeTransport.render();
     
    });
     
    </script>
    </head>
    <body>
    <div id="tree"></div>
    </body>
    </html>
    et voici les deux fichiers js qui se trouvent en librairie dans mon code et qui permettent la conversion :

    jkl-parsexml.js
    jkl-dumper.js

    Merci d'avance pour votre aide en espérant avoir été la plus claire possible

  7. #7
    Membre averti
    Profil pro
    Inscrit en
    Février 2010
    Messages
    267
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Février 2010
    Messages : 267
    Points : 330
    Points
    330
    Par défaut
    n oublie pas de m'envoyer un donut ... !
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    $a ='[{
      "Altadir": {
        "text": "Altadir",
        "leaf": "false",
        "children": [
          {
            "text": "identite",
            "leaf": "false",
            "children": [
              {
                "text": "nom de jeune fille",
                "leaf": "true"
              },
              {
                "text": "date de naissance",
                "leaf": "true"
              }
            ]
          },
          {
            "text": "SAS_antecedents",
            "leaf": "false",
            "children": [
              {
                "text": "hypercholesterolemis",
                "leaf": "true"
              },
              {
                "text": "diabete",
                "leaf": "true"
              }
            ]
          }
        ]
      }
    }]
    ';
     
    $a = str_replace("\n","",$a);
    $a = str_replace('"true"',"true",$a);
    $a = str_replace('"false"',"false",$a);
    $a = str_replace('"Altadir": ',"",$a);
    $a = substr($a,2);
    $a = substr($a,0,-1);
    $a = str_replace('}}',"}]",$a);

  8. #8
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    13
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2010
    Messages : 13
    Points : 5
    Points
    5
    Par défaut
    Tiens pleins de donuts ici

    Merci pour ta réponse, mais je n'utilise pas php par contre j'ai réussi à régler mon problème en modifiant le code du fichier jkl-dumper.js. Maintenant ma conversion marche sans problème j'obtiens les données Json parfaitement comme je veux, mais l'arbre refuse toujours de se construire correctement o_0' donc je vais continuer à chercher là où ça plante.

    Encore merci

Discussions similaires

  1. Construction d'un arbre à partir d'une recherche séquentielle de caractères
    Par smith25 dans le forum Algorithmes et structures de données
    Réponses: 2
    Dernier message: 01/04/2015, 11h19
  2. Construction d'un arbre à partir d'un fichier xml
    Par lionel84 dans le forum XQUERY/SGBD
    Réponses: 4
    Dernier message: 01/09/2008, 17h41
  3. Construction d'un diagramme à partir d'un fichier
    Par acer_intel dans le forum Interfaces Graphiques en Java
    Réponses: 4
    Dernier message: 13/05/2008, 10h51
  4. Réponses: 1
    Dernier message: 07/05/2007, 15h21
  5. [DTD] Créé un DTD à partir d'un fichier XML
    Par Oberown dans le forum Valider
    Réponses: 5
    Dernier message: 14/12/2006, 11h55

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo