Monday, July 16, 2007

GUI: A wizard layout

The back end part is somewhat complete. There are still glitches especially with job control, but it is mostly working. I'm concentrating on the GUI now. The program consists of two major forms: one to show running jobs and their progress, and another is job creation wizard.

To my surprise, .NET does not have facility to create wizards. Searching the Internet revealed several commercial and non commercial components, but I didn't like either of them much: some enforce the "standard" layouts which waste too much of valuable space. In others, every page is a separate form making them hard to cross-reference variables.

After all, the approach doesn't seem to work well in my case: working your way through wizards is like observing a big painting though a keyhole. We're guided through myriad of pages (some having a single check box on the entire page) and on page ten nobody remembers where it all started. Navigating back and forth is a joke: we unmark a checkbox on page two to find that this action has invalidated page five and all the data must be re-typed again.

In DataPump, there are several dozen parameters for user to set, most of them depend on each other. Because of these dependencies, a Wizard approach kind of makes sense, although putting every page on a separate form is out of question.

TabControl looks like a good starting point; but it needs polishing:
  • Navigation by clicking on tabs doesn't work well. There will be quite a few tabs and they are unlikely to fit on a single line. Multi-line tabs could alleviate the problem but not cure it: I'm planning to support job templates with every template located on a separate tab. With multi-line tabs I'll loose control on the program's appearance.
  • I'm planning to set tab labels style according to their state: valid/invalid, required/optional, and enabled/disabled. This computes to 8 different styles. But TabControl does not support style changes. Not only we can not color individual tabs, but we can not change the color at all!

Tab Control is extremely useful, but it has several serious limitations. Color of tabs band is not changeable; the tabs band can not be hidden; there is no page visibility property: to show/hide a tab one must add/remove the page from the container control; when tabs are located on the left or right, the text is always vertical. These things are so little, but .NET 3.0 is shipping, and they are still not there.


Hiding tabs band is simple enough, thanks to Mick Dohertys who published "Add a HideTabs property to turn on/off the Tabs" snippet. The tabs are visible at design mode and turned off at runtime. This causes all the text to jump up a bit, but most of my pages have a docked control which resizes itself to fill the extra space.

For navigation, I've put a tree view on left side of the form. Tree view adds ability to collapse branches thus making more space for items currently in use. This allows to extend program's functionality. Job templates will be grouped under top level "Templates" node.

Here is how it looks:


The tree view on the left shows status of every job component. Invalid items are red, required are bold, disabled are gray.

The ability to color TreeView items helps a lot - items requiring attention are easily spotted. I've also added "Consistency problems" page: it summarizes all inter-parameter issues. Setting a parameter to a conflicting value highlights the problem pages and adds a record to the consistency tab. This way users can spot the effect of their changes right away.

Btw, Joel has criticized such design in his "User Interface Design for Programmers" book. He says the tab control and tree view look disconnected: users have troubles linking them together. I have two excuses: firstly I hope users learned a bit or two since 1992; and secondly, the program is designed for Oracle DBAs who are familiar with computers and were able to learn much more complex concepts than a disjoined control.

Talking about usability, there is one thing I don't like about Files page: the order of controls. It is natural to have directory to come before file. But directory is limited to 30 characters, while file can be up to is 512. Current layout leaves more horizontal space to file name. Moving file below directory would bring Max Size field before File, making the order unnatural again.

The good thing typically missing in other GUI programs is immediate response. Problem items are highligted with pink background. And the text of "Add file" button is changing depending on the intended action. The text can read "Add log" or "Modify dump" or "Type mismatch" or other message.

The Directories dialog is also customized. I wanted to present not only directory name, but also its status (readable and/or writable) and the server path. This requires 3 columns, but WinForms ComboBox control only supports one. Fortunately, RemcoJVG posted a good example on how to extend the control. I rewrote the code in C# and tweaked it a bit exposing gradient colors as properties and computing text area more precisely. Now, the problem is that the control with its gradient brush and mouse navigation looks and behaves so good, that other built-in ComboBoxes do not look right any more. I'm ought to either replace all such controls to RemcoJVG's or let users suffer from the inconsistency.

No comments: