I’ve been spending time today with Eclipse, the popular development tool used primarily by Java developers. I’m using Eclipse in my J2EE development because there’s a plugin that enables EJB development for JBoss, and another plugin that enables web servlet development, and yet another that allows me to interface with a SQL Server database, and even a plugin to connect with Subversion. These are all professional development tools, more or less. Yet Eclipse is not just for the pros, or the geeks.
It’s easy to install, with installations for Unix, Linux, Mac, and Windows. I had to use gunzip and tar to unzip and expand the package for the Mac, because the machine I’m using is my older Mac; it doesn’t have the modern unzipping tools of the Tiger machines.
Once Eclipse is installed, then the fun begins. You can add any number of plugins.
For instance, if you work with JavaScript, there are several JS plugins, and even some Dojo-based AJAX plugins. Some of these may cost, others are free. One of the more popular is the Web Tools Plugin environment, which is free and sets your Eclipse up to develop almost anything web-related.
Eclipse was installed on my PC for work, but I wanted to explore the use of Eclipse as a tool for JavaScript developers. I installed it on my Powerbook, and then used the automated update and installation program built into Eclipse to add the Web Tools. How do you do this? You’re going to laugh, it’s so easy.
First, click the Help menu item, then Software Updates -> and then choose Find and Install. From the window that opens, click the Search for New Features to Install feature, and then click Next.
In the page that opens, there’s a box listing out what remote sites to check for new and updated software. I then click New Remote Site, and in the dialog box that opens, I added in:
Name: Web Tools
URL: http://download.eclipse.org/webtools/updates/
I clicked Finish and when given a new dialog with a list of features to install, checked the box next to the Web Tools option, and then clicked the Next button. Following, I’m asked to agree to the license terms, and from that point on, Eclipse not only downloads the tools, it also downloads all the pre-requisites needed for the tools to operate. That’s it — when it’s finished it asks to re-boot and when you’re finished, you’re ready to use the new functionality.
I created a new project by selecting File->New->Project->Other. From the list that opened, I just selected Simple, and then gave the project a name: test. Based on whatever project type is picked, Eclipse adds any supportive libraries and generated files, listed underneath the project name in the left pane.
I created a new JavaScript file by again selecting File->New->Other. From the dialog that opens, I clicked Web, and then selected JavaScript. Since I’m saving my creativity for my work, I again used the name test to name the JS file: test.js.
At this point, the new test.js file shows in the left pane, and the open file ready for edits is shown in the center panel. I type in whatever JavaScript I want. As I add new program objects, like variables, they show in the outline panel on the right. If I use a built-in object, like Math or document, when I type the period to access an object property or method, a popup window opens listing available options, and even the browser icon associated with the option.
When I’m ready to preview the functionality, I click the Preview tab that shows at the bottom of the center edit pane; the preview emulates a browser page.
Being a programmer I know that if one plugin is good, dozens are better. Shopping around, I installed Eclipse plugins for PHP (PHPeclipse), database access (DbEdit), and a CSS editor.
The latter was a commercial plugin from JointLogic, downloadable for trial for 30 days. Once installed (using the same procedure I used to install the Web Tools), I created a new CSS file using the same approach as I used with the JS file. I then began to add styles to the new stylesheet file, and as I added new elements, they would show in the outline pane in the right.
I also selected the CSS style view pallet for the plugin by selecting Window->Show View->Other and then selecting JointLogic Web Tools and then the CSS Styles. The view is listed as a tab in the bottom pane. When double clicking on an item in the outline view, such as the H1 header, a dialog opens giving options to define this type of HTML element.
After selecting the changes, and clicking OK, the edits are neatly added to the CSS document.
Eclipse isn’t an all in one tool, and wouldn’t be for folks who don’t like to tweak styles, HTML, or script. It requires a Java runtime environment, and it’s not small. But it is free, it is modular, and it isn’t just for geeks.
Thought you’d all enjoy a new toy to play with.