Introduction

Figure 1. Context Panel Showing the Photograph and Details of a Person
  1. Photograph
  2. Icon Links to Person's Home Page
  3. Name
  4. Name
  5. ID
  6. Address
  7. Gender
  8. Date Of Birth
  9. Telephone Number
  10. Email

This chapter will expand on the re-use of widgets to produce the "Person Context Panel Widget". As shown above, this is a combination of the photograph widget and details widget positioned side-by-side. The previous chapter introduced widget re-use by showing how the details widget could delegate to the e-mail address widget to generate part of it's HTML content. Using the exact same technique, the "Person Context Panel Widget" could combine the output of the photograph and details widgets and display them side-by-side to produce the content shown above. However, there is an opportunity to provide a further layer of abstraction by introducing a generic widget for displaying content side-by-side in a horizontal layout. The generic requirement could be phrased as: "To combine the output of multiple widgets in a horizontal layout".

The previous chapter introduced the concepts of building a "component model" and delegating to another widget to render it as HTML. The details widget was responsible for building the component model, which consisted of a single Field. The model was then passed to the e-mail address widget to generate HTML. In the same way the "Person Context Panel Widget" will be responsible for building the component model. In this case the component model will be represented as a collection of Field 's; one for the photograph, the other for the person's details. The "Person Context Panel Widget" will pass the component model to a new widget, the "Horizontal Layout Widget". This widget in turn will delegate to photograph and details widgets introduced in previous chapters and combine their output. The advantage of this abstraction is the "Horizontal Layout Widget" could also be used to fulfill separate requirements such as combine the display of multiple details widgets or multiple photograph widgets in a horizontal layout. For example, consider the requirement to display the photographs of a family side-by-side.

In summary, by the end of this chapter the "Person Context Panel Widget" will delegate to the "Horizontal Layout Widget", which in turn will delegate to the widgets introduced in earlier chapters. This is what is referred to as a "cascade".