Les widgets génériques Pxxo permettent de facilement et rapidement mettre en œuvre des interfaces Web. C'est le cas notamment du widget Pxxo_Widget_Form qui permet la fabrication de formulaire en toute simplicité.
Exemple :
require_once 'Pxxo/Widget.php';
require_once "Pxxo/Widget/Form.php";
class Exemple01 extends Pxxo_Widget
{
public function __construct($params = array())
{
parent::__construct($params, __FILE__);
}
public function index()
{
$p = array(
'inputs' => array(
array(
'id' => 'id1',
'label' => 'Champ 1',
'type' => 'text',
'size' => 40,
'required' => true,
),
array(
'id' => 'id2',
'label' => 'Champ 2',
'type' => 'text',
'size' => 40,
'required' => true,
),
),
);
$o = new Pxxo_Widget_Form($p);
$this->putWidget('FORM', $o);
}
}
donnera ceci :
Fonctionnellement ce formulaire est parfait (!), mais au niveau du look on peut ne pas aimer son style !
Pxxo permet de résoudre facilement ce problème grâce à la surcharge de template. Cette méthode va permettre de redéfinir localement le style (CSS), la structure (HTML) et même le dynamisme (Javascript) du formulaire.
Voici par exemple comment surcharger le style des input[type=text] de notre widget Exemple01 :
Pour cela on va reproduire l'imbrication des widgets sous forme de répertoire dans le répertoire des templates de notre widget.
Ensuite il nous suffira de créer des fichiers dans le répertoire correspondant au widget pour lequel on souhaite surcharger.
Ce qui donne pour un widget nommé Exemple01 :
`-----Exemple01 | `-----default | | `-----Pxxo_Widget_Form | | | `-----Pxxo_Widget_Input_Text | | | `-----style.php.css
Et en plaçant cette règle CSS dans le fichier style.php.css :
#<?php echo $this->Self->get_id_attribute() ?> {
background-color:#F7F9FB;
border: 1px solid #D0D9E0;
padding: 4px;
color: #444444;
font-family: verdana,sans-serif;
font-size: 1.1em;
}
On obtiendra :
Simple et puissant non ?
