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

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.

Advertisements

6 comments so far

  1. […] on the previous post, this post will create a simple HTML5/JavaScript Canvas example using the Eclipse JSDT.  It will […]

  2. […] Eclipse wiki page regarding developing JSDT Possibly related posts: (automatically generated)Homework 3: JavaScript ToolkitList of 25 Javascript/Ajax & CSS Tooltip ScriptsUsing Javascript and jQuery in MOSS « Senior Eclipse UI Developer Needed (Los Angeles) Eclipse JavaScript IDE (JSDT): Getting Started » […]

  3. […] This post was mentioned on Twitter by EclipsePlanet, javascript. javascript said: Eclipse JavaScript IDE (JSDT): Getting Started: http://bit.ly/b9yGY3 via @addthis […]

  4. […] #2 : Run First Project […]

  5. […] #2 : Run First Project […]

  6. JSDT versus NetBeans « Eclipsed on

    […] #2 : Run First Project […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: