views:

473

answers:

1

I am having trouble linking to a style sheet from a jsp page. I believe it has something to do with my directory structure which is:

WEB-INF
  |-- css
  |    |-- main.css
  |
  |-- jsp
       |-- login.jsp

I have tried various forms of the standard html link tag such as:

<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />
<link href="main.css" rel="stylesheet" type="text/css" media="screen" />
<link href="WEB-INF/css/main.css" rel="stylesheet" type="text/css" media="screen" />

I have also tried including the css file in the jsp folder and linking to it directly. Nothing works. When I view the source after deployment, and try to access the CSS file directly, it's not there, but this is no surprise to me since it is in the WEB-INF directory.

I have also verified that it is getting deployed with the rest of the application. The jsp source is:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Login</title>

<link href="css/main.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>
<div id="wrapper">
<div id="header">
<div id="logout">&nbsp;</div>
<h1>Login</h1>
</div>
<div id="content" class="content">
  <form action="" method="post" name="login-form">
    <fieldset>
      <legend>Login</legend>
      <table border="0" align="center">
        <tr>
          <td><label>User Name:</label></td>
        <td><input type="text" name="userName" /><br><br></td>
        </tr>
        <tr>
            <td><label>Password:</label></td>
        <td><input type="text" name="password" /><br><br></td>
         </tr>
        </table>
      </fieldset>
      <div class="buttons">
        <input type="submit" name="submit" value="Login" />&nbsp;&nbsp;&nbsp;
        <input type="button" name="cancel" value="Cancel" />
      </div>
    </form>
  </div>
</div>
</body>
</html>

Thanks!

A: 

Files in /WEB-INF are not directly public accessible. Only an intermediating (controller) Servlet can access and stream them for you with help of ServletContext#getResourceAsStream(). That's exactly what Spring (as any other decent MVC framework) does with JSP files. You can't access JSP files directly by URL. That would potentially leak source code or break the application behaviour.

So you have basically 2 options here:

  1. Put CSS files in public webcontent (just move one folder above WEB-INF, so that /css is at same level as /WEB-INF).

  2. Create a Servlet which listens on an url-pattern of /css/*, gets the requested CSS file by HttpServletRequest#getPathInfo() and basically gets an InputStream from it using the aforementioned ServletContext#getResourceAsStream() and writes it to the OutputStream of the response along a correct set of response headers with at least Content-Type and Content-Length.

After all I think option 1 is easier and more suitable for your requirement ;)

BalusC
I figured that had something to do with it. I believe I will go with option 1 for now. Thanks!
Casey
You're welcome.
BalusC