Archive for the ‘html’ Tag
- Some JSDT resources.
- Instructions for installation and creation of a simple HTML example using JSDT.
Using the HTML5 Canvas
We’ll use HTML5’s new drawing canvas. If you want to learn more about HTML5 or Canvas, there are some links at the bottom of this page.
Create a new html file called canvas.html. with the following content:
JSDT’s HTML5 Limitations
The first thing I noticed is that JSDT is not HTML5 aware.
- The editor has a warning marker in the gutter because the HTML5 canvas tag is unrecognized:
- And the internal browser doesn’t support HTML5:
- (To run inside the internal browser, Right Click canvas.html and select Run As – Run on Server)
Working around JSDT’s HTML5 Editor Limitations
I’m still trying to figure out the best way to get some nice HTML5 editor functionality (like hover help, content assist, etc), which is the primary reason I would use an IDE over a simple text editor.
Whatever I find out, I’ll post. If anyone has experience with this, I’d love to hear about it.
Working around JSDT’s HTML5 Browser Limitations
It’s simple to work around the fact that JSDT’s internal browser does not support HTML5. Simply switch to a different browser.
From in Eclipse, select Window – Web Browser – and then select either IE or the system browser.
In my case, the system browser is a recent version (3.6.8) of Firefox which has good HTML5 support. I run it. Success!
There are many HTML5 resources available. Here are a couple I used:
- I compiled some JSDT resources.
- 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.
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.
Today, I’m posting some of the more useful links I found when getting familiar with the project.
The JSDT comes as part of Web Tools. You could also use Update Manager to pull the JSDT plugins into an existing Eclipse.
I decided to download the JSDT product to see how well it worked by itself.
Resources for Users
- A dated but good DeveloperWorks article on JSDT:
- Some dated demo videos on the Eclipse site.
- The JSDT documentation (is also included in the product).
While doing some research, I ran across several articles talking about the difficulty in getting the JSDT to integrate with 3rd party libraries.
I’ll find out more about this as I progress.
Resources for JSDT Developers
Next I will step through the basics install JSDT, create and run an HTML page.