PowerBuilder contains so many features and capabilities that it's hard to fully understand and learn all of them when you're caught up in the "daily grind." A good way to deal with this is to create a skill-developing challenge. In most cases, I try to do something that I figure can't be done in PowerBuilder.

My latest challenge was to create an XP style listbar similar to the one in the Windows XP Control Panel (see Figure 1). I think it's a sharp-looking control that provides an efficient way to navigate an application. Could it be done in PowerBuilder? With enough time and creativity anything can be done.

XP Style Listbar
When duplicating a control, one of the most important things you should do is document its behavior. If you play with the listbar in the Windows XP Control Panel you will observe four things:

1. When you click on the group header when the group is expanded, the group collapses.
2. When you click on the group header when the group is collapsed, the group expands.
3. The pointer changes to a hyperlink hand when you move it over an item.
4. The list resizes when a scrollbar appears due to the window resizing.

Now that you know how it should behave, you must find the best means within PowerBuilder to re-create this functionality. In this case I choose to encapsulate everything in a DataObject/DataWindow control. DataWindows offer so much flexibility; they are more powerful than some developers give them credit for. One thing that makes them powerful is the ability to use expressions to dynamically change property values. We will use expressions heavily in the example of our XP listbar.

Creating the DataObject
You can design the DataObject two ways: as an external DataWindow or one that retrieves from a database. You would retrieve from a database if you needed to provide the user with the flexibility of creating custom lists. In this case, to keep the example simple, an external tabular DataWindow will be created.

The DataObject will need several columns. Some columns display information and some control the behavior of the listbar. Refer to Table 1 for the names, data types, lengths and use of each column. Once created, remove all objects from the DataObject and set the header height to 0.

The column item_type will be used to control most of the behavior in the DataObject. The codes that will be stored in item_type and used in many expressions are as follows:

• HE: Expanded group
• HC: Collapsed group
• C: Child item
• S: Space, the area between groups
• F: Filler; used for looks, added to the end of each group

Now the design process begins. To start, you need to add some text objects and columns to the DataObject to help create the illusion of the XP listbar. There are three very important things to consider when adding these text objects and columns: location, size, and color. Refer to Table 2 for the names of the objects and the values of the properties that need to be set.

Each text object plays a vital role in the listbar's overall appearance. Those roles are described as follows:

• T_child_bkgrnd: Provides the appearance of the light blue box around the child items.
• T_header_bkgrnd: Displays a white background for the header text.
• T_space: Creates space between groups.
• T_filler: Adds to the look of the light blue box around the child items, usually used at the end of a group.
• T_header_filler: Creates space between the header text and the first child item.

There are some important things to note when looking at Table 2. First, the height value of t_child_bkgrnd is set to an expression with a value of rowheight(). This is done because you don't know what the actual height of the item_text column is going to be at runtime. Remember, you set the autosize height property on item_text to true. This gives the child items the flexibility to span multiple lines. Second, note the expressions used to position the item_text column. The position depends greatly on the type of item that has been added. For group header items, you want the text to be right justified. For child items you want the text to be aligned to the right of the icon being displayed for that item (item_picture).