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.3 2008-10-09 15:16:33 cweiske 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.