Widget Construction Tutorial
Step 2 - Hello World

Below is an example of how to build a simple Hello World widget. That widget wraps it's content inside a fieldset with a legend as the title of the widget, and the content added with the add() method.

The example shows how to declare the HelloWorldWidget subclass of BaseWidget, and how to use the HelloWorldWidget.

Hello World Widget Declaration


 * this contains the main widget TutorialPage
 * parent Page object.
 * $Id: HelloWorld.inc,v 2003/06/26 06:38:36 waboring Exp $
 * @author Walter A. Boring IV <waboring@buildabetterweb.com>
 * @package phpHtmlLib
 * @subpackage widget-examples
 * @version 2.0

 * This widget builds a fieldset with the
 * legend being the title of the widget
 * passed in the constructor.
 * The content of the fieldset is a div
 * with lines of text that come from
 * calls to the add() method.
class TutorialHelloWorldWidget extends HTMLWidget {

     * The constructor for the HelloWorldWidget
     * use the constructor to set up the title, and
     * any other widget global/init data
public function __construct($title) {
$this->set_title$title );

     * This function takes data and stuffs it into
     * the protected member array 'data'
     * @param mixed objects or strings
     * @return none
public function add() {
$args func_get_args();
$args as $arg ) {
$this->data[] = $arg;

     * function that will render the widget.
     * child class should override this.
     * @param int - the indentation level for
     *              the container.
     * @param int - the output debug flag to
     *              maintain compatibility w/ the API.
     * @return string the raw html output.
function render($indent_level=1$output_debug=0) {
//build the FIELDSETtag object with
        //the title of this widget as the
$fs html_fieldset($this->get_title());
$fs->set_style("display: inline; ".
"border: 2px solid #999999;".
"padding: 5px 5px 5px 5px;");

//build the DIVtag object that will hold the
        //content that was added to this
        //widget via the add() method.
$div html_div();
$div->set_style("display: block; ".
"background-color: #eeeeee;");

//walk through each item added and
        //add it to the DIVtag object.
foreach( $this->data as $line ) {
$div->add$linehtml_br() );

//add the DIVtag to the FIELDSETtag
        //as it's only content
$fs->add$div );

//return the resulting html for the
        //FIELDSETtag object.
return $fs->render($indent_level$output_debug);


Hello World Widget Example

Run the Example


class TutorialHelloWorldPage extends TutorialPage {

$_h1_text "Widget Construction Tutorial";
$_h2_text "Step 2 - Hello World Widget Use";

    public function 
__construct() {
parent::__construct('Tutorial Hello World Example');

    public function 
request_vars() {
        return array();

    protected function 
get_body_text() {
//create the Hello World Widget
        //with a title of 'Hello World'
$hello = new TutorialHelloWorldWidget("Hello World");

//add 3 content items to the widget
$hello->add("Hello World Line 1");
$hello->add("Hello World Line 2");
$hello->add("Hello World Line 3");

//show how we can easily reuse the widget
        //and just have different content/data
$hello2 = new TutorialHelloWorldWidget("Testing 123");
$hello2->add("This is a testing123");
$hello2->add(html_b("Some bold text"));
$hello2->add("Another line of test");
$hello2->add("blah blah blah");