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.

image

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.

About these ads

About dotnettim

Tim Leung is a Microsoft .Net / SQL Server developer based in England.
This entry was posted in LightSwitch. Bookmark the permalink.

8 Responses to LightSwitch – Creating a Masked Password TextBox Part 2

  1. Richard Waddell says:

    Very clear and useful, this thread proved helpful in understanding the binding, particularly the comments by Sheel Shah:

    http://social.msdn.microsoft.com/Forums/en-US/lightswitchgeneral/thread/55add55c-992d-4f31-83f2-5351149c8cca/

  2. dotnettim says:

    @Richard – thanks for the comment and for providing a link to the forum post by Sheel

  3. Richard Davison says:

    Exactly the same technique works for the default edit screen as well.
    Awesome.
    Richard Davison

  4. jbooker says:

    Tim, Nice Post! Any idea how to get the red boxes around passwords on validation error? I assume something is missing in the binding, but what? Thanks, Josh

  5. It’s going to be end of mine day, however before end I am reading this fantastic piece of writing to increase my know-how.

  6. The Swapper says:

    What’s up Dear, are you genuinely visiting this web page daily, if so after that you will without doubt obtain pleasant know-how.

  7. Pingback: LightSwitch for Games Part 3: Creating a Web Interface for your Users | Katy's Code

  8. That is a good tip particularly to those fresh to the blogosphere.
    Brief but very precise info… Many thanks for sharing this one.
    A must read article!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s