HTML_QuickForm_Renderer_ObjectFlexy

HTML_QuickForm_Renderer_ObjectFlexy -- A renderer for Flexy templates

Description

This renderer allows you to output your form using a Flexy template. A static and dynamic usage example is available in the docs/renderers directory.

Usage example

The following is an example of using the ObjectFlexy renderer with a simple template.

Defining the elements


<?php

require_once 'HTML/Template/Flexy.php';
require_once 'HTML/QuickForm.php';
require_once 'HTML/QuickForm/Renderer/ObjectFlexy.php';


// Form name will be used to find the placeholders.

$form = new HTML_QuickForm('form', 'POST');

// Personal information

$form->addElement('header', 'personal', 'Personal Information');

$form->addElement('text', 'email', 'Your email:');
$form->addElement('password', 'pass', 'Your password:', 'size=10');
$name['last'] = &HTML_QuickForm::createElement('text', 'first', 'First', 'size=10');
$name['first'] = &HTML_QuickForm::createElement('text', 'last', 'Last', 'size=10');
$form->addGroup($name, 'name', 'Name:', ',&nbsp;');
$areaCode = &HTML_QuickForm::createElement('text', '', null,'size=4 maxlength=3');
$phoneNo1 = &HTML_QuickForm::createElement('text', '', null, 'size=4 maxlength=3');
$phoneNo2 = &HTML_QuickForm::createElement('text', '', null, 'size=5 maxlength=4');
$form->addGroup(array($areaCode, $phoneNo1, $phoneNo2), 'phone', 'Telephone:', '-');

// Company information

$form->addElement('header', 'company_info', 'Company Information');

$form->addElement('text', 'company', 'Company:', 'size=20');

$str[] = &HTML_QuickForm::createElement('text', '', null, 'size=20');
$str[] = &HTML_QuickForm::createElement('text', '', null, 'size=20');
$form->addGroup($str, 'street', 'Street:', '<br />');

$addr['zip'] = &HTML_QuickForm::createElement('text', 'zip', 'Zip', 'size=6 maxlength=10');
$addr['city'] = &HTML_QuickForm::createElement('text', 'city', 'City', 'size=15');
$form->addGroup($addr, 'address', 'Zip, city:');

$select = array('' => 'Please select...', 'AU' => 'Australia', 'FR' => 'France', 'DE' => 'Germany', 'IT' => 'Italy');
$form->addElement('select', 'country', 'Country:', $select);

// Other elements

$form->addElement('checkbox', 'news', '', " Check this box if you don't want to receive our newsletter.");

$form->addElement('reset', 'reset', 'Reset');
$form->addElement('submit', 'submit', 'Register');

// Tries to validate the form
if ($form->validate()) {
    // Form is validated, then freezes the data
    $form->freeze();
}

// setup a template object
$options = &PEAR::getStaticProperty('HTML_Template_Flexy','options');
$options = array(
    'templateDir' => './templates',
    'compileDir' => './templates/build',
    'forceCompile' => 1,
    'debug' => 0,
    'local' => 'en'
);

$template = new HTML_Template_Flexy($options);

$renderer =& new HTML_QuickForm_Renderer_ObjectFlexy($template);
$renderer->setLabelTemplate("label.html");
$renderer->setHtmlTemplate("html.html");

$form->accept($renderer);

$view = new StdClass;
$view->form = $renderer->toObject();

$template->compile("flexy-static.html");
$template->outputObject($view);

?>

The template files used above are the following: label.html

A template for the labels

       
{if:required}
    <font color="red" size="1">*</font>
{end:}
{label:h}

html.html

A template for the overall html

       
{if:error}
    <font color="orange" size="1">{error:h}</font><br />
{end:}
{html:h}

flexy-static.html

