One of the long awaited features introduced in PowerBuilder 10.5 is support for contemporary (aka Office XP) menus and toolbars. The first difference you'll notice is that the flat contemporary style and new icons are used extensively throughout the PowerBuilder IDE itself (Figure 1).

New Menu Options
The next thing you'll notice is a dizzying array of new options in a new "Appearance" tab page in the Properties pane for the top level menu item. What adds to the dizzying effect is that the menu options (Figure 2) and the toolbar options (Figure 6) are all combined on the same tab page. Perhaps they'll split those out onto separate tab pages before the product is released or in a later maintenance release.

There are two Menu Style options, ContemporaryMenu! and TraditionalMenu! If TraditionalMenu! is selected, all of the other menu options become disabled and the application menus will have the pre-10.5 look and feel. When the ContemporaryMenu! option is selected, you can choose the font name and size for the menu text, whether it is bolded, italics and/or underlined as well as its color, background color and highlight color.

The next few options could stand a bit of rearrangement as well. The TitleBackColor, MenuTitles and TitleGradient should be grouped together separately, just as the BitmapBackColor, MenuBitmaps and BitmapGradient should be. Figure 3 shows an example of a contemporary menu that will help illustrate what effect the various options have. The MenuTitles checkbox determines whether the first vertical band in the drop down menu appears at all. If that option is not selected, the TitleBackColor and TitleGradient options have no effect, because that band will not be visible. If the MenuTitles option is selected, the TitleBackColor will determine the color of the band. If the TitleGradient option is not selected, the same color is used for the entire band. If the TitleGradient option is selected, a gradient fill is used for the band. Note that the IDE does not allow you to select the second color for the gradient. Also note that enabling MenuTitles does not automatically mean text is assigned. That is a separate property on the individual child menu items.

In a similar manner, the MenuBitmaps option determines whether the second vertical band will appear and if not selected the BitmapBackColor and BitmapGradient options will have no effect. If the MenuBitmaps option is set, then the BitmapBackColor will set the color of the second band and the BitmapGradient option will determine if a gradient fill is used. Once again, you do not have an option to select the second color used for the gradient. And like the MenuTitles option, the selection of the MenuBitmaps option will not automatically cause bitmaps to appear in the band, even if there are toolbar bitmaps associated with the menu item. The image used for the menu (which can be in a number of formats, not just a bitmap) is a separate option from the toolbar image setting.

There are only a couple of new menu options on the child menu items (Figure 4). The MenuTitleText option is only enabled if MenuTitles has been checked on the root menu item. This is where the text is obtained for the drop down menu items when the MenuTitles option is enabled. The MenuAnimation option is only applicable if there is a MenuImage for the menu item. When enabled, the menu image is "shifted up" and a shadow is shown behind it when the menu item is selected (Figure 5). The users sees the menu image "rise" as the item is selected, hence the reference to animation.

The MenuImage can be provided in one of four different formats: BMP, GIF, ICO or JPG. It can also be provided in a number of different sizes, but the menu will only show the image as either 16x16 (if a 16x16 bitmap is provided) or 32x32 (if anything larger than a 16x16 is provided). As a result, 16x16 or 32x32 are the most appropriate sizes of images to use when specifying menu bitmaps. Otherwise the scaling that PowerBuilder does to fit the image to the supported size will usually result in some distortion.

Note: For testing menu and toolbar image support purposes I obtained the Common Toolbar Set (both Small and Large Editions) from glyFX (www.glyfx.com/free.html). They supply images in BMP, GIF, ICO and PNG format (the latter of which PowerBuilder does not support). In order to test the JPG format I converted several of the GIF images to JPG. Because of restrictions on redistribution of the icons, the sample code for this article does not contain those images. However, you can download the glyFX images from their website for free.

The ICO and GIF formats have native support for a transparency indicator. The BMP format does not, but PowerBuilder will treat any CommandButton color pixels in a BMP image as transparent. The JPG format does not support a transparency indicator, and PowerBuilder does not attempt to support it by treating another color as transparent. Therefore, if your images need to have a transparent background (particularly an issue if you are using a gradient for the menu image band) you should consider using the ICO or GIF formats first, the BMP format second, and the JPG format as a last resort. Between the ICO and GIF formats, I found that the GIF format gave a better appearance when used as a MenuImage, particularly for the 32x32 size.

New Toolbar Options
As indicated earlier, there are also new Toolbar Appearance options for the root menu item (Figure 6). As with the menu appearance, there are two options for the toolbar style (ContemporaryToolbar! and TraditionalToolbar!) and the TraditionalToolbar! setting renders the other options invalid and provides a pre-10.5 look and feel. When the ContemporaryToolbar! option is selected, you can specify the text color, back color and highlight color for the toolbar items. You can also indicate whether the toolbar back color should have a gradient fill applied, but as with the menus you do not have the option of specifying the second color used for the gradient fill.

There is also one new toolbar option on child menu items: ToolbarAnimation (Figure 7). It has the same effect of providing a raised image for the selected toolbar item as the MenuAnimation option discussed earlier has for menu images.

As with the menu images, you can supply the toolbar images in a number of formats and sizes. However, regardless of what image size you supply for a toolbar item, PowerBuilder will only display it in a 16x16 size. Therefore, you should consider using 16x16 icons for all your toolbar images. As discussed previously, the ICO and GIF format have native support for a transparency indicator and are the first choice if your images require some transparent areas. At the time of this writing, PowerBuilder was not supporting CommandButton as a transparency indicator for BMP files, so they should be considered with JPG as a last resort for toolbar icons. This may be an oversight that is corrected by the time the product is released or in a subsequent maintenance release, but GIF or ICO are still preferred. Also note that whereas ICO and GIF images appeared similarly when both were provided in 16x16 format, the quality of the toolbar icon displayed deteriorated much quicker with larger image sizes for GIF files than for ICO files. That is, although GIF seems to be the better choice for a menu image, ICO seems to be the better choice for a toolbar image.

Or, to summarize my menu and toolbar image recommendations, you should consider using:

On the other hand, you might also consider using some of the PowerBuilder system provided images as well. Sybase has reworked a large number of the more commonly used internal images to provide a contemporary look. In fact, the sample toolbar (Figure 8) is composed entirely of internal images.

Conclusion
The support for XP look and feel option introduced in PowerBuilder 9.0.1 was the first step in modernizing the appearance of PowerBuilder generated applications. The introduction of contemporary menus and toolbars goes a long ways towards completing that modernization. Hopefully, future versions will include additional contemporary user interface features such as larger icon sizes for toolbars and perhaps a rebar control (where user objects such as edit masks or drop down list boxes can be embedded in a toolbar).