GWT-Ext: How to show tooltips for the ColumnTree (tree-grid, tree-column) widget

One day, a friend of ours has asked this:

"Hi, how to set the tooltip on the columns of a ColumnTree ? The structure is as follows:
ColumnTree.Column cols[] = new ColumnTree.Column[9]; 
cols[0] = Column("header", 290, "dataIndex");
cols[1] = Column("",50,"dataIndex");
cols[2] = Column("",100,"dataIndex");
cols[3] = Column("",170 , "dataIndex");
cols[4] = Column("",170,"dataIndex");
cols[5] = Column("", 70, "dataIndex"); 
cols[6] = Column("", 120, "dataIndex"); 
cols[7] = Column("", 70, "dataIndex"); 
cols[8] = Column("", 70, "dataIndex"); 
Columns are valued with the TreeLoader ."

The answer cannot be that simple, due to the defunct library GWT-Ext, which isn't under dev for long time. Anyhow, because I used this library first time, and I really like it, I found a way to solve this problem.

The column tree is the implementation of the very known tree-column, or tree-grid widget. This can be editable as well.

So the solution contains 2 files:
- 1. an updated ColumnNodeUI.js that sets the title DOM attribute for each cell with the value of the cell.
- 2. a Java class, called that updates the title attribute of the cell element, after the completion of the edit action.

 You can download these files from here:
- ColumnNodeUI.js
- -- a test class, where you can see how everything is used.


Here's the solution found by our friend Faber:

Hi SCC, I wanted to post my solution on a tooltip using the TreeLoader. I did not want to change the javascript so I did the following:

- a function:

private String getToolTip (Integer value, String tooltip) {
   StringBuilder text = new StringBuilder ();
   text.append ("<div ext:qtitle = \"\" " + "ext:qtip = \"");
   text.append (tooltip);
   text.append ("\"/> "+ value + "</div>");
   return text.toString();

and then inside the JSONObject build my tooltip with data that I want.

StringBuilder tooltip = new StringBuilder ();
MyJSon JSONObject = new JSONObject (); / / JsonObject data
tooltip.append ("Label");
tooltip.append (myBean.getValue ()+"  ");
myJSon.put ("value", getToolTip (myBean.getValue (), tooltip.toString ()));
This obviously is server-side.

Thanks Faber!

Java Swing - Date Picker dialog to select a date

This is addressed to the few Java Swing developers, who may still be out there and looking for cool widgets.

How many times did you need a date picker widget? you know, like the one from the GWT for example, and there are many others available.

Unfortunatelly the Java Swing library doesn't have a built-in one. Anyways, I found a good starting point here, -- which is a very nicely done example, a little incomplete, but still good to go.

Because I wanted this widget to be perfect, I've updated and enhanced and it can do the followings:
  • automatic extract the name of the days and months from the Java locale (not like the original from a properties file).
  • automatic detects and display the first day of the week according with the used locale (not like the original that uses hard-coded only US style).
  • correct the coloring in red of the weekend days (not like original that had only Sundays on red, and Saturdays on gray). 
  • corrected the button images to have all the same size (better header than the original)
  • implemented the "close on away click" feature to easily close the picker dialog when click away.
These are the results of the Java Swing widget:


The first image is a read-only text-field and a button, which will open the date-picker dialog, as seen in the second image.

We can fast scroll though months and years, or quickly select from the 2 combos, and for the days just press on the date, which you want to select.

Hope you like it -- the source code is available here.


PS: you can see this widget at work, in my free application Money On Thread.