Archive for the ‘Plugins’ Category

Contributing to JSDT #5: Launching the Product

I’ll continue my instructions regarding how to set up JSDT development infrastructure.

Previously

Now run the product

When I work on Eclipse products, we typically provide a default launch config per product.  Although the nightly build is the ultimate authority of what encompasses the product, these version-controlled launch files provide a good point of comparison developer to developer.

I could not find a public JSDT .launch file under CVS control.

So I looked at the installed JSDT product to create my own.  It’s here if you would like to download it.

Just drop it into an active project in your Eclipse workspace, refresh the project, open ‘Run Configurations” and you should see a “jsdt” run config.

You may want to tweak it a bit and verify that the set of selected plugins is correct.

Then hit Run to see the JSDT.

Disclaimer: I’m not on the JSDT team, so this may not be exactly how they do it. But it’s what I’ve done to get it working.

Contributing to JSDT #1: Setting up Build Target

I’ve been experimenting with the JSDT to try some HTML5/CSS/JavaScript development.  In order to poke around the JSDT code to understand it better, I spent a bit of time figuring out how to get things checked out, built and running. The instructions on the JSDT site are a bit sparse, so I thought I would document what I did.

I’m not on the JSDT team, so this may not be exactly how they do it. But it works for me.

Downloading Dependencies:

First you will need to set up your PDE Target.

The WTP Downloads page is where to start.

Download the following:

I unzipped these into individual folders, someplace where you keep pristine PDE targets separate from your daily running Eclipse. For example, I unzipped GEF into c:/code/buildTargets/GEF3.6.

Setting up the Target

Now, we’ll combine all these into a single PDE Build Target.

  • Under Preferences Plugin DevelopmentTarget Platform, select Add:

Select “Start with Nothing” , then Next.

In the Locations Tab, we will add each of the installed components from our buildTargets folder.    Select Add Directory Next – then Browse the location.

(Note: when selecting, choose the eclipse folder under each target.)

Do this for each of the 6 downloads above.

Then give your target a meaningful name such as JSDT_Target.

Then click Finish.

In the Preferences dialog, change the active build target to the new “JSDT_Target” and hit OK.

Now your JSDT code– which we have not yet imported–  will compile against the expected target platform.

Resources

  • Modular Mind has some great articles on PDE build targets.

Next: Checking out the code.

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

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.

Using JSDT #1 : Resources

I’ve been doing some HTML5/CSS/Javascript programming lately.  I decided to take the JSDT (JavaScript Development Toolkit) for a test drive.

My plan is to document the steps I went through from installation through running some JavaScript from the IDE.

Today, I’m posting some of the more useful links I found when getting familiar with the project.

Download

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

Potential Problems?

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

Next I will step through the basics install JSDT, create and run an HTML page.

Is upgrade to “Eclipse RCP, 2nd Edition” worth it?

Today I received my copy of the Eclipse Rich Client Platform, 2nd (McAffer, Lemieux, Aniszczyk).

If you are interested in RCP development, this is the book to own.

But if you already own the 1st edition, is it worth buying the newer edition?  So you can decide for yourself, here are the major differences:

Software management. This chapter has been re-written to discuss software management using p2, which replaced the Update Manager

Action and Commands.  A chapter has been added to discuss the newer Commands API, as well as their differences with Actions.

Installing and Updating with P2.  More p2 information

PDE build. PDE Build is one of the more error-prone and time consuming aspects of working with Eclipse products.  (It’s also powerful and useful.  This chapter is completely reworked.  Lots of clarification as well as updated information.

Testing. A new chapter on testing an RCP application.  A great addition to the book.

A DataBinding reference chapter has been added.

One other thing I really liked was the new font– much more readable IMO.  I also like the Pointers section at the end of each chapter.  Very nice touches.

Essential Plugin: Platform ‘Core Tools’

I wanted to mention another Essential Eclipse Plug-in: the Eclipse Platform Team’s ‘Core Tools’.  I consider it essential to my work based on its inclusion of a single tool: “Find Unreferenced Members”.

Armed with this tool and some unit tests, you can really clean up some code.

Plug-in developers are the primary audience for ‘Core Tools’.  It contributes tools for validating plug-ins/class loading and Eclipse metadata browsing.  You can find more info on its capabilities here: http://www.eclipse.org/eclipse/platform-core/downloads/tools/readme.html.

The essential tool to any Java developer is “Find Unreferenced Members”.

  • Right click on a project, package, or file.
  • Select “Find Unreferenced Members”.
  • A Search view appears with member candidates for removal.
  • Note the matches are only a good set of candidates.  The tool analyzes the Java code in your workspace to determine unused members.  There may be false candidates.  For example, a no-arg constructor might be unreferenced, but as any plug-in developer knows, it’s required if the class is instantiated via plug-in.

The update site is here: http://www.eclipse.org/eclipse/platform-core/downloads.php#updates.

Update: It’s now here:  http://eclipse.org/eclipse/platform-core/updates.

Sequence Diagram Tool for Eclipse (part 2)

Many people sent me recommendations for an Eclipse-based UML Sequence Diagram tool.  Thank you all.

I’m going to take a look at some of these in more detail to see if one of them solves the problem  I identfied in the previous post.  I will report back what I find.

So far, the best ‘quick and dirty’ tool for creating sequence diagrams is not Eclipse based.  It’s web based.

It’s called  WebSequenceDiagrams.  Its input is a simple and clear language:

And it generates a usable sequence diagram.  Perfect for explaining how some key interactions in the system work.

This is obviously a very simple example, but I’ve quickly ‘drawn’ diagrams with 12+ objects and 50+ sequences.  Moving back and forth between the JDT/CDT, a text editor and a browser is a bit of a pain.  But its still quicker than anything else I have tried before.

Recommendations for UML tool for Eclipse?

I’ve been searching the web this morning looking for an easy to use UML tool that I can use inside Eclipse.

There are quite a few on Eclipse Marketplace.  Before I narrow down my list, I thought I would ask the community for recommendations.

The use case is that I am reading through a very large code base (millions of LOC) and need to document some key interactions with sequence diagrams.

  • Sequence diagrams are top priority
  • Class diagrams are second priority.
  • I want to create a conceptual diagrams.  For example, I want to quickly pick and choose which object interactions to show in the sequence diagram.  Or which attributes and methods to show in the class diagrams.
  • I definitely don’t want to have to populate a full UML2 model.
  • It needs to be easy and quick to create a sequence diagram.  I stopped using Visio years ago because it took forever to populate and lay everything out.
  • It needs to output some format that I can post to a webpage such as png.
  • It needs to be $0-$100.

What tools do you like and why?

Update: Thanks for the suggestions.  I’m going to look into them and share what I find.  I’ve written about the tool I decided to use here.

Adding and Updating Copyrights from Eclipse

Today I needed to add and update the copyrights in a large codebase. I realized that there must be some tool to do this inside Eclipse. Sure enough, the Release Engineering folks have such a script.

To download it:

  1. Select Help / Software Updates / Available Software, choose Eclipse Project Updates / Eclipse SDK I2008* / Eclipse Releng Tools.
  2. (I’m using Eclipse 3.4.2, so 3.5 users may find it elsewhere.)
  3. Install this tool and restart.

Configuring Copyright

To use the tool:

  1. Configure your copyright settings under Window / Preferences / Copyright Tool.
  2. Change to Resource Perspective
  3. Select the projects you wish to modify, and select the “Advanced Fix Copyrights” context menu.

Note: There is also a “Fix Copyrights…” menu option but this never worked and I’m not sure what it is for.