Extending

Tao and Page can easily be extended, then you can create you own object to simplify your code.
For instance imagine a Page where all your needed assets are automatically loaded. No need to add your css, it’s already here. No need to create some tao(‘<a/>’); your navigation bar is already there. Then you can focus on your content. You custom Page has already pre-design your website.
Let’s create a page and a navigation bar to illustrate the tao extending capabilities.

Storing objects

Tao allows you to store your file anywhere you want if you require them (See the require.php documentation for more infos). But you would prefer to store your tao extensions near tao itself.
A good practice is to store your tao extensions in the tao folder itself, inside corresponding folders :

• tao/tao.element/ would welcome your tao nodes, such as the navigation bar
• tao/tao.page/ is your customized pages repository
• tao/tao.featuring/ is the place where your tao modifications stands

Extending a tao object

We’ll create an object extending tao object which actually is a DOM node for the current document. This object should be manipulated as any tao object but can have its own methods. This custom object is in fact a kind of tao wrapper for a code fragment.

- Create a new object in tao/tao.element/. We can name it as we want, but it must extend tao.
- In the constructor, call your tao’s parent to create an ul tag (see tao instanciation details for more informations).
- We’ll need to create some list item (<li>) inside the current navigation bar (which is an unordered list). Each li should contain a link to the corresponding navigation part. We create a addLi public method which will create a link, a list item and add the link to the li, then add the li to the current object (an ul tag).
- At any time, for debugging your object, you can do a simple echo new NavigationBar(); to check the result.

<?php

class NavigationBar extends Tao
{

	function __construct()
	{
		parent::__construct('ul');

		$this->setClass('navigationbar');
		$this->addNav('Home', '/');
		$this->addNav('Blog', 'http://me.blogspot.com/');
		$this->addNav('Portfolio', '/folio/');
		$this->addNav('Resume', '/cv/');
		$this->addNav('Contact', 'mailto:me@website.com');
	}

	function addNav( $text, $url )
	{
		$li = new tao('li');
		$li->setId( strtolower( $text ) );
		$li->addContent( $this->createLink( $text, $url ) );
		$this->addcontent( $li );
		return $this;
	}

	private function createLink($content, $href)
	{
		$link = new tao('a');
		$link->setAttribute('href', $href)->addContent($content);
		return $link;
	}

}

?>

- That’s it. Our object is ready to use. We can, if we need it, add any extra navigation part from any page, using the addNav method.

Extending a page

- Create a new object in tao/tao.page/. “Page” must prefix its name, and it must extends a PageXhtml or PageHtml object.
- In the constructor , call your page’s parent to create an html5 document (see Page instanciation details for more informations).
- Using the Page methods, define a title, prepare your css and javascript calls.
- Add the required elements of your design such as a logo or our NavigationBar object.
- We also need to add a footer at the end of the page, but we don’t want to add it manually on each page using our custom Page. so we hook the render method to add a footer automatically.
- We also add a method to toggle an “active” css class name to one of the NavigationBar li. Using the find method, we could target the specified item and add the “active” class automatically. (An other, and better solution is to create a specific method inside the NavigationBar object, but it cannot expose the find method to you)

<?php

class PageMyProject extends PageHtml
{

	function __construct()
	{
		parent::__construct(5);

		$this->setTitle( 'My brand new project' );
		$this->addCss('static/css/myproject.css');
		$this->addScriptSrc('static/js/jquery.min.js', 'top');
		$this->addScriptSrc('static/js/myproject.js');

		$this->addContent( tao('<img src="static/img/logo.png" alt="My logo"/>') );
		$this->addContent( new NavigationBar() );

	}

	function setActiveNavigation( $id )
	{
		$this->find( '.navigationbar #' . $id )->setClass('active');
	}

	function render()
	{
		$footer = tao('<div />')->setId('footer')->addContent( '© Me' );
		$this->addContent($footer);

		return parent::render();
	}

}

?>

Using the extending objects

You now can use your new PageMyProject to display your project, and of course call the Page methods on it :

<?php
require_once('./tao/require.php');
Page('MyProject');
Page()->setTitle( 'Welcome to my page' );
Page()->setActiveNavigation( 'portfolio' );
tao( '<h1 />' )->addContent( 'Work in progress !' )->addTo( Page() );
?>