WEBINAR:
On-Demand
Application Security Testing: An Integral Part of DevOps
First Example: A Slider Control
The first example is a slider control, which is shown in
Figure 3. Suppose a user wants to temporarily lock their application to prevent unwanted inputs. To unlock the application, the user needs to swipe the button from left to right. Because the button is large, the user is able to comfortably use his finger to accomplish this action.
Using a slider is much useful than asking the user to tap multiple buttons. Conversely, think about what happens when a user tries to unlock a locked Windows Mobile device. As shown in Figure 4, they'd have to first tap on the Unlock menu item and then tap again on the Unlock button. The slider is much more intuitive and eliminates the series of actions required.

Figure 3. The First Example: Locking and unlocking an application. | |  Figure 4. Two Taps: Unlocking a locked Windows Mobile device is less intuitive. |
The slider can also be used to toggle. Figure 5 shows how theiPhone uses this type of control for various purposes.
Coding the Example
To get started, launch Visual Studio 2008 and create a new Windows Mobile device project. In the default Form1, populate the form with the controls shown in Figure 6.

Figure 5. Sliders Rule: The iPhone uses sliders for different purposes. | |  Figure 6. Populating Form1: Add the controls shown here to Form1. |
Set the properties of the various controls as shown in Table 1.
Table 1. This shows how to set the properties of the various controls.
Control
|
Property
|
Value
|
pnlBackground
|
Location
Size
BackColor
|
3,50
234,62
HotTrack
|
pnlSliderWell (embedded within pnlBackground)
|
Location
Size
BackColor
|
3,3
228,56
PaleGreen
|
picSlider
|
Location
Image
Size
|
3,4
Set it to the image as shown in Figure 6
73,48
|
lblMessage
|
Text
|
“slide to unlock”
|
How the slider works is very simple. When the user touches (or taps) the PictureBox control, this fires it's MouseDown event. When a finger swipes the control over the screen, it fires MouseMove event continually. In this event, you have to constantly relocate the PictureBox control; doing so creates the effect of the button actually moving. When the user lifts their finger, this fires MouseUp event. At this stage, you will decide if the PictureBox control has reached the end of the well (hence the slider is unlocked), or else you have to move the PictureBox control back to the left a few pixels at a time, which simulates it sliding back. Figure 7 shows the various events you need to service.
 | |
Figure 7. Servicing the Various Events: The finger position controls firing the events. |
You are now ready to code the application. Switch to the code-behind of Form1 and define the various constants and variable:
Public Class Form1
'---position for the slider when locked---
Const SLIDER_LOCKED = 3
'---position for the slider when unlocked---
Const SLIDER_UNLOCKED = 154
'---the last touched x-coordinate---
Dim _prevX As Integer
First, service the
MouseDown event:
Private Sub PictureBox1_MouseDown( _
ByVal sender As Object, _
ByVal e As System.Windows.Forms.MouseEventArgs) _
Handles picSlider.MouseDown
'---records the x-coordinate where the user taps on---
_prevX = e.X
End Sub
As the finger swipes the
PictureBox control across the screen, it fires the
MouseMove event continuously (as seen in
Listing 1).
Finally, when the user lifts their finger, this fires the MouseUp event:
Private Sub PictureBox1_MouseUp( _
ByVal sender As Object, _
ByVal e As System.Windows.Forms.MouseEventArgs) _
Handles picSlider.MouseUp
'---if the slider has not been unlocked---
If picSlider.Left <> SLIDER_UNLOCKED Then
Dim picCurrentLeft = picSlider.Left
'---animate moving the slider back---
While picSlider.Left > SLIDER_LOCKED
picSlider.Left -= 3
Application.DoEvents()
End While
'---display the message---
lblMessage.Visible = True
End If
End Sub
The
SliderUnlocked() subroutine simply emits a beep and prints a message on the screen indicating that the application is unlocked:
Public Sub SliderUnlocked()
'---emits a beep and display a message indicating
' the slider has been unlocked---
Media.SystemSounds.Beep.Play()
MsgBox("Unlocked!")
End Sub
That's it! Press F5 to test the application on a real device (you can also use an emulator). Download the following
video how your slider control will work in real-time.