Creating Richer Hyperlinks with JSP Custom Tags

by Amit Goel
04/30/2003

The linking mechanism currently supported by HTML (<a href="destination.html">) allows us to create hyperlinks that can have only one destination. To add context-related destinations to a hyperlink, we either need to supply them as links within parentheses (e.g., "download PDF version," "download Word version," etc.), or make the reader scroll to a different part of the page (e.g., a "Resources" section), sometimes causing the reader to lose context. If we could somehow embed these additional destinations within a hyperlink, we could greatly enhance the usefulness of our pages. These embedded links could point to additional resources, allowing us to pack more content into the same amount of screen space while keeping related information close at hand.

To embed these additional hyperlinks within a main hyperlink, one would most likely think of structuring HTML elements in the following way:

<a href="main_destination.html"
    href1="embedded_destination1.html" text1="embedded hypertext1"
    href2="embedded_destination2.html" text2="embedded hypertext2"
    href3="embedded_destination3.html" text3="embedded hypertext3"
    href4="embedded_destination4.html" text4="embedded hypertext4">main hypertext
</a>

or better still, with nested anchor tags, as follows:

<a href="main_destination.html">main hypertext
    <a href="embedded_destination1.html">embedded hypertext1</a>
    <a href="embedded_destination2.html">embedded hypertext2</a>
    <a href="embedded_destination3.html">embedded hypertext3</a>
    <a href="embedded_destination4.html">embedded hypertext4</a>
</a>

Unfortunately, structuring elements in this way does not help us achieve the desired results with the current HTML specification. The first sequence will conveniently ignore the additional hyperlinks and the second will lay out the hyperlinks in a series.

It is well known that the key to getting users to accept new functionality is good usability. Therefore, any extended linking solution should not only provide an easy way of constructing the links, but should also use a navigation metaphor so that the average web user does not require training in order to understand and use it. One useful metaphor could be a drop-down icon (like ) placed next to the main hypertext. Clicking on this icon displays the embedded hyperlinks in a menu, as illustrated in Figure 1 below.

Figure 1. Illustrating a simple multi-destination hyperlink

This is essentially the familiar concept of a dynamic menu. But menus are generally constructed separately from the content of the HTML document. Since every menu could take up a few lines of HTML code, writing menu-generation code for every multi-destination hyperlink appearing within the content of the page is impractical. What is required is a simple, declarative, tag-like syntax that is intuitive and easy to write, just like the two hypothetical constructs described above. This would allow the developer to focus on generating content instead of worrying about the programming.

Before I describe my solution, I must mention that efforts are already underway to enable such sophisticated linking models for the Web. XML and its accompanying linking standards, such as XLink and XPointer — both currently in W3C Recommendation status — promise support for richer hyperlinking. But these advanced linking standards are still not completely supported by the popular browsers (Internet Explorer currently does not support XLink). Besides, XLink is quite complex, and can be overkill for the average web site.

Related Reading JavaServer Pages By Hans Bergsten

This article presents a simple approach to achieving multi-destination hyperlinks using a combination of JavaServer Pages (JSP) custom tags and XML.

JSP Tags

JSP tags provide a powerful mechanism for encapsulating reusable functionality in JSP pages, and a great way for writing more readable and maintainable pages. They give the Java programmer the ability to write Java objects that will be executed not as Java scriptlets, but as XML-like tags within the JSP code, so that they exist more naturally with the already tag-based HTML. These tags represent server-side resources that encapsulate the application logic responsible for generating content for the page, thus enabling greater separation of user interface from the content-generation logic.

JSP tags are especially suited for repetitive tasks such as looping over an array, doing browser checking, and validation. Creating hyperlinks is another such repetitive task. Below, I will describe a custom tag for generating multi-destination hyperlinks.

The Custom Tag

Download the source code for this article.

To create the custom tag, I first create a tag library descriptor (TLD) file that will describe the tag's name and attributes, and associate it with a Java class. TLD files are XML-based, and are placed in the WEB-INF directory of the web server. These files are used by the web container to validate JSP tags. The TLD file for my custom tag is called multilink.tld, in which the custom tag is defined as follows:

<tag>
    <name>multi</name>
    <tagclass>util.tags.MultiLinkTag</tagclass>
    <bodycontent>tagdependent</bodycontent>
    <attribute>
        <name>id</name>
        <required>true</required>
    </attribute>
    <attribute>
        <name>href</name>
        <required>true</required>
    </attribute>
    <attribute>
        <name>text</name>
        <required>true</required>
    </attribute>
    <attribute>
        <name>metalinks</name>
        <required>true</required>
    </attribute>
    <attribute>
        <name>onmouseover</name>
        <required>false</required>
    </attribute>
</tag>

The name of the tag is multi, and its functionality is implemented by the Java class util.tags.MultiLinkTag. This class is called the tag handler. The JSP custom tag specifications require this tag handler to implement a specialized interface. For details on creating JSP custom tags, refer to the documentation on Sun Microsystems' web site.

To minimize the learning required, this tag somewhat mimics the HTML anchor tag, and has the following attributes:

• id, the tag ID. This will be used to create the HTML elements required to support dynamic menus. Each id must be unique for all such tags appearing within a single page.

• href, the URL of the main destination, similar to the href attribute of the HTML anchor tag.

• metalinks, the name of the XML file containing the embedded links for the main hyperlink. This file is divided into multiple sections — one for each set of hyperlinks — and each section must have a name attribute identical to the id attribute of the JSP tag that uses it.

• onmouseover, an optional toggle field that indicates whether the pop-up menu should appear when the mouse pointer hovers over the drop-down icon or when the mouse clicks on the icon. Setting this field to anything other than true (case-insensitive) disables the mouseover functionality.

The JSP decides the prefix to be used for all custom tags appearing in the file multilink.tld. To maintain similarity to the HTML anchor tag, I will choose the prefix "a," which means that the complete name of the multi tag is now <a:multi>. Like the anchor tag in HTML, this custom tag has a body that defines the hypertext to be displayed. The following JSP code contains two instances of the <a:multi> tag. Later, I will show you how it renders in a browser.

<%@ taglib uri="multilink.tld" prefix="a" %>
<html>
    <body>
        <p>
          NASA's High-Speed Research program is developing a new 
          <a:multi href="http://someurl/" id="hsct" metalinks="embedded_links.xml"
          onmouseover="true">high-speed civil transport</a:multi>
          passenger jet that is environment-friendly and economically viable.
          The aircraft will have a cruise speed of
          <a href="http://someurl/">Mach</a> 2.4, and will feature an
          <a:multi href="http://someurl/" id="xvs" metalinks="embedded_links.xml"
          onmouseover="false">external vision system</a:multi>
          for low-speed operations, eliminating the need for a conventional
          windshield or drooping nose.
        </p>
    </body>
</html>

When the URL for this JSP is entered into a browser, the JSP container (web server) intercepts the request, preprocesses the JSP page, and replaces the <a:multi> tag with the content generated from the execution of its associated tag handler class — util.tags.MultiLinkTag. The tag handler parses the XML file called embedded_links.xml (which, in this case, is found in the same directory as the .jsp file), from where it picks up information about the embedded links and produces pure HTML, which is then sent to the browser. The file embedded_links.xml is reproduced below.

<?xml version="1.0" encoding="UTF-8"?>
<Hrefs>
    <Section name="hsct">
        <Href url="http://oea.larc.nasa.gov/PAIS/HSR-General.html"
          text="Overview of NASA's HSCT program"/>
        <Href url="http://www.beyond2000.com/news/Aug_00/story_739.html"
          text="HSCT project objectives and motivation"/>
        <Href url="http://vesuvius.jsc.nasa.gov/er/seh/pg34s95.html"
          text="NASA's High Speed Research Page"/>
        <Href url="http://www.amitgoel.com/vizcraft/index.html"
          text="HSCT visualization"/>
        <Href url="http://www.aerospace.nasa.gov/goals/fsvtp.htm"
          text="Affordable supersonic travel"/>
        <Href url="http://www.aerospace.nasa.gov/goals/images/g6icon1.jpg"
          text="What does it look like?"/>
    </Section>
    <Section name="xvs">
        <Href url="http://oea.larc.nasa.gov/PAIS/HSR-Cockpit.html"
          text="The external visibility system concept"/>
        <Href url="http://www.aerospace.nasa.gov/library/ar99/obj6.html#6-5"
          text="Cockpit with an artificial view"/>
        <Href url="http://lisar.larc.nasa.gov/IMAGES/SMALL/EL-1998-00169.jpeg"
          text="What does it look like?"/>
    </Section>
</Hrefs>

Finally, we take a brief look at the JSP tag implementation. Since the tag has a body, its tag handler class derives from javax.servlet.jsp.tagext.BodyTagSupport. The tag handler implements only two methods: doStartTag and doAfterBody. The doStartTag method simply returns EVAL_BODY_TAG, indicating that the tag's body needs to be evaluated. The doAfterBody method handles all of the processing for this custom tag. By the time this method is called, the body has already been evaluated and is available for this method to use. doAfterBody returns SKIP_BODY, indicating that the body contents have been consumed and are no longer required. The tag's body is anything that appears between the opening and closing elements of the JSP tag.

For brevity, a skeleton of the tag handler class is reproduced below. Refer to the source code included with this article for the complete listing.

public class MultiLinkTag extends javax.servlet.jsp.tagext.BodyTagSupport
{
    // Initialize variables and define setters
    ...

    public int doStartTag() throws JspException {
        // Indicate that we're interested in evaluating the tag's body
        return EVAL_BODY_TAG;
    }

    public int doAfterBody() throws JspException {
        // Process the tag's body and the embedded links
        // found in the XML document.
        ...

        // Don't need the tag's body any more.
        return SKIP_BODY;
    }
}

In case the tag handler encounters an error (e.g., the XML file is missing or is poorly formed), the tag handler recovers gracefully by rendering only the main hyperlink and ignoring the embedded links. The HTML output generated by the JSP is rendered as shown in Figure 2 below.

Figure 2. JSP output containing two multi-destination hyperlinks and one regular single-destination hyperlink

Figure 3. Pop-up menu containing additional links

Clicking on the "high-speed civil transport" link takes you to the default destination specified for that hyperlink. Moving the mouse pointer over the drop-down icon beside it will cause a pop-up menu containing additional HSCT-related hyperlinks to appear, as in Figure 3. Clicking on any of these hyperlinks will take you to the appropriate destination. The pop-up disappears when the mouse pointer is moved away.

This functionality has been tested successfully with Internet Explorer 5.0+ and Netscape Navigator 6.0+. For all other browsers, the embedded hyperlinks are ignored.

Discussion

Multi-destination link functionality is new to most web users. Given the resistance among users to learn new concepts, training users on a totally new navigation metaphor can be a challenge. Therefore, the solution presented builds on an existing and familiar navigation model — the menu. In a menu system, users can make several choices under one main topic. Depending on the choice they make, they will reach different destinations.

Multi-destination links give users the choice of where they want to go, as opposed to single-destination links. This reduces the amount of time and traffic caused by searching through unrelated links. Also, storing the embedded link information separately from the HTML content document enables page creators to update these links independently of the HTML document. This opens up interesting possibilities like adaptive hypertexts — hypertexts that change according to the user's profile, for example — enabling the page creators to provide links that are more relevant to the user.

Finally, the role of the drop-down icon () is particularly important. It visually indicates that the associated hyperlink contains additional hyperlinks, thus differentiating multi-destination links from regular single-destination links. In addition, the optional onmouseover capability eliminates the need to click on the image, reducing the need for one extra mouse click by the user.

Conclusion

This article presented a JSP custom tag capable of extending the linking functionality of HTML. Those developing on the .NET platform can implement similar functionality using ASP.NET custom server controls.

Due to the growing amount of information available on the Web, there is a great need to navigate the Web more easily. Enhancements like these cost very little and can add a lot of richness to the Web. With millions of users browsing web pages every day, anything that can make the Web more powerful and usable can greatly enhance the user's online experience, and can touch the lives of many.

Amit Goel has been developing object-oriented applications for several years. You can learn more about him at www.amitgoel.com.

---

Return to ONJava.com.