Using JSDT #3 : HTML5/JavaScript Workarounds

I’m documenting steps to use the Eclipse JavaScript IDE to work with HTML5/CSS/JavaScript.

Building on the previous post, this post will create a simple HTML5/JavaScript Canvas example using the Eclipse JSDT.  It will demonstrate some of the limitations I encountered using the JSDT for HTML5 and provide one workaround.

Update: Preliminary HTML5 support will be part of JSDT’s September 2010 release.

Previously

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.

In this example, I’ve created a simple HTML5 page that draws 4 colored rectangles using JavaScript.

Create a new html file called canvas.html. with the following content:

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas test</title>

    <!-- Pull in canvas support for IE -->
    <!--[if IE]><script src="excanvas.js"></script><![endif]-->

    <script type="text/javascript">
      window.onload = function() {
        var drawingCanvas = document.getElementById('canvas1');

        // Is element in the DOM and does browser support canvas
        if (drawingCanvas && drawingCanvas.getContext) {
          // Init drawing context
          var context = drawingCanvas.getContext('2d');

          // Create 4 squares
          context.fillStyle =   "#00FF00";  // Green
          context.fillRect(0,0,100,100);

          context.fillStyle = "#0000FF";    // Blue
          context.fillRect(0,100,100,100);

          context.fillStyle = "#FF0000";    // Red
          context.fillRect(100,0,100,100);

          context.fillStyle = "#FFFF00";    // Yellow
          context.fillRect(100,100,100,100);
        }
      }
    </script>
   </head>
 <body>
   <h1>HTML5 Canvas</h1>
   <canvas id="canvas1" width="200" height="200">
     <p>Your browser doesn't support canvas.</p>
   </canvas>
 </body>
</html>

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:

  • Hovering over pre-HTML JavaScript code, gets helpful (and slightly cryptic) API information.  However, try to hover over the newer drawingCanvas.getContext, and you don’t see any API info.

  • 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!

HTML5 Resources

There are many HTML5 resources available.  Here are a couple I used:

Next: Adding a 3rd party Library

Advertisements

7 comments so far

  1. […] The next entry will add some JavaScript and HTML5 functionality. Possibly related posts: (automatically generated)Adding and Updating Copyrights from EclipseSequence Diagram Tool for Eclipse (part 2)Recommendations for UML tool for Eclipse?Is Javascript good for SEO? « Eclipse JavaScript IDE (JSDT) : Resources Eclipse JavaScript IDE (JSDT) : HTML5/JavaScript Workarounds » […]

  2. Bogdan Nistor on

    Hi, about the HTML5 editor limitations workaround, you could try this http://stackoverflow.com/questions/1216762/how-to-let-eclipse-accept-the-canvas-tag, creating new rules for every HTML error. This worked for me.

    • Scott Kellicker on

      Thanks for the info. Suppressing some of the unnecessary ‘tag missing’ errors will help clean up the clutter.

      Now what I really want to do is the have JSDT recognize and let me use the canvas tag, the HTML5 DOM is js, etc, in JSDT!

  3. […] #3 : HTML5 limitations […]

  4. […] #3 : HTML5 limitations […]

  5. JSDT versus NetBeans « Eclipsed on

    […] #3 : HTML5 limitations […]

  6. Sundeep on

    Hi,

    Thanks a lot for the tutorial. I was searching for this!


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: