Custom 1

Overview

This example will display a dual multi-select QuickForm element, to manage a simple fruit list.
Both lists have headers, buttons are below the lists, and colors are managed by CSS rules.

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 (lines 58 to 62) with headers and load with data defined from $fruit_array (lines 43 thru 53).

Step 2

The basic render is replaced by a new layout definition (lines 70-82) set at line 83.

Warning: Even if the dual multi-select has headers defined (line 63), they will be display only because we have put placeholders {label_2} and {label_3} somewhere (lines 72-73) into the element template.

Step 3

The swap buttons style were changed by a CSS rule (lines 114-119) set on lines 65 and 68 while labels are changed on lines 64 and 67.

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

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

Both list are 300 pixels width and display 5 items (lines 59-61). Styles are defined by CSS rules and class pool (lines 101-112).

Property Value Default
size 5 10
width 300 100
class pool  

Source Code

PHP code
  1. <?php
  2. /**
  3.  * Custom advMultiSelect HTML_QuickForm element
  4.  * using stylesheet rules selectors and a template.
  5.  *
  6.  * The template allows to add label as headers of dual select box
  7.  * and moves the button to another location (below each select box).
  8.  *
  9.  * @version    $Id: qfams_custom_1.php,v 1.6 2009/01/28 22:24:43 farell Exp $
  10.  * @author     Laurent Laville <pear@laurent-laville.org>
  11.  * @package    HTML_QuickForm_advmultiselect
  12.  * @subpackage Examples
  13.  * @access     public
  14.  * @example    examples/qfams_custom_1.php
  15.  *             qfams_custom_1 source code
  16.  * @link       http://www.laurent-laville.org/img/qfams/screenshot/custom1.png
  17.  *             screenshot (Image PNG, 677x197 pixels) 4.80 Kb
  18.  */
  19.  
  20. require_once 'HTML/QuickForm.php';
  21. require_once 'HTML/QuickForm/advmultiselect.php';
  22.  
  23. $form = new HTML_QuickForm('amsCustom1');
  24. $form->removeAttribute('name');        // XHTML compliance
  25.  
  26. // same as default element template but without the label (in first td cell)
  27. $withoutLabel = <<<_HTML
  28. <tr valign="top">
  29.     <td align="right">
  30.         &nbsp;
  31.     </td>
  32.     <td align="left">
  33.         <!-- BEGIN error --><span style="color: #ff0000;">{error}</span><br /><!-- END error -->{element}
  34.     </td>
  35. </tr>
  36. _HTML;
  37.  
  38. // more XHTML compliant
  39. // replace default element template with label, because submit button have no label
  40. $renderer =& $form->defaultRenderer();
  41. $renderer->setElementTemplate($withoutLabel, 'send');
  42.  
  43. $fruit_array = array(
  44.     'apple'     =>  'Apple',
  45.     'orange'    =>  'Orange',
  46.     'pear'      =>  'Pear',
  47.     'banana'    =>  'Banana',
  48.     'cherry'    =>  'Cherry',
  49.     'kiwi'      =>  'Kiwi',
  50.     'lemon'     =>  'Lemon',
  51.     'lime'      =>  'Lime',
  52.     'tangerine' =>  'Tangerine',
  53. );
  54.  
  55. // rendering with QF renderer engine and template system
  56. $form->addElement('header', null, 'Advanced Multiple Select: custom layout ');
  57.  
  58. $ams =& $form->addElement('advmultiselect', 'fruit', null, $fruit_array,
  59.                            array('size' => 5,
  60.                                  'class' => 'pool', 'style' => 'width:300px;'
  61.                                 )
  62. );
  63. $ams->setLabel(array('Fruit:', 'Available', 'Selected'));
  64. $ams->setButtonAttributes('add',    array('value' => 'Add >>',
  65.                                            'class' => 'inputCommand'
  66. ));
  67. $ams->setButtonAttributes('remove', array('value' => '<< Remove',
  68.                                            'class' => 'inputCommand'
  69. ));
  70. $template = '
  71. <table{class}>
  72. <!-- BEGIN label_2 --><tr><th align="center">{label_2}</th><!-- END label_2 -->
  73. <!-- BEGIN label_3 --><th align="center">{label_3}</th></tr><!-- END label_3 -->
  74. <tr>
  75.  <td>{unselected}</td>
  76.  <td>{selected}</td>
  77. </tr>
  78. <tr>
  79.  <td align="center">{add}</td>
  80.  <td align="center">{remove}</td>
  81. </tr>
  82. </table>';
  83. $ams->setElementTemplate($template);
  84.  
  85. $form->addElement('submit', 'send', 'Send');
  86. ?>
  87. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  88.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  89. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  90. <head>
  91. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  92. <title>HTML_QuickForm::advMultiSelect custom example 1</title>
  93. <style type="text/css">
  94. <!--
  95. body {
  96.   background-color: #FFF;
  97.   font-family: Verdana, Arial, helvetica;
  98.   font-size: 10pt;
  99. }
  100.  
  101. table.pool {
  102.   border: 0;
  103.   background-color: lightyellow;
  104. }
  105. table.pool th {
  106.   font-size: 80%;
  107.   font-style: italic;
  108.   text-align: center;
  109. }
  110. table.pool select {
  111.   background-color: lightblue;
  112. }
  113.  
  114. .inputCommand {
  115.     background-color: #d0d0d0;
  116.     border: 1px solid #7B7B88;
  117.     width: 7em;
  118.     margin-bottom: 2px;
  119. }
  120.  -->
  121. </style>
  122. <?php echo $ams->getElementJs(false); ?>
  123. </head>
  124. <body>
  125. <?php
  126. if ($form->validate()) {
  127.     $clean = $form->getSubmitValues();
  128.  
  129.     echo '<pre>';
  130.     print_r($clean);
  131.     echo '</pre>';
  132. }
  133. $form->display();
  134. ?>
  135. </body>
  136. </html>
generated by Generic Syntax Highlighter - GeSHi