A “Visual Cue” Textbox

This is a textbox control inspired by the Search box in Windows Explorer:

Visual cue text box in Windows Explorer

A visual cue text box in Windows Explorer

I think this type of control would be useful in several different scenarios:

  • For a Search box (as shown in the image above)
  • When you don’t have enough screen real estate for a label and textbox together
  • When you want to display the format mask for the box

We’ll start off with a basic textbox control (subclassed from the Visual FoxPro TextBox base class):

DEFINE CLASS txttextbox AS textbox
   FontName = "Segoe UI"
   Height = 23
   Width = 100
   IntegralHeight = .T.
   Name = "txttextbox"

   PROCEDURE Init
      ** Are we running a pre-Vista version of Windows?
      IF VAL(OS(3)) < 6 && Windows Pre-Vista
         ** 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)
      ENDIF
   ENDPROC

   PROCEDURE RightClick
      DEFINE POPUP shortcut SHORTCUT RELATIVE FROM MROW(),MCOL()
      DEFINE BAR _med_cut OF shortcut PROMPT "Cu<t" ;
         KEY CTRL+X, "Ctrl+X" ;
         PICTRES _med_cut ;
         MESSAGE "Removes the selection and places it onto the Clipboard"
      DEFINE BAR _med_copy OF shortcut PROMPT "<Copy" ;
         KEY CTRL+C, "Ctrl+C" ;
         PICTRES _med_copy ;
         MESSAGE "Copies the selection onto the Clipboard"
      DEFINE BAR _med_paste OF shortcut PROMPT "<Paste" ;
         KEY CTRL+V, "Ctrl+V" ;
         PICTRES _med_paste ;
         MESSAGE "Pastes the contents of the Clipboard"
      DEFINE BAR _med_clear OF shortcut PROMPT "Cle<ar" ;
         PICTRES _med_clear ;
         MESSAGE "Removes the selection and does not place it onto the Clipboard"
      DEFINE BAR 5 OF shortcut PROMPT "-"
      DEFINE BAR _med_slcta OF shortcut PROMPT "Se

I’ll create a subclass of txtTextbox, name it txtVisualCue, and add the following properties:

cCueText = ""
lCueVisible = .F.
cForecolor = ""
lFontItalic = .F.
uOriginalValue = ""
nAlignment = 3
Name = "txtVisualCue"

We’ll store some values from the textbox to the custom properties in the Init event:

PROCEDURE Init
   DODEFAULT()
   WITH THIS
      .lFontItalic = .FontItalic
      .cForeColor = .ForeColor
      .nAlignment = .Alignment
      .uOriginalValue = .Value
      .lCueVisible = EMPTY(This.Value)
   ENDWITH
ENDPROC

The “visual cue” is driven by the lCueVisible property. We’ll assign a value to lCueVisible in the GotFocus and LostFocus events for the textbox:

PROCEDURE GotFocus
   IF This.lCueVisible
      This.lCueVisible = .F.
   ENDIF
ENDPROC
PROCEDURE LostFocus
   IF EMPTY(This.Value)
      This.lCueVisible = .T.
   ENDIF
ENDPROC

Then we’ll use the lCueVisible_Assign method to “drive” the textbox:

PROCEDURE lCueVisible_assign
   LPARAMETERS vNewVal
   THIS.lCueVisible = m.vNewVal

   WITH THIS
      IF .lCueVisible
         .ForeColor = .DisabledForeColor
         .FontItalic = .T.
         .Alignment = 3
         .Value = ALLTRIM(.cCueText)
      ELSE
         .ForeColor = .cForeColor
         .FontItalic = .lFontItalic
         .Alignment = .nAlignment

         IF ALLTRIM(TRANSFORM(.Value)) == ALLTRIM(.cCueText)
            .Value = .uOriginalValue
         ENDIF
      ENDIF
   ENDWITH
ENDPROC

In effect, whenever the Value property is EMPTY(), we’ll display the CueText in the textbox. Anytime the textbox gets focus, we’ll set lCueVisible to .F., which will update the textbox accordingly.

Admittedly, this is a pretty basic example, but this type of textbox has great potential for enhancing the UI of my Visual FoxPro applications.

Demo form with "visual cue" textbox controls

Demo form with “visual cue” textbox controls

One Ugly App… LIVE!!!

Looking at screenshots is kind of boring, and there’s only about 100 people in the world that have seen my ugly app in-person, so I decided to do a screencast to show it off.

It’s 3 minutes and 56 seconds long. If you don’t want to watch the whole video, but would like to see how to go from “Fox Ugly” to “Fox Foxy” in just two clicks, feel free to jump ahead to the 3:30 mark.

Enjoy!

For what it’s worth, I made up the fiverr story for the video (and the fiverr post is made up). If you use fiverr, no offense is intended.

If the YouTube frame isn’t shown on the page, click here to watch One Ugly App… LIVE!!!

 

 

Aero (Glass) Borders For Forms In SCREEN

This tip applies to Windows Vista and Windows 7 only!

If you want Aero effects (glass) for your forms which are shown IN SCREEN (ShowWindow property = 0), simply set the Desktop property for the form to .T.

There are a couple of downsides, though:

  • The form is now able to be dragged outside the VFP SCREEN, which can create some confusion for users.
  • When a form that has been dragged outside the SCREEN is Minimized, it minimizes to the Windows Desktop. One fix for this is to set MinButton = .F., to prevent minimizing the form.

I like the Aero Glass effect in Windows 7 (don’t get me started on Vista!), but Windows 8 no longer has the Aero Glass borders. So, this tip has no effect on Windows 8 (except for the potential user confusion).

But, it’s there if you want to use it!

Stop The Bleeding!

Have you ever noticed that some controls tend to “bleed” when the user clicks on them more than once? I’ve seen it often with OptionGroups and Checkboxes when the BackStyle has been set to transparent.

Multiple clicks cause pixel bleeding

Multiple clicks cause pixel bleeding

The easiest “fix” I’ve found for this (besides making the BackStyle Opaque) is to put the following line of code in a user-actionable event (I usually put it in the Click or InteractiveChange event):

This.Caption = This.Caption

This code doesn’t actually do anything, but I have found that it “stops the bleeding”.