UI Validation with the MVP pattern. #Part02.

For anyone of you that didn’t read the first part of this article (that I recommend) this is the address.

In this part we will go to build the UI layers, so the user interface, the presentation layer and the Windows form.

The user interface.

In the MVP pattern the interface in the contract that we want to share from the UI and the presenter. In our case we want to add to simple fields, the username and the password. This is a sample:

   1: public interface IUserView
   2: {
   3:     string Username { get; set; }
   4:     string Password { get; set; }
   5:     ///implementation ...
   6: }

Now we just have to reflect the two properties in our windows form in this simple way:

image

And this is the code coming from the view, because of course, in the MVP pattern our UI has to inherit the view.

   1: #region IUserListView Members
   2: public string Username
   3: {
   4:     get{return this.txtUsername.Text;}
   5:     set{this.txtUsername.Text = value;}
   6: }
   7: public string Password
   8: {
   9:     get{return this.txtPassword.Text;}
  10:     set{this.txtPassword.Text = value;}
  11: }

Now what we need is a method to send messages back to the user and then we can step into the presenter. So let’s declare a sendMessage method in the interface.

   1: void SendMessage(string message);

And the corresponding implementation in our Windows form:

   1: public void SendMessage(string message)
   2: {
   3:     MessageBox.Show(message, "Message", 
   4:     MessageBoxButtons.OK, MessageBoxIcon.Information);
   5: }

The presenter.

The presenter in the MVP pattern is the core of the UI. Of course everything has to be executed inside it, and the UI has only to call the corresponding method. Let’s build the presenter and the constructor:

   1: public sealed class UserViewPresenter
   2: {
   3:     IUserView view;
   4:     public UserListViewPresenter(IUserListView view)
   5:     {
   6:         this.view = view;
   7:     }
   8:     /// implementation ...
   9: }

So at this point we go back to the UI and declare and initialize our presenter …

   1: public partial class formUser : IUserView
   2: {
   3:     UserViewPresenter presenter;
   4:     public formUser()
   5:     {
   6:         InitializeComponent();
   7:         this.presenter = new UserViewPresenter(this);
   8:     }

Now we are fine and this is the normal way to use the MVP pattern. But what about the validation??

Validate the valid able …

Suppose that in your presenter you have a simple method called save that will be called by a button in your UI. What you have to do is to check the entity you are going to save, before save it!

   1: public void Save()
   2: {
   3: User user = this.view.SelectedUser;
   4: if (user.IsValid())
   5: {
   6:     ///save the entity
   7: }
   8: else
   9: {
  10:     this.SendValidationErrors(user);
  11: }

Because when we call the method IsValid() we already populate the list of errors in our entity, what we have to do now is to simple read them and build a message for the user:

   1: private void SendValidationErrors(User user)
   2: {
   3:     foreach (string error in user.ListResults)
   4:     {
   5:         this.view.SendMessage(error);
   6:     }
   7: }

This is just an example, not very well done, on how to use the UI validation in the MVP pattern. You can agree or you cannot. I always appreciate comments and idea to share.

In the next post I will show you how to build a more strong validation and a simple way to reflect the validation to every simple control of the Windows form with the error component.