David Qiao's Blog » Java and Swing

A great enhancement to the CellStyle feature in JIDE Grids

David Qiao — Tue, 17 Jan 2012 06:55:32 +0000

A plain JTable is boring. People usually want to add some styles such as different colors, different fonts, nice little decorations to the JTable cells to make the table more interesting. Before using JIDE Grids, the only way to add styles is to use customized TableCellRenderers. For each unique style, create a TableCellRenderer and associate it with the table cells either by either mapping it to a data type or override JTable’s getCellRenderer method. For a table with a lot of unique styles, you will end up with a lot of customized cell renderers which is clearly not fun at all.

The CellStyle feature in JIDE Grids provides a hook into the cell renderer creation process. You use CellStyle to pass in some predefined styles, such as font, font style, background, foreground, border, alignments. If you are using a CellStyleTable or one of its subclasses, those styles will be applied to the renderer component before it is used to paint the cell. The DefaultTableCellRenderer is a JLabel. As long as you are okay to use JLabel to renderer the cell, the cell styles feature would work so that you don’t have to introduce customized cell renderers.

There are cases that JLabel can’t handle the painting of the cells. For example, a cell that renders a five-star rating. Clearly JLabel can’t handle it. And it sounds like for sure that you will have to create a customized renderer based on a five-star rating component. But we have another way to do it. Always keep in mind, JTable uses the renderer component to paint the cell. If we can find a way to use our own code to do the painting, we may not need a new cell renderer after all. That’s why we decide to bring the CellStyle feature to the next level by introducing CellPainter.

CellPainter is a simple interface like this.

public interface CellPainter {
void paint(Graphics g, Component component, int row, int column, Rectangle cellRect, Object value);
}

We introduced two types of CellPainters to the CellStyleTable. One is the OverlayCellPainter, the other is the UnderlayCellPainter. We paint the cell in three steps. First, the lower layer, which is painted before the cell content, paints using the underlay CellPainter specified in the CellStyle. The second step is the to paint the cell content using the renderer component, as the table does right now. The last step is to paint using the overlay CellPainter after the cell content is painted. By leveraging this three-step painting, we make a lot of features possible.

The demo below shows both cell painters. The underlay painter is used for the “Last” column. It paints a gradient bar based on the value. The length of the bar matches the value. The color of bar is also changed based on the range of the value. You can paint the five-star rating using this painter too.

The overlay painter can be used to paint something that is over the cell value, i.e., to indicate the value is abnormal, invalid, or should be emphasized etc. You can see the column “Volume” having such an overlay painter where we randomly paint an icon for some cells as an overlay. In the JIDE Common Layer, we have Overlay component which can place an overlay component over another component. It is perfect for JTextField, JComboBox etc. small component to show a validation error. However it is so useful in the case of JTable cells. The CellStyle overlay painter feature is here to fill in the gap. You can now easily display validation errors using this new feature.

Alphanum Sorting

David Qiao — Wed, 07 Dec 2011 22:19:12 +0000

While working on an issue related to the file encoding, I am trying to adjust the file encoding settings in IntelliJ IDEA. I noticed something not quite right about the sort order of the encodings. Naturally the ISO-8859-2 to ISO-8859-10 should appear before ISO-8859-13 and -15. UTF-8 should also appear before UTF-16 and UTF-32. Clearly IntelliJ is doing a straight alphabetic sorting.

We actually resolved this issue a while ago in the open source JIDE Common Layer. There is a comparator called AlphanumComparator under jidesoft.comparator package. (courtesy to David Koelle). As long as you use this comparator, it will sort the strings with numbers correctly according to what users would expect. See below. The list on the left is the straight alphabetic sorting. The list on the right is using the alphanum sorting.

If you are using SortableComboBoxModel or SortableListModel, you can simply call the code below to enable the alphanum sorting.

  sortableComboBoxModel.setComparatorContext(AlphanumComparator.CONTEXT);

and

  sortableListModel.setComparatorContext(AlphanumComparator.CONTEXT);

ExpandedTip – A must-have feature for your JTree and JList

David Qiao — Wed, 23 Nov 2011 06:57:38 +0000

When I started to use IntelliJ IDEA back in 2002, I noticed two simple but neat UI features.

The first one is the Searchable feature (type and search in a list or a tree or a table), an idea that we shamelessly copied (and enhanced), and several years ago made part of the open source JIDE Common Layer. See below.

The second feature is where tree nodes or list rows expand to a tool-tip when the text is wider than the scroll pane. We finally implemented this feature by leveraging some source code from the IDEA community edition which was open sourced under Apache license. We implemented TreeExpandedTip, ListExpandedTip and TableExpandedTip to support JTree, JList and JTable respectively. In order to make this feature easier to use, we completely changed the API and also enhanced it so that it can handle any component inside a JScrollPane. In the new ExpandedTipDemo, you will find a demo to show a whole image as an expanded tip.

The newsletter stops right here. But I would like to discuss in a little more detail.

Why the expanded tip feature is important?

I love IntelliJ IDEA. If there weren’t IDEA, I probably won’t be here making JIDE components. I am not kidding. I still remembered how happy I was when someone referred it to me back in 2001. Half an year later, I found JIDE using IDEA as my only Java IDE. Sometimes I asked me why I love IntelliJ IDEA so much. One of the reasons is probably IDEA’s usability is great, much better than that of NB or Eclipse. The two features I mentioned above are such examples.

