You are here: Home > Documentation > tutorial > Customizing the Web Lite Look and Feel > Extending Templates

Previous: Customizing templates	Up to Contents	Next: Creating a theme for Xataface

Customizing the Web Lite Look and Feel

Jump:

The Xataface includes some powerful templating tools that give the developer the power to modify any part of the interface easily.

Extending Templates

Xataface allows you to extend existing templates, replacing only the portions that need to be changed.

In the previous section, we showed how templates can be overridden and also how they can have content inserted into their "blocks". This section introduces Xataface's template inheritance features which are essentially a combination of the "override" and "block insertion" methods of customization. The idea is that if you need to create a new template that is almost the same as an existing template but requires some customization, you can "extend" the original template and modify only the regions that require changes. This is very similar to the concept of an editable region in Macromedia Dreamweaver.

Motivation by example

Let's motivate this feature using an example. Suppose my website uses a common template for every page that defines the header and footer, but each page will have different content in the center portion of the page. The main template would look something like this:

<html>
    <head><title>My Web Site</title></head>
    <body>
    <img src="images/myHeader.jpg" alt="Header graphic" />
    <h1>My Web Site</h1>
    <div id="main-content">
    {define_slot name="main_content"}
         This slot is where the main content goes
    {/define_slot}
    </div>
    <div id="footer">Copyright (c) 2006 Me</div>
    </body>
</html>

The key thing to notice in the above example is the use of the {define_slot} tag. This tag marks an editable region in the template that can be overridden by other templates. When a page is displayed using the Main template, the {define_slot} tag is ignored and its internal content is just rendered to the screen unmodified. We save this template as "My_Main_Template.html" in our application's 'templates' directory so that we can create a quick test page to try the template out:

<?
require_once '../path/to/dataface/dataface-public-api.php';
df_init(__FILE__, '/path/to/dataface');
df_display(array(), 'My_Main_Template.html');
?>

We save this test page as 'testpage.php' in our application's directory. Pointing the web browser to this page results in the following HTML code:

<html>
    <head><title>My Web Site</title></head>
    <body>
    <img src="images/myHeader.jpg" alt="Header graphic" />
    <h1>My Web Site</h1>
    <div id="main-content">
        This slot is where the main content goes
    </div>
    <div id="footer">Copyright (c) 2006 Me</div>
    </body>
</html>

Notice how everything is rendered as is, except that the {define_slot} tags are omitted. At this point the {define_slot} tag has done nothing except clutter up the template source. The real power is revealed when it comes time to "extend" this template. Let's make a feedback page now by creating a template called 'Feedback.html'. This template should have the same header and footer as the main template but the main content should be different - it should contain feedback information for the user.

We create the 'Feedback.html' template as follows (and save it inside the 'templates' directory):

{use_macro file="My_Main_Template.html"}
    {fill_slot name="main_content"}
        <h2>Feedback</h2>
        <p>This is the feedback page.  Please send your feedback <a href="nospam@nospam.com">here</a></p>.
    {/fill_slot}
{/use_macro}

The {use_macro} tag on the first line of the above snippet tells Xataface that this template will inherit from the "My_Main_Template.html" template.

The {fill_slot} tag tells Xataface to replace the contents of the corresponding {define_slot} tag in the parent template (My_Main_Template.html) with its own content. In effect this tells Xataface to render the template specified in the {use_macro} tag except where a {fill_slot} tag replaces the content of a {define_slot} tag.

Now we create a script to display our feedback page (we'll call it 'feedback.php'):

<?
require_once '/path/to/dataface/dataface-public-api.php';
df_init(__FILE__, '/path/to/dataface');
df_display(array(), 'Feedback.html');
?>

And pointing the web browser to feedback.php (and select "View Source") we see the HTML source for our page is:

<html>
    <head><title>My Web Site</title></head>
    <body>
    <img src="images/myHeader.jpg" alt="Header graphic" />
    <h1>My Web Site</h1>
    <div id="main-content">
        <h2>Feedback</h2>
        <p>This is the feedback page.  Please send your feedback <a href="nospam@nospam.com">here</a></p>.
    </div>
    <div id="footer">Copyright (c) 2006 Me</div>
    </body>
</html>

Notice that most of the page content is retained from the "My_Main_Template.html" template, but the section inside the {define_slot} tags has been replaced by the contents of the {fill_slot} tags in the "Feedback.html" template.

We could have added a {define_slot} tag inside the {fill_slot} tag to allow the Feedback.html template to be further extended.

Filling a slot using delegate classes

In the previous section, we learned how to insert content into {block} tags using delegate classes. In fact, the same syntax can be used to fill slots in templates. For example, if we wanted to fill the {define_slot name="main_content"} tag from the examples above, we could simply implement a method named 'block__main_content' in the appropriate delegate class. This could be done at a table level or the application level.

Previous: Customizing templates	Up to Contents	Next: Creating a theme for Xataface

Pages

Pages

Customizing the Web Lite Look and Feel

Extending Templates

Motivation by example

Filling a slot using delegate classes