Updated December 16, 2013: Source code for lblLabel is available here.
The next few blog posts will look at subclassing the Visual FoxPro base classes, with an emphasis on UI design as it relates to Microsoft’s User Experience Interaction Guidelines (or UX Guide). Since the emphasis is on playing well with Windows, I’ll assume that my apps will be using Themes when available at the OS-level.
Subclassing the Visual FoxPro Label Control
Typically, I stick to the following default properties for labels:
AutoSize = .T. BackStyle = 0 (Transparent) FontName = "Segoe UI" (Default for my development OS) FontSize = 9 (Default for my development OS)
Though I typically use “Segoe UI” as the FontName, since I’m currently using Windows 8 I’m actually going to use “Segoe UI Symbol” in the Properties window, and change it to Segoe UI in code for the class.
I use AutoSize because I may need to change the font name and/or size, depending on the version of Windows the app is running on, and I use the default font and size for the OS on my development machine. This makes form design much easier for me. I also set the label BackStyle to transparent to prevent it from having a “gray” backcolor if the label is placed on a control (or form) that is not using a “default” color.
I consider label controls to be equivalent to “text” in Microsoft-speak. As long as we’re discussing labels (and text), let’s talk a little about fonts and font sizes.
The Microsoft UX Guide contains the following recommendations for fonts and font sizes:
|Operating System||Font (size)|
|Windows Vista and later||Segoe UI (9pt)|
|Pre-Windows Vista||Tahoma (8pt)|
The guide also provides (on pages 620-624) some default color information and sizes for various types of text (or Labels) you may have in the app. We will use these for some additional subclasses of our label.
The lblLabel Class
Based on this information, I’ve created a subclass of Label (named lblLabel) with the following properties:
AutoSize = .T. FontName = "Segoe UI Symbol" BackStyle = 0 Caption = "lblLabel" Height = 17 Width = 43 Name = "lblLabel"
Since Segoe UI is a newer font introduced in Windows Vista, computers running Windows XP may not have this font available (even if an XP machine does have Segoe UI, it can sometimes be rendered kind of blurry on XP, so I usually stick with Tahoma for pre-Vista versions of Windows anyway).
Since the UX Guide recommends “Tahoma, 8” as the pre-Vista default, and since my Segoe UI has disappeared from my Properties window in Windows 8, I’ve added the following code to the Init() method:
** Are we running a pre-Vista version of Windows? IF VAL(OS(3)) < 6 && Windows Pre-Vista (XP, 2000, etc) ** Set the default font to Tahoma. Plus, ** if the font size is set to the Vista ** default (9pt), set it to 8pt. If it is not ** the default, let's make it 1pt smaller. This.FontName = "Tahoma" This.FontSize = IIF(This.FontSize=9,8,This.FontSize-1) ELSE ** On my Windows 8 machine, Segoe UI is not ** available in the Properties window, so I ** had to choose Segoe UI Symbol. We'll do ** the switch to Segoe UI here. This.FontName = "Segoe UI" This.FontSize = 9 ENDIF
Even though users normally don’t “click” on Labels, some additional subclassed labels we’ll cover later (think hyperlinks) do have clickable interactions, so I’ve added the following code to the Click event for the label :
PROCEDURE Click ** Code in methods, not events! This.OnClick() ENDPROC
With this, I’ve told the label to call an abstract method in the label class called OnClick. Since it’s an abstract method, we’ll leave it empty in this class, but we will use it later.
PROCEDURE OnClick ** Abstract method called by the Click() event ENDPROC
And we’re all set and ready to drop an instance of our label on a form!
But, there’s some additional considerations…
Some of our subclasses of this Label control will be set to use colors other than the “Default” colors found in the Visual FoxPro Properties window. While these different-colored labels will look fine in most instances, there are times I might want the Label (or “text”) to revert back to the Windows System Color.
We’ll look at those instances in a future post.