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

Dans: Programmation|Tutoriels|Zend Framework|php|web2.0

25 sept 2008
Cet article est une traduction du billet de Sudheer Satyanarayana que vous retrouverez en VO sur LampComputing

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.

<?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 :

<?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.

<?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.

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

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

<?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.

<?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.

<?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.

<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.

<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.

<!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/

6 réponse to Zend Framework : Ajouter un sélecteur de date sympa dans vos formulaires sans écrire une seule ligne de JavaScript

Avatar

__fabrice

septembre 30th, 2008 at 16 h 11 min

Salut,

Je viens de tester ce tuto, cela marche, sauf au moment de la validation, j’ai cette erreur :

Fatal error: Uncaught exception 'Zend_Loader_PluginLoader_Exception' with message 'Plugin by name Dojo was not found in the registry.' in C:\temp\fabrice\PortableApps\wampMSS\offline-shared\includes\zf\library\Zend\Loader\PluginLoader.php:370 Stack trace: #0 C:\temp\fabrice\PortableApps\wampMSS\offline-shared\includes\zf\library\Zend\View\Abstract.php(1114): Zend_Loader_PluginLoader->load('Dojo') #1 C:\temp\fabrice\PortableApps\wampMSS\offline-shared\includes\zf\library\Zend\View\Abstract.php(545): Zend_View_Abstract->_getPlugin('helper', 'dojo') #2 C:\temp\fabrice\PortableApps\wampMSS\offline-shared\includes\zf\library\Zend\View\Abstract.php(312): Zend_View_Abstract->getHelper('dojo') #3 [internal function]: Zend_View_Abstract->__call('dojo', Array) #4 C:\temp\fabrice\PortableApps\wampMSS\www\ZendFramework\debut1\application\layouts\scripts\layout.phtml(7): Zend_View->dojo() #5 C:\temp\fabrice\PortableApps\wampMSS\offline-shared\includes\zf\library\Zend\View.php(107): include('C:\temp\fabrice...') #6 C:\temp\fabrice\Port in C:\temp\fabrice\PortableApps\wampMSS\offline-shared\includes\zf\library\Zend\Loader\PluginLoader.php on line 370

Un bug Dojo ? (j’ai la version 1.6 de ZF). Le code de ZF est tiré du premier exemple en ligne du site donc, pas de soucis de ce coté là :)

Fabrice

Avatar

jyl

octobre 29th, 2008 at 0 h 28 min

Bonjour,
Même soucis :) Je suppose que c’est dans le chargement du plugin !

La notice de zend dit
« La distribution Dojo elle-même peut être trouvée dans le dossier externals/dojo/ de la distribution du Zend Framework. Il s’agit d’une distribution source, qui inclue le code source javascript complet de Dojo, les tests unitaires et les outils de construction. Vous pouvez créer un lien symbolique dans votre répertoire javascript, le copier ou utiliser l’outil de construction pour créer votre propre paquet que vous pourrez inclure dans votre projet. »

Avec ça quand on connait pas zend et sa configuration on va pas loin :( Quelqu’un en sait plus ???

Merci d’avance

Avatar

Example d'auto-complétion avec Zend_Dojo_Form_Element_FilteringSelect et Zend_Dojo_Data | itanea, le blog

décembre 15th, 2008 at 14 h 54 min

[...] Ajouter un sélecteur de date sympa dans vos formulaires sans écrire une seule ligne de JavaScript [...]

Avatar

zendTester

janvier 19th, 2010 at 18 h 11 min

Bonjour,

Personnellement sur la version 1.9.7 de zend

J’ai suivi ton exemple et le dojoType= »dijit.form.DateTextBox » n’apparait même pas. Ca commence mal.

Ai-je oublier quelque chose ?

Merci d’avance

// *************************** ERREURS *********************************

ini_set(‘display_errors’, 1);
ini_set(‘display_startup_errors’, 1);

// *************************** AUTOLOAD LIBRARY *********************************
$include_path = get_include_path();
set_include_path($include_path . PATH_SEPARATOR . ‘../Library/’);
require ‘Zend/Loader/Autoloader.php’;
// Déclaration du chargement automatique
$autoloader = Zend_Loader_Autoloader::getInstance();
// autorise l’autochargement des classe FmBox
$autoloader->registerNamespace(‘Wiip’);

// setup of locale
$locale = new Zend_Locale(‘fr_CH’);
Zend_Registry::set(‘Zend_Locale’, $locale);

// VIEW
$view = new Zend_View();

// initialise dojo
Zend_Dojo::enableView($view);

// FORMULAIRE
$form = new Zend_Form();
$form->setAction( »)
->setMethod(‘POST’)
->setName(‘formAction’)
->setAttrib(‘id’,'formAction’)
->setView($view);

$action = new Zend_Form_Element_Hidden(‘actionId’);
$action ->setValue(’1′);

$birthday = new Zend_Dojo_Form_Element_DateTextBox(‘birthday’);
$birthday->setLabel(‘Birthday’);

$form->addElements(array($action,$birthday));
$form->addElement(‘submit’, ‘submit’,array(‘label’ => ‘Valider’));

echo $form;

Avatar

kerinox

avril 2nd, 2010 at 2 h 25 min

Bonjour,
Tout d’abord merci pour cet article qui m’a été fort utile!

J’aurai juste une question concernant le format de la valeur que retourne dateTextBox. Existe-t-il un moyen de changer le format par défaut (yyyy-mm-dd) dans une autre format (par exemple: ddmmyyyy) ??
Merci d’avance.
Jonathan.

Avatar

vince851

avril 21st, 2010 at 11 h 12 min

Salut à tous ! merci pour cet article c’est exactement ce qu’il me fallait !! Maintenant j’aimerais juste savoir comment changer le look et le format si possible de ce calendrier?

Merci d’avance

Commentez ce billet

Nota : Tous les commentaires sont modérés à posteriori.

A propos

Un blog technologique, sur le développement, sur le Zend Framework, sur PHP et aussi une petite touche d'entreprenariat.

ElePHPants

    Elefant train like meOn guardEuroscope
  • LucSens: "Lost in Japan" and "Lost in China" offer support for Japanese and Chinese - you just take a photo w [...]
  • Ludovic: Un grand merci pour ce super tutoriel qui m'a permis d'intégrer sans difficultés Doctrine à Zend [...]
  • crazyball: Bonjour, merci pour ce super tuto, par contre est il possible de faire une auto-completion de type " [...]
  • Elio DUFOUR: Hello, j'ai trouvé votre site sympa via Google et je tenais à vous le dire. [...]
  • Prestanux: Bonjour, Les plateformes de mise en relation commerciales sont nombreuses sur la toiles et il est [...]

En ce moment...

Posting tweet...

Partenaires