Code source wiki de Afficher une liste sous forme arborescente à l'aide des balises UL / LI
Modifié par Julien EYMERY le 2015/06/30 10:28
Masquer les derniers auteurs
| author | version | line-number | content |
|---|---|---|---|
| |
1.1 | 1 | Il est possible, dans une page Adélia Web, d'afficher une liste en utilisant les balises UL / LI : Ces balises permettent d'afficher une liste d'éléments sous une forme arborescente en imbriquant ces balises. |
| 2 | |||
| 3 | - UL permet de définir un ensemble de frères se trouvant au même niveau dans l'arborescence (UL ne peut contenir que des LI), | ||
| 4 | - LI permet de définir un noeud élément de l'arborescence (avec ou sans fils). | ||
| 5 | |||
| 6 | Attention : Dans cette solution, il est impératif de connaître le niveau de profondeur de l'arborescence au maquettage de la liste. | ||
| 7 | |||
| 8 | Soit la liste arborescente suivante à afficher : | ||
| 9 | * A | ||
| 10 | * B** B1*** B11 | ||
| 11 | |||
| 12 | ** B2*** B21 | ||
| 13 | *** B22 | ||
| 14 | |||
| 15 | |||
| 16 | * C** C1 | ||
| 17 | ** C2 | ||
| 18 | |||
| 19 | |||
| 20 | |||
| 21 | |||
| 22 | Sa traduction en balises UL / LI est la suivante : | ||
| 23 | |||
| 24 | |||
| 25 | {{code language="none"}} | ||
| 26 | <ul> | ||
| 27 | <li>A</li> | ||
| 28 | <li>B | ||
| 29 | <ul> | ||
| 30 | <li>B1 | ||
| 31 | <ul> | ||
| 32 | <li>B11</li> | ||
| 33 | </ul> | ||
| 34 | </li> | ||
| 35 | <li>B2 | ||
| 36 | <ul> | ||
| 37 | <li>B21</li> | ||
| 38 | <li>B22</li> | ||
| 39 | </ul> | ||
| 40 | </li> | ||
| 41 | </ul> | ||
| 42 | </li> | ||
| 43 | <li>C | ||
| 44 | <ul> | ||
| 45 | <li>C1</li> | ||
| 46 | <li>C2</li> | ||
| 47 | </ul> | ||
| 48 | </li> | ||
| 49 | </ul> | ||
| 50 | {{/code}} | ||
| 51 | |||
| 52 | |||
| 53 | |||
| 54 | La production du code HTML décrit plus haut peut se faire à l'aide d'un objet Adélia Web LISTE : Cet objet permet d'afficher le contenu d'une liste avec un formatage défini par l'utilisateur. Le code HTML se trouvant entre les balises Adélia <[[adelia:b_list>>url:http://adeliab_list]] /> et <[[adelia:e_list>>url:http://adeliae_list]] /> est répété autant de fois qu'il y a de lignes dans la liste. | ||
| 55 | |||
| 56 | Comme la liste Adélia Web est parcourue séquentiellement, elle doit contenir l'ensemble des éléments de l'arborescence dans le même ordre qu'un parcours préfixe de l'arbre associé. | ||
| 57 | Dans notre exemple, la liste contient les éléments suivants dans cet ordre : | ||
| 58 | A, B, B1, B11, B2, B21, B22, C, C1, C2. | ||
| 59 | |||
| 60 | De plus, il est nécessaire d'avoir pour chaque élément de la liste l'information suivante : l'élément courant est-il un noeud feuille ou racine (c'est à dire noeud fils ou père). | ||
| 61 | |||
| 62 | Dans la liste Adélia Web, il est nécessaire de conditionner la génération des balises UL / LI : La seule manière de faire étant d'utiliser des balises Adélia Condition, on les utilisera de la manière suivante : | ||
| 63 | - CND_RACINE : vaut *VRAI si l'élément courant est un noeud racine, | ||
| 64 | - CND_FEUILLE : vaut *VRAI si l'élément courant est un noeud feuille (CND_FEUILLE est toujours la négation de CND_RACINE. Cette balise est nécessaire car une balise Adélia Condition ne peut pas être définie comme la négation d'une autre balise Condition - soit l'équivalent d'un "SINON" ou "ELSE" dans un langage de programmation), | ||
| 65 | |||
| 66 | Pour chaque niveau de profondeur de l'arborescence, il est nécessaire d'utiliser les balises Condition suivantes : | ||
| 67 | - CND_SUIVANT_NIV_MOINS_1 : vaut *VRAI si l'élément courant a un élément suivant dans la liste et que cet élément suivant est de profondeur N - 1 par rapport à l'élément courant OU si l'élément courant est le dernier de la liste et qu'il a une profondeur de 2, | ||
| 68 | - CND_SUIVANT_NIV_MOINS_2 : vaut *VRAI si l'élément courant a un élément suivant dans la liste et que cet élément suivant est de profondeur N - 2 par rapport à l'élément courant OU si l'élément courant est le dernier de la liste et qu'il a une profondeur de 3, | ||
| 69 | - CND_SUIVANT_NIV_MOINS_3 : vaut *VRAI si l'élément courant a un élément suivant dans la liste et que cet élément suivant est de profondeur N - 3 par rapport à l'élément courant OU si l'élément courant est le dernier de la liste et qu'il a une profondeur de 4, | ||
| 70 | - etc. | ||
| 71 | |||
| 72 | Note : Il faut définir autant de conditions CND_SUIVANT_NIV_MOINS_X que la profondeur de l'arborescence MOINS 1. Dans notre exemple, l'arbre a un niveau de profondeur de 3 (A, B et C étant de niveau de profondeur 1) donc on utilise 2 balises CND_SUIVANT_NIV_MOINS_1 et CND_SUIVANT_NIV_MOINS_2. | ||
| 73 | |||
| 74 | Voici le code HTML de la balise Adélia LISTE : | ||
| 75 | |||
| 76 | |||
| 77 | {{code language="xml" language="xml"}} | ||
| 78 | <ul> | ||
| 79 | <adelia:b_list name="LST_1" /> | ||
| 80 | <li> | ||
| 81 | <adelia:outputfield name="CHO_COL" type="ALPHA" length="15" refc="false"/> | ||
| 82 | <adelia:b_cond name="CND_RACINE" /><ul><adelia:e_cond /> | ||
| 83 | <adelia:b_cond name="CND_FEUILLE" /> | ||
| 84 | <jsp:expression>"\u003c/li\u003e"</jsp:expression> | ||
| 85 | <adelia:e_cond /> | ||
| 86 | <adelia:b_cond name="CND_SUIVANT_NIV_MOINS_2" /> | ||
| 87 | <jsp:expression>"\u003c/ul\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/li\u003e"</jsp:expression> | ||
| 88 | <adelia:e_cond /> | ||
| 89 | <adelia:b_cond name="CND_SUIVANT_NIV_MOINS_1" /></ul></li><adelia:e_cond /> | ||
| 90 | <adelia:e_list /> | ||
| 91 | </ul> | ||
| 92 | {{/code}} | ||
| 93 | |||
| 94 | |||
| 95 | |||
| 96 | Voici le code L4G du chargement de la liste LST_1 : | ||
| 97 | |||
| 98 | |||
| 99 | {{code language="none"}} | ||
| 100 | cho_col = 'A' | ||
| 101 | cnd_racine = *faux | ||
| 102 | cnd_suivant_niv_moins_1 = *faux | ||
| 103 | cnd_suivant_niv_moins_2 = *faux | ||
| 104 | cnd_feuille = non cnd_racine | ||
| 105 | inserer_elt lst_1:liste | ||
| 106 | cho_col = 'B' | ||
| 107 | cnd_racine = *vrai | ||
| 108 | cnd_suivant_niv_moins_1 = *faux | ||
| 109 | cnd_suivant_niv_moins_2 = *faux | ||
| 110 | cnd_feuille = non cnd_racine | ||
| 111 | inserer_elt lst_1:liste | ||
| 112 | cho_col = 'B1' | ||
| 113 | cnd_racine = *vrai | ||
| 114 | cnd_suivant_niv_moins_1 = *faux | ||
| 115 | cnd_suivant_niv_moins_2 = *faux | ||
| 116 | cnd_feuille = non cnd_racine | ||
| 117 | inserer_elt lst_1:liste | ||
| 118 | cho_col = 'B11' | ||
| 119 | cnd_racine = *faux | ||
| 120 | cnd_suivant_niv_moins_1 = *vrai | ||
| 121 | cnd_suivant_niv_moins_2 = *faux | ||
| 122 | cnd_feuille = non cnd_racine | ||
| 123 | inserer_elt lst_1:liste | ||
| 124 | cho_col = 'B2' | ||
| 125 | cnd_racine = *vrai | ||
| 126 | cnd_suivant_niv_moins_1 = *faux | ||
| 127 | cnd_suivant_niv_moins_2 = *faux | ||
| 128 | cnd_feuille = non cnd_racine | ||
| 129 | inserer_elt lst_1:liste | ||
| 130 | cho_col = 'B21' | ||
| 131 | cnd_racine = *faux | ||
| 132 | cnd_suivant_niv_moins_1 = *faux | ||
| 133 | cnd_suivant_niv_moins_2 = *faux | ||
| 134 | cnd_feuille = non cnd_racine | ||
| 135 | inserer_elt lst_1:liste | ||
| 136 | cho_col = 'B22' | ||
| 137 | cnd_racine = *faux | ||
| 138 | cnd_suivant_niv_moins_1 = *faux | ||
| 139 | cnd_suivant_niv_moins_2 = *vrai | ||
| 140 | cnd_feuille = non cnd_racine | ||
| 141 | inserer_elt lst_1:liste | ||
| 142 | cho_col = 'C' | ||
| 143 | cnd_racine = *vrai | ||
| 144 | cnd_suivant_niv_moins_1 = *faux | ||
| 145 | cnd_suivant_niv_moins_2 = *faux | ||
| 146 | cnd_feuille = non cnd_racine | ||
| 147 | inserer_elt lst_1:liste | ||
| 148 | cho_col = 'C1' | ||
| 149 | cnd_racine = *faux | ||
| 150 | cnd_suivant_niv_moins_1 = *faux | ||
| 151 | cnd_suivant_niv_moins_2 = *faux | ||
| 152 | cnd_feuille = non cnd_racine | ||
| 153 | inserer_elt lst_1:liste | ||
| 154 | cho_col = 'C2' | ||
| 155 | cnd_racine = *faux | ||
| 156 | cnd_suivant_niv_moins_1 = *vrai | ||
| 157 | cnd_suivant_niv_moins_2 = *faux | ||
| 158 | cnd_feuille = non cnd_racine | ||
| 159 | inserer_elt lst_1:liste | ||
| 160 | {{/code}} | ||
| 161 | |||
| 162 | |||
| 163 | ((( | ||
| 164 | == (% style="line-height: 1.5;" %)Articles connexes(%%) == | ||
| 165 | ))) | ||
| 166 | |||
| 167 | Les articles connexes apparaissent ici en fonction des étiquettes que vous avez sélectionnées. Cliquez pour modifier la macro et ajouter ou modifier des étiquettes. | ||
| 168 | |||
| 169 | {{liveData sort="doc.date:desc" source="liveTable" properties="doc.title,doc.date,doc.author" description="Recently updated" limit="5" filters="tag=web liste" sourceParameters="translationPrefix=platform.index."}}{{/liveData}} | ||
| 170 | |||
| 171 |