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.

- 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),
- LI permet de définir un noeud élément de l'arborescence (avec ou sans fils).

Attention : Dans cette solution, il est impératif de connaître le niveau de profondeur de l'arborescence au maquettage de la liste.

Soit la liste arborescente suivante à afficher :

  • A
  • B
    • B1
      • B11
    • B2
      • B21
      • B22
  • C
    • C1
    • C2



Sa traduction en balises UL / LI est la suivante :

<ul>
	<li>A</li>
	<li>B
		<ul>
			<li>B1
				<ul>
					<li>B11</li>
				</ul>
			</li>
			<li>B2
				<ul>
					<li>B21</li>
					<li>B22</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>C
		<ul>
			<li>C1</li>
			<li>C2</li>
		</ul>
	</li>
</ul>

 

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 /> et <adelia:e_list /> est répété autant de fois qu'il y a de lignes dans la liste.

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é.
Dans notre exemple, la liste contient les éléments suivants dans cet ordre :
A, B, B1, B11, B2, B21, B22, C, C1, C2.

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

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 :
- CND_RACINE : vaut *VRAI si l'élément courant est un noeud racine,
- 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),

Pour chaque niveau de profondeur de l'arborescence, il est nécessaire d'utiliser les balises Condition suivantes :
- 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,
- 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,
- 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,
- etc.

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.

Voici le code HTML de la balise Adélia LISTE :

<ul>
<adelia:b_list name="LST_1" />
<li>
<adelia:outputfield name="CHO_COL" type="ALPHA" length="15" refc="false"/>
<adelia:b_cond name="CND_RACINE" /><ul><adelia:e_cond />
<adelia:b_cond name="CND_FEUILLE" />
<jsp:expression>"\u003c/li\u003e"</jsp:expression>
<adelia:e_cond />
<adelia:b_cond name="CND_SUIVANT_NIV_MOINS_2" />
<jsp:expression>"\u003c/ul\u003e\u003c/li\u003e\u003c/ul\u003e\u003c/li\u003e"</jsp:expression>
<adelia:e_cond />
<adelia:b_cond name="CND_SUIVANT_NIV_MOINS_1" /></ul></li><adelia:e_cond />
<adelia:e_list />
</ul>

 

Voici le code L4G du chargement de la liste LST_1 :

cho_col = 'A'
cnd_racine = *faux
cnd_suivant_niv_moins_1 = *faux
cnd_suivant_niv_moins_2 = *faux
cnd_feuille = non cnd_racine
inserer_elt lst_1:liste
cho_col = 'B'
cnd_racine = *vrai
cnd_suivant_niv_moins_1 = *faux
cnd_suivant_niv_moins_2 = *faux
cnd_feuille = non cnd_racine
inserer_elt lst_1:liste
cho_col = 'B1'
cnd_racine = *vrai
cnd_suivant_niv_moins_1 = *faux
cnd_suivant_niv_moins_2 = *faux
cnd_feuille = non cnd_racine
inserer_elt lst_1:liste
cho_col = 'B11'
cnd_racine = *faux
cnd_suivant_niv_moins_1 = *vrai
cnd_suivant_niv_moins_2 = *faux
cnd_feuille = non cnd_racine
inserer_elt lst_1:liste
cho_col = 'B2'
cnd_racine = *vrai
cnd_suivant_niv_moins_1 = *faux
cnd_suivant_niv_moins_2 = *faux
cnd_feuille = non cnd_racine
inserer_elt lst_1:liste
cho_col = 'B21'
cnd_racine = *faux
cnd_suivant_niv_moins_1 = *faux
cnd_suivant_niv_moins_2 = *faux
cnd_feuille = non cnd_racine
inserer_elt lst_1:liste
cho_col = 'B22'
cnd_racine = *faux
cnd_suivant_niv_moins_1 = *faux
cnd_suivant_niv_moins_2 = *vrai
cnd_feuille = non cnd_racine
inserer_elt lst_1:liste
cho_col = 'C'
cnd_racine = *vrai
cnd_suivant_niv_moins_1 = *faux
cnd_suivant_niv_moins_2 = *faux
cnd_feuille = non cnd_racine
inserer_elt lst_1:liste
cho_col = 'C1'
cnd_racine = *faux
cnd_suivant_niv_moins_1 = *faux
cnd_suivant_niv_moins_2 = *faux
cnd_feuille = non cnd_racine
inserer_elt lst_1:liste
cho_col = 'C2'
cnd_racine = *faux
cnd_suivant_niv_moins_1 = *vrai
cnd_suivant_niv_moins_2 = *faux
cnd_feuille = non cnd_racine
inserer_elt lst_1:liste

 

Articles connexes