After having worked with Microsoft Silverlight and XAML lately I realized how simple XAML makes it to do stuff that I spent hours writing code for in the Ribbon. For example; rounded corners, gradient borders, multi-gradient fills, etc. It’s a pleasure to work with, easy to change, and it moves you forward at a good pace – and that’s how I feel it should be. I doubt anyone would download the Ribbon source as it is now, look at the render classes and think “great, I’ll make a change riiiight here”, it’s just too complicated and non-customizable. A user wanting to change colors would have to spend hours, days even, just to figure out what pixel is drawn where, and when I look at the code now, I get the same feelings.

Instead of continuing work on the Ribbon to finish “the mess”, I decided that if it was ever going to finish the project and take it out of Alpha, I was going to do all the rendering stuff the right way. And thus started a little test project with Brushes with the intention that if I could make things as easy as writing XAML, I could write all the Ribbon widgets in no-time.

Brushes

A Brush object in XAML (and in a lot of other languages) is like a paint brush, it defines a direction and a stroke, colors, etc. The Ribbon basically uses a whole ton of Brushes.

Here’s a quick list of the things that the Ribbon currently uses lots of:

• 2-color and Multi-color gradients in Horizontal and Vertical orientation, there are no diagonal or radial gradients (although brushes in XAML support any angle).
• “Border” controls that contain other controls (pretty much all controls have some sort of border around them). A Border control in WPF is a control that can contain only 1 other control, and it can display a border and a background and allows for rounding of the borders.
• Various paddings and margins between controls to space them out between one another.
• Colors, colors and more colors.

If you think about it, that’s pretty much any control in an normal GUI library as at some level of the OS, there will be a programmatic “pen” that is drawing everything you see, pixel by pixel. Everything built on top of that is convenience to the user. And how many people know how to programatically draw a gradient between 2 colors if there isn’t an API to do it with? Probably very few.

(If you want to see a fully functional Ribbon in Silverlight (built on XAML) do a google search for “SandRibbon”. I’d link to it here but it’s commercial and costs a fortune, so I don’t feel like promoting it with a cross-link.)

Multi-color Gradients

My “Pseudo” code that I started from to “realize” this was the following:

LinearGradientBrush yrb = new LinearGradientBrush(new DPoint(0.5, 0), new DPoint(0.5, 1));
yrb.addGradientStop(new AlphaColor("#FFfff900"), 0);
yrb.addGradientStop(new AlphaColor("#FFf90005"), 0.5);
yrb.addGradientStop(new AlphaColor("#FF1100ad"), 1);

It’s very WPF/XAML, and what it says is “Create a brush that will draw a gradient vertically (each DPoint is x/y coordinates of how the fill should draw), add 3 color stops, one at 0%, one at 50% and one at 100%”.

XAML, by the way, for a typical LinearGradientBrush looks like this:

<LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0" x:Key="ToolbarButtonBackgroundStrokeNormal">
     	<GradientStop Color="#FFfff900" Offset="0"/>
        <GradientStop Color="#FFf90005" Offset="0.5"/>
        <GradientStop Color="#FF1100ad" Offset="1"/>
</LinearGradientBrush>

If we were to do this in Photoshop it’d look exactly like this (on a 400×400 canvas):

To support multi-color gradients when using pattern fills (as SWT doesn’t), I had to write some code that split each section that I intend to fill into smaller rectangles and fill each one. Each section is 2 colors. So in the above case, we have 2 patterns we need to create, one from 0% to 50% and one from 50% to 100%. In the picture this would be from 1 to 2, and from 2 to 3.

Implementing it wasn’t that hard, and despite the code not being that long I think it’s easier you look at the source itself if you want the details as it’s a bit spread out. The source is at the bottom of the article.

A SWT Border Control

The “Border” control in WPF takes a few interesting attributes. One is the Brush that is used to fill the border, the second is the Brush used to fill the background. Then it allows for a setting the border “roundness”, the padding and the margin, and a few other things. All of that is mostly getters/setters and in the end we will have a GraphicsObjectRenderer class that deals with actually drawing it. If there was a border control in SWT it might look a bit like this:

Border b = new Border(parentControl);
b.setBorderBrush(ourBorderBrush);
b.setFillBrush(ourFillBrush);
b.setBorderThickness(1);
b.setCornerRadius(20);
b.setWidth(100);
b.setHeight(100);
b.setMargin(new Margin(50));

Pretty straight forward.

The result from running this code looks something like this:

Oh no, Issues…

This is how far I got before I hit a wall. I actually started writing the article as I wrote the code because I was quite excited how seemingly well it worked. So what halted me? A few bugs in SWT. Normally a lot of things can be worked around if they don’t work 100% as intended, however, the bugs I came across were not of that type. The main issues are as follows:

• Pattern fills in SWT start drawing the pattern in the wrong place. I’ve filed a bug for this which can be found here. This one is rather critical as most of the brush drawing depends on it.
• A rounded rectangle is not drawn in the same way as a round rectangle, causing the border around it to be in weird places around the rectangle itself. An old bug is filed here.
• Other GC draw-related bugs.

Conclusion

Probably not the conclusion you or I wanted, but as I see it, I cannot really continue this project until the bugs are fixed (or worked around), and considering GC-related bugs are probably low on the fix-list, the Ribbon will have to sleep for a while longer, along with this project. AWT has a very good MultipleGradientPaint implementation and I successfully manged to convert AWT drawings to SWT, but the AWT code is rather slow and converting it over is also slow, so it’s not really an option.

Code

If you want to play with the code I have so far, you can download it here. Under the “test” package directory you’ll find various classes. BorderTester.java is the main test class. The code is truly “as is”, it’s just zipped up from what I had at the time I ran into issues.

Download Source

The code for this article will let you print pretty much any SWT table widget of your choice as all you need to do is wrap your table in an interface and off you go. But since this is an article, let’s stick to the plain old SWT table for the sake of the demo. I will mostly go over important snippets of the code and the rest you can download and re-use (download link is at the bottom of the article).

Let’s list a few things we want to achieve with our implementation:

• Print preview (PaperClips gives us most of this already).
• The option to print either just a selection or all items.
• Customizable header and footer.
• Printing table with column sizes as they are in the table.
• Options to specify if headers are printed, where lines are drawn and so on.

The table that we intend to print for this article looks like this (just run the Tester.java class in Eclipse):

We use Snippet38 and add a button at the bottom for printing.

Understanding Paperclips

It’s probably ideal that you understand the PaperClips syntax before you keep reading. PaperClips has certain letters and things that let you specify column widths, how things span and wrap etc. Please do a quick scan of this page if you are unfamiliar with the syntax. It will take no more than a few minutes to learn, it’s that easy.

Creating a GridPrint

