Datawindows: They’re not just for DATA anymore!!!

OK, we all know that the “selling point” for PowerBuilder’s datawindow object is the ease with which it can retrieve data from a relational database, abstract out the complexities of binding that data to visual controls in the UI layer, and handle all the tedium of data validation and transaction management.

YAWN!!!  
Been there, done that, got the t-shirt! (Trust me, I have a LOT of PowerBuilder t-shirts…)  

In this posting, let’s take a look at a new feature of PB 11.5 that will let you use datawindows in ways you probably never thought of. And they have NOTHING whatsoever to do with data!

I’m sure your users would love to have a nice, subtle gradient (or even an image of your company logo?) in the background of your application’s windows and tabpages. You’ve been stuck with a solid background forever. Well, with PB 11.5, Sybase introduced support for gradients and transparency!
Problem solved, right?!? Not so fast, cowboy…

The new gradient capabilities are limited to one object – the datawindow. You can’t set a gradient in the background of a window or custom visual user objects (yet). This posting is going to show you how to accomplish that same effect using a datawindow!

Step 1. Create a freeform, external datawindow.
Since the data doesn’t matter, create this as an external dw with a single string column. You won’t have to bother with an InsertRow() or SetItemXXX(), so even the name of the column is immaterial. In the TipsnTrick sample app (which can be downloaded from the Box.net widget on the front page of this blog.) I called this datawindow “d_gradient_only”.

Step 2. Set the gradient properties in the datawindow background
I chose a subtle angled gradient that transitions from Teal in the upper left-hand corner, to Silver in the lower right.  The figure below shows the Background properties panel for that datawindow. Mine are just examples – choose your own color schemes and brush types.

The Angle property setting only pertains to the AngleGradient brush mode, and it controls the direction of the transition from color #1 to color #2. I have that set at about 20, which causes the transition to go from top-left to bottom-right. Experiment with the various gradient settings to get the exact look that you want.

Step 3: Drop a datawindow control on your window or user object.
This is easy PowerBuilder 101 stuff. You place a datawindow control on the surface of whatever you’re using, and move it to the top left corner. You don’t need to stretch it to fill the entire parent, since we’ll be adding resize logic in step 4. (For you OOP noobs, making these changes to an ancestor class for the window or user_object would be a good design choice here).
In the sample app, I created a user object named uo_gradient_background, and the dw control is named “dw_grad”.

Step 4: Add resize logic so that the datawindow always fills the parent.
Programming note: Window objects come with a “resize” event already defined, but User Objects do not, so if you’re using a custom visual user object, you have to define a prototype for the resize event. If you open the uo_gradient_background object, you’ll see that I have the “resize” event mapped to the pbm_size system event.

Place this code in that event:
setRedraw( FALSE )
dw_grad.resize( newWidth, newHeight )
setRedraw( TRUE )

I also placed one line of code in the window Resize event which resizes the Tab control.
tab_1.resize( newWidth, newHeight )

Now you have a datawindow as the background of the user object (or window, if you went that way), and whenever the parent container is resized, the datawindow always fills the available space. Consider this the actual background of the parent, and drop whatever actual UI controls your users will see right on top of the datawindow. The figure below shows the effect it creates:

Enjoy! And Happy Holidays!
-Paul-