Template 1

Overview

This example will display a dual multi-select QuickForm element with the Sigma template engine and using the QF dynamic renderer.

Screenshot

sample screenshot

Demonstration

Give it a try

Dependencies

This example requires mandatory resources :

Explains step by step

Step 1

The dual multi-select is created with headers (lines 42-47), and load with data defined from $fruit_array (lines 25 thru 35).

Step 2

The basic render is replaced by element template defined on lines 54-64, set at line 65.

Javascript code is include into sigma template file itdynamic.html, on lines 78-79.

Step 3

Dual mutli-select list has 150 pixels width and display 15 items (lines 43-45). Styles are managed by CSS rules and class pool.

Property Value Default
size 15 10
width 150 100
class pool  

The swap buttons have layout managed by a CSS rule inputCommand on template file itdynamic.html set on lines 49;52 while labels are changed on lines 48;51.

Property Value Default
name   add
value Add >>  >> 
type   button
class inputCommand  

Property Value Default
name   remove
value << Remove  << 
type   button
class inputCommand  

Source Code

PHP code
  1. <?php
  2. /**
  3.  * Custom advMultiSelect HTML_QuickForm element
  4.  * embedded into a Sigma template and using the QF dynamic renderer.
  5.  *
  6.  * @version    $Id: qfams_template_1.php,v 1.5 2009/01/28 22:24:43 farell Exp $
  7.  * @author     Laurent Laville <pear@laurent-laville.org>
  8.  * @package    HTML_QuickForm_advmultiselect
  9.  * @subpackage Examples
  10.  * @access     public
  11.  * @example    examples/qfams_template_1.php
  12.  *             qfams_template_1 source code
  13.  * @link       http://www.laurent-laville.org/img/qfams/screenshot/template1.png
  14.  *             screenshot (Image PNG, 665x376 pixels) 23.3 Kb
  15.  */
  16.  
  17. require_once 'HTML/Template/Sigma.php';
  18. require_once 'HTML/QuickForm.php';
  19. require_once 'HTML/QuickForm/Renderer/ITDynamic.php';
  20. require_once 'HTML/QuickForm/advmultiselect.php';
  21.  
  22. $form = new HTML_QuickForm('amsTemplate1');
  23. $form->removeAttribute('name');        // XHTML compliance
  24.  
  25. $fruit_array = array(
  26.     'apple'     =>  'Apple',
  27.     'orange'    =>  'Orange',
  28.     'pear'      =>  'Pear',
  29.     'banana'    =>  'Banana',
  30.     'cherry'    =>  'Cherry',
  31.     'kiwi'      =>  'Kiwi',
  32.     'lemon'     =>  'Lemon',
  33.     'lime'      =>  'Lime',
  34.     'tangerine' =>  'Tangerine',
  35. );
  36.  
  37. // rendering with css selectors and API selLabel(), setButtonAttributes()
  38. $form->addElement('header', null, 'Advanced Multiple Select: custom layout ');
  39.  
  40. $form->addElement('text', 'name', 'Name:', array('size' => 40, 'maxlength' => 80));
  41.  
  42. $ams =& $form->addElement('advmultiselect', 'fruit', null, $fruit_array,
  43.                            array('size' => 15,
  44.                                  'class' => 'pool', 'style' => 'width:150px;'
  45.                                 )
  46. );
  47. $ams->setLabel(array('Fruit:', 'Available', 'Selected'));
  48. $ams->setButtonAttributes('add',    array('value' => 'Add >>',
  49.                                            'class' => 'inputCommand'
  50. ));
  51. $ams->setButtonAttributes('remove', array('value' => '<< Remove',
  52.                                            'class' => 'inputCommand'
  53. ));
  54. $template = '
  55. <table{class}>
  56. <!-- BEGIN label_2 --><tr><th>{label_2}</th><!-- END label_2 -->
  57. <!-- BEGIN label_3 --><th>&nbsp;</th><th>{label_3}</th></tr><!-- END label_3 -->
  58. <tr>
  59.  <td valign="top">{unselected}</td>
  60.  <td align="center">{add}{remove}</td>
  61.  <td valign="top">{selected}</td>
  62. </tr>
  63. </table>
  64. ';
  65. $ams->setElementTemplate($template);
  66.  
  67. $form->addElement('submit', 'send', 'Send', array('class' => 'inputCommand'));
  68.  
  69. $form->addRule('name', 'Your name is required', 'required');
  70. $form->addGroupRule('fruit', 'At least one fruit is required', 'required', null, 1);
  71.  
  72. $form->applyFilter('__ALL__', 'trim');
  73. $form->applyFilter('__ALL__', 'strip_tags');
  74.  
  75. $valid = $form->validate();
  76.  
  77. $tpl = new HTML_Template_Sigma('.');
  78. $tpl->loadTemplateFile('itdynamic.html');
  79. $tpl->setVariable('ams_javascript', $ams->getElementJs(false));
  80.  
  81. $renderer = new HTML_QuickForm_Renderer_ITDynamic($tpl);
  82.  
  83. $form->accept($renderer);
  84.  
  85. if ($valid) {
  86.     $clean = $form->getSubmitValues();
  87.  
  88.     $msg = sprintf("<p>Welcome <b>%s</b> you've selected these fruits:<br />%s</p>",
  89.            $clean['name'], implode(', ', $clean['fruit']));
  90.  
  91.     $tpl->setVariable('message_form_validate', $msg);
  92. }
  93. $tpl->show();
  94. ?>
generated by Generic Syntax Highlighter - GeSHi