Debugging Eclipse UI layouts with Picasso

I always seem to spend too much time dinking around with UI layouts.  In fact, today I’ve been fighting an odd problem where I had a bunch of extra space in a dialog between two other elements.  I had spent excessive time trying things, over and over again, with no success.  That’s usually a sign to take a step back from the keyboard.

I vaguely remembered there was a tool that painted each composite in the UI a different color.  I Googled and found Simon Archer and Chris Aniszczyk’s Picasso tool.  Picasso is found in the PDE incubator source code (unfortunately it doesn’t get full billing on the PDE incubator page).

I ran my app with Picasso enabled, and clearly saw that something was amiss between my text and my table.  I hovered over the lime green box and was able to get a large screen of useful information (not shown): what the element is, its parentage, layout, etc.  I was able to quickly fix my mistake.

How to use:

  • Import the project into your workspace from the PDE incubator repository.
  • In your run config:
    • Plug-ins: add org.eclipse.pde.picasso.
    • Tracing: enable tracing and turn on org.eclipse.pde.picasso.
  • Start your app.
Advertisements

2 comments so far

  1. Lars Vogel on

    Thanks. That is a really good tips. Debugging layouts can be a time consuming task.

  2. Madhu on

    Try out Yari. It gives layout coloring as well as a lot other features for eclipse UI hacking.

    http://sourceforge.net/projects/yari/


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: