Welcome!

PowerBuilder Authors: Dan Joe Barry, Carmen Gonzalez, Ian Thain, Yakov Werde, Paul Slater

Related Topics: PowerBuilder

PowerBuilder: Article

Office 2003 Toolbar: A New Look For Your Old PowerBuilder App

There's a reason why software developers like Microsoft update the look of their applications every two years

The first thing you need to do is get a stockpile of images to represent your toolbar items. To do this you'll need a GIF editor that will let you create images with transparent backgrounds. When creating the images, it's best to make them 23 pixels wide by 22 pixels high. The height of the images is a little more important than the width because 22 pixels fit nicely into the toolbar container. If need be, the width of the image can be greater than 23 pixels (e.g., if you want to add text).

The following images can be found in the .zip file that you downloaded earlier; use them to construct the basic look of the toolbar:

  • toolbar.bmp: The toolbar background
  • toolbarend.bmp: The rounded end of the toolbar
  • toolbarhandle2003.bmp: The toolbars handle
  • toolbarseparater.bmp: Used to separate logical groups in the toolbar

When you put these images together you get what's seen in Figure 1.

To get started, create a new external DataWindow. If you require a toolbar that allows user entry or selection, add the appropriate columns. If not, just add one dummy column. The first picture control that you'll add is the toolbar handle (toolbarhandle2003.bmp). Place this control in the 0 X position and the 0 Y position. Name the control tb_handle and set it to original size. (Note: It's important to name the picture control tb_handle; functionality in other objects is based on this.) This is the handle that users will click when they what to move the toolbar around.

Each image added after the handle will be approximately five PowerBuilder units apart from each other. Your first item in this case would have an X position of 42 and a Y position of 8. If you don't like this approach, just eyeball the location of the images and place them wherever you want. Place separator images as necessary (toolbarseparater.bmp).

The picture controls representing your toolbar items should be named with a prefix of tbi_. This lets the window know that it's a toolbar item. (Note: it's important to name the toolbar items with a prefix of tbi_; functionality in other objects is based on this.)

Another thing to note is that the tooltip that will display for the toolbar item is based on what's in the toolbar item's tag property. Set the tag property as required.

Once you have finished adding your items, cap the end off with a picture control displaying toolbarend.bmp. The name of this control must be tb_end. Now that you have the start and end of the toolbar in place, you can add the background. Place yet another picture control onto the DataWindow, this time using toolbar.bmp. Set the X position to 37 and stretch it the whole length of your toolbar to the X position of tb_end. After you do this, it may be necessary to move it from the front to the back of the control list.

If none of this makes sense, look at d_toolbar1, d_toolbar2, or d_toolbar3 for an example as to how I did it.

The Final Product
Using the objects in the downloaded sample within your own application is simple. There are only a few steps to follow.

First you need to create your toolbar dataobjects and inherit a new window from w_toolbar for each dataobject created. Modify the dataobject property for dw_1 in your new inherited windows as necessary.

Now you can modify your application. Start by declaring a global variable for the toolbar manager. Declare it as follows: n_cst_toolbarmanager gnv_toolbar. Gnv_toolbar will be referenced in the toolbar container and MDI frame so it's important to name it this way.

The next thing to do is prevent the MDI frame from resizing its client area. The toolbar manager will be responsible for this from now on. To prevent the client area from resizing, place a text object on the frame. Give the text object a height of 0 and a width of 0 with an X position of 0 and a Y position of 0. In the frames resize event add a call to of_ResizeMDIClient(), passing the client area and the new width and height:

gnv_toolbar.of_ResizeMDIClient(MDI_1,
WorkSpaceWidth(), WorkSpaceHeight())

To reduce the contrast between the MDI client area and the toolbar area, set the MDI client's background color to white (or whatever your preference is).

To open the toolbars you've created, just add code to the frames open event like so:

gnv_toolbar.of_OpenToolbar
('w_toolbar2', 1)
gnv_toolbar.of_OpenToolbar
('w_toolbar1', 2)
gnv_toolbar.of_OpenToolbar
('w_toolbar3', 2)

The second argument in of_OpenToolbar is the band that you want the toolbar to display in.

Conclusion
That's my version of the Office 2003 toolbar (see Figure 2). The one thing that might not make it a practical solution is the fact that the toolbar won't change if you change the frames menu. If you can live with that, then you have a suitable substitute for your old beat-up toolbar.

More Stories By Brad Wery

Brad Wery is the President of Werysoft Inc. (www.werysoft.com) and the creator of www.PowerToTheBuilder.com, a site dedicated to helping PowerBuilder developers create visually appealing user interfaces. He has been a member of TeamSybase since 2006 and is an active participant in the PowerBuilder Newsgroups.

Comments (2) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
PBDJ News Desk 10/24/05 02:43:34 PM EDT

PowerBuilder Developer's Journal - Office 2003 Toolbar A new Look For Your Old App. There's a reason why software developers like Microsoft update the look of their applications every two years. It shows the consumer that something has changed and therefore they need to upgrade, at least that's my opinion.

PBDJ News Desk 10/24/05 02:14:55 PM EDT

Office 2003 Toolbar A new Look For Your Old App. There's a reason why software developers like Microsoft update the look of their applications every two years. It shows the consumer that something has changed and therefore they need to upgrade, at least that's my opinion.