The Clarion Advisor - Listbox Styles

by Michael Pickus

Published 1999-12-07    Printer-friendly version

Want to spruce up those old listboxes? Of course, you can color a column. With a little work, you can even conditionally color a cell. But what if you could customize each cell with its own picture and font? You know, give it a hint of style.

That's what the Style checkbox in the listbox formatter is for. You can define sets of display attributes as styles using the property syntax and then apply selected styles to individual cells.

If you've tried the Style checkbox, you probably didn't like the results. The templates are incomplete in this area, and don't generate the code to use Style as they do for the Color checkbox. Checking the Color checkbox adds four LONGs to the browse queue for each queue field. The Style checkbox should add one LONG for each queue field. That said, here is a kludge to let you use Style with a template generated browse queue.

This is an example of a currency exchange listbox to display the country, the current and previous exchange rates, and the percentage change. See Listing 1 for the data file format. In the browse that displays this file you'll want to show the currency of the country, with a positive percentage change emphasized with a color and font change.

You'll need a local variable for the percentage and four Style LONGs, as shown in Listing 2.

Create a browse procedure. Select the listbox formatter by right clicking on the listbox. Add the country and rate fields from the file and the percentage and style fields from local data. Make sure the style fields appear at the end, after the file fields. Format as you would normally but set the width of the Style fields to 0. Check the Style checkbox on the Current rate, the Previous rate, and the Percentage. Save the window.

On the Procedure Main Properties window, press the '...' button to the right of the Window button. Edit the order of the #FIELDS so that S1 follows the current rate and S2 follows Previous. See Listing 3.

Listing 1

Style                FILE,DRIVER('TOPSPEED'),PRE(STY),
  CREATE,BINDABLE,THREAD                  
PKey                     KEY(STY:UID),NOCASE,OPT,PRIMARY
Record                   RECORD,PRE()
UID                         LONG
Country                     STRING(20)
Current                     DECIMAL(11,6)
Previous                    DECIMAL(11,6)
                         END
                     END

Listing 2

! Local Data
Percentage  DECIMAL(7,3)
S1      LONG,AUTO ! Style
S2      LONG,AUTO ! Style
S3      LONG,AUTO ! Style

Listing 3

! Before
#FIELDS(STY:Country,STY:Current,STY:Previous,
    Percentage,S1,S2,S3) 
! After
#FIELDS(STY:Country,STY:Current,S1,STY:Previous,
    S2,Percentage,S3)

All browse fields have a corresponding queue field, and the queue is created by the templates. By moving the #FIELDS in the list box formatter you're altering the order of the fields in the queue, without changing the appearance of the browse.

Now add code at two embed points. At the first, set the Style definitions after the window opens. This example uses the embed in ThisWindow.Init, Priority 8100. See Listing 4.

Listing 4

?List{PROPSTYLE:Picture,1} = '@N14'4~  F~'  ! France
?List{PROPSTYLE:Picture,2} = '@N~L.  ~14.2' ! Italy
?List{PROPSTYLE:Picture,3} = '@N~ £  ~14.4' ! United Kingdom
?List{PROPSTYLE:Picture,4} = '@N~kr  ~14'4' ! Norway
?List{PROPSTYLE:Picture,5} = '@N~DM  ~14'4' ! Germany
?List{PROPSTYLE:Picture,6} = '@N14_4~  mk~' ! Finland
?List{PROPSTYLE:Picture,7} = '@N14'4~  kr~' ! Sweden

?List{PROPSTYLE:FontStyle,8} = FONT:Regular
?List{PROPSTYLE:FontName,8} = 'MS Sans Serif'
?List{PROPSTYLE:FontSize,8} = 9
?List{PROPSTYLE:TextColor,8} = COLOR:Red
?List{PROPSTYLE:BackColor,8} = COLOR:White
?List{PROPSTYLE:TextSelected,8} = COLOR:White
?List{PROPSTYLE:BackSelected,8} = COLOR:Red

?List{PROPSTYLE:FontStyle,9} = FONT:Bold + FONT:Italic
?List{PROPSTYLE:FontName,9} = 'Courier New'
?List{PROPSTYLE:FontSize,9} = 10
?List{PROPSTYLE:TextColor,9} = COLOR:Blue
?List{PROPSTYLE:BackColor,9} = COLOR:White
?List{PROPSTYLE:TextSelected,9} = COLOR:White
?List{PROPSTYLE:BackSelected,9} = COLOR:Blue

(A nice addition to PROPSTYLE would be PROPSTYLE:Justification and PROPSTYLE:Indent.) At the second embed, set the listbox variables for each queue record at the BRW1.SetQueueRecord, Priority 2,500. See Listing 5.

Listing 5

! Set the currency picture 
CASE STY:Country
  OF 'France';      S1 = 1
  OF 'Italy';       S1 = 2
  OF 'United Kingdom';  S1 = 3
  OF 'Norway';      S1 = 4
  OF 'Germany';     S1 = 5
  OF 'Finland';     S1 = 6
  OF 'Sweden';      S1 = 7
END
S2 = S1

! Do not divide by zero
Percentage = CHOOSE(STY:Previous = 0, 0, |
 (STY:Current - STY:Previous) / STY:Previous * 100) 

! Set the percentage font -- blue (9) or red (8)
S3 = CHOOSE(Percentage > 0, 9, 8) 

Figure 1 shows the browse in action.

Figure 1. The stylized list box.

As you can see from the accompanying dictionary and application you can customize each cell with Style. And you have another tool in your tool chest.

---

Mike Pickus is a member of Team TopSpeed QA and hosts the VA/MD/DC TopSpeed User Group in McLean, Virginia. His latest project is a touchscreen POS application.

Printer-friendly version

Copyright © 1999-2008 by CoveComm Inc. All Rights Reserved. Reproduction in any form without the express written consent of CoveComm Inc., except as described in the subscription agreement, is prohibited.

Clarion Magazine ISSN 1718-9942