PBDR.COM

About   -   Contact   -   Purchase   -   Search   -   What's New

 
 
Datawindow Quick Sort Indicator
Almost every PowerBuilder datawindow developed in recent years has probably had the quick sort feature. This feature allows the user to click on the column heading and the datawindow will be sorted based on the column the user clicked. This is a great little feature and is normally implemented as a service in class libraries the world over. Therefore this tip does not tell you how to implement the service but how to enhance it.

In a previous article on Visual Cues I preached the virtues of including a visual cue to the user to indicate the existence of features within your application. One such idea was to include a little bitmap on the sorted column to indicate two things 1) that the quick sort feature is there and 2) which column the user had clicked. When I was writing PBDelta Version 3 I added the quick sort feature to all the datawindows, another goal I was trying to achieve in PBDelta was the correct colour schemes based on the users preferences. See my other article on use of colour.

The problem I encountered was in making the background colour of the quick sort indicator transparent so that the correct colour scheme was used. Charles Ginzel suggested that I used lines to create my image in place of the small bitmap I was using so that the colors would be correct.

The following code is used by my quick sort service to create a little triangle on top of the column that is currently sorted as a visual cue to the user. The triangle points up or down depending on the sort sequence and is based on the standard windows colours. This has the advantage that the colours match the users selected colour scheme and the middle of the image shows through as transparent.


Example Image from PBDelta

/********************************************************************
	Create_SortKey
	
	<DESC>	Create a sort key image for the given column.</DESC>
	
	<ACCESS>Protected

	<ARGS>	as_Column: Column Name to Create for.
		as_sort: Sort Sequence A/D.</ARGS>

	<USAGE>	this.Create_SortKey( 'column1', 'A' )</USAGE>
	
********************************************************************/
Long ll_X1, ll_Y1, ll_X2, ll_Y2, ll_X3, ll_x4, ll_Y3, ll_Y4
dw_ic ldw_DW
String ls_Mod

// Get the datawindow control for the service
ldw_DW = idw_Parent()

ldw_DW.SetRedraw( FALSE )

ll_X1 = Long( ldw_DW.Describe( as_Column + '_t.X' ) ) + 5
ll_Y1 = Long( ldw_DW.Describe( as_Column + '_t.Y' ) ) + 3

ls_Mod = 'destroy sort_ln1 destroy sort_ln2 destroy sort_ln3'
ldw_DW.Modify( ls_Mod )

ll_X2 = PixelsToUnits( &
	UnitsToPixels( ll_X1, XUnitsToPixels! ) + 4, XPixelsToUnits! )
ll_X3 = PixelsToUnits( &
	UnitsToPixels( ll_X1, XUnitsToPixels! ) + 3, XPixelsToUnits! )
ll_X4 = PixelsToUnits( &
	UnitsToPixels( ll_X1, XUnitsToPixels! ) + 8, XPixelsToUnits! )
ll_Y2 = PixelsToUnits( &
	UnitsToPixels( ll_Y1, YUnitsToPixels! ) + 4, YPixelsToUnits! )
ll_Y3 = PixelsToUnits( &
	UnitsToPixels( ll_Y1, YUnitsToPixels! ) + 5, YPixelsToUnits! )
ll_Y4 = PixelsToUnits( &
	UnitsToPixels( ll_Y1, YUnitsToPixels! ) - 1, YPixelsToUnits! )

// If the sort sequence is ascending or decending
IF as_Sort = 'A' THEN
	ls_Mod = 'create line(band=header x1="' + String( ll_X1 ) &
		+ '" y1="' + string( ll_Y1 ) &
		+ '" x2="' + String( ll_X4 ) + '" y2="' &
		+ String( ll_Y1 ) + '" pen.style="0" pen.width="5" ' &
		+ 'pen.color="33554432"  background.mode="2" ' &
		+ 'background.color="16777215" name=sort_ln1 )'
	
	ls_Mod += ' create line(band=header x1="' + String( ll_X1 ) &
		+ '" y1="' + string( ll_Y1 ) &
		+ '" x2="' + String( ll_X2 ) + '" y2="' &
		+ String( ll_Y2 ) + '" pen.style="0" pen.width="5" ' &
		+ 'pen.color="33554432"  background.mode="2" ' &
		+ 'background.color="16777215" name=sort_ln2 )'
	
	ls_Mod += ' create line(band=header x1="' + String( ll_X4 ) &
		+ '" y1="' + string( ll_Y1 ) &
		+ '" x2="' + String( ll_X3 ) + '" y2="' &
		+ String( ll_Y3 ) + '" pen.style="0" pen.width="5" ' &
		+ 'pen.color="1089522856"  background.mode="2" ' &
		+ 'background.color="16777215" name=sort_ln3 )'

ELSE
	ls_Mod = 'create line(band=header x1="' + String( ll_X1 ) &
		+ '" y1="' + string( ll_Y2 ) &
		+ '" x2="' + String( ll_X4 ) + '" y2="' + String( ll_Y2 ) &
		+ '" pen.style="0" pen.width="5" ' &
		+ 'pen.color="1089522856"  background.mode="2" ' &
		+ 'background.color="16777215" name=sort_ln1 )'
	
	ls_Mod += ' create line(band=header x1="' + String( ll_X1 ) &
		+ '" y1="' + string( ll_Y2 ) &
		+ '" x2="' + String( ll_X2 ) + '" y2="' + String( ll_Y1 ) &
		+ '" pen.style="0" pen.width="5" ' &
		+ 'pen.color="33554432"  background.mode="2" ' &
		+ 'background.color="16777215" name=sort_ln2 )'
	
	ls_Mod += ' create line(band=header x1="' + String( ll_X4 ) &
		+ '" y1="' + string( ll_Y2 ) &
		+ '" x2="' + String( ll_X3 ) + '" y2="' &
		+ String( ll_Y4 ) + '" pen.style="0" pen.width="5" ' &
		+ 'pen.color="1089522856"  background.mode="2" ' &
		+ 'background.color="16777215" name=sort_ln3 )'
END IF

// Create the triangle
ldw_DW.Modify( ls_Mod )

is_Lastcolumn = as_Column
is_LastDir = as_Sort

ldw_DW.SetRedraw( TRUE )
 

Top of Page

Legal Notice

Ken Howe 2011