A super smart way to rotate graphics

Wanted to share a very usable way for rotating graphics that I found at zwibbler.com. I'll show you an example -

I placed the arrow and as is typical in drawing environments like this, I got a handle to use to rotate the arrow (this is the green G like thing you see on the canvas - highlighted by the red ellipse). The neat thing is you can drag the handle so that the further away you drag the handle (indicated by the thin blue line in the UI), the finer is the rotation so you can decide how much control you want over the rotation. Compare this to Powerpoint (which is a pretty good regular use graphics program for me) and the rotation is not as intuitive or easy and requires very careful mouse manipulation to rotate things right.

Very smart!

This does have a problem that you are limited by the canvas and in a rectangular canvas if your rotation arc (after you have extended it to almost the edge) passes over the edge, the rotation stops. But it seems to work well - give it at try.

HoverPopup - a JQuery UI Plugin

Fiddling around with JQuery, JavaScript and assorted web development goodies in my spare time, I finally have a JQuery UI plugin I can call my own. This one mimics the behaviour you can find in the Gmail chat window. When you hover over a user, you'll get a panel that has additional details and actions for that context.

You can try out the plug-in here which is an easier way to understand what it does.

It wasn't all that hard and while I was mucking my application code with this UI logic, I figured I would write it as a JQueryUI plugin so it is re-usable and has the added advantage of keeping my code clean. It turned out to be a very fun and satisfying experience. Many thanks to this article for helping me understand what needed to be done - http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/

Disclaimer: My first JQueryUI plug-in and not too much after having learnt JavaScript, so use this at your own risk - I expect that an expert in either will be able to provide me good feedback on how things can be improved or written much better.

Here's the code for the plug-in. To use JQueryUI you need to follow the guidelines here. Thanks to the wonderful http://www.tohtml.com for syntax highlighting.

/*
 * $(selector).hoverpopup({
    leftMargin: [optional] - specify how much to the left of the trigger element the hover popup should appear
    getTriggers: function that should return a list of elements to base the popup trigger on.
    getPopupContents: function that is called to populate the popup
 });
 *
 */
var HoverPopup = {
options: {
  leftMargin: 3,
},

_init: function() {
  var _this = this;
  var elem = this.element;
  var triggers = this.options.getTriggers(elem);
  _this.options.popup = $('#hover-popup-1');
  if (_this.options.popup.length == 0) {
      $('body').append("<div id='hover-popup-1' class='hover-popup'></div>");
      _this.options.popup = $('#hover-popup-1');
      _this.options.popup.hover(function(evt) {
              clearTimeout(_this.options.t);
          }, function(evt) {
          });
      _this.options.popup.hide();
      $('html').click(_this.options.clickHandler = function(evt) {
          if ($('#hover-popup-1:visible').length > 0) {
              var o = _this.options.popup.offset();
              var h = _this.options.popup.height();
              var w = _this.options.popup.width();
              if ((evt.pageX >= o.left && evt.pageX < o.left + w) &&
                  (evt.pageY >= o.top && evt.pageY < o.top + h)) {
                  // do nothing
              } else {
                  _this.options.popup.fadeOut(_this.options.hideCallback);
              }
          }
      });
  }

  for (var i = 0; i < triggers.length; i++) {
      $(triggers[i]).hover(function(evt) {
          _this.options.enter = setTimeout(function() {
                  var src = evt.currentTarget;
                  _this.options.popup.empty();
                  _this.options.popup.append(_this.options.getPopupContents(src));
                  clearTimeout(_this.options.t);
                  _this.options.popup.fadeIn(_this.options.showCallback);
                  _this.options.popup.offset(_this._calculateOffset(src));
              }, 200);
      }, function(evt) {
          clearTimeout(_this.options.enter);
          _this.options.t = setTimeout(function() {
              _this.options.popup.fadeOut(_this.options.hideCallback);
          }, 300);
      });
  }
},

destroy: function() {
  $.Widget.prototype.destroy.apply(this, arguments);
  _this.options.popup.unbind();
  $('body').remove(_this.options.popup);
  $('html').unbind(_this.options.clickHandler);

},

_calculateOffset: function(src) {
  var w = this.options.popup.width();
  var h = this.options.popup.height();
  var jsrc = $(src);
  var off = jsrc.offset();
  var l = off.left - w - this.options.leftMargin;
  if (l < 0) {
      l = off.left + jsrc.width() + this.options.leftMargin;
  }
  var t = off.top;
  var pageH = $(window).height();
  if (t + h > pageH) {
      t -= (t + h - pageH - 5);
  }
  return { "top" : t, "left" : l};
},
}

$.widget("ui.hoverpopup", HoverPopup);

The CSS code follows - which is not much really. You can style the contents of the popup which is your UI code. I suppose I could add this to the component itself and reduce the number of files.

#hover-popup-1 {
display: block;
position: absolute;
z-index: 10000;
}

Usage:

Apply hoverpopup on the jquery object - an instance will get instantiated for each element in the jquery object. The "getTriggers" function is called which gets the context element to work with. This function is expected to return a jquery object that has all the triggers in it. When the mouse hovers over one of the triggers, the popup is shown and its contents are populated by calling "getPopupContents" which can return anything that works in the JQuery "append" function.

