Add External JS Libraries to Eclipse JSDT-driven Projects
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
Adding a JS Library to the Build Path
- Click the New… button.
- On the New User Library dialog, give the library a name and click OK to create the library.
- Now you can click on the Add .js File button to ad files separately or on the Add folder to add all the .js files in a folder at once.
- When you're done adding the library files, click OK to close the User Libraries Preferences dialog.
- Back n the New User Library dialog, click the checkbox beside the new library and click Finish to add it to the JS Build Path
That option is geared towards folders that are outside of the WebContent folder.
- No rules about which files are important.
- No class keyword
- Types can be defined in any file
- Properties can be contributed to any Type from any file
- Dynamic typing
Adding a JS Object Model Plugin
Some of the makers of popular JS libraries have taken a proactive role in exposing their object model to Eclipse via a plugin. One of the most functional ones right now is a result of the jsdt-jquery project. Here's how to integrate it into your project:
1. Add the "http://svn.codespot.com/a/eclipselabs.org/jsdt-jquery/updatesite" URL to your Eclipse Software Download Sites and choose the JSDT jQuery as the plugin to install:
Once it's done installing, you'll have to restart Eclipse. Afterwards, you'll now be able to enable the auto-complete feature for jQuery as follows:
4. Select it and click Next> to choose the jQuery version number. Ideally it should match the version that you are using. If you're not sure of the version number, remember that the file names tend to include it. For instance, mine is named "jquery-1.6.4.js". Alternatively, it should be in the comments at the top of the non-minified version of the script:
The jQuery Browser Support screen also contains a checkbox to activate no conflict mode. That relinquishes jQuery's control of the '$' variable so that other libraries, such as Prototype, can use it. Note that, in doing so you must use 'jQuery' instead of the dollar sign ($) to access all jQuery functionality:
7. Click OK to close the dialog. Now the auto-complete should work like a charm!
Other JS Library Plugins
Qooxdoo has a plugin called QXDT, which stands for "qooxdoo Development Toolkit for Eclipse". However, that one is still in its early stages and requires some help in getting it going. If anyone has some free time on their hands, there's a useful project to contribute to.
Dojo also has a plugin project called dojo-jsdt-model. Unfortunately, it's even less complete than Qooxdoo's. One can only wait and see…
If you enjoyed this article, please contribute to Rob's rock star aspirations by purchasing one of Rob's cover or original songs from iTunes.com for only 0.99 cents each.
Rob Gravelle resides in Ottawa, Canada, and is the founder of GravelleWebDesign.com. Rob has built systems for Intelligence-related organizations such as Canada Border Services, CSIS as well as for numerous commercial businesses. EmailRob to receive a free estimate on your software project.
In his spare time, Rob has become an accomplished guitar player, and has released several CDs. His former band, Ivory Knight, was rated as one Canada's top hard rock and metal groups by Brave Words magazine (issue #92).
Rob uses and recommends MochaHost, which provides Web Hosting at $3.10 per month, 2 LifeTime Free Domains, and 6 Months Free!