Simulating Adobe Flex’s “RowOver” behavior in PowerBuilder 11.5

“RowOver” is a term I’m officially coining right now. πŸ˜‰

It’s that visual cue that you see when you’re moving the mouse over the rows in a datagrid (tabular or grid-style datawindow for you PB folks), and the row under the mouse pointer gets highlighted ever-so-delicately.

Here’s a picture. (The screen capture doesn’t grab the cursor – it’s over row 2):

Employee listing - PB11.5Let’s walk through the development of this feature.

Step 1: Paint a grid or tabular datawindow.

Step 2: Go to the properties of the Detail band, and set the background color to your favorite color. Depending on the color chosen, this could make further development on that datawindow difficult (as you can no longer see the objects in the detail band), so slide the Transparency slider all the way to the right (100% transparent).

Step 3: Drop a datawindow control onto the surface of a window, and bind that to the datawindow object you created in step 1.

Step 4: By default, there’s no MouseMove event defined for a datawindow control, so let’s define one. In the Script painter for the datawindow control, define a new event, and select the event_id pbm_dwnmousemove. Name it something creative, like “mousemove”.

Step 5: Add the following code to the new mousemove event:

string bandAtPointer
integer tabPos
integer rowNum=-1

bandAtPointer = this.getBandAtPointer()
// the string is ~t

if pos( bandAtPointer, "detail", 1 ) > 0 then
// we're over the detail band.
tabPos = pos( bandAtPointer, "~t", 1 )
rowNum = Integer( Mid( bandAtPointer, tabPos + 1 ))
end if

/* if the current row is the one we're over,
change its transparency to 75% */

this.Modify( 'datawindow.detail.transparency="100~tif(getRow()=' + string(rowNum) + ', 75, 100)"' )

VOILA! The user gets a nice little visual cue as the mouse moves over the grid. You can play with the transparency percentage and color to get it looking exactly the way you want.
It’s important to note that this doesn’t change the “current row”, or override any row selection logic. This is purely visual eye-candy.

To download a simple example showing the gradient/transparency features of 11.5, and the “rowOver” technique, go to the Box widget and grab the Tips n Tricks.zip file.

-Paul-

Advertisements

About Paul Horan

Software Technology - lots of experience with Sybase and IBM mobility/cloud offerings.
This entry was posted in PowerBuilder, Software and tagged , , , . Bookmark the permalink.

3 Responses to Simulating Adobe Flex’s “RowOver” behavior in PowerBuilder 11.5

  1. Hazem Ibrahim says:

    Nice trik
    Thank you for sharing it with us
    Hazem

  2. Jason Fenter says:

    Paul,

    Just wanted to pop in with a quick performance tip. I have found that the MouseMove event (pbm_dwnmousemove) fires even when the mouse is simply hovering in one spot. Because of that, your code above is CONSTANTLY calling the Modify() method, making the CPU spike at 100%.

    To overcome this, I added an instance variable to the window to store the row that I was hovering on. I then put the Modify() statement inside an IF block…
    IF rowNum = previousRowNum OR rowNum <= 0 THEN
    RETURN
    ELSE
    Modify (…)
    previousRowNum = rowNum
    END IF

    This reduces CPU usage considerably. πŸ™‚

  3. noazdad says:

    Jason,
    I’m not seeing that same behavior…
    I use Process Explorer as my replacement for Task Manager, and I’m seeing the PB115.EXE process go completely dormant while the mouse isn’t being moved. I’m on XP/SP3, so maybe it’s an operating system thing?
    I do see a benefit in your technique however – when moving the mouse within the same row (i.e., sliding it horizontally), you’ll only call the Modify() method once.

    -Paul-

Comments are closed.