|
It is often the case that a web page links to itself. This can be frustrating for the user, especially if the page takes a long time to load. (This site is guilty of self-linking, but the pages usually load quite quickly.)
Instead of self-linking, a page can suppress links to itself, and at the same time "highlight" the link text in some way, to clearly indicate the current page. The user is able to painlessly answer the common question "Where am I on this site?", at the same time as they are prevented from following a link that is usually useless. Such a style clearly has more compassion for the user's experience.
There are two ways to avoid self-linking in a set of navigation links :
- repeat the set of navigation links across all pages, and manually alter each possible occurrence of self-linking
- define the set of navigation links in one place, and create some means of dynamically suppressing sellf-linking when generating each page
For the dynamic style, there is no standard way to define how such links are suppressed. An implementation might rely on a naming convention, for example, to identify self-linking items that should be altered in some manner.
Example
This example uses WEB4J's HighlightCurrentPage custom tag to dynamically avoid self-linking.
The following JSP snippet appears in a template, and displays a small navigation bar. At runtime, one link in the navigation bar is suppressed, and shows only plain text instead of the full link. In addition, it highlights the text (using a CSS class) to render it more obviously as the current page. This is implemented with <w:highlightCurrentPage>. The tag uses one of two policies to identify links that are to be altered :
- matching the current URI to the end of the link's HREF target (this the default style)
- matching the textual body of the link to a substring of the TTitle request parameter used by the WEB4J templating mechanism
<div class="menu-bar">
<w:highlightCurrentPage styleClass='highlight'>
<c:url value="/main/home/HomePageAction.do" var="homeURL"/>
<A href='${homeURL}'>Home</a>
<c:url value="/main/rsvp/RsvpShow.do" var="showRsvpURL"/>
<A href='${showRsvpURL}'>Rsvp</a>
<c:url value="/main/visit/VisitAction.do?Operation=List" var="visitEditURL"/>
<A HREF='${visitEditURL}'>Visits</A>
<c:url value="/main/rating/RatingAction.do?Operation=List" var="ratingEditURL"/>
<A HREF='${ratingEditURL}'>Ratings</A>
<c:url value="/all/logoff/LogoffAction.do" var="logoffURL"/>
<A href='${logoffURL}'>Log Off</a>
</w:highlightCurrentPage>
</div>
|