Custom 3

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.
Fancy attributes may be set to forbid item un-selection.

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 55-57) with no headers yet defined.

The available fruit list has pear item disabled to forbid its un-selection (line 43).

Headers of the dual multi-select have been set (line 59), but do not forget the placeholders into element template (lines 68;69).

Both list are 100 pixels width and display 10 items (default attributes). Styles are defined by CSS rules and class pool (lines 100-114).

Property Value Default
size   10
width   100
class pool  

Step 2

The basic render is replaced by a new layout definition (lines 66-78) set at line 79.

Step 3

The swap buttons style were changed by a CSS rule (lines 116-121) set on lines 61;64 while labels are changed on lines 60;63.

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

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

Step 4

Data defined from $fruit_array (lines 40 thru 50) are finally load at line 81 with default values (apple, pear) selected.

Source Code

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