Itanéa, le blog

Les utilisateurs du Zend Framework savent que le toolkit Dojo est intégré depuis la version 1.6. Dans un post précédent, j’ai expliquer comment ajouter un selecteur de date Dojo sympa dans votre élément texte de formulaire en codant manuellement le JavaScript nécessaire. Dans le billet d’aujourd’hui, nous allons voir comment créer le même élément avec Zend_Dojo. Comme l’indique le titre, vous n’aurez pas à écrire une seule ligne de code JavaScript. Zend_Dojo effectuera tout le travail pour vous.

Prérequis : vous devez être à l’aise avec Zend_Form, Zend_Controller et Zend_Layout.

Bootstrap : Le Zend Framework est fourni avec plusieurs helpers de vue Dojo. Vous devez permettre à l’objet view de trouver les aides de vue Dojo.

Localisez l’objet de vue et ajoutez la ligne suivante dans votre fichier de bootstrap.

1
2
3
4
5

<?php
// Créer un nouvel objet s'il n'est pas déjà instancié
//$view = new Zend_View();
Zend_Dojo::enableView($view);
?>

Cela va paramétrer l’environnement Dojo et utilise AOL CDN (Content Delivery Network) par défaut. Cela ne sera à configurer qu’une seule fois pour votre application. Vous pouvez utiliser les méthodes disponibles d’helpers de vue pour spécifier un CDN (Content Delivery Network) ou un chemin local pour l’installation de Dojo, des chemins pour les modules personnalisés de Dojo, les déclarations dojo.require, les styles et thèmes Dojo à utiliser et pour crééer les évènements dojo.addOnLoad().

Création du formulaire :

1
2
3
4
5
6

<?php
$form = new Zend_Form;
$name = $form->createElement('text', 'name')
->setLabel('Your full name')
->setRequired(true);
?>

Le code ci-dessus créée un nouvelle objet formulaire et un champ text. A l’étape suivante, nous allons créée le sélecteur de date de la même manière.

Nous allons appeler notre champ sélecteur de date ‘birthday’. Nous utiliserons pour cette exemple le widget Dojo DateTextBox.

1
2
3
4

<?php
$birthday = new Zend_Dojo_Form_Element_DateTextBox('birthday');
$birthday->setLabel('Birthday');
?>

Les deux lignes ci-dessus crééent le champ de formulaire de type DateTextBox en lui assignant le label ‘Birthday’. Cela génère à peu près ce code lorsque vous affichez le formulaire.

1
2

<!-- indicative output -->
<input type="text" name="date"  dojoType="dijit.form.DateTextBox" />

Créér le champ submit et ajouter tous les champs au formulaire.

1
2
3
4

<?php
$submit = $form->createElement('submit', 'submit');
$form->addElements(array($name, $birthday, $submit));
?>

Nous en avons fini avec la création du formulaire. Je poste ci-dessous le code complet du controlleur qui contient la fonction pour créer le formulaire.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<?php
class IndexController extends Zend_Controller_Action
{
public function indexAction()
{
// Appel de la fonction getForm()
$form = $this->getForm();
if ($this->_request->isPost()) {
if ($form->isValid($_POST)) {
// Traitement des données
// Passer les valeurs de name et birthday à la vue
// vous pourrez ainsi les afficher dans la vue
$this->view->name = $this->_getParam('name');
$this->view->birthday = $this->_getParam('birthday');
} else {
// Si la validation du formulaire échoue, on le repeuple et on l'affiche à nouveau
$form->populate($_POST);
$this->view-&gt;form = $form;
}
} else {
// Si la requête, n'est pas de type POST, on affiche le formulaire
$this->view->form = $form;
}
}
// Fonction pour crééer le formulaire
public function getForm()
{
$form = new Zend_Form;
$name = $form->createElement('text', 'name')
->setLabel('Your full name')
->setRequired(true);
$birthday = new Zend_Dojo_Form_Element_DateTextBox('birthday');
$birthday->setLabel('Birthday');
$submit = $form->createElement('submit', 'submit');
$form->addElements(array($name, $birthday, $submit));
// Nous avons déjà parlé de ce que réalise le code ci-dessus
return $form;
}
}
?>

Lorsque le formulaire est soumis, on peut accéder aux valeurs de ‘name’ et de ‘birthday’ en utilisant la méthode habituelle $this->_getParam(). Depuis le controlleur, on passe les valeurs de ‘name’ et ‘birthday’ à la vue, comme cela nous pourrons les afficher dans notre vue.

Ajouter le code suivant à votre fichier vue pour afficher les valeurs de ‘name’ et ‘birthday’ renseignées par l’utilisateur.

1
2
3
4
5

<?php
echo "Votre nom est " . $this->name . "<br />";
echo "Votre anniversaire est le " . $this->birthday . "<br />";
echo $this->form ;
>

Dans votre script de layout, vous devez ajouter vos modules de feuilles de style et afficher l’objet Dojo. Dans cet exemple, nous utilisons la feuille de style tundra.

1
2
3
4
5
6

<title>
<?php echo $this->escape($this->pageTitle); echo " - Binary Vibes BizSense"; ?></title>
<?php echo $this->dojo();
echo $this->dojo()->addStylesheetModule('dijit.themes.tundra');
?>
</title>

N’oubliez pas donner la classe ‘tundra’ à votre balise body.

1
2
3
4

<body class="tundra">
<div id="content">
<?php  echo $this->layout()->content ?>
</div>

Je publie ci-dessous l’exemple complet du script de layout pour vous servir de référence.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Binary Vibes BizSense</title>
<?php echo $this->dojo();
echo $this->dojo()->addStylesheetModule('dijit.themes.tundra');
?>
</head>
<body class="tundra">
<div id="content">
<?php  echo $this->layout()->content ?>
</div>
</body>
</html>

C’est tout ce qu’il ya à faire pour utiliser les widgets de formulaire Dojo dans votre application propulsée par le Zend Framework

Références :
(fr) Zend_Dojo - http://framework.zend.com/manual/fr/zend.dojo.html
(en) Dojotoolkit - http://dojotoolkit.org/
(en) Plain HTML and JavaScript DateTextBox usage example - http://lampcomputing.com/add-cool-date-picker-2-lines-javascript
(fr) Dojotoolkit France : http://www/dojotoolkit-fr.org
(fr) La communauté Française Zend Framework : http://www.z-f.fr/

Tags: aide de vue, bootstrap, date picker, dojo, dojotoolkit, formulaire, javascript, sélecteur de date, Tutoriels, widget, zend, Zend Framework, zend_controller, Zend_Dojo, Zend_Form, zend_layout

3 Responses to “Zend Framework : Ajouter un sélecteur de date sympa dans vos formulaires sans écrire une seule ligne de JavaScript”