facebook

Images/css not found in Design/Preview on jsp pages

  1. MyEclipse IDE
  2.  > 
  3. Java EE Development (EJB, JSP, Struts, XDoclet, etc.)
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #279712 Reply

    Jeff Brewer
    Member

    I must have been snoozing through the first day of class, but there’s something very fundamental that I’m sure I’m missing in my understanding of how Java web applications are supposed to be put together and/or how to work with them in MyEclipse (which I’m loving more and more by the way).

    I have a jsp-based website that I’ve developed in MyEclipse as a web project. When I work on the jsp pages none of the images are displayed or styles rendered in the Display or Preview views. Same thing when I view the page in the MyEclipse Web Browser.

    I use references like src=”/my.css” and src=”/images/my_picture.jpg” where the leading “/” refers to the root directory.

    Also in the MyEclipse Web Browser if I click on a link such as href=”/my_cool_pages/index.html” I end up with a page not found error. Just watching the address in the MyEclipse Web Browser I can see that when I view my page the browser is looking at http://192.168.0.9:8080/MyCoolSite/ (where MyCoolSite is also the name of my web project) and if I click on the link the browser is trying to find http://192.168.0.9:8080/my_cool_pages/index.html.

    Now everything works fine when I push it all up to the server. The server interprets the “/” in my src/href references as “go to the root folder” and all the images and styles display properly..

    Clearly the problem is that when I’m working on the MyCoolSite project, MyEclipse seems to think that the root for my project is one level above “MyCoolSite” such that the “/” reference refers to some non-existent parent directory and this is all deploying to the MyEclipse tomcat server as a subdirectory of the root.

    The only way I can seem to get this to work in the Design view is to use relative addressing, e.g. src=”../../images/my_picture.jpg” which is just horrible to keep track of if I clone pages up or down the directory structure.

    I’m sure that I must be doing something fundamentally wrong here. Should my website have been an Enterprise Application Project? Should I somehow be specifying that “MyCoolSite” should be the root directory in some .xml file or project option?

    Thanks in advance to anyone who waded through all this!

    Jeff

    #279726 Reply

    Loyal Water
    Member

    Can you go to Project > Properties > MyEclipse > Web and make sure the Web Context Root is “/MyCoolSite”.

    #279753 Reply

    Jeff Brewer
    Member

    Yes, it is.

    #279763 Reply

    Riyad Kalla
    Member

    Jeff,
    I would strongly suggest you stick to using relative paths and not absolute. The reason for that is because depending on the element in the page, the paths you are giving can be interpreted differently. For example, using /styles.css is interpreted by your *browser*. So if you go to:

    http://localhost:8080/MyCoolSite and the real path for the CSS file should be http://localhost:8080/MyCoolSite/styles.css, a path of “/styles.css” in your JSP will be interpreted as http://localhost:8080/styles.css, which won’t load anything. Same goes for images.

    Then again, some tag libraries you might be using have no access to out-of-context resources, so they might interpret / as “web root”, which in this case is http://localhost:8080/MyCoolSite, so those will work.

    It can become confusing, but I would suggest you stick to relative paths for a webapp.

    #279936 Reply

    Jeff Brewer
    Member

    Thank you Riyad for taking the time to help me with my issue.

    I understand what you’re saying about the relative addressing, but I guess I still think I’m missing something fundamental about how I should be using MyEclipse to develop my website.

    When I’m working in MyEclipse my project never seems to exist in the root (i.e. it’s always at http://localhost:8080/MyCoolSite) but when I deploy it to my website it does exist in the root (e.g. http://www.MyCoolSite.com). Is there some way I should be using MyEclipse that puts my site in the root? Would it be normal to develop my site in the root if I were using another IDE? Would it be incorrect to say that I should switch to relative addressing because of a limitation of (or characteristic of) MyEclipse?

    If I’m building a new website, would I start with a “web project” in MyEclipse or would a “web project” be considered just a component of a web site?

    #279942 Reply

    Riyad Kalla
    Member

    All great questions… let me try and address each one:

    1. Every app server on the planet deploys your applications to their own web root contexts. So let’s say you use Tomcat, Glassfish, JBoss, etc… when you deploy an app, it will popup as:
    http://localhost:8080/<SOME APP NAME>

    so if you are working on say 10 apps, all 10 will have their own path under the root of your app server.

    2. Some app servers allow you to deploy a single web app to the *root* of the app server, so you can access it at http://localhost:8080 with no additional path. I wouldn’t recommend developing with this method, becuase you might unknowingly end up coding something that *only* works when your app is deployed as root.

    3. I am guessing the reason you can access your app, when it’s deployed, as http://www.coolsite.com, is because your host is mapping the URL to the literal address of http://<SOME IP ADDRESS>/mycoolsite at some point.

    4. Yes I would always use relative paths. You should try and assume as little as possible so if you ever need to move your app, you can move it to another host or domain name without a hickup.

    5. Web Project represents both an entire web application (e.g. a Struts, JSF, etc. app) but it can also represent a module of a bigger enterprise application project (e.g. the Administration web app that is part of some huge app).

    6. Working with another IDE might mask some of the path complexities from you, but that just means you’ll have to deal with the issue when you go to deploy the app. MyEclipse doesn’t mask any of the path issues, so if you code a literal path to http://mycoolsite.com/images/button.gif, your app is going to break with local testing (cause the path will be like http://localhost:8080/mycoolsite/images/button.gif) and if you ever moved hosts, it would break again (cause the old path would be mycoolsite.com and maybe your new site is awesomesite.com)

    I hope that helps.

    #280096 Reply

    Jeff Brewer
    Member

    Thanks Riyad,

    You’ve been very generous with your time. I think I have only one more issue on this topic that I’d like to bother you with.

    I’ve been going through my site and replacing the absolute addressing with relative, but I do have one situation that I’m uncertain how to handle.

    I have a JSP fragment that contains my main navigation and I include it on almost every page:

    coolNav.jspf

    <c:choose>
        <c:when test="${thisPage == 'coolHomePage'}">
    <p><a href="/index.jsp" class="selected">Home</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="/index.jsp" class="unselected">Home</a></p>
        </c:otherwise>
    </c:choose>
    <c:choose>
        <c:when test="${thisPage == 'coolContentPage'}">
    <p><a href="/content/cool-content.jsp" class="selected">Cool Stuff</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="/content/cool-content.jsp" class="unselected">Cool Stuff</a></p>
        </c:otherwise>
    </c:choose>
    <c:choose>
        <c:when test="${thisPage == 'classicCoolPage'}">
    <p><a href="/content/archives/classic/classic-content.jsp" class="selected">Old Cool Stuff</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="/content/archives/classic/classic-content.jsp" class="unselected">Old Cool Stuff</a></p>
        </c:otherwise>
    </c:choose>

    …which I include like this…

    <%@ taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
    <c:set var="thisPage" value="coolHomePage" />
    <%@ include file="/WEB-INF/jspf/coolNav.jspf" %>
    

    If I use relative addressing do I need to build different versions of this fragment for pages that exist at different levels in the directory structure? e.g….

    coolNav-root.jspf

    <c:choose>
        <c:when test="${thisPage == 'coolHomePage'}">
    <p><a href="index.jsp" class="selected">Home</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="index.jsp" class="unselected">Home</a></p>
        </c:otherwise>
    </c:choose>
    <c:choose>
        <c:when test="${thisPage == 'coolContentPage'}">
    <p><a href="content/cool-content.jsp" class="selected">Cool Stuff</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="content/cool-content.jsp" class="unselected">Cool Stuff</a></p>
        </c:otherwise>
    </c:choose>
    <c:choose>
        <c:when test="${thisPage == 'classicCoolPage'}">
    <p><a href="content/archives/classic/classic-content.jsp" class="selected">Old Cool Stuff</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="content/archives/classic/classic-content.jsp" class="unselected">Old Cool Stuff</a></p>
        </c:otherwise>
    </c:choose>
    

    coolNavLevel1.jspf

    <c:choose>
        <c:when test="${thisPage == 'coolHomePage'}">
    <p><a href="../index.jsp" class="selected">Home</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="../index.jsp" class="unselected">Home</a></p>
        </c:otherwise>
    </c:choose>
    <c:choose>
        <c:when test="${thisPage == 'coolContentPage'}">
    <p><a href="../content/cool-content.jsp" class="selected">Cool Stuff</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="../content/cool-content.jsp" class="unselected">Cool Stuff</a></p>
        </c:otherwise>
    </c:choose>
    <c:choose>
        <c:when test="${thisPage == 'classicCoolPage'}">
    <p><a href="../content/archives/classic/classic-content.jsp" class="selected">Old Cool Stuff</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="../content/archives/classic/classic-content.jsp" class="unselected">Old Cool Stuff</a></p>
        </c:otherwise>
    </c:choose>

    coolNavLevel3.jspf

    <c:choose>
        <c:when test="${thisPage == 'coolHomePage'}">
    <p><a href="../../../index.jsp" class="selected">Home</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="../../../index.jsp" class="unselected">Home</a></p>
        </c:otherwise>
    </c:choose>
    <c:choose>
        <c:when test="${thisPage == 'coolContentPage'}">
    <p><a href="../../../content/cool-content.jsp" class="selected">Cool Stuff</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="../../../content/cool-content.jsp" class="unselected">Cool Stuff</a></p>
        </c:otherwise>
    </c:choose>
    <c:choose>
        <c:when test="${thisPage == 'classicCoolPage'}">
    <p><a href="../../../content/archives/classic/classic-content.jsp" class="selected">Old Cool Stuff</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="../../../content/archives/classic/classic-content.jsp" class="unselected">Old Cool Stuff</a></p>
        </c:otherwise>
    </c:choose>

    …and so on?
    If could be, of course that there are better solutions to this kind of problem.

    What do you think about solving this problem in the following way, by using a JSTL “url” tag in a clever way I discovered on another user forum:

    <c:choose>
        <c:when test="${thisPage == 'coolHomePage'}">
    <p><a href="<c:url value='/index.jsp' />" class="selected">Home</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="<c:url value='/index.jsp' />" class="unselected">Home</a></p>
        </c:otherwise>
    </c:choose>
    <c:choose>
        <c:when test="${thisPage == 'coolContentPage'}">
    <p><a href="<c:url value='/content/cool-content.jsp' />" class="selected">Cool Stuff</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="<c:url value='/content/cool-content.jsp' />" class="unselected">Cool Stuff</a></p>
        </c:otherwise>
    </c:choose>
    <c:choose>
        <c:when test="${thisPage == 'classicCoolPage'}">
    <p><a href="<c:url value='/content/archives/classic/classic-content.jsp' />" class="selected">Old Cool Stuff</a></p>
        </c:when>
        <c:otherwise>
    <p><a href="<c:url value='/content/archives/classic/classic-content.jsp' />" class="unselected">Old Cool Stuff</a></p>
        </c:otherwise>
    </c:choose>

    Thanks again for your help.

    Jeff

    #280187 Reply

    Riyad Kalla
    Member

    This message has not been recovered.

Viewing 8 posts - 1 through 8 (of 8 total)
Reply To: Images/css not found in Design/Preview on jsp pages

You must be logged in to post in the forum log in