Factoring web page content boxes - PHP

Although I must admit that the factory pattern can be used with a great variety of real-world applications, such as form and web page generators, database abstraction layers, and so forth, in this case I'm going to demonstrate how to utilize its neat functionality to build different types of content boxes. These boxes can be quickly included into any web document by simply invoking the appropriate factory class.

Basically, the visual appearance that I plan to achieve with these content boxes is illustrated by the picture below:

As you can see, the above image shows pretty clearly how distinct kinds of web page content boxes can be easily created by using the factory pattern, in this way demonstrating yet another useful implementation for this popular pattern.

All right, now that you have seen how the pertinent content boxes are going to look when included into a specific web page, let me show you the respective definition of the factory class that builds them. Here is the signature for the class in question; examine its source code, please:

class ContentBoxFactory{
   public function createContentBox($type,$title,$contents){
     $contentBox=NULL;
     switch($type){
       case "grey";
         $contentBox=new GreyContentBox($title,$contents);
         break;
       case "blue";
         $contentBox=new BlueContentBox($title,$contents);
         break;
       case "yellow";
         $contentBox=new YellowContentBox($title,$contents);
         break;
       default:
         $contentBox=new GreyContentBox($title,$contents);
         break;               
     }
     return $contentBox;
   }
}

See how easy it is to define a basic factory class for building three different types of content boxes? I bet you do! The "ContentBoxFactory" class has been provided with the capacity for returning to client code, a decent variety of content box objects, identified as "GreyContentBox," "BlueContentBox" and "YellowContentBox" respectively.

Obviously, the main difference between the aforementioned content box objects rests upon their background and title colors, something that can be perfectly seen in the image shown a few lines above.

Okay, at this point you hopefully grasped the logic that drives the previous factory class, which indeed presents a simple signature. However, since the prior content boxes need to be included into a sample web document to appreciate their real usefulness, I'm going to build a web page generator class. Its primary function will be creating the CSS styles and web page sections required for using respective content boxes.

Having said that, here is the corresponding definition for this web page generator:

// define 'WebPage' class
class WebPage{
   private $title='Testing the factory pattern';
   public function __construct(){
     $this->style=<<<EOD

<style type="text/css">
body{
   padding: 0;
   margin: 0;
   background: #fff;
}

.greybox{
   float: left;
   width: 200px;
   margin: 10px 0 10px 10px;
   background: #eee;
   border: 1px solid #999;
}

.greybox h2{
   padding: 7px 0 9px 0;
   margin: 0;
   background: #ccc;
   font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
   color: #000;
   text-align: center;
   border-bottom: 1px solid #999;
}

.bluebox{
   float: left;
   width: 200px;
   margin: 10px 0 10px 10px;
   background: #9cf;
   border: 1px solid #036;
}

.bluebox h2{
   padding: 7px 0 9px 0;
   margin: 0;
   background: #09c;
   font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
   color: #000;
   text-align: center;
   border-bottom: 1px solid #036;
}

.yellowbox{
   float: left;
   width: 200px;
   margin: 10px 0 10px 10px;
   background: #ffc;
   border: 1px solid #c63;
}

.yellowbox h2{
   padding: 7px 0 9px 0;
   margin: 0;
   background: #fc0;
   font: bold 11px Tahoma, Arial, Helvetica, sans-serif;
   color: #000;
   text-align: center;
   border-bottom: 1px solid #c63;
}

p{
   padding: 10px;
   font: normal 11px Tahoma, Arial, Helvetica, sans-serif;
   color: #000;
}
</style>
EOD;
   }
   public function createHeader(){
     return '<html><head><title>'.$this->title.'</title>'.$this-
>style.'</head><body>';
   }
   public function createFooter(){
     return '</body></html>'; 
   }
}  

As demonstrated previously, the above "WebPage" generator class presents a few basic methods for creating the different sections of a basic web document. It also generates, via the corresponding constructor, the set of CSS styles required to build all of the content boxes that you saw before.

So far, so good right? You have learned how to build two complementary classes, that is the factory and the web page generator respectively, aimed at displaying these simple content boxes on the browser. Nonetheless, there are a few missing pieces in this schema, since the classes that render these boxes remain undefined as of yet.

Now, bearing in mind this issue, in the following section I'm going to show you the complete signatures for these brand new classes, so you can understand more easily how they can be linked with each other.

To learn how these brand new classes will be built, please click on the link that appears below and keep reading.