A template for the form

       
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!--  $Id: html-quickform-renderer-objectflexy.xml,v 1.1 2008/03/21 21:38:44 saltybeagle Exp $ -->
<html>
<head>
    <title>Flexy template : 2 column layout example</title>
    <style type="text/css">
       .errors {
       font-family: sans-serif;
       color : #000;
       background-color : #FFF;
       font-size : 12pt;
       }
       .label {
       font-family: sans-serif;
       color : Navy;
       font-size : 11px;
       text-align : right;
       vertical-align : top;
       white-space: nowrap;
       }
       .element {
       font-family: sans-serif;
       background-color : #EEE;
       text-align : left;
       white-space: nowrap;
       }
       .note {
       font-family: sans-serif;
       background-color : #EEE;
       text-align : center;
       font-size : 10pt;
       color : AAA;
       white-space: nowrap;
       }
       th {
       font-family: sans-serif;
       font-size : small;
       color : #FFF;
       background-color : #AAA;
       }
       .maintable {
       border : thin dashed #D0D0D0;
       background-color : #EEE;
       }
    </style>
{form.javascript:h}
</head>

<body>

{form.outputHeader():h}
{form.hidden:h}

<table class="maintable" width="600" align="center">
    <tr>
        <td width="50%" valign="top"><!-- Personal info -->
            <table width="100%" cellpadding="4">
                <tr><th colspan="2">{form.header.personal:h}</th></tr>
                <tr>
                    <td class="label">{form.name.label:h}</td>
                    <td class="element">{form.name.error:h}
                        <table cellspacing="0" cellpadding="1">
                            <tr>
                                <td>{form.name.first.html:h}</td>
                                <td>{form.name.last.html:h}</td>
                            </tr>
                            <tr>
                                <td><font size="1" color="grey">{form.name.first.label:h}</font></td>
                                <td><font size="1" color="grey">{form.name.last.label:h}</font></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="label">{form.phone.label:h}</td>
                    <td class="element">{form.phone.html:h}</td>
                </tr>
                <tr>
                    <td class="label">{form.email.label:h}</td>
                    <td class="element">{form.email.html:h}</td>
                </tr>
                <tr><td colspan="2" class="note">Please, choose a 8-10 characters password.</td></tr>
                <tr>
                    <td class="label">{form.pass.label:h}</td>
                    <td class="element">{form.pass.html:h}</td>
                </tr>
            </table>
        </td>
        
        <td width="50%" valign="top"><!-- Company info -->
            <table width="100%" cellpadding="4">
                <tr><th colspan="2">{form.header.company_info:h}</th></tr>
                <tr>
                    <td class="label">{form.company.label:h}</td>
                    <td class="element">{form.company.html:h}</td>
                </tr>
                <tr>
                    <td class="label" valign="top">{form.street.label:h}</td>
                    <td class="element">{form.street.html:h}</td>
                </tr>
                <tr>
                    <td class="label">{form.address.label:h}</td>
                    <td class="element">{form.address.error:h}
                        <table cellspacing="0" cellpadding="1">
                            <tr>
                                <td>{form.address.zip.html:h}</td>
                                <td>{form.address.city.html:h}</td>
                            </tr>
                            <tr>
                                <td><font size="1" color="grey">{form.address.zip.label:h}</font></td>
                                <td><font size="1" color="grey">{form.address.city.label:h}</font></td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td class="label">{form.country.label:h}</td>
                    <td class="element">{form.country.html:h}</td>
                </tr>
                <tr>
                    <td class="label">{form.destination.label:h}</td>
                    <td class="element">{form.destination.html:h}</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table width="600" align="center">
    <tr>
        <td>{form.requirednote:h}</td>
        <td align="right">{form.reset.html:h}&nbsp;{form.submit.html:h}</td>
    </tr>
    <tr>
        <td colspan="2" style="font-size:11px; color: navy;"><br />{form.news.html:h}</td>
    </tr>
</table>

</form>

<br />
<b>Collected Errors:</b><br />
{foreach:form.errors,error}
    <font color="red">{error}</font> in element [{name}]<br />
{end:}

&nbsp;
<p><strong>The used "Static" Object</strong></p>
<pre style="font-size: 12px;">
{static_object}
</pre>

</body>
</html>

For more information on Flexy templating, see the package homepage.