The DataObject is almost complete. There's one last thing you have to add to the DataObject to make it look like an XP control: graphics. If you look at the group header area of the "model" listbar in Figure 1, you see an up arrow when it's expanded and a down arrow when it's collapsed. Also, notice the gradient fill. Given that there is no inherent way for a DataWindow to render this type of graphic, bitmaps will be used. For the purpose of this exercise I did a print screen of the Windows Control Panel and simply put what I needed into three files: one for the expanded image, one for the collapsed image, and one for the left-most side of the header (see Figure 2). Of course, I encourage you to try to design your own graphics with a similar, yet different, look. To display these graphics, you will need to add three picture controls to the DataObject, refer to Table 3 for the names of the picture controls and the values of the properties that need to be set.

To finish off the DataObject, set the detail band height to 16 and the autosize height property to TRUE. The detail band will expand as objects are made visible.

The DataWindow Control
The next and final step will be to make a reusable DataWindow control that will contain a DataObject created earlier. Start by creating a new standard visual object inherited from "DataWindow", naming it u_dw_xplistbar. Assign the name you gave the new DataObject to the DataObject property field in u_dw_xplistbar.

u_dw_xplistbar will contain one instance variable and many functions as defined in Listing 1. Take the code from Listing 1 and add it to the control. Also, create a new user event called ue_clicked with one parameter named as_itemtext of data type string.

The purpose of each function in u_dw_xplistbar is as follows:

• of_AddItem: Used to add information to the listbar (as seen later in the article).
• of_Resize: A private function used to size the listbar to the size of the DataWindow control.
• of_Reset: Resets all information in the DataWindow as well as the instance variable that tells the DataWindow which items to collapse.
• of_AddParentToFilter: Tells the DataWindow which items need to be collapsed
• of_RemoveParentFromFilter: Tells the DataWindow which items need to be expanded.
• of_GetParentFilter: Returns a list of items that should be collapsed. If no items are to be collapsed, an empty string is returned, resulting in all items being expanded.

The function used to add information to the listbar (of_AddItem) has many arguments. First is the item type as represented with the following string values: "header", "child", or "filler". The second argument is the text that will be displayed for the item being added. Pass a value if the item type is header or child, and an empty string if the item type is filler. The next argument is the handle to the group's parent. Group parents are header items. When you insert a header item a handle is returned so that it can be used to insert child and filler items. Pass a zero when adding a header and the handle returned from the header for all other items. The final argument is the file location\name of the bitmap that's going to be displayed next to the child item. Pass an empty string for everything except child items.

The expanding and collapsing of the listbar will be controlled in the clicked event of u_dw_xplistbar. If a header item is clicked, the item_type column is evaluated to see whether it's an "HE" or an "HC". If the item type is "HE", the listbar is collapsed and the item type is changed to "HC". If the item type is "HC", the listbar is expanded and the item type is changed to "HE". Group expanding and collapsing is done using nothing more than a DataWindow filter based on what's stored in the parent_handle column. When a child item is clicked, the information found in the item_text column for that item is passed to ue_clicked. Later, when you add u_dw_xplistbar to your window you'll add code to the control's ue_clicked event to perform actions based on the value stored in as_text.

One of the noted behaviors described earlier is that the listbar resized when a vertical scroll bar appeared or disappeared. Look at the resize event; you see that this has been accounted for. If the first or last row is not visible at the same time, it's assumed that a scroll bar has appeared. The assumption is also made that the scroll bar width is 80 pixels. Windows API calls can be used if this needs to be a more precise value. For the purpose of this example the value of 80 will be hard-coded.

The Final Product
You now have an XP style listbar that can be used in your PowerBuilder application. To test how the PowerBuilder version of the control would fare against the Windows version I placed u_dw_xplistbar on a window and added the following code to its contructor event:

Long ll_parent

//Add new group
ll_parent = THIS.of_AddItem('header','See Also',0, '')
THIS.of_AddItem('child','Add Hardware',ll_parent, 'addhardware.bmp')
THIS.of_AddItem('child','Display',ll_parent, 'display.bmp')
THIS.of_AddItem('child','Sounds, Speech, and~rAudio Devices',ll_parent, 'sound.bmp')
THIS.of_AddItem('child','Power Options',ll_parent, 'power.bmp')
THIS.of_AddItem('child','System',ll_parent, 'system.bmp')
THIS.of_AddItem('filler','',ll_parent, '')//filler is necessary for looks

//Add new group
ll_parent = THIS.of_AddItem('header','Troubleshooters',0, '')
THIS.of_AddItem('child','Hardware',ll_parent, 'help.bmp')
THIS.of_AddItem('child','Printing',ll_parent, 'help.bmp')
THIS.of_AddItem('child','Networking',ll_parent, 'help.bmp')
THIS.of_AddItem('filler','',ll_parent, '')//filler is necessary for looks

What I end up with is a listbar as seen in Figure 3. When compared to Figure 1 you hardly see the difference.

Conclusion
Almost anything can be done in PowerBuilder when given the proper amount of time, patience, and creativity. Hopefully this has inspired you to challenge your PowerBuilder skills by trying to do something that you and others never thought could be done.