HTML_QuickForm_Renderer_ObjectFlexy
HTML_QuickForm_Renderer_ObjectFlexy – Flexy テンプレート用のレンダラ
Description
このレンダラは、Flexy テンプレートを使用してフォームを出力します。 静的な使用例と動的な使用例が docs/renderers ディレクトリにあります。
使用例
これは、ObjectFlexy レンダラを単純なテンプレートで使用する例です。
要素の定義
<?php
require_once 'HTML/Template/Flexy.php';
require_once 'HTML/QuickForm.php';
require_once 'HTML/QuickForm/Renderer/ObjectFlexy.php';
// フォーム名を使用してプレースホルダを探します
$form = new HTML_QuickForm('form', 'POST');
// 個人情報
$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:', ', ');
$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:', '-');
// 会社情報
$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);
// その他の要素
$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');
// フォームの検証
if ($form->validate()) {
// 入力に問題がなかったのでデータをフリーズします
$form->freeze();
}
// テンプレートオブジェクトの準備
$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);
?>
上で使用するテンプレートファイルは、次のようになります。 label.html
ラベル用のテンプレート
{if:required}
<font color="red" size="1">*</font>
{end:}
{label:h}
html.html
html 全体用のテンプレート
{if:error}
<font color="orange" size="1">{error:h}</font><br />
{end:}
{html:h}
flexy-static.html
フォーム用のテンプレート
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- $Id: html-quickform-renderer-objectflexy.xml,v 1.3 2008-10-09 15:17:46 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} {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:}
<p><strong>The used "Static" Object</strong></p>
<pre style="font-size: 12px;">
{static_object}
</pre>
</body>
</html>
Flexy テンプレートについての情報は、パッケージのホームページを参照ください。
忘却曲線を使ってこの知識を確実に記憶に残す
