UI Validation with the MVP pattern. #Part02.

Sunday, March 15, 2009 9:56 PM | Leave a reply »

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.


Comments

  1. Gravatar Eddie says:

    Re : # re: UI Validation with the MVP pattern. #Part02.

    Hello Raffaele.

    Thanks for taking the time to share your implementation.

    Using this method, how would you highlight controls with invalid content? For example, if user name is not provided and I want to place an asterisk beside the user name control, or change it's color. It seems that this is not possible since the presenter is only providing the view with a collection of strings.
  2. Gravatar raffaeu says:

    Re : # re: UI Validation with the MVP pattern. #Part02.

    That will be the next article, where I have changed the logic by using a collection of typed control instead of a list of string, in that way you will recognize for each error the corresponding control, easily using a foreach loop.
  3. Gravatar gurjeet says:

    Re : # re: UI Validation with the MVP pattern. #Part02.

    nice logic.
  4. Gravatar bastien says:

    Re : # re: UI Validation with the MVP pattern. #Part02.

    That will be the next article, where I have changed the logic by using a collection of typed control instead of a list of string, in that way you will recognize for each error the corresponding control, easily using a foreach loop. 4/28/2009 9:22 PM | raffaeu

    -> Bonjour Raffaele, where is the next mvp validation article? Please I can not find it.
  5. Gravatar Raffaeu says:

    Re : # re: UI Validation with the MVP pattern. #Part02.

    There should be the post nr 3 in the same section of this series. Anyway you can easily create a custom ilist that will handle the error and the corresponding field/control pairs.
Comments have been closed on this topic.