Custom 5

Overview

This example will display a dual multi-select QuickForm element, to manage a simple fruit list.
This example show how to arrange item in list with two buttons and a sort option.

Warning: sorting list is a developer issue only. it is not for end-user.

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 78-81) with no headers yet defined, and load with data defined from $fruit_array (lines 40 thru 50).

To simulate 3 different scripts with each a sort option, we have added lines 68-71, a radio button group to select sort value: auto arrange in alphabetic order, reverse, and without sort.

In real case condition, these sort options given to end-user should be only available by programming (see line 80) with usage of php constant SORT_ASC, SORT_DESC.

Step 2

The basic render is replaced by a new layout definition (lines 90-102) set at line 103. This layout includes moveUp and moveDown buttons. That will allow to manage selected list item as end-user want.

Step 3

Both list are 200 pixels width (line 79) and display 10 items (default attribute). Styles are managed by CSS rules and class pool (lines 128-143).

Property Value Default
size   10
width 200 100
class pool  

The swap buttons used default values except for CSS class rule.

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

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

Property Value Default
name   up
value    Up 
type   button
class inputCommand  

Property Value Default
name   down
value    Down 
type   button
class inputCommand  

Source Code

PHP code
  1. <?php
  2. /**
  3.  * Custom advMultiSelect HTML_QuickForm element
  4.  * that allows to manage sort of select boxes.
  5.  *
  6.  * @version    $Id: qfams_custom_5.php,v 1.6 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_custom_5.php
  12.  *             qfams_custom_5 source code
  13.  * @link       http://www.laurent-laville.org/img/qfams/screenshot/custom5.png
  14.  *             screenshot (Image PNG, 609x318 pixels) 9.94 Kb
  15.  */
  16.  
  17. require_once 'HTML/QuickForm.php';
  18. require_once 'HTML/QuickForm/advmultiselect.php';
  19.  
  20. $form = new HTML_QuickForm('amsCustom5');
  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, 'validate');
  39.  
  40. $fruit_array = array(
  41.     'apple'     =>  'Apple',
  42.     'orange'    =>  'Orange',
  43.     'pear'      =>  'Pear',
  44.     'banana'    =>  'Banana',
  45.     'cherry'    =>  'Cherry',
  46.     'kiwi'      =>  'Kiwi',
  47.     'lemon'     =>  'Lemon',
  48.     'lime'      =>  'Lime',
  49.     'tangerine' =>  'Tangerine',
  50. );
  51.  
  52. // decides either both select list will have their elements be arranged or not
  53. if (isset($_POST['autoArrange'])) {
  54.     if ($_POST['autoArrange'] == 'A') {
  55.         $sort = SORT_ASC;
  56.     } elseif ($_POST['autoArrange'] == 'D') {
  57.         $sort = SORT_DESC;
  58.     } else {
  59.         $sort = false;
  60.     }
  61. } else {
  62.     $sort = false;
  63. }
  64.  
  65. // rendering with QF renderer engine and template system
  66. $form->addElement('header', null,
  67.                   'For demo purpose only: must be validate to be active');
  68. $arrange[] =& $form->createElement('radio', null, null, 'Auto arrange asc.',  'A');
  69. $arrange[] =& $form->createElement('radio', null, null, 'Auto arrange desc.', 'D');
  70. $arrange[] =& $form->createElement('radio', null, null, 'No auto arrange',    'N');
  71. $form->addGroup($arrange, 'autoArrange', 'Sort list:');
  72. $form->setDefaults(array('autoArrange' => 'N'));
  73.  
  74. $form->addElement('submit', 'validate', 'Validate');
  75.  
  76. $form->addElement('header', null, 'Advanced Multiple Select: custom layout ');
  77.  
  78. $ams =& $form->addElement('advmultiselect', 'fruit', null, $fruit_array,
  79.                            array('class' => 'pool', 'style' => 'width:200px;'),
  80.                            $sort
  81. );
  82. $ams->setLabel(array('Fruit:', 'Available', 'Selected'));
  83.  
  84. $ams->setButtonAttributes('add'     , 'class=inputCommand');
  85. $ams->setButtonAttributes('remove'  , 'class=inputCommand');
  86. $ams->setButtonAttributes('moveup'  , 'class=inputCommand');
  87. $ams->setButtonAttributes('movedown', 'class=inputCommand');
  88.  
  89. // template for a dual multi-select element shape
  90. $template = '
  91. <table{class}>
  92. <!-- BEGIN label_2 --><tr><th>{label_2}</th><!-- END label_2 -->
  93. <!-- BEGIN label_3 --><th>&nbsp;</th><th>{label_3}</th></tr><!-- END label_3 -->
  94. <tr>
  95.  <td>{unselected}</td>
  96.  <td align="center">
  97.    {add}<br />{remove}<br /><br />{moveup}<br />{movedown}<br />
  98.  </td>
  99.  <td>{selected}</td>
  100. </tr>
  101. </table>
  102. ';
  103. $ams->setElementTemplate($template);
  104.  
  105. if ($_SERVER['REQUEST_METHOD'] == 'GET') {
  106.     // fruit default values already selected without any end-user actions
  107.     $form->setDefaults(array('fruit' => array('kiwi','lime')));
  108. }
  109.  
  110. $buttons[] =& $form->createElement('submit', null, 'Submit');
  111. $buttons[] =& $form->createElement('reset',  null, 'Reset');
  112. $form->addGroup($buttons, null, '&nbsp;');
  113. ?>
  114. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  115.     "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  116. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  117. <head>
  118. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  119. <title>HTML_QuickForm::advMultiSelect custom example 5</title>
  120. <style type="text/css">
  121. <!--
  122. body {
  123.   background-color: #FFF;
  124.   font-family: Verdana, Arial, helvetica;
  125.   font-size: 10pt;
  126. }
  127.  
  128. table.pool {
  129.   border: 0;
  130.   background-color: #339900;
  131. }
  132. table.pool td {
  133.   padding-left: 1em;
  134. }
  135. table.pool th {
  136.   font-size: 80%;
  137.   font-style: italic;
  138.   text-align: center;
  139. }
  140. table.pool select {
  141.   color: white;
  142.   background-color: #006600;
  143. }
  144.  
  145. .inputCommand {
  146.   width: 60px;
  147. }
  148.  -->
  149. </style>
  150. <?php echo $ams->getElementJs(false); ?>
  151. </head>
  152. <body>
  153. <?php
  154. if ($form->validate()) {
  155.     $clean = $form->getSubmitValues();
  156.  
  157.     echo '<pre>';
  158.     print_r($clean);
  159.     echo '</pre>';
  160. }
  161. $form->display();
  162. ?>
  163. </body>
  164. </html>
generated by Generic Syntax Highlighter - GeSHi