Using JSDT #2 : Run First Project

I’m documenting the steps I’ve taken in using the Eclipse JavaScript IDE to work with HTML5/CSS/JavaScript.  Today, I’ll step you through installation and running a very simple HTML project.

Previously

• I compiled some JSDT resources.

Installation

The Eclipse JavaScript tools are called JSDT (JavaScript Development Tools).  You can get them several ways.  They come as part of the Eclipse Web Tools Project (WTP).  If you are already running Eclipse, you could use Update manager to install the JavaScript plug-ins into your current Eclipse installation.  I decided to download the JSDT product to keep it simple and see how well it worked by itself.

• Unzip the download into a suitable location.  For simplicity, I unzipped into c:/jsdt.

Starting the product

• Navigate into c:/jsdt/eclipse and double-click eclipse.exe to start the product.

(I’m using Windows.  The process is different but close enough that a user smart enough to use a different OS can figure it out.)

• The first screen prompts you for a workspace.  I changed to default to c:/workspaces/html5.  Hit OK.

• You should then see the JavaScript IDE, with no projects, ready to go.

Create HTML project

Now we’ll create a very simple static HTML page.

• Select File – New – Static Web Project, and you should see this dialog:

• Name the project simple and hit Finish.

• Now select the simple project and right-click.  Select New – Html File:

• Name the html file simple.html:

• Hit finish.

• Double click on simple.html to open it in the editor.  Change the title to “Simple Title” and enter “Simple” into the body.  Save it.

Test it inside Eclipse

Now we’ll test Simple using  server and browser provided by Eclipse.

• Right Click simple.html and select Run As – Run on Server:

• This will bring up this dialog.  Accept the defaults and hit Finish.

• This will start a jetty server and open a browser view.  You should see the “Simple” page in the browser.

Next

The next entry will add some JavaScript and HTML5 functionality.

« Using JSDT #1 : Resources

Using JSDT #3 : HTML5/JavaScript Workarounds »