Passive View

A Simple start with MVP in Delphi for Win32, Part 2

Some month ago I wrote a simple article about an MVP variant called PassiveView.
That example was very simple. Now I’ll present a more “advanced” version of that example.

The main problem with first example was the following method:

procedure TfrmCalculatorView.FormCreate(Sender: TObject);
begin
  //Link controls with related interface
  IFirstOperand := TGUIEdit.Create(EditFirstOp);
  ISecondOperand := TGUIEdit.Create(EditSecondOp);
  ICalcResult := TGUIEdit.Create(EditResult);
  IOperators := TGUISelectableList.Create(ComboOperators);
  IError := TGUIEdit.Create(EditError);

  //link view and presenter
  FPresenter := TCalculatorPresenter.Create(Self); //<<-- THIS IS THE BAD LINE
end;

The “BAD” line links the View with the Presenter but it’s in the view code, so this is meaning that View KNOWS the presenter… and this is not a good thing becouse the view is not so “passive”.

In a more advanced (and complex) version the View should be completely ignorant about the class that implement the presenter and the service.

In the main dpr file now the code now looks like the following.

var
  MainPresenter: ICalculatorPresenter;
  CalculatorView: TForm;
begin
  Application.Initialize;
  Application.MainFormOnTaskbar := True;
  //SETUP THE MAIN APPLICATION FORM FOR VCL PURPOSE
  Application.CreateForm(TfrmCalculatorView, CalculatorView);  
  //SETUP ALL THE LINKS BETWEEN THE MVP TRIAD
  MainPresenter := TCalculatorPresenter.Create(CalculatorView as ICalculatorView, TCalculatorService.Create);
  //LETS START!
  Application.Run;
end.

Now the presenter take care about all links between the MVP triad.

constructor TCalculatorPresenter.Create(CalculatorView: ICalculatorView;
  CalculatorService: ICalculatorService);
begin
  inherited Create;
  FCalculatorService := CalculatorService;
  FCalculatorView := CalculatorView;
  FCalculatorView.SetPresenter(self);
  InitView;  //does the links
end;

There is another addition to the previous example. Now there is only one constructor in the presenter, and using dependency injection take 2 interface for the view and the service.

    constructor Create(CalculatorView: ICalculatorView; CalculatorService: ICalculatorService);

Another plus is the possibility to open the same form a number of times without change the code for create it.

This is the GUI for this simple application.

3 instance of the same view with different presenter and service
3 instance of the same view with different presenter and service

As bonus, unit tests and mock object arent changed.

As usual the source code is here.

A Simple start with MVP in Delphi for Win32, Part 1

As GUI framework such as VCL become more and more powerful, it’s common practice to let the UI layer do more than it should. Without a clear separation of responsibilities, the UI layer can often become an integral part of application and businness logic, but… this kind of responsabilities belongs to other layers of the application.
A design pattern (and his numberless variants), is especially well suited to solving this problem.

In this article I want to build a simple application using MVP pattern. Actually, pattern used is not “clear” MVP but his variation called Passive View.

Using Fowler words:

A perennial problem with building rich client systems is the complication of testing them. Most rich client frameworks were not built with automated testing in mind. Controlling these frameworks programaticly is often very difficult.

A Passive View handles this by reducing the behavior of the UI components to the absolute minimum by using a controller that not just handles responses to user events, but also does all the updating of the view. This allows testing to be focused on the controller with little risk of problems in the view.

Passive View ensures no dependecies between Model and View.

Passive View has no dependencies between view and model (Unlike most MVC-style triad)
Passive View has no dependencies between view and model (Unlike most MVC-style triad)

In this sample, “model” is a simple layer for application logic. In real world, “service layer” should incapsulate “application service” and “domain model“.

Application looks like following:

The Calculator
The Calculator
Div operator with result
Div operator with result
Div operator with a EDivByZero Exception
Div operator with a EDivByZero Exception

Connect View and Presenter
The view (the Form in VCL application) must implement an interface.

This interface should provide all method to interact with GUI:

ICalculatorView = interface
  ['{471E3657-C6CE-49A3-BCB4-8FA6AF611DAD}']
  function FirstOperand: String;
  function SecondOperand: String;
  procedure SetFirstOperand(Value :String);
  procedure SetSecondOperand(Value :String);
  function GetOperator: IGUISelectableList;
  procedure SetCalcResult(const Value: String);
  procedure SetCalcResultReadOnly(const Value: Boolean);
  function Error: IGUIEdit;
end;

For simple interacting with GUI widget (in our example are EditFirstOperand, EditSecondoperand and EditCalcResult) we use a simple methods like following

  function FirstOperand: String;
  function SecondOperand: String;
  procedure SetFirstOperand(Value :String);
  procedure SetSecondOperand(Value :String);

But, if we need more by our widget (like populating combo box or change font color in the EditError or set ReadOnly to true) we should use another interface for a family of component.
In this sample I wrote 3 general interface:

  IGUIBaseInterface = interface
    ['{F0B7F031-9302-415E-8545-1FE20A365840}']
  end;

  IGUIEdit = interface(IGUIBaseInterface)
    ['{FE2D56FB-0CFB-4B33-9B56-0A523B235D37}']
    procedure SetText(const Value: String);
    function GetText: String;
    function GetAsInteger: Integer;
    function GetAsFloat: Extended;
    procedure SetReadOnly(const AValue: boolean);
    procedure SetVisible(const Value: Boolean);
    function GetTextAsInteger: Integer;
    procedure SetTextAsinteger(const Value: Integer);
    function GetTextAsFloat: Extended;
  end;

  IGUISelectableList = interface(IGUIBaseInterface)
    ['{EEFE5C52-94C3-464B-80F2-05E443B0F0F6}']
    procedure SetText(const Value: String);
    function GetText: String;
    procedure SetValue(const Value: String);
    function GetValue: String;
    function GetSelected: ISSKeyValue;
    procedure AddPair(AKey, AValue: String);
    procedure Clear;
  end;

For implementation details see attached sample code.

Finally in FormCreate of our form we can wire Presenter and View:

TfrmCalculatorView = class(TForm, ICalculatorView)
  //code 
end;
  //interface section
procedure TfrmCalculatorView.FormCreate(Sender: TObject);
begin
  //Link controls with related interface
  IOperators := TGUISelectableList.Create(ComboOperators);
  IError := TGUIEdit.Create(EditError);

  //link view and presenter
  //In this version VIEW know PRESENTER
  FPresenter := TCalculatorPresenter.Create(Self);
end;

This is a very simple example, so not all looks like real world. In a real world application, for example, view should not known the presenter class. With dependency injection you can do that (Next article in this serie will talk about this).

Every event generated by View (our Form) must be redirected to Presenter.

procedure TfrmCalculatorView.Button1Click(Sender: TObject);
begin
  FPresenter.DoCalc;
end;

Another approach is to publish some events in view interface and let presenter to bind them via standard event handler or anonimous methods (but this is for another post).

In attached sample code there is a sample application and unit test for Service Layer and View.
Required Mock Library is included in the zip file.

Simple Passive View, Sample Code

In 2nd part I’ll talk about unit test and mock object in Passive View.