leftMargin just controls where the popup is located - maybe this should be in a function of its own

Here's an example -

$("#div1").hoverpopup({

getTriggers: function(elem) {

return $(elem).find('.hp-test-tr');

},

getPopupContents: function(src) {

return '<div>' + $(src).find('.data').html() + '<div>';

},

leftMargin: 10,

});

Some more details

The reason I added in getTriggers, which is probably a deviation from the JQuery way of doing this - i.e. the pattern $(selector).hoverpopup would normally apply on the selector, was because I felt that instantiating a HoverPopup object for each trigger was excessive. Take a look at the demo page source to get an idea of how it was used.

Let me know what you think and I am open to suggestions on improvements and feedback on the code.

Something product feature comparisons won't tell...

Try this in Idea -

public class MyClass {
    private static abstract class MyAbstractClass {
        public void method() {
            someMethod();  <--- hit alt enter on someMethod               
        }       
    }  
}  

When you hit alt-enter at someMethod and hit enter without looking at the list of options, the sheer brilliance of the implementation is to create an abstract method "someMethod" - absolutely lovely! The actual list demotes the usual default "create method someMethod()" as a second option while promoting to first (and default because of the enclosing abstract class) option "create abstract method someMethod()".

Ya I'm sure sometimes one doesn't want abstract method but the point is that it works surprisingly well and its a choice someone though was worth promoting above the plain simple "create method someMethod()" option. Love it!

The problem with product comparisons is that someone is bound to turn around and say - oh you can do this in Eclipse - but you really can't. Maybe you can generate abstract methods - but the sheer joy and surprise of having your IDE generate the exact thing you wanted without any additional user gestures cannot be captured in a product comparison where you go specifically choose the option. There might be a feature to do the exact same thing but when it pops up and the defaults the system uses makes it stand apart.

Oh and yeah - IntelliJ Idea is free and open source now.

FUSE Integration Designer 1.2 is out!

FUSE Integration Designer 1.2 has released. This product marks a significant improvement in the capabilities from the preview release. The product is designed specifically for development on the Progress FUSE products which are based on the Apache Camel, ApacheMQ, Apache ServiceMix and Apache CXF products.

I am very proud of this release. We have built this product from scratch at Progress Software India (amongst many others) but what has been achieved in this product in the short time that we have worked on it makes it special!

The product is an Eclipse SOA development toolkit focused around the FUSE product set and includes a full-featured Enterprise Integration Patterns editor specifically meant for FUSE Mediation Router (Apache Camel). Here's a screen shot of how a route will look. The editor now supports almost all the processors and patterns in Camel. We are actively working on adding additional endpoint support and enhancing it via usability tests and other feedback.

We also have a host of features and improvements we are planning in the coming releases. In addition to creating routes and exporting them to Spring you can also -
a. Deploy them to FUSE ESB (ServiceMix)
b. Run and Debug them - we have full Eclipse debug integration.
c. Import existing routes from Spring into the editor and view/edit them

In addition to the center piece EIP editor the product has some key features for FUSE developers -
a. Support for Java DSL based development
b. Support for ESB 4.x and 3.x deployment (all JBI packaging aspects are taken care of automatically)
c. Support for CXF deployment on ESB in addition to Tomcat
d. JMS Tooling for ActiveMQ (this is actually based on a completely extensible framework so it can support any JMS vendor - more on this in another blog).
e. Improved documentation to help you along with cheat sheets and stuff!

Give the product a spin and let us know what you think here.

Eclipse Development at Progress Software India

I keep seeing google keyword searches for jobs at Progress land at this site. My group is hiring and we are looking for smart and capable Java people who would love to make a dent in the Eclipse world. We are working on FUSE tooling amongst many other things. If you like being challenged and would like to work in a high caliber team - We are hiring!

Some of the things we have worked on in the recent past - SDO, DAS, XSL/XQuery Mapper tools, Refactoring tools, JMS Tooling, Distributed Debugging, Tracking tools, Camel, BPEL, Asynchronous Web-Services, Actional. My group is very active in the local Hyderabad Eclipse community with frequent talks and demo-camps.

We do some pretty amazing ActionScript and Web development work here at PSI (Progress Software India). So if you are a top-notch web developer, we would love to talk to you.

We are based in Hyderabad, Andhra Pradesh. The Progress bill board above is up on a uni-pole on Road# 36 Jubilee Hills all this month. Look at my blog on our previous job posting for some additional details.

Check out Ramesh's blog while you are at it.

Interested? Apply here.

Extending the Java Console

The lack of a good way to be able to interact with the console in Java is extremely annoying. I have been working on a small project (hopefully the content of another blog eventually) which would work best if it had good access to the console. It is frustrating that even after all these years, Java has no good way of writing a decent console based application. I can only guess that the reason for this is perhaps WORA goals are compromised? I have created an extension to the Console API which allows for better access and additional features. This blog entry is about that project.

