MVC: Differences Between Two-Step and Composite Vi

Question

In simple terms, could you please tell me the difference between the "Two-Step View" and "Composite View" Layout Design Patterns?

Answer 1

I see "Composite View" as the design pattern that suggests that you design your views via composition, or combining smaller parts (sub-views) to create the whole - This lends itself to increased reusability and better maintainability.

The "Two-Step View", on the other hand, is more of a specific implementation of the Composite View Design Pattern, largely driven by the Zend Framework Layout. This implementation suggests that you define all of the content your sub-views first (step 1), then allow a layout to render the sub-views at the appropriate places in the rendered HTML (step 2).

I am generally a fan of a layout pattern but find the idea of two-steps (and defining all your sub-views first) limiting. I tend to think of layouts more along the lines of how Smarty 3's Extends/Block functionality works:

http://www.smarty.net/docs/en/advanced.features.template.inheritance.tpl

Functionality like Smarty's doesn't have a fixed number of steps in its composition - i.e. layouts can extend layouts and sub-views can be composed of further sub-views, etc.

Hope that helps.

Answer 2

Composite View, as the name implies, is a Composite (as in the GOF pattern) of Views. That means the Composite View is a tree structure of other (Composite, Template, Transform, …) Views, which you can handle uniformly through the root Composite View object.

If the client dispatches to the root View, it will dispatch to all the Views in the tree structure, thereby creating the result page. So in Composite Views, there is not two steps, but just one, because each individual View is a one-step View (of the concrete final output).

Use Composite Views that are composed of multiple atomic subviews. Each subview of the overall template can be included dynamically in the whole, and the layout of the page can be managed independently of the content.

In simplified Pseudo-Code:

composite = new CompositeView;
composite.add(new HeaderView(headerData));
composite.add(new TableView(tableData));
…
composite.add(new FooterView(footerData));
composite.render();

This is different from Two-Step-View in that the Two-Step-View is not a Composite, but just two steps of execution, first from Domain Data to a logic screen representation of that data and then to the concrete output format. That is, it separates logic structure and formatting of the page.

Two Step View deals with this problem by splitting the transformation into two stages. The first transforms the model data into a logical presentation without any specific formatting; the second converts that logical presentation with the actual formatting needed.

In simplified Pseudo-Code:

twoStepView = new TwoStepView;
twoStepView.setData(data);
twoStepView.setFirstStep(new ConcreteScreen);
twoStepView.setSecondStep(new ConcreteHtmlScreen);
twoStepView.transform();

As you can see, the Two-Step-View is only orchestrating the two steps. For instance, if your Two-Step-View uses XSLT, it would only handle the transformation from the input XML to the Screen XML to the final HTML output. The Concrete Screen and ConcreteHTMLScreen would then be the XSLT templates.