PROBLEM

When referencing web application resources (URLs, images, css, javascript libraries, etc...) in a JSP page, the URL resources can be specified using absolute paths or relative paths. Absolute paths are fully-qualified URLs (i.e. http://www.myapp.com/context/js/myscript.js), and relative paths change based on the location of the JSP that the URLs are included in. While relative paths are convenient, they can be difficult to manage when a JSP page can be accessed from different URLs. Relative paths presume that a web application has a very flat or consistent url structure. While this might be the case during the initial stages of an application, this is rarely the case in later stages of an application. Skyway's JSP tags automatically handle pathing issues, however this doesn't address the loading of auxilliary resources, such as images, css, and javascript. Absolute paths are usually favored for referencing these resources, but a developer may not necessarily know the path at design-time. Furthermore the path may change as the application is deployed to different environments. A UI developer needs a way of specifying an absolute path at design-time that will resolve to the appropriate URL at runtime

SOLUTION

JSP EL provides a variable (${pageContext.request.contextPath}) that can be used by UI developers at design-time to help resolve to the proper path at runtime.

HOW IT WORKS

The following JSP fragment shows the use of the variable for including a css library, including a javascript library, and including a image from image library.

<link rel="STYLESHEET" type="text/css" href="${webContextRoot}/style.css">
<script src="${pageContext.request.contextPath}/js/scriptaculous.js"></script>
<img src="${pageContext.request.contextPath}/images/logo.jpg">

The first HTML fragment shows how the pageContext.request.contextPath from JSP fragment is resolved into an absolute path. In this example, the application is deployed by an application developer to a local tomcat instance (http://localhost:8080/myapp/).

<link rel="STYLESHEET" type="text/css" href="http://localhost:8080/myapp/style.css">
<script src="localhost:8080/myapp/js/scriptaculous.js"></script>
<img src="localhost:8080/myapp/images/logo.jpg">   

The second HTML fragment also shows how the pageContext.request.contextPath from JSP fragment is resolved into an absolute path. In this example, the application is deployed to a production server (http://www.myapp.com/).

<link rel="STYLESHEET" type="text/css" href="http://www.myapp.com/style.css">
<script src="http://www.myapp.com/js/scriptaculous.js"></script>
<img src="http://www.myapp.com/images/logo.jpg">   

Regardless of where an application is deployed to, the pageContext.request.contextPath variable will resolve to a proper absolute URL. It can be used to prefex any URL that references external resources.

RELATED RECIPES