The limitations
Java has no equivalent of the C getch() API which allows you to read a single character from the input buffer. The only way to get System.in.read() to return is to hit enter after typing in your input which makes it an extremely clunky way to read characters and every character is then on a new line – like a newbie Java program. Java is just not meant for console input unless you are doing simple things like “Enter Name : “.

If you did somehow get past the limitations (and if you know a way how to do this with plain ol’ Java 6.0, please educate me) you get stuck with the lack of ability to be able to control your output. The introduction of Console.printf does add some significant output formatting capabilities, however there is no ability to move the cursor around to position your text right. Say you wanted to overwrite the current word under the cursor when Tab is pressed (like the command prompt does when you want to complete paths) – you can’t do that.
There have been a couple of solutions to these problems - there is a hack which partially works. Maven does this neat thing when downloading anything significant from a repository where it shows the download progress.

Maven does this by using \r at the end of the System.out.print() which allows it to overwrite the previous line. Another hack - If you wanted to do the Tab-should-overwrite-current-word-under-the-cursor thing you could do System.out.print(“\b”) as many times are required to overwrite the letters under the cursor. This would work BUT both these techniques are limited by the start of the current line – i.e. they are unable to go to the previous line which limits their usage.

What is really required is an addition to the Console API in Java. The Console API was introduced in Java 6.0 and provides some much needed additions to Java’s capabilities to deal with character based applications. Console introduces methods to read passwords (without echo) and adds the printf method I talked about earlier. However, it still lacks the ability to read individual characters and to position the cursor and therefore was still insufficient for me.

The solutions
Like every lazy developer, I did Google away for a Java curses or Console implementation. The most promising one I found was JCurses – a Java Curses implementation for Windows and Unix (using JNI).

This is a nice little project that provides the curses API in Java. It provides a bunch of widgets and layouts and containers for creating UI in character mode. It’s nice but that’s not what I wanted. However, it did have a lower level API (that was not recommended for use but that’s just an invitation, isn’t it?) that allowed character input and character output. The input could be retrieved one character at a time just like I wanted but the output forced me to provide an x, y location. That in it self would be fine if I had an idea of where I was on the screen. The API lacked the ability to get and set the cursor location – basically I think the idea was to create character UIs (probably full-screen) so it wasn’t that important in the context of the JCurses project. Also, the output methods did not move the cursor which made the whole thing look and feel rather weird. I wanted something that will make the user retain his feel of the command line – not a character mode UI.

There has been a similar project in the past which seems to have moved or died - at least I couldn't find it - here's the link. Sun has been introducing features bit by bit as mentioned above. Here's the link to the discussion on the password entry. This is nothing close to what I want and continues to have the clunky enter-for-input behaviour.

Then I figured what I only wanted was really a small Console API with supporting classes. I got the Windows SDK and looked up the Console support and Windows has Console API that did exactly what I wanted that would work just fine. Writing the JNI library to get the basic console API wasn’t that hard.

The next step was to have the Java API that provided basic extensions to the Console. It has very few methods –

• to read characters with or without echo
  
• to output characters at the cursor location or at a specified location
• to retrieve the current cursor location
  
• to set the cursor location
  
• to retrieve the screen size.

The Console library has all capabilities to let me do console input and output. What I have is lean and does exactly what I want – a useful Console extension that provides basic capabilities that were missing.

Project - help wanted!
The project is available on Google Code here. I will try contributing back to the JCurses project when I am done. If you are interested look at console.Console. console.ConsoleBuffer provides a higher level abstraction allowing the console to be treated as a text field with an index into the text instead of dealing with the row-column nature of the cursor.

I would like some help with a few things though –

1. I used to be a good C programmer but am significantly rusty so my C code could use a good code review to look for leaks and such or any suggestions on doing thing better.
2. I am basically on Windows so I didn’t write anything for Linux – so someone to provide a Linux port and build would be great.
   
3. I need to get the Maven build working completely. It builds the Java part but I had trouble with the native-maven-plugin to get it compile the native parts. So that is done as a bunch of batch files right now :-(

If someone would like to help me with these please drop me a line. The project is using Apache License 2.0 so is available for re-use in other projects.

If you do use the library and have any feedback, I would love to hear it.

I really think functionality should be added to the Console class in Java. There are a couple of RFE’s in the Java Bug Database that request for more capabilities in the Console API – 6672641, 6552816, 4050435.

Pure Idea Joy

One of the reasons why I love IntelliJ Idea. Look at the text in red below.

package com.msh.ui;

import java.util.ArrayList;
import java.util.List;

/**
 * User: sachinh
 * Date: 28-Dec-2008
 * Time: 17:22:38
 */
public class ParsedCommand {
private List<Property> props = new ArrayList<Property>(5);
private List<PluginInfo> mojos = 
           new ArrayList<PluginInfo>(5);

public ParsedCommand(String cmd) {
parseCommand(cmd);
}

public List<Property> getUnusedProperties() {
for (PluginInfo p : <ctrl+shift+space> fills in mojos) {

}

Just brilliant - the fact that it picks up the right collection field
based on the Iterator's type. I think its called Smart Code Completion.