Dipherence

Control the web, Control the world

[Coloryzer] A full coloured eclipse navigator plug-in

Introduction to eclipse plugins development

As it’s my first entry in this blog, I will write few lines about me and the eclipse plugins development.

I started as a PHP developer 4 years ago with Dreamweaver. I’m now using Eclipse PDT as my IDE. Personally, it’s the best IDE in terms of PHP development and Flexibility.
After having reached a certain skill in PHP development, and as I had to produce lots of projects and tons lines of code, I started to create a home made framework with a friend in order to improve productivity.

I often faced situations where I was wasting my time during the development phase, especially, “non-coding” time.

For example : when I develop a PHP application, I start to write all the code that I can write without seeing the result on a web browser. Then, I run the web page for the first time and in most of cases, the first errors appears. It’s normal, there are here to be fixed ;)

So you have to read the error message, to go back to your IDE, look for the file and the line that triggered the error. It takes few seconds to localize the error if the file that triggered the error is the file you are currently working on. But when it’s not the case, for example, some Classes, that are elsewhere in my project, or some other php includes… You have to browse, to find the file, to open it and finally, to go to the concerned line…
This takes in average 10 seconds…

Well, that’s not so much but you’re fixing errors all day long as you are creating new code, so 10 seconds, plus 10 seconds…. hundreds of time, becomes to be long!

So to continue my quest of productivity, I interested myself on developing eclipse plugins, hoping to code even faster!

In order to optimize the time taken by this “non-coding” tasks I created a REALLY(this is subjective ;) ) useful plugin.
This plugin enabled, you just have to click on the error displayed on the web page and eclipse will do you work! It will automatically open the concerned file and goes to the appropriated line!
It takes…. no time! Well ok, it takes half a second because eclipse can’t click on the browser for you!

I do not calculated how much time I gained a day but I think it’s a pretty good performance ;)

You might say “What? How is it possible to click on a php generated error?”. Well, we handle errors in our framework, so we can easily change the associated html.

That was my first steps in plugin development!

Enough! What about the coloured navigator?

Well, if you are a PHP hardcoder, you probably created long and big projects that contains lots of files and folders!

I’ve always been fed up loosing my time browsing hundreds of file in the sidebar navigator so I decided to fix that… with an eclipse plug-in ;)

The framework I use is organised with specific folders like /app, /www, /helpers, /classes, /templates, /scripts etc…

But wait, if the files and subfolders are well organised, why do I’m loosing time browsing?

Well, when the project is at it’s beginning, it’s no so hard to have a quick overview of all your files, but when it becomes bigger and bigger… The browsing becomes a really painful “non coding” task!

It’s really hard to locate yourself in the navigator, when you are working with lots of files and folders at the same time. Some folders are opened, some are closed, some file are not visible because the list is too long, and if you have to navigate from file to file that are not already tabbed well, you are just lost and really tired browsing… Even more if you are tired and you have lack of concentration! At least, in my case ;) !

To fix this, I put some colors and joy! Colors? Yes, colors, like backgrounds on the files and folders when you are browsing on the finder in MacOS X Leopard

Leopard Finder Highlight

Leopard Finder Highlight

This is quite useful to improve the browsing, especially when you have lots of file in the same window. Without this, I have to read the name of the files, to know where I am, and if the targeted file is above or below the filename I just read.

Well, with this plug-in, you can (almost) do  the same, customizing the navigator background and foreground colors!

What it looks like

How does it work?

You can fully choose which folder or file you want to highlight, with the color.xml file. It’s a file that has to be at the root of the project and which contains rules. Those rules will allow to the plugin to colorize the items you want to highlight.

For example, the following node will put a blue background color and a white foreground color to the /app folder item

<rule>
<conditions>
<pattern value="/app" />
<type value="folder" />
</conditions>
<actions>
<backgroundColor value="299DFF" />
<color value="FFFFFF" />
</actions>
</rule>

That’s as simple as it! You can add as many rules as you want to improve your productivity (or to cry over a static rainbow in your navigator when coding ;) )

You can have a better look at the colors.xml file on the attatched .zip that contains the .jar plugin and an example project which contains a colors.xml file and some dummy files and folders.

Note that you can user the * joker char in your pattern rules to match multiple items

Download Coloryzer Plug-in

But what about the Joy I told you above? Well, if you use my plug-in, I hope that you will enjoy the time you will not waste looking for you files ;)

Please, feel free to tell me if it improved your productivity or not ;)

Edit : Download the plug in package with sources included here :
Coloryzer_1.0.0.201104011548.jar


Categorized as Work

5 Comments

  1. Thanks for this plugin. I have a couple questions. Do I need to do anything special to get the background color to span the entire row like in your screenshot? In my case only the actual width of the text gets the background color instead of the entire row. I wonder if this has to do with a certain version of Eclipse. I’m using PHP Eclipse Helios Service Release 1. I’m also on Windows and not Mac if it makes a difference.

    Another question I have is would it be difficult to use the designated color of the file as the color of the tab in the editor? This is helpful if you have multiple files of the same name open at the same time. For example, user.php, user.php, user.php. If the tabs were color coded you’ll know automatically which file it is.

    Thanks!

  2. Nice post. I really love colors, so i installed your plugin and converted my actually project into a rainbow – lovely :)

    What really cought my attention was the first part of your post, regarding those “clickable error messages”.

    I was not aware that you can open a program from html code – this must be some windoze active x magic…

    Also you say that you can open the file in Eclipse at a specific line (!) I thought Eclipse is (was) not able to do so (but Netbeans does).

    Maybe you can write a second post about that stuff ?

    Anyway – I will subscribe to your blog – nice work ;)

    Nikolai

  3. Really nice work ! Do you plan about file “is changed” flag from common navigator view?

  4. Thank you for your comments and feedbacks!

    I do have a lot of work currently so I can’t answer to your comments right now.

    I’ll answer to you later , I Promess!

    For the persons who would like to modify the plug-in, I added the source at the end of my post.

    See you soon ;)

  5. Hello,

    great plugin. Is it possible to use the plugin in Eclipse IDE for Java EE Developers too?
    I didn’t managed it.

    Martin