After defining all the concrete factory classes that you learned in the previous section, the next step consists simply of creating a new set of classes that logically display small and large DIV elements. Of course, the pertinent definitions for these brand new classes are easy to follow, and are listed below. So, have a look at them, please:

// define abstract 'DivElement' class
abstract class DivElement{
   abstract function display();
}
// define concrete 'SmallWhiteDivElement' class
class SmallWhiteDivElement extends DivElement{
   private $style='width: 100px; background: #fff; border: 1px solid #999;';
   private $content='This is the content of the small DIV element';
   public function display(){
     return '<div style="'.$this->style.'">'.$this-
>content.'</div>';                      
   }
}
// define concrete 'SmallBlackDivElement' class
class SmallBlackDivElement extends DivElement{
   private $style='width: 100px; background: #000; color: #fff; border: 1px solid #999;';
   private $content='This is the content of the small DIV element';
   public function display(){
     return '<div style="'.$this->style.'">'.$this-
>content.'</div>';                      
   }
}
// define concrete 'LargeWhiteDivElement' class
class LargeWhiteDivElement extends DivElement{
   private $style='width: 500px; background: #fff; border: 1px solid #999;';
   private $content='This is the content of the large DIV element';
   public function display(){
     return '<div style="'.$this->style.'">'.$this-
>content.'</div>';                      
   }
}
// define concrete 'LargeBlackDivElement' class
class LargeBlackDivElement extends DivElement{
   private $style='width: 500px; background: #000; color: #fff; border: 1px solid #999;';
   private $content='This is the content of the large DIV element';
   public function display(){
     return '<div style="'.$this->style.'">'.$this-
>content.'</div>';                      
   }
}

As illustrated above, the four previous classes are responsible for returning (to calling code) the correct (X)HTML markup that renders a specific DIV element. In the first two cases, the aforementioned classes will display small DIVs, while on the other occasions, only large DIVs will be created. Pretty simple, right?

All right, now you have learned how to create an abstract factory class which is capable of indicating what DIV objects should be spawned by the respective concrete factories, in accordance with their corresponding contexts. Nevertheless, I believe firmly that you'll understand the functionality of all these classes more easily if I set up an illustrative example where they can be put to work conjunctly.

Taking this fact into account, I suggest that you go ahead and read the next few lines, since you're just about to see the real power of the abstract factory pattern!