Does your application have a JList or JTree that have many rows (say more than 20) but you didn’t bother in implementing the Searchable feature? If the answer is yes, it means you didn’t put in enough attention to your application’s usability. Your users will suffer from your ignorance as they will have to scroll up and down in tons of items to find the item they are looking for.

The same argument is there for the expanded tip. When a user can’t see the whole node, he/she has to move the mouse all the way to the bottom horizontal scroll bar, drag it to see the rest of the content, and probably need to drag back again in order to expand/collapse the tree node. The trouble could easily be avoid by using the expanded tip feature. Your users will surely appreciate if you can pay attention to those usability details.

The action item for you today is to find all your JList, JTree and JTable in your application and install the ExpanedTip. Just one line: ExpandedTipUtils.install(a JList/JTree/JTable). Let’s see how your user will love it.

What’s next?

I think the feature is fully implemented for the JList and JTree. However it is still half done for the JTable. There are two parts to show clipped content in a JTable – the cell level and the row level. As you can see in the screenshot above, we implemented at the row level. User still can’t see the full content of the cell (such as AMER INTL…). Our suggestion right now is to show the full content of the cell using a regular tooltip. It can done by setting the tooltip for the cell renderer component. See below. However I still hope we could implement the expanded tip to cover the extra effort.

Note: The ExpandedTip is available since JIDE 3.3.0 release. It is part of the JIDE Components product. You can a webstart demo at here to see it in action.

Having Fun with StyledLabel

David Qiao — Sat, 10 Sep 2011 19:07:12 +0000

I’ll start with a question. Using Java Swing, how do you implement something like these?

All three examples are very common in a real application.

The first one is to show a ™ trademark sign next to Java. It is the same thing for a ® (registered trademark) sign.
The second one is a math formula.
The third one indicates the text has an error.

We want to use both the red color and a waved underline to indicate the error. Keep in mind, from accessibility point of view, only the red color is not enough because of color blindness.

Please continue reading the rest of the article at http://www.jidesoft.com/articles/StyledLabel.pdf.

Slides for JavaOne 2010 – The Merging Point of Android and Swing

David Qiao — Thu, 23 Sep 2010 19:23:48 +0000

Thanks everyone for coming to my session today. As promised, I attached the slides I used in the session below. The source code will be available next week.

The Merging Point of Android and Swing (PowerPoint)

The Merging Point of Android and Swing (PDF)

Introducing MarqueePane component to the open source JIDE Common Layer

David Qiao — Thu, 18 Jun 2009 17:00:35 +0000

In the 2.6.6 release, we introduced a small cool component called MarqueePane to JIDE Common Layer. It is open source so please fee free to give it a try. You can use it to auto-scroll any component. It is perfect for use cases such as an auto-scrolling stock tick display or an auto-fliping status, You can run webstart demo to see MarqueePane in action.

What’s wrong with Apple

David Qiao — Tue, 16 Jun 2009 14:08:29 +0000

Apple just released a new JDK6 on Mac. It is suppose to be a good news but it turned out to be a nightmare. They changed the package structure of Aqua L&F. Many classes that were under apple.laf package are now under com.apple.laf. This breaks pretty much everything we tried to make JIDE looking decent enough on Mac. Even more, I could change our code to use the new classes but how to make it compatible with both old and new JDK? Two sets of JIDE clasess or even two release packages? It is really werid to see Apple did such a strange thing in a minor JDK update (maybe make sense for JDK 7). Hope someone from Apple Java team can give me an explantion.

Want to share your table screenshots?

David Qiao — Tue, 03 Mar 2009 23:41:23 +0000

I got a technical session for JavaOne 2009 to talk about JTables. I knew JTables and JIDE Grids are used very widely among JIDE customers. So I am very eager to collect some screenshots from real applications to show what tables look like in the real world. It doesn’t have to be JIDE Grids. It could be a JTable with customization or JXTable or your own table component. I will dedicate a few minutes from the session to show those screenshots to the audience. I will of course give the credit to you. If you are interested, please email me david at jidesoft.com. I am looking forward to hearing from you!

Arrow key support in ButtonPanel

David Qiao — Sun, 22 Jun 2008 04:44:59 +0000

There is one missing feature in ButtonPanel. That’s the arrow key support. On Windows (probably on Mac as well), people get used to use left or right keys to navigate among buttons on a horizontal button panel or up/down keys for vertical button panel. However Swing doesn’t have that. For example, in the JOptionPane, arrow keys don’t change button focus. So I decide to add this feature. it has about 200 lines simple code. I included it below. The javadoc tells you how to use it. It is already checked in to JIDE Common Layer so feel free to check it out and use it. JIDE’s ButtonPanel called it already. JideOptionPane, since it uses ButtonPanel, also works beautifully.

Slides and demo source code for my JavaOne 2008 BOF session

David Qiao — Fri, 06 Jun 2008 05:52:25 +0000

As I mentioned before, I had an interesting BOF session for the this year JavaOne. The title is “Workaround Swing Bugs”. Even though it was conflicted with the afterdark party, there was still a decent number of people showed up. Since several people asked for it, I post the slides and the demo source code below.

Slides for BOF-5133
Demo Souce Code for BOF-5133