In consonance with the concepts that I deployed in the section that you just read, a brand new class must be built to complete the model dictated by the stage pattern. As you’ll see shortly, this contextual class will be capable of modifying the behavior of the “Div” class that you saw earlier.

But how will this be done? In plain words, if the contents wrapped by a specific DIV are larger than a predefined length, the DIV will switch its “overflow” CSS property to a value of “scroll.” Otherwise, the property in question will keep its original value, which is “hidden.” Sounds simple, right?

Now that you know how this contextual class is going to work, study its corresponding signature. It is as follows:

// define 'DivContext' class
class DivContext{
    private $div=NULL;
    private $divOverflow=NULL;
    public function __construct(Div $div){
      $this->div=$div;
    }
    // get 'Div' object
    public function getDiv(){
      return $this->div;
    }
    // get (X)HTML markup of 'Div' object
    public function getDivHTML(){
      $this->divOverflow=strlen($this->div->getData())
>64?'scroll':'hidden';
      return '<div id="'.$this->div->getId().'" class="'.$this-
>div->getClass().'" style="overflow: '.$this-
>divOverflow.';">'.$this->div->getData().'</div>';
    }
}

After examining the definition of the above “DivContext” class, you’ll have to agree with me that its functionality is indeed remarkable, regardless of its short signature. As you can see, this brand new contextual class takes up a “Div” object as its unique input parameter and assigns it as a class property.

However, I’d like you to pay attention to the signature of the “getDivHTML()” method, since this method is actually the workhorse of the class. Please notice how the method determines what value for the “overflow” CSS property will be assigned to the target DIV, depending on the length of the contents that will be housed by this containing element.

In this case, there’s a class that will change the way it displays a DIV element on a web page, according to the changes introduced into its context, in this way implementing the so-called stage pattern. Isn’t that interesting?

Okay, at this stage you hopefully grasped the logic that drives the stage pattern, therefore I think it’s an excellent time to move forward and see how the pair of classes previously defined can be put to work in a fully-functional example.

As you might have guessed, this instructive example will be developed in the following section, thus click on the link below and keep reading.