This small web user control is a numeric keypad that is useful for applications that run on touch-screen kiosk computers where the users may not have access to the keyboard (like in a manufacturing facility or airport).
On some of my applications, users don't have access to the keyboard or mouse, and the application is running in kiosk-mode on a touch screen. Sometimes, they need to enter a secured area of the application, and need to enter a numeric pass code. This is where the Keypad Web User Control comes in.
Using the code
Next, as with other web user controls, you need to add a local variable in your web form:
Protected WithEvents Keypad1 As Keypad
Note that the name of this local variable must be named
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
If Not Page.IsPostBack Then
When the user clicks on your "Show Keypad" button, you make the keypad visible by calling the
Show() method. This method accepts an optional parameter that identifies the source. This source is used when the user is finished and you need to know for which field they where editing (more on this below).
Private Sub btnShowKeypad1_Click(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles btnShowKeypad1.Click
Keypad1.IsPassword = False
Optionally, you set the
IsPassword property. If
IsPassword=True, then the textbox on the keypad will show '*' instead of numbers.
The keypad control will raise two events depending on whether the user clicked "OK" or "Cancel". You need to handle both of these. In the demo, the
Value from the keypad is copied to a textbox in a form. If the user clicks "Cancel", the keypad is simply hidden. You may want to redirect to a different page. In either case, the demo also sets a label identifying which button was clicked.
Private Sub Keypad1_OnOKClicked() Handles Keypad1.OnOKClicked
Select Case Keypad1.Source
Me.txtValue1.Text = Keypad1.Value
Me.txtValue2.Text = Keypad1.Value
Me.lblStatus.Text = "You clicked OK"
Private Sub Keypad1_OnCancelClicked() Handles Keypad1.OnCancelClicked
Me.lblStatus.Text = "You clicked Cancel"
By default, the keypad is a pale-yellow color. If you define a CSS style named
.Keypad, you can alter the appearance. The demo uses this to give it a nice drop-shadow:
BORDER-RIGHT: goldenrod thin outset;
BORDER-LEFT: goldenrod thin outset;
BORDER-TOP: goldenrod thin outset;
BORDER-BOTTOM: goldenrod thin outset;
Points of Interest
There are some things I would like to fix in this control:
- The control uses hidden labels where it should use the ViewState directly.
- It would be nice to dynamically set the CSS class.
The original compile included a post-back each time a keypad button was clicked. This worked, but caused unnecessary posts to the server. The current version handles everything on the client side until the OK or Cancel buttons are clicked.