LightSwitch – Creating a Masked Password TextBox Part 2

Overview of Article

Here’s an update to my previous post on creating a masked textbox.

The previous sample used the LostFocus event to save the password data into the entity. After a prompt from Yann Duran, the code has now been modified so that data binding syntax is used instead. Not only is this syntax much neater, we can also more easily get and retrieve data when building ‘detail’ type screens.

Screen Code Changes

1. Follow the instructions from the previous post on creating a table and custom control of type System.Windows.Controls.PasswordBox
2. Instead of writing the ‘LostFocus’ code referred to previously, write the following code instead:

   Private Sub CreateNewCustomer_InitializeDataWorkspace(ByVal saveChangesTo As Global.System.Collections.Generic.List(Of Global.Microsoft.LightSwitch.IDataService))
       ' Write your code here.
       Me.CustomerProperty = New Customer()
   
       Dim proxyPassword As IContentItemProxy = Me.FindControl("Password")
       proxyPassword.SetBinding(System.Windows.Controls.PasswordBox.PasswordProperty, "Value", Windows.Data.BindingMode.TwoWay)
   
   End Sub

   In the code above, the SetBinding method on the IContentItemProxy interface is called. The first parameter of this method accepts a System.Windows.DependencyProperty. The PasswordBox control includes a PasswordProperty that we can use for this purpose.

   Here’s the C# version:

   private void CreateNewCustomer_InitializeDataWorkspace(global::System.Collections.Generic.List<global::Microsoft.LightSwitch.IDataService> saveChangesTo)
   {
       // Write your code here.
       this.CustomerProperty = new Customer();
   
       IContentItemProxy proxyPassword = this.FindControl("Password");
       proxyPassword.SetBinding(System.Windows.Controls.PasswordBox.PasswordProperty, "Value", System.Windows.Data.BindingMode.TwoWay);
   }

3. When we now run the project, the screen works as before. However as you can see, the code is now much simplified.

Checking the Entered Password

In this section, we’ll add a second PasswordBox and some validation code to enable us to check the entered password.

1. Click on ‘Add Data Item’ and add a new local property of type string called ‘prpPassword2’
2. Change the ‘Display Name’ of prpPassword2 to ‘Re-entered Password’
3. Drag prpPassword2 onto the screen. Change the textbox control to a System.Windows.Controls.PasswordBox control.
4. Extend the InitialiseWorkSpace event from above to bind the newly added PasswordBox to the prpPassword2 property:

   Private Sub CreateNewCustomer_InitializeDataWorkspace(ByVal saveChangesTo As Global.System.Collections.Generic.List(Of Global.Microsoft.LightSwitch.IDataService))
       ' Write your code here.
       Me.CustomerProperty = New Customer()
   
       Dim proxyPassword As IContentItemProxy = Me.FindControl("Password")
       proxyPassword.SetBinding(System.Windows.Controls.PasswordBox.PasswordProperty, "Value", Windows.Data.BindingMode.TwoWay)
   
       Dim proxyPassword2 As IContentItemProxy = Me.FindControl("prpPassword2")
       proxyPassword2.SetBinding(System.Windows.Controls.PasswordBox.PasswordProperty, "Value", Windows.Data.BindingMode.TwoWay)
   
   End Sub

   In C#…….

   private void CreateNewCustomer_InitializeDataWorkspace(global::System.Collections.Generic.List<global::Microsoft.LightSwitch.IDataService> saveChangesTo)
   {
       // Write your code here.
       this.CustomerProperty = new Customer();
   
       IContentItemProxy proxyPassword = this.FindControl("Password");
       proxyPassword.SetBinding(System.Windows.Controls.PasswordBox.PasswordProperty, "Value", System.Windows.Data.BindingMode.TwoWay);
   
       IContentItemProxy proxyPassword2 = this.FindControl("prpPassword2");
       proxyPassword2.SetBinding(System.Windows.Controls.PasswordBox.PasswordProperty, "Value", System.Windows.Data.BindingMode.TwoWay);
   
   }

5. Click on the ‘Write Code’ button and select the ‘prpPassword2_Validate’ event. Now write the following code.

Private Sub prpPassword2_Validate(results As ScreenValidationResultsBuilder)

    If prpPassword2 <> Me.CustomerProperty.Password Then
        results.AddPropertyError("Reentered Password does not match Password")
    End If

End Sub

The C# version would be…

private void prpPassword2_Validate(ScreenValidationResultsBuilder results)
{
    if (prpPassword2 != this.CustomerProperty.Password) {
        results.AddPropertyError("Reentered Password does not match Password");
    }
}

Conclusion

When we now run the project, the screen checks to see whether or not we’ve entered our password correctly.

Fig 1 Error message that appears when incorrect password is re-entered

This post also highlights the syntax that you would use to perform 2 way data binding to controls in the System.Windows.Controls namespace.

Technorati Tags: LightSwitch Masked Textbox,LightSwitch Textbox field