As mentioned, the GridPrint class is basically a class for printing grids. It will allow you to set things such as columns, headers etc. Think of it as a table widget, but as if it was drawn on a piece of paper.

Our main class that will handle all the printing will be called GridPrinter.java, and the constructor looks like this:

public PrintResultCode printTable(IGenericTable tableImpl, boolean printSelectionOnly, boolean showPreview, String docTitle, final Shell parentShell) {
 ...
}

The IGenericTable is an interface that you use to wrap the SWT table you want to print. It contains simple methods such as getting the name or width of a column, or an item on a specific row (methods that most table implementations already have). The second attribute defines whether everything is printed or only what the user has selected is printed. The third defines if we show a Print Preview dialog or just print straight to the printer. The fourth is the title of our document that we are printing and finally it’s the shell that will be the parent shell of the print preview dialog (if we are previewing).

Now that we have all the “data” we need, the first thing we want to do is to create the column headers. This is done via a very short loop;

for (int i = 0; i < cols.size(); i++) {
    String name = concat(tableImpl.getColumnTitle(cols.get(i)), widths.get(i), concatGc, headerFont);
    print.addHeader(new TextPrint(name, _headerFontData));
}

We get the table column text and then concatenate it if it’s longer than the actual width of the column itself (just like the table does as a widget). print is our GridPrint, and to that we simply say “add this header”, and then create a TextPrint with the name and our specified header font. A TextPrint can be thought of as a basic cell that contains text with or without a font. Do note that pretty much everything is a “print”, so you can add a GridPrint to a GridPrint to a GridPrint etc. You get the idea.

Now that we have our table column header added, let’s add the cell data that goes below.

for (IDataObject gi : sel) {
    for (int i = 0; i < cols.size(); i++) {
        String colText = gi.getColumnText(cols.get(i));
        if (colText == null) {
            colText = "";
        }
        String text = concat(colText, widths.get(i), concatGc, cellFont);
        print.add(tp(text, _cellFontData));
    }
}

It’s nearly identical but instead of adding it as a header to the GridPrint we just add it normally. We do the same concatenation as in the header as we want to print exactly what the table looks like (so if the user resizes a column in the table widget, that’s the size that is used for the printed version as well). The sel array represents all selected items. If we called our constructor with the option to print all items, it will contain all items, and if we called it and said “only print the selected items”, it will contain those. The code also contains logic for spacing out cells, so if you were to select individual cells like this…

# - - # - -
- # # - - -
- - - - - #

… it would print it in the way you would expect it to.

Multiple Pages and Large Prints

As the code is not a human and has no idea of how big your table actually is, it’s quite possible it spans multiple pages both horizontally or vertically. A GridPrint does not handle this by default. But remember that pretty much all print-classes can be children of each other? To support large prints (basically anything beyond the size of a single printed sheet of paper), we need to wrap our page (the GridPrint) in a BigPrint. Just by doing that via a simple…

BigPrint big = new BigPrint(print);

… we can now support multiple pages. Easy wasn’t it?

Headers, Footers and Spacing

Normally you will want headers and footers on the printed paper. The header tends to contain your company logo and the document title. The footer usually contains what page it is and perhaps a date or such. To accommodate this, there is a PagePrint class that will let you customize all of these aspects. To use it we want that to be our “outermost” parent, so the order is: PagePrint -> BigPrint -> GridPrint.

Here’s how we create the PagePrint:

PagePrint pp = new PagePrint(new PrintHeader(_printHandler, docTitle), big, new PrintFooter(getFooterText()));
pp.setHeaderGap(9);
pp.setFooterGap(18);

In the constructor, we tell it “here’s our header, our BigPrint and our footer”. We also tell it how much spacing we want between the header/footer and the content of the page. It’s usually nice to space them out slightly so it’s not too packed together.

The header and footer classes are both classes that implement the PaperClips PageDecoration interface. They’re very simple to use and only require one method. All this method forces you to return is a “Print” that represents your header (or footer). They can be of any print-class you like, a GridPrint, a TextPrint, etc. For example, here’s our header:

@Override
public Print createPrint(PageNumber arg0) {
    DefaultGridLook dgl = new DefaultGridLook(0, 3);
    GridPrint gp = new GridPrint("p, C:D:GROW", dgl);
    FontData fd = Display.getDefault().getSystemFont().getFontData()[0];
    fd.height = 14;
    fd.setStyle(SWT.BOLD);

    if (_handler.getActivePrintLogo() != null) {
        gp.add(new ImagePrint(_handler.getActivePrintLogo().getImageData(), Display.getDefault().getDPI()));
        gp.add(new TextPrint(""));
        gp.add(SWT.CENTER, new TextPrint(_title, fd, SWT.CENTER), GridPrint.REMAINDER);
    }

    return gp;
}

In this code we create a new “Grid Look and Feel” (this is a PaperClips class that simply draws borders around cells etc). Then we create a very simple GridPrint that has 2 columns. The first is in a preferred size as we don’t know the size of the image that will go there (there might be no image even). The second takes up all available space and is centered so that the text shows the title of the document in the middle, but we push it down a row to make it truly centered or the size of the image would push it off.

Previewing the Print

Once we have our PagePrint all set up it’s finally time to print! PaperClips has a “ui” package that contains a PrintPreview dialog. In the downloadable code you will find that this class has been wrapped as I wanted button images in the dialog to be customizable. To show our print preview dialog we call:

PrintPreviewDialog ppd = new PrintPreviewDialog(pp, parentShell, _printHandler);
ppd.open();

(The PrintHandler is an interface that lets us define what images we use etc)

The result is more or less the following (when fully zoomed out):

And when zoomed in a bit:

Do note that even if the preview may not be 100% perfect look-wise (pixelated etc), the printed version will come out fine.

Conclusions

With PaperClips you can go from zero print-functionality in your application to some pretty fancy reports in just a few hours of work. That’s its #1 strength and it’s a very strong argument for using PaperClips. Sure, you can create very fancy reports using Eclipse BIRT or JasperReports (which has sadly gone mostly commercial). For “normal printing” however, there’s no reason to dig into a big reporting engine, just stick to PaperClips!

Download The Code

The code for this article is an Eclipse Project that contains everything necessary to run what you have seen in this Article (you may need to adjust the SWT-jar import paths). It may seem like there’s a lot of code but in reality it’s mostly some extra interfaces to make things customizable. That way it’s not just article code, but code you can actually use. That’s how I prefer to write articles. Most people want as much customization as possible, and for those that don’t, they can take out the parts that they need.

Download Code

Happy printing!

(PaperClips version 1.0.4 was used in this article).

We could custom draw everything which would allow us more control over the widget, but for the sake of this article lets stick to using basic SWT components inside a normal Shell that we will make a bit prettier than your typical SWT Shell.

(Do note this has only been tested on Windows, it’s quite possible tweaks are necessary for other platforms).

The Shell

What we want is a Shell that stays on top of our application (but not on top of all applications) and doesn’t steal the active focus or else it would show up in your task manager or move focus away from where the user is now. We also don’t any normal Shell “trim” borders, we’ll draw our own. Creating it is easy as all of our requirements are available via SWT flags. Thus we can create the Shell as follows:

_shell = new Shell(Display.getDefault().getActiveShell(), SWT.NO_FOCUS | SWT.NO_TRIM);

As we have SWT widgets inside our shell and we intend to use a gradient background on the shell itself, all the widgets need to be transparent. This is done by setting the Background Mode on the shell to SWT.INHERIT_DEFAULT. This tells the widgets to inherit the background of their parents, and gives us what we want. So after we create the shell we simply call;

_shell.setBackgroundMode(SWT.INHERIT_DEFAULT);

So how do we get a gradient background on a shell? It certainly don’t support it by default. You can set a foreground and a background but that’s about it. The trick is to paint an image with the colors we want and use that as the shell’s background. To set it at the right time, we listen to the SWT.Resize event on the shell and do it then with the following code;

_shell.addListener(SWT.Resize, new Listener() {
    @Override
    public void handleEvent(Event e) {
	try {
	    // get the size of the drawing area
	    Rectangle rect = _shell.getClientArea();
	    // create a new image with that size
	    Image newImage = new Image(Display.getDefault(), Math.max(1, rect.width), rect.height);
	    // create a GC object we can use to draw with
	    GC gc = new GC(newImage);

	    // fill background
	    gc.setForeground(_bgFgGradient);
	    gc.setBackground(_bgBgGradient);
	    gc.fillGradientRectangle(rect.x, rect.y, rect.width, rect.height, true);

	    // draw shell edge
	    gc.setLineWidth(2);
	    gc.setForeground(_borderColor);
	    gc.drawRectangle(rect.x + 1, rect.y + 1, rect.width - 2, rect.height - 2);
	    // remember to dipose the GC object!
	    gc.dispose();

	    // now set the background image on the shell
	    _shell.setBackgroundImage(newImage);

	    // remember/dispose old used iamge
	    if (_oldImage != null) {
		_oldImage.dispose();
	    }
	    _oldImage = newImage;
	}
	catch (Exception err) {
	    err.printStackTrace();
	}
    }
});

The Contents

Our shell consists of 3 sections, an image at the top left (which is a normal CLabel). Then a label that contains the header text (also a CLabel), and finally a label which represents our message (a normal Label). We use a Label at the end instead of a CLabel as Labels support wrapping and multi-lines better than the CLabel does. You could of course use pretty much any widgets you want. Here’s an outline of what section each label covers:

We use a GridLayout with some 5px margins (except at the top) and the widgets are created normally without any special magic, so I won’t show that code here (it’s all at the bottom for you to download).

Some Eye Candy – Fading

Shells support alpha values as of SWT 3.4, so we’ll use this to make our “appearing” and “disappearing” a bit prettier. All we need to do to make a shell fade in and out is to have a thread that loops and increases/decreases the alpha channel value for the shell. As we need to be on the Display thread to do this it’s easiest to do it all via a runnable that we let the Display object run for us at a given interval.

We need to remember to continuously check to see if the shell is disposed as it can happen when we’re on a thread. When we’re finished fading in, we want the shell to stay visible for a certain amount of time, and then we want to fade out. So basically the chain is this:

• Create shell
• Fade in shell
• Stay visible for X seconds
• Fade out shell
• Dispose shell

All these timers are more or less similar in terms of how the code looks, so I’ll show one example here and for the rest you can look at the complete source downloadable below. We have some global variables here that should be explained.

• FADE_IN_STEP is how much we increase the alpha value for each iteration.
• FINAL_ALPHA is a value that declares what the final alpha value will be for the shell when it stays visible. I find that a slightly transparent shell gives a better effect, so by default this value is 225 (out of 255 which is a solid [opaque] shell).
• FADE_TIMER is how long we wait until increasing the Alpha value again. When the shell has reached it’s max-alpha value we call the startTimer() method, which is a thread that sleeps for a certain number of seconds before calling the fadeOut() method.

private static void fadeIn(final Shell _shell) {
    Runnable run = new Runnable() {

        @Override
        public void run() {
            try {
                if (_shell == null || _shell.isDisposed()) { return; }

                int cur = _shell.getAlpha();
                cur += FADE_IN_STEP;

                if (cur > FINAL_ALPHA) {
                    _shell.setAlpha(FINAL_ALPHA);
                    startTimer(_shell);
                    return;
                }

                _shell.setAlpha(cur);
                Display.getDefault().timerExec(FADE_TIMER, this);
            }
            catch (Exception err) {
                err.printStackTrace();
            }
        }

    };
    Display.getDefault().timerExec(FADE_TIMER, run);
}

Stacked Notifications

There’s one last thing we want to support, which is stacked notifications. Assume our notification shell’s entire life-span is about 5 seconds, what if we have another notify call before the first one has finished showing? We could dispose the first shell and replace it with the new one of course, but a much prettier approach is to simply move the previous shell up, and show the new notification below it. The effect of this is something like this (this screenshot was taken just as the old shells started to fade out, hence the higher alpha on them):

What we do to achieve this effect is rather simple. Every time a notification shell is opened, we keep a reference of it in a static array of shells. When it’s faded out (and disposed), it’s removed from the list. Thus, when a new shell is created we simply check to see what’s already in the array and then set the location for each old shell in the array to -heightOfNewNotificationShell (so to speak). Thus, the old shells move up to make room, but continue their fade-in/fade-out cycles just like before.

Further Improvements

Everything could be made prettier than it already is of course, perhaps you want an “X” close button, or different colored text, or rounded shell corners. None of that is in the current code, but the code should give you enough to go on to implement most of that without any major problems.

Also note that I currently use Display.getDefault().getActiveShell() for the parent shell of the popup. You may want to refactor it to use a more permanent shell as otherwise a disposal of whatever the parent shell was whenever the popup was displayed will cause the notification to dispose as well.

The code is not perfect, it’s an example to build on (if you so wish).

Download Code

I’ve created an Eclipse project with the code and also the ImageCache/FontCache/ColorCache classes I use in the code (all they do is keep already used images etc in memory so that they don’t need to be re-created). There’s also a jar with the images I’ve used in this example. If you like them and want more like it, there’s a massive image pack with exactly these icons and more here: Gnome Colors Icons.

Do note you may need to adjust your CLASSPATH settings for the project to reflect the location of your SWT jars.

To run the code, simply run the Tester.java class and push the big button to create a notification. Push it again before the first one fades away to see the stacking. A random image will be used every time you push it.

DOWNLOAD CODE

Conclusion

Hopefully this gives you an insight into how to create a “custom widget” (without much custom painting). Have fun!

You probably never paid much attention to the disposal of widgets except that “master widget” you call dispose() on (usually a shell).. and just because of this, it’s time to dig into the “why”, “what” and “no kidding” of MenuManagers as there are undoubtedly a few of the “no kidding” unless you are already fully familiar with them.

If you look at the MenuManager API, you’ll see an often overlooked dispose() method. MenuManagers need disposal?! Yep, they sure do. Here’s a seemingly harmless sample snippet. We create a Shell, a Toolbar, on which we create a MenuManager, and then we dispose the toolbar. You’d think that the MenuManager would get disposed also wouldn’t you? It doesn’t. Where is it? In memory.

import org.eclipse.jface.action.Action;
import org.eclipse.jface.action.MenuManager;
import org.eclipse.jface.action.ToolBarManager;
import org.eclipse.swt.SWT;
import org.eclipse.swt.layout.FillLayout;
import org.eclipse.swt.widgets.Display;
import org.eclipse.swt.widgets.Shell;
import org.eclipse.swt.widgets.ToolBar;

public class MenuManagerTest1 {

    public MenuManagerTest1() {
        Display display = new Display();
        Shell shell = new Shell(display, SWT.SHELL_TRIM);
        shell.setLayout(new FillLayout());

        ToolBarManager tbm = new ToolBarManager(SWT.FLAT | SWT.RIGHT);
        tbm.add(new OneAction());
        ToolBar tb = tbm.createControl(shell);

        MenuManager mm = new MenuManager("Test Menu");
        mm.add(new OneAction());
        tbm.setContextMenuManager(mm);

        // dispose shell, this will dispose all sub-widgets as well
        shell.dispose();

        // check status of our stuff
        System.out.println("Toolbar is disposed? - " + tb.isDisposed());
        System.out.println("Menu is disposed? - " + mm.getMenu().isDisposed());
        System.out.println("ToolbarManager contains what? " + tbm.getItems());
        System.out.println("MenuManager contains what? " + mm.getItems());
    }

    class OneAction extends Action {
        public OneAction() {
            super("Test Action");
        }

        @Override
        public void run() {
            System.out.println("Action was run");
        }
    }

    public static void main(String[] args) {
        new MenuManagerTest1();
    }

}

The printout when running this will look like;

Toolbar is disposed? - true
Menu is disposed? - true
ToolbarManager contains what? [Lorg.eclipse.jface.action.IContributionItem;@16fe0f4
MenuManager contains what? [Lorg.eclipse.jface.action.IContributionItem;@19d0a1

Ok, so that's not the most intriguing printout ever, but it's mostly to show that the items are still there. The reason a manager doesn't get disposed should be pretty obvious: It's not a widget, it has no disposable parent (which would also have to be a widget), thus, it exists as long as you let it exist. There is of course a reference to the actual Menu inside the MenuManager, which is disposed as you can see above.

So why aren't MenuManagers auto-disposed in some other fashion, like when the menu is disposed? For good reason. You can create them without a parent widget which means you can keep them around and re-use them like a Factory and because of this, there is no auto-dispose when the menu is hidden. It's actually to make life easier for you even if it sometimes doesn't feel that way.

Disposing MenuManagers

There's two ways you can go about dealing with disposing your MenuManagers. Here's the first one (which might be obvious);

Assume you have a few MenuManagers in your ViewParts or EditParts. If you are creating them inside methods, you will want to refactor them out and create them only once for your class. They should be accessible and re-used throughout the life of the ViewPart and disposed when the ViewPart is disposed. This is very important! If you do not dispose it, it will not be gone, and you will most likely end up with a memory leak (as the above snippet showed). Here's a typical ViewPart dispose() override:

@Override
public void dispose() {
        try {
            if (_toolbarMenu != null) {
                _toolbarMenu.dispose();
                _toolbarMenu = null;
            }

        }
        catch (Exception err) {
            // do something with exception
        }

	    // remember to keep it going!
        super.dispose();
}

The second option is for the "show once" menus that you may have. How do you dispose those? Ideally the same as #1 but if you really have to dispose them differently, the easiest way to do it is to "auto dispose" them once the user has seen the menu and closed it or selected something from it. You will most likely create your Menu object from a call to menuManager.createContextMenu(...), so after this when you have the Menu object available, you do something like this;

final MenuManager mm = new MenuManager("Menu");

// ... various manager-related code here

// create menu object on widget
Menu menu = mm.createContextMenu(parentWidget);

// add a listener that disposes the MenuManager once user has seen the menu
menu.addMenuListener(new MenuListener() {

	 @Override
	 public void menuHidden(MenuEvent e) {
	     // dispose asynchronously or it'll dispose too fast and menu item clicked won't be run
	     Display.getDefault().asyncExec(new Runnable() {

		 @Override
		 public void run() {
		     mm.dispose();
		 }

	     });
	 }

	 @Override
	 public void menuShown(MenuEvent e) {
	 }

});

It's not the prettiest solution, but it works. Ok, so the disposal is covered now, no more leaks. Yay for us!

There is one more thing to bring up that you may/may not encounter, but if you do, it would probably be a head-scratcher.

Dynamic Menu Items

Here's a scenario that happened to me and at first seemed to be a bug:

We have a lot of tables in our application. We also have a section where users can create their own custom filters. These filters show up in our menus when you right click a table or open a menu on the toolbar. When a filter is in use, the corresponding menu item for that filter is checked. Each filter is wrapped in an IAction that overrides equals() and hashCode() that both check to see if the wrapped Filter object is the same. Thus, any action using the same filter object will return true in the equals() check.

We have an IMenuListener on the menu, so whenever the user opens the menu, just as it's being shown, we remove all old menu items in the "Filters" menu and re-create them (as filters may have changed by the user without our knowledge). We then "check" (checkbox) them according to what filters are active in the table. All this works fine, and here's where the issue arose;

We also have a MenuManager on our toolbar (ToolbarManager) associated with the table. This toolbar menu shows the exact same filter menu when popped up, through the same methods. The issue is easiest described through this chain of events...

1. User opens right click filter menu, selects a filter, item is checked, filter is applied to table.
2. User looks at toolbar menu, sees filter checked (do note this is the first time the toolbar menu was opened). Closes menu without selecting anything.
3. User opens right click filter menu again, selects same filter as before (the now checked one). Item is no longer checked, filter is removed from table.
4. User opens toolbar menu again, sees the recently cleared filter still checked(!). At this point it will always stay checked. Had we looked at the menu when stuff was unchecked, it would forever be unchecked.

I debugged this for a long time until I to my horror realized that despite me calling removeAll() and re-creating all MenuManager items in the "Filters" menu on each popup, internally, in the Menu widget itself, the removeAll() on the MenuManager removed nothing on the Menu widget. All MenuItems were still there! Hmm, what was going on? what was I missing? Why didn't removeAll() remove all MenuItems as well?

I debugged some more and noticed some code inside the MenuManager source code that looks like this:

for (int i = 0; i < mi.length; i++) {
    Object data = mi[i].getData();

    if (data == null || !clean.contains(data)) {
	mi[i].dispose();
    } else if (data instanceof IContributionItem
	    &amp;&amp; ((IContributionItem) data).isDynamic()
	    &amp;&amp; ((IContributionItem) data).isDirty()) {
	mi[i].dispose();
    }
}

This loop first of all removes all items that are not the same as before (that are in the clean array), that's good. But as I checked what got disposed, our filter items were never removed... as they are the same as before! Aha! So the second part of the if-statement checks to see if the item is Dirty or Dynamic. This was the first I had heard of Dynamic menu items and it felt like I had read the API through and through many times. The API for isDynamic() says:

Returns whether this contribution item is dynamic. A dynamic contribution item contributes items conditionally, dependent on some internal state.

Cryptic to say the least, and easily overlooked as it's very non-descriptive, but with the above looping code and how we deal with these special actions - it kind of fits. We depend on the items having checkmarks which depend on an internal state (which is; if the table filter is active or not). The MenuManager can't figure that out by itself of course, so we need to help it. The solution to this problem is obvious at this point. If isDynamic() returns true it will be disposed for us, so we need to implement that and return true.

In our code more or less everything is an IAction, for our FilterAction we create a DynamicFilterAction class that extends ActionContributionItem and then we override isDynamic() and return true.

This ensures that there is no "old" items in the menu (as now our Dynamic menu items get disposed) when we create the new one, and as such, the "checkbox issue" goes away and everything works as intended. The final code looks something like this;

class DynamicFilterAction extends ActionContributionItem {

        private FilterAction _action;

        public DynamicFilterAction(DataFilter df) {
            super(new FilterAction(df));
            _action = (FilterAction)super.getAction();
        }

        public void setChecked(boolean checked) {
            _action.setChecked(checked);
        }

        @Override
        public boolean isDynamic() {
            return true;
        }
}

Final Words

Hopefully this gives you a better insight into the rather simple but tricky world of MenuManagers and how they work. Taking good care of them will ensure that you at least don't have to worry about them sticking around in memory or doing things you didn't expect.

Happy menu managing!

Glazed Lists is an API built on top of java.util.List which adds a notification framework and allows you to “stack” or “chain” lists together. This in and by itself may not sound so exciting. What this gives you though is the ability to take a Sorted list, stack it with a Filtered list, stack it with a Unique list, stack it with a asynchronously updated Unique list (and keep stacking), and whenever you modify the source list, it automatically tells the other lists in the chain to update so that their lists are always up to date. Last but not least, the list reports back to you and tells you to update your view with a specific list of changes. So imagine this “chained list” is the input for your TableViewer and perhaps you’re starting to see the potential.

I’ve been using Glazed Lists continuously for the last year, and it’s no short of astounding how powerful it is. I’ve used them on JFace TableViewers, The Nebula Grid widget, and the great rising-star NatTable which deserves it’s own article down the road (the only table widget I’ve found that can handle huge amounts of data without choking). On each of those widgets it was only a matter of creating a couple of smaller classes, a few lines of code, and I had the most powerful sorting and filtering API at my fingertips, ready for anything upper management could throw at me in terms of features. So often I see posts on the Eclipse Newsgroups asking about multi column sorting, and usually few concrete replies. “Glazed Lists” would be my reply.  To give an idea of what kind of sorting/filtering you can do, here’s a snapshot of  some of the available list types:

Sorted List. Filtered List. Unique List. Transformed List. Range List. Threshold List. Collection List. Freezable List. Popularity List. Separator List. Sequence List. Transaction List. Observable Lists.. and the list goes on.

So instead of talking about how great they are in an entire post, how about some example implementations and actual code? Alright, let’s get to it!

To make this article “worth it” for everyone, I will cover implementing Glazed Lists on no less than 3 table/grid widgets. The standard JFace TableViewer (which is the least feature rich table component out there as it uses the SWT Table). The Nebula Grid widget (which is feature rich and very good, but has a big memory footprint on large tables) and the NatTable widget (as it will undoubtedly rise to fame soon with the next few versions (once some of the bigger bugs are ironed out)). Before you start copying and pasting code, all code is downloadable in each respective section and at the bottom of the article.

If you prefer to follow along or want to get a head start on downloading required jars, here are links to all the third party packages you might need:

Let’s start with the basics of Glazed Lists, as everything starts there.

Glazed Lists In a Nutshell

I could send you to the Glazed Lists Tutorials and tell you to follow those and come back, but I hate that kind of “teaching”, and the small “problem” with the tutorials is that they are all Java Swing based which is of little use to us (but by all means read them, they’re good). You might also want to check out the very good screen casts located here as they will give you a good idea of the different types of lists that can be used in Glazed Lists. In any case, everything in Glazed Lists starts with one thing, the root list. The root list contains all your items that you want to display before they are filtered or sorted. This list is probably in some random you-don’t-care order  which is perfectly fine. This list will serve as the input for all other chained lists. Think of it as layers, where the bottom layer is the raw list, and the higher up you go, the more refined and specific each layer is. So you have a sorting layer, a filter layer, etc. They can be active or not active, a bit like Photoshop. As we are using Glazed Lists, we need to take our root list and turn it into a Glazed Lists “EventList”, which is the Glazed Lists root-list equivalent. Here’s how that’s done:

List<?> rootList = .... // this comes from you
EventList<?> eventList = GlazedLists.eventList(rootList);

As you can see everything uses Generics, just like normal Lists in Java 5+.

Any “normal” table in the UI-world will undoubtedly have Sorting and Filtering. With the code above we’re currently no different from any other plain old table implementation as we haven’t done sorting/filtering yet. So lets create the sorting/filtering layers that will be on top of the event list. We should think about order when it comes to our layers, as if we create a sorted list on top of a filtered list that’s not the same as creating a filtered list on top of a sorted list. Logically, we sort first, then apply a filter. To create our new lists we continue the code:

List<?> rootList = .... // this comes from you
EventList<?> eventList = GlazedLists.eventList(rootList);
SortedList sortedList = new SortedList(eventList, null);
FilterList(sortedList, new OurFilterMatcher());

As you can see we keep using the last list as the input for the new list, as that’s our “chain”. The second parameter for the SortedList is the Comparator we want to use when sorting. I’m passing in null here to point out that it can be created when constructing the list (and not passing in null may actually throw an exception). Normally you don’t want the table sorted unless the user sorts it, so null makes sense. The OurFilterMatcher will be explained when we do the actual implementation, but just remember that it’s the “Matcher” that is used to filter a table (which is very much like a ViewerFilter).

There’s one more important aspect of Glazed Lists – locking. As lists can be updated on multiple threads (if you so wish) you need to tell the list when to “lock” and “unlock” so that only 1 thread is actively writing to the list at the same time. As such, it’s important we always do this when reading and writing to the list (and even if we don’t plan on multithread updates, it’s still good practice and takes little time to do). We could lock the lists when creating them even, but that’s a bit overkill, so keep en eye out for the locking code in the implementation part and in the framework code available for download. Glazed Lists even supports reading while writing, and their homepage has an example of an asynchronously updated list. Do check it out if you need advanced implementations. To give a quick example of locking/unlocking a list, here’s how it’s done:

_eventList.getReadWriteLock().writeLock().lock();
// ... modify list here ...
_eventList.getReadWriteLock().writeLock().unlock();

The Callbacks

The whole idea of Glazed Lists is that when you modify the event list (and this is important: you always modify the EventList!), it fires events to tell you what you need to change in your table implementation. Glazed has a lot of pre-built hooks for Swing, so there you don’t have to do much work, but as we use SWT we have to do pretty much all the work ourselves (great huh?). It’s not as bad as it sounds however. The callback interface that we care about here is ListEventListener which contains a method callback called public void listChanged(ListEvent<?> listChanges). This list of changes listChanges tells us, in the correct order, what indexes and objects to update, delete and insert. It’s as easy as looping through that list, checking what the change is, and performing it. Here’s a barebones example of how it would look implemented:

_filterList.addListEventListener(new ListEventListener<?>() {

	@Override
	public void listChanged(ListEvent<?> listChanges) {
		// get the list of changes (prior to looping, very important as it'll change as it's read)
		final List<?> changeList = listChanges.getSourceList();

		// go through all changes
		while (listChanges.next()) {
			// get the table index location of the change
			int sourceIndex = listChanges.getIndex();
			// get the change type
			int changeType = listChanges.getType();

			// update the table depending on the change type
			switch (changeType) {
				case ListEvent.DELETE:
					// delete row
					break;
				case ListEvent.INSERT:
					// insert row
					break;
				case ListEvent.UPDATE:
					// refresh row labels etc
					break;

			}
		}
	}

});

That’s actually the most complex code we’ll be adding to make all of this work, and we can re-use that section of code for all our table widget implementations.

You might ask “why is the listener on the filter list if we were told to only modify the event list?”, which is a good and valid question. The answer is that if you were to listen on the event list instead, only base-level adds and deletes would be reported to you. As we also care about when stuff is re-ordered or moved in the list (which is what happens when users sort and filter) we want any list-changes to notify us. As our filtered list is the “topmost” or “last” list in the chain, it will get all notifications from all previous lists in the chain. Remember, all lists in the chain tell the next list down the line what changed (think of it as one-way gossip). By listening on the Filtered list we get all events, regardless on what list they happened. With that information we’re well on our way to putting Glazed into real use.

SWT TableViewer

Personally I was never a big fan of the SWT Table. A good thing about it is that it renders column headers natively, but it can be quite slow, sometimes buggy (first-column image support) and not very intuitive. It doesn’t support much customization and the second you need a table that can do a little more than a plain x/y grid, you soon hit those limitations head on. Owner Draw does help, but there’s still a lot of customization that is not possible. That said, as a “basic table” it does just fine and it’s getting better for each new SWT version. And of course, it’s native.

Normally when someone asks “can I sort a SWT.VIRTUAL table?” the answer is no or “not really”. The reason is that a virtual table only really knows what it shows in the current viewport (the visual area of the table), and how many items it has. Anything that you can’t see is not really “there”, except in memory. This obviously makes such a useful feature as SWT.VIRTUAL fairly useless in a sort scenario. The workaround in that case is to custom implement a sorter and replace the entire table content whenever the user sorts or filters. As we use Glazed Lists we don’t really care about this limitation, we’re working around it as we update the table with our changes whenever they occur thanks to the callback from Glazed Lists.

There’s a few special things we need apart from a “normal” Virtual TableViewer implementation. First, we’ll be using the IStructuredContentProvider for the Content provider. The ILazyContentProvider exists as well, but I had some odd issues with it in testing. If you want an example on how to create a virtual TableViewer, there’s a good snippet here: Snippet029VirtualTableViewer. In the IStructuredContentProvider we simply return the topmost layer (which is the FilterList) as follows;

class GlazedContentProvider implements IStructuredContentProvider {

	@Override
	public Object[] getElements(Object inputElement) {
		return _filterList.toArray();
	}

	@Override
	public void dispose() {
	}

	@Override
	public void inputChanged(Viewer viewer, Object oldInput, Object newInput) {
	}

}

We also need to implement a Comparator which will be used by the SortedList, as well as a Matcher for the FilterList. The Comparator is a normal java Comparator whereas the Matcher is a Glazed Lists implementation. However, these are immutable so they need to be new every time they are set on the respective lists. For the sake of simplicity, lets create an object called RowObject that represents one row in our table. All it does is keep track of the row number and it has a getColumnText method.

class RowObject {
	private int	_row;

	public RowObject(int row) {
		_row = row;
	}

	public int getRow() {
		return _row;
	}

	public String getColumnText(int col) {
		return "" + (_row + col);
	}
}

With this all set up, we can now create the Comparator and Matcher. Lets start with the Comparator. As we’re basically returning an integer as display value for each cell in getColumnText we’ll use this as the basis for our comparison. Thus, our Comparator looks as follows;

class GlazedSortComparator implements Comparator<RowObject> {

	private int	_col;
	private int	_direction;

	public GlazedSortComparator(int col, int direction) {
		_col = col;
		_direction = direction;
	}

	@Override
	public int compare(RowObject o1, RowObject o2) {
		int ret = Integer.valueOf(o1.getColumnText(_col)).compareTo(Integer.valueOf(o2.getColumnText(_col)));

		if (_direction == SWT.DOWN)
			ret = -ret;

		return ret;
	}

}

And now we create the Matcher which is used by the FilterList. The Matcher implementation in Glazed Lists asks us if a row object “matches” and not much more. This may seem confusing at first, but it’s quite similar to the ViewerFilter. In our code we will have a textbox and a button that represents a “search” box. When the user presses the button we set a String field called “_filterText” to whatever the user entered, and then we set a new matcher on the FilterList. As such, our code implementation looks like this:

class GlazedMatcher implements Matcher<RowObject> {
	@Override
	public boolean matches(RowObject row) {
		for (int i = 0; i < _table.getColumnCount(); i++) {
			if (row.getColumnText(i).indexOf(_filterText) > -1)
				return true;
		}

		return false;
	}
}

Now we can add two methods that actually do the updating when we filter and when we sort. Like this:

// update the table filter
private void updateFilter() {
	// if the search text is blank, remove the matcher
	if (_filterText == null || _filterText.length() == 0) {
		_filterList.setMatcher(null);
	}
	else {
		_filterList.setMatcher(new GlazedMatcher());
	}
}

// sorts a table on the given column
private void sortColumn(int col) {
	// do some normal UP/DOWN checking and updating
	int dir = SWT.UP;
	int current = _table.getSortDirection();

	TableColumn tc = _table.getColumn(col);
	if (_table.getSortColumn() == tc) {
		dir = (current == SWT.UP ? SWT.DOWN : SWT.UP);
	}

	_table.setSortColumn(tc);
	_table.setSortDirection(dir);

	// now tell the sorted list we've updated
	_sortedList.setComparator(new GlazedSortComparator(col, dir));
}

At this point we’re basically there. All that’s missing is a proper listChanged that reflects how we update a TableViewer. So with a few modifications to the code I posted in the nutshell section, we get code that looks like this:

_filterList.addListEventListener(new ListEventListener<RowObject>() {

	@Override
	public void listChanged(ListEvent<RowObject> listChanges) {
		try {
			_table.setRedraw(false);

			// get the list PRIOR to looping, otherwise it won't be the same list as it's modified continuously
			final List<RowObject> changeList = listChanges.getSourceList();

			while (listChanges.next()) {
				int sourceIndex = listChanges.getIndex();
				int changeType = listChanges.getType();

				switch (changeType) {
					case ListEvent.DELETE:
						// note the remove of the object fetched from the event list here, we need to remove by index which the viewer does not support
						// and we're removing the object index location from the event list, not the filtered list
						_viewer.remove(_eventList.get(sourceIndex));
						break;
					case ListEvent.INSERT:
						final RowObject obj = changeList.get(sourceIndex);
						_viewer.insert(obj, sourceIndex);
						_viewer.replace(_filterList.get(sourceIndex), sourceIndex);
						break;
					case ListEvent.UPDATE:
						_viewer.replace(_filterList.get(sourceIndex), sourceIndex);
						break;
				}
			}

			// most important, we update the table size after the update
			_viewer.setItemCount(_filterList.size());
		}
		catch (Exception err) {
			err.printStackTrace();
		}
		finally {
			_table.setRedraw(true);
		}
	}

});

The result, when combined with the rest of the necessary boilerplate code, looks like this:

Download Code

TableViewerGlazedExample.java

Nebula Grid

Whereas the normal SWT table only supports single column sort (unless you owner draw) the Nebula grid can do more. It can do multiple column sorting (visually), grouped columns, and other custom features not available in the default grid. The Nebula Grid has a Viewer implementation, but unfortunately at the time of writing this article, it does not support SWT.VIRTUAL mode. As Nebula sticks very much to the SWT API in terms of naming conventions and implementation, it should be little trouble to convert it over when it does.

Depending on how you look at it, you are about to get quite lucky. For my job I wrote an entire framework implementation wrapping Glazed Lists in a Nebula Grid. It’s much more generically implemented (with interfaces etc) than our TableViewer example which was written purely for this article. Because of this I don’t feel like actually ripping it apart into something smaller, so I will use this Framework as the basis for the examples. Thus, this implementation comes with the option to use both the GridViewer implementation (which might be good if you are doing smaller tables that don’t need Virtual mode) or the grid in SWT.VIRTUAL mode.

One of the bigger differences when we’re not in viewer mode, is that on the DELETE, INSERT and UPDATE we need to create GridItems instead of just telling the viewer that it’s changed. It’s a bit more clunky and object-heavy of course, but it’s not as bad as it sounds. The switch statement that we used in the previous example becomes this:

switch (changeType) {
    case ListEvent.DELETE:
        removeItem(sourceIndex);
        break;
    case ListEvent.INSERT:
        final IDataObject insert = list.get(sourceIndex);
        addItem(insert, sourceIndex);
        break;
    case ListEvent.UPDATE:
        final IDataObject update = list.get(sourceIndex);
        removeItem(sourceIndex);
        addItem(update, sourceIndex);
        break;
}

As you can see each one calls a sub-method of the class, and those methods look like this:

private void removeItem(int index) {
	_parent.getTableViewer().remove(_parent.getTableViewer().getElementAt(index));
}

private void addItem(IDataObject msg, int index) {
	GridItem gi = new GridItem(_parent.getGrid(), SWT.NONE, index);
	gi.setData(msg);

	try {
		for (int i = 0; i < _parent.getGrid().getColumnCount(); i++) {
			Color fg = msg.getForeground(i, index % 2 == 0);
			Color bg = msg.getBackground(i, index % 2 == 0);
			Font f = msg.getFont(i);
			String txt = msg.getColumnText(i);
			Image image = msg.getColumnImage(i);

			if (fg != null) {
				gi.setForeground(i, fg);
			}
			if (bg != null) {
				gi.setBackground(i, bg);
			}
			if (f != null) {
				gi.setFont(i, f);
			}
			if (txt != null) {
				gi.setText(i, txt);
			}
			if (image != null) {
				gi.setImage(i, image);
			}
		}
	}
	catch (Exception err) {
		err.printStackTrace();
	}
}

In this code we use an interface IDataObject that is basically our RowObject code from before. This object has various getter methods for returning column texts, images, fonts and so on.

So how do we go about creating a Nebula Grid based grid with this framework? Mostly it’s the same way it’s done with pretty much any SWT widget, along the lines of:

GlazedGridViewer viewer = new GlazedGridViewer(shell, SWT.V_SCROLL | SWT.H_SCROLL | SWT.MULTI | SWT.VIRTUAL, this, true, null, null, false);
viewer.setAllowMultiColumnSort(true);
viewer.getGrid().setCellSelectionEnabled(true);

Some pointers: The this parameter is an interface implementation of IGenericGridTable which forces the implementor of the code to include methods for returning a Comparator and a Matcher, like we created before in the previous example. true is the option to create the grid as a plain grid, or to false to create a viewer. The last 3 parameters are a String id used for saving/loading the table state (column order, sizes etc), an IPreferenceStore where it would be saved on, and lastly a true/false whether the table should be saving the state at all.

The framework comes with a default implementation of a Label provider and a Content provider which hooks into the IDataObject. They are created automatically depending on the table type you picked. Column creation is also handled by the framework as the column wrapping implementation allows for individual setting of if a column is sortable, movable, hide-able etc. The API looks like:

public GridViewerColumn(IGlazedGridViewer parentTable, String name, boolean frozen, boolean moveable, boolean sortable, boolean hideable) {
     ...
}

But when you create a column you do it via the framework as:

GridViewerColumn col = viewer.addColumn(str, false, true, true, true);
col.getGridColumn().setWidth(100);

And finally, to add objects and set the table input, it’s again much like the TableViewer, for example:

List<IDataObject> input = new ArrayList<IDataObject>();
for (int i = 0; i < 1000; i++) {
	input.add(new OurIDataObjectClass(i));
}
viewer.setInput(input);

I don’t think much more needs to be said about the framework. It has a lot of API in it already and a test class as well. I suggest you download it if you want to give it a go.

Important: as I currently am not using the framework due to the fact that the Nebula Grid was too slow and memory hungry for what we needed it for (40,000+ rows) I converted the entire framework over to use a NatTable and kept the work going from there. It should be fine, but there may be some minor issues here and there as it was never fully tested. If you find problems and fix them, do send me the code so that everyone can benefit. For the NatTable implementation of the framework, that’s the next section of this article.

All put together, the test code looks like this when run (with shameless self-promo selection):

No filter box in this example, but I think the TableViewer one shows how it works so it’s not necessary. A point worth making though is that all filters are DataFilter based (framework class). That class extends ViewerFilter so that if you need more than one table implementation, you can re-use your filters should you so wish. That filter also comes with “whole word”, “regular expression” and “case sensitive” filter/search options in the filter itself.

Download Code

Glazed Lists – Nebula Grid Framework

Nat Table

The NatTable Widget (Nat stands for Natalie, the girlfriend of the original widget author) is a fairly new Grid widget and one that I personally was quite impressed with after having researched pretty much all SWT grid widgets out there. It’s still in active development, and not everything is working 100% yet (grouped columns are problematic, some random drawing issues, frozen columns behave oddly, listeners are quite messy), but overall it’s in a good enough shape that we decided to use it in production. The reason I decided we should use it was simple; We needed a table that could deal with 40,000+ rows in 20+ columns without any lag or any drawing slowdowns whatsoever. It needed to be customizable and I wanted Glazed Lists on it. NatTable is inherently virtual, so you don’t tell it that it’s virtual, it just is. It only draws what you see in the viewport which makes redraws near instant and the overall feel is “snappy”.

The NatTable API is also quite different from most SWT widgets. Pretty much every part of the table can be extended or implemented in a custom way, and there’s a lot of classes and places to do this in. At the same time, the API feels sometimes half-finished as simple methods such as selectAll() are nowhere to be found, and trying to figure out how to do it can be a bit of a head-scratcher. So, It takes a while to wrap your head around the API, but with help from a few examples on their homepage it shouldn’t be too much of a deal (and most of those kinds of methods are in the framework). The table is model driven, which I suppose is the third type of table model I see used in tables (first being no model and row-item based, second being a viewer on top of a row-item based grid).

All that said, I truly hope the current development team keeps this widget going (and from the looks of it it’s very active), because it just might be the best SWT grid-table currently out there. The Nebula Grid had huge potential, but development on it is slow going. I know Tom Shindl is doing work on it, but I don’t know what the roadmap is.

Ok, lets get going with the framework I’ve built for NatTable. It’s not complete, just like the Nebula Grid framework which it is based on, but it will get you a very long way. As this framework has gotten further it has more utility methods and automation than it’s predecessor. It will even mimic the Windows column headers through a custom header drawer if so desired. It also has full color-customization support via interfaces and so on. It would be a long list if I wrote it all here, so I suggest you check out the API.

To create a table using the framework, you can use various constructors, of which the biggest is:

public GlazedNatGridViewer(Composite parent, int style, IGenericNatGridTable generic, String tableId, IPreferenceStore store, boolean allowStateSaving, AbstractGlazedNatVisualConfig config) {
       ...
}

You will notice the IGenericNatGridTable is the same interface as in the Nebula Grid framework and works the same way (just different name). The last parameter, AbstractGlazedNatVisualConfig is if you want to pass in custom settings for colors, fonts, widths, heights etc. A whole load of things can be customized, or you can stick to the defaults (DefaultGlazedNatVisualConfig).

In our test class we will do the same as we’ve done in the previous examples, we’ll create some columns, some row data and do a sort. Using the framework we create a new table as follows:

GlazedNatGridViewer viewer = new GlazedNatGridViewer(shell, SWT.V_SCROLL | SWT.H_SCROLL | SWT.BORDER | SWT.FULL_SELECTION, this, new DefaultGlazedNatVisualConfig());
viewer.setAllowMultiColumnSort(true);

for (int i = 0; i < 10; i++) {
	NatGridViewerColumn col = viewer.addColumn("Column "+i, false, true, true, true);
	col.setDefaultWidth(100);
}

List<OneRow> input = new ArrayList<OneRow>();
for (int i = 0; i < 1000; i++) {
	input.add(new OneRow(i));
}

viewer.setInput(input);

Our OneRow class implements IDataObject which contains getters for all things table related (column text etc). It also contains a getter specifically for returning a value that should be used when comparing column data when sorting. By default we simply return the same column text as the visible-to-user text:

class OneRow implements IDataObject {

	private int _row;

	public OneRow(int row) {
		_row = row;
	}

	@Override
	public String getColumnText(int column) {
		return ""+(_row+column);
	}

	@Override
	public String getSearchMatchText(int column) {
		return getColumnText(column);
	}

	...
}

The multi column sort feature is already built in, and uses Glazed Lists ability to chain comparators. So whenever you sort more than one column, it will ask for a Comparator for each sorted column, and combine them in the order that you sorted the columns. You multi-sort by holding down the shift key to add more columns, and I’ve also added so it draws a number on the column header for displaying which order it was sorted in. The sort happens as soon as you let go of the shift key (and you can modify the columns by pressing the shift key again before clicking the column header).

Running the test class we get a table that looks like this:

That pretty much sums it up for the Nat Table. Regardless of what table implementation you are going with or decide to go with, I’m sure you will agree that the power and simplicity of Glazed Lists is amazing. And we’ve only scratched the surface on it here. For much more information and examples with deeper complexity I suggest visiting the homepage and checking the Glazed Lists API. They have some built-in support for SWT as well (such as putting your updates on the UI thread), so they’re not 100% Swing-based even though most of their pre-implemented table-realted items are for Swing components.

Download Code

Glazed Lists – Nat Table Framework

Closing words

This was a long article. It took me 2 full days to write and much longer if you count the hours put into creating both frameworks. My hopes is that you will find the article and Glazed Lists useful in your future table and grid implementations, and that this wonderful package becomes as part of your projects as MigLayout or other “must have” API’s that make our lives coding UI’s much easier. Personally I cannot live without Glazed Lists, and I only wish I had found out about them sooner.

And again, I highly recommend the screen casts for more information on each type of list you can create.

Do let me know if you spot errors in the article, it’s hard to cover everything on the first try. I will put these files + a link to this post into the Projects section later as well.

All Code

Here are download links to all code referenced in this article: