Quicklinks

On voit couramment dans les applications Web des menus de navigation qui aident les utilisateurs à se localiser et à naviguer dans l'application. Les tags <layout:crumbs> et <layout:crumb> peuvent être utilisés pour rendre un menu de navigation.

Tags : crumbs - crumb

Exemples

crumbs

Affiche un menu de navigation afin d'aider les utilisateurs à naviguer dans l'application.

Les éléments du menu sont affichés dans un panel. Ces éléments sont définis grâce au tag crumb.

Attributs

Nom de l'attribut Description
bundle Bundle global à utiliser pour récupérer les messages du menu de navigation.
crumbsName Nom d'un bean du contexte contenant une collection de Crumb.
crumbsProperty Propriété du bean contenant la collection de Crumb. Si cet attribut est spécifié et non null, les éléments de la collection seront affichés, ce qui permet de gérer des menus de navigation dynamiques.
separator Caractère à utiliser pour séparer les éléments du menu de navigation. Par défaut : |.
separatorClass Classe du style CSS à utiliser pour afficher le séparateur. Si cet attribut est spécifié, un tag <div> est inséré à la place du caractère du séparateur. Cela permet d'utiliser une image skinnable comme séparateur (l'image devrait être alors mise en background dans la classe du style).
separatorHeight Hauteur de l'élément <div>, si utilisé.
separatorWidth Largeur de l'élément <div>, si utilisé.
styleClass Classe du style CSS à utiliser pour afficher le panel du menu de navigation.
width -

crumb

Affiche un élément du menu de navigation pour aider les utilisateurs à naviguer dans l'application.

Attributs

Nom de l'attribut Description
bundle Bundle à utiliser pour récupérer le message associé à l'élément du menu de navigation.
key Clé du message à afficher.
link Lien à suivre lorsque l'utilisateur clique sur l'élément du menu de navigation.
target Fenêtre dans laquelle ouvrir le lien.

Exemples

				<%@ taglib uri="/WEB-INF/struts-layout.tld" prefix="layout" %>
				<html>
				<head>
				<layout:skin/>
				</head>
				<body>
					Web page Title: crumbs tag example
					<br><br>
					<layout:crumbs styleClass="CRUMBS" separator=">">
						<layout:crumb key="crumbs.home" link="/index.html"/>
						<layout:crumb key="crumbs.crumbs" link="/documentation.html"/>
						<layout:crumb key="crumbs.example"/>
					</layout:crumbs>
					<br>
					Web page content
					Web page content
					Web page content
					Web page content
				</body>
				</html>

Résultat

Notez que :

  • Le tag crumbs génère automatiquement les noms des classes des styles css à utiliser pour les ancres. Par exemple, si le tag crumbs est défini pour utiliser la classe de style CRUMB, le tag crumbs définira le style du premier lien comme utilisant la classe CRUMB1, le deuxième lien la classe CRUMB2, etc.
  • Il est possible de définir le séparateur entre les éléments du menu de navigation gràce l'attribut separator. Sa valeur par défaut est |.
  • Il est possible d'utiliser une image skinnable comme séparateur. Pour ce faire, créez une classe de style avec le séparateur comme background-image. Spécifiez cette classe de style comme étant le séparateur (attribut separatorClass) et spécifiez la taille de l'image (attributs separatorWidth et separatorHeight). Pour finir, indiquez les urls des différentes images dans les différents fichiers CSS.