Search code examples
javascripteclipsetomcat6d3.js

Adding external JavaScript library to Eclipse Project?

When adding an external JavaScript library to an Eclipse project should I be adding the .js file (d3.v2.js), or the tarballed master pulled from Github?

Google tells me to Google it. Subsequent Googles remind me of the need to Google it.

Directory tree:

.
 |-build
 |---classes
 |-src
 |-WebContent
 |---foo.html
 |---META-INF
 |---WEB-INF
 |-----lib
 |---d3
 |-----d3.v2.js

Relative path from foo.html to d3.v2.js should be: "../d3/d3.v2.js"

  • But, maybe it's not. I don't know.
  • Whenever I reference d3.v2.js from foo.html nothing happens. By nothing happens, I mean nothing visually appears in the browser which suggests that d3.js even exists.

To 'add' d3.v2.js to Eclipse I took the following steps:

  1. Foo -> New -> JavaScript Source File -> Advanced -> Link to File in Filesystem -> /home/tyler/workspace/foo/d3/d3.v2.js

  2. Tried 5 different paths. None of them worked (do you have to use relative, absolute?)

    • src="/home/tyler/workspace/Foo/d3/d3.v2.js"
    • src="../d3/d3.v2.js"
    • src="/Foo/d3/d3.v2.js"
    • src="d3.v2.js"

  3. So, I deleted the reference to d3.v2.js in Eclipse and attempted to add as a library.

  4. Foo -> JavaScript Resources -> Add JavaScript Library -> User Library - Configure User Libraries -> New -> "D3" -> Add .js file -> d3.v2.js (location: /home/tyler/workspace/Snotra/d3

  5. Tried a bunch of paths.

    • src="d3.v2.js"
    • src="../d3/d3.v2.js"

    • src="/Foo/d3/d3.v2.js"

      1. Rinse, repeat.

Any ideas? I know that this is really easy, but I just don't understand the fundamentals of adding JavaScript libraries to Eclipse.

foo.html

<!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html" charset="utf-8" />
            <title>Tyler J. Fisher</title>
            <link rel="stylesheet" href="master.css" />
        <script type="text/javascript" src="../d3/d3.v2.js"></script>
    </head>

    <body>
         <section id="foo_view">
            <script type="text/javascript">
                            document.write("test"); <!--Works-->
                var dataset[1,2,3,4,5];
                d3.select("body").selectAll("p") <!--Doesn't work-->
                    .data(dataset)
                    .enter()
                    .append("p")
                    .text("RABBLE");
        </script>
     </section>
    </body>
</html>

document.write("test"); works.

The d3.js code doesn't.

So (maybe):

  • The relative path must be off (or maybe I have to use absolute paths)
  • Tomcat6 isn't serving JavaScript properly (due to human error)
  • Eclipse isn't serving JavaScript properly (due to human error)
Solution

  • What Eclipse deploys to Tomcat is what is inside WebContent. If your JS files are not in WebContent, they won't be part of the deployed web app.

    You need to understand that what Eclipse shows you is you development, source folders. What is deployed is not this folder, but a directory structure conforming the Java EE specs:

    • Everything in WebContent is part of the deployed archive
    • The Java source files are compiled and stored in the WEB-INF/classes of the deployed archive
    • The non-Java files under a source directory ar copied to the WEB-INF/classes of the deployed archive
    • All the other files are not part of the deployed archive.