PBDJ Feature Story

PowerToTheBuilder.com is a PowerBuilder developer's source for free, open source, high-quality user interface controls. Using any number of the controls available can provide your application with an instant facelift. Integration is easy and becomes less complicated based on the knowledge you have of your own application.

Inherently, PowerBuilder doesn't provide designer support for custom visual controls. The PB UI Controls therefore must be tested by first calling its exposed functions, then running your application. This causes several problems. First you must figure out which methods to call and what parameters to pass. Once you have the code in place you have to run your solution, find your UI, and confirm that it appears and behaves the way you want. If it doesn't work as expected, you have to go back to your code, make your changes, and test again.

To make this whole process simpler, a new UI designer was created. The UI Designer is a "sort of" IDE with a single purpose: to allow you to visually design your UI controls WYSIWYG style. Each control has its own "painter" with a corresponding properties and code pane. As properties are changed, the appropriate code is generated for you. At this point you can just copy and paste the code into your application and be confident in what it will look like at runtime (see Figure 1).

UI Painter
Each object has its own painter and is presented in a resizable container within that painter. The object's properties are displayed in a properties window. Modifications to the properties affect the appearance of the control dynamically and in real time. Modifications that change the object's behavior or appearance are turned into method calls that are displayed, in a code pane, just as you would use them in your application.

There are many different types of properties that are presented in the properties window - everything from item collections to colors to images. Take for example the XPListBar painter. There are two separate collections: one for groups and one for items (see Figure 2 and Figure 3). A lot of the controls also have an image property. Image properties can be set to a file resource or a built-in PB image resource (see Figure 4).

Pseudo Ribbon
One thing you'll notice when you open the UI Designer is the absence of a traditional menu. Instead, a simplistic ribbon control is used. As the toolbar control evolves, the new ribbon control will start to take shape and provide more features. The ribbon control will be available with the next release of the UI Control library.

If you want to use this look now, you can; everything is in place. Just follow these steps:

• Add a PowerToTheBuilder tab control to your "frame" window and call it uo_ribbon.
• Add a toolbar control for each menu option. The UI Designer has four toolbar controls: uo_file, uo_edit, uo_objects and uo_help.
• Set the following properties on the tab control (uo_ribbon):

Height = 192, X = 14, Y = 4.

• In the frame windows resize event, call this:

uo_ribbon.Width = NewWidth - 25

• In the frame windows open event, call this:

uo_ribbon.of_SetStyle(uo_ribbon.RIBBON)

uo_ribbon.of_OpenTab(uo_file, ‘File', 0)
uo_ribbon.of_OpenTab(uo_edit, ‘Edit', 0)
uo_ribbon.of_OpenTab(uo_objects, ‘Objects', 0)
uo_ribbon.of_OpenTab(uo_help, ‘Help', 0)
uo_ribbon.of_SelectTab(3) <- or what ever tab you want selected
uo_ribbon.of_HideArrows()
uo_ribbon.of_HideCloseButton()
uo_ribbon.of_SetFontSize(11)
uo_ribbon.of_SetFontName(‘Tahoma')

That's it. In the future, this will be much simpler and wrapped up for you so you can just plug it in and use it.

Next Release
There will be many enhancements added to the next release of the designer. Currently there is no Save or Open functionality. This functionality will be made available in the future along with some basic operations like Cut, Copy, and Paste.

With each release of the UI Designer should come a new release of the UI Controls. Functionality will be added to the UI controls to make the designer a better tool. Currently, most of the planned enhancements revolve around the Toolbar. There will be buttons that display popup menus, larger images, full font support, text positioning (top, bottom, left and right), and item padding.

The XPListBar will also receive a little attention in coming releases. More specifically, new styles will be added.

Known Issues
There are some known issues with the UI Designer. Most of the issues are actually just missing functionality. The intent was to release a working version immediately and make improvements later.

The toolbar painter is missing the ability to add separators between your items. A new item type dropdown will be added to the toolbar's item collection window. In the meantime you can simply add a call to of_AddSeparator to your code.

The ShortcutBar has a bug that wasn't solved at the time of the release of the application. If you click on the chevron to open the context menu, some weird behavior occurs. Simply reselect the ShortcutBar tab to reset things.

Most controls have theme properties. The default is automatically displayed as Blue in the UI Designer regardless of the actual default theme. The code that is generated does use the correct theme.

Font name dropdowns are not being loaded correctly. You can manually type your font but you can't select from a list. This will be fixed so that all available fonts in the system are displayed.

Conclusion
The PB UI Designer is presented to you as a free utility courtesy of Werysoft. If you have any suggestions that you believe will help make the UI Designer a better product, please email us at Support@PowerToTheBuilder.com. We appreciate all feedback. Also email us if you have an idea for a new and innovative UI control. Let's be the first development tool to have the next great UI control.