Friday, September 1, 2023

Escape the Button-Click development. Part II

 I know it's quite some time since my last blog post -  Sorry I was too busy...

if you have not read the 1st part, here is the link:
Escape the Button-Click development. Part I

OK - now the next question is how to update the Form/View.

We have to decide if we want to link the View to the ViewModel. Let's take a closer look at the differences.

Link to the View

In this case, you can write something like fView.Grid.Cells[0,0] := 'Date/Time';

Not bad - only some lines must be changed to address the View-Reference, but on the other hand, you also have the link to the view in your unit tests, and that is something we want to avoid. So this is a shortcut that only helps with separating your code from the View, but not a step to be able to create nice unit tests.

Not link to the View

This is a good approach, but how to update the view?
Without any special components at your Viewmodel or special Components on your View you have to call some kind of property change procedure by hand.

If some content has changed in your Viewmodel e.G. 

fName := 'Frank';

On your View there must be at least some code to handle this like:

Procedure PropertyChange;
    EdName.Text := fViewModel.Name;

Of course, you do not want to create a procedure for each control/field and you also don't want to update every UI-Element on every change of one field.

You can use a Enum:

  ToUpdate = (toAll,tuName,tuTown...);

But in this case, I would simply use an Integer - perhaps you define a const value for each, but this is up to you.

This is your View:

  TMainView = class(TForm)
    Edit1: TEdit;
    Edit2: TEdit;
    Save: TButton;
    fViewModel : TMainViewModel;

    Procedure PropertyChange(aWhat : Integer);
    Constructor Create(aViewModel : TMainViewModel);

And this is the PropertyChange:

Procedure TMainView.PropertyChange(aWhat : Integer);
  case aWhat of
    0 : begin
          Edit1.Text   := ''
          Edit2.Text   := ''
          Save.Enabled := false
    1 : Edit1.Text   := fViewModel.Name;
    2 : Edit2.Text   := fViewModel.Street;
    3 : Save.Enabled := fViewModel.CanSave;
  end; // of case

That's it - not very fancy, but this approach is doing the job. If you want to write a unit test for this you can just write a little mockup for this procedure and you can test the behavior of your "Save-Button".

That is all for the moment.


  1. Hi: very interesting series of articles, thank you so much!
    Can you please provide a little sample and simple project: I will appreciate it very much. Thanks in advance. -- fabio vitale

    1. Sorry, unfortunately I do not have time to create examples at the moment. I also don't have a public repository at the moment. My time is very short but I'm working on my #D.MVVM framework again and when I'm done with it I'll also will publish some examples.