Nous allons utiliser l’helper d’action autoCompleteDojo pour envoyer les données JSON.
Commençons à coder.

Etape 1: Définir l’environnement Dojo dans notre fichier de Bootstrap.

// Create new view object if not already instantiated
//$view = new Zend_View();
Zend_Dojo::enableView($view);
$view->dojo()
    ->addStyleSheetModule('dijit.themes.tundra')
    ->setDjConfigOption('usePlainJson', true)
    ->disable();

Dans cet exemple, nous utilisons par défaut le CDN défini dans Zend_Dojo. Vous n’avez pas besoin d’ajouter les fichiers JavaScript sur votre serveur. Nous appliquons la feuille de style ‘tundra’.

Etape 2: Créer le controlleur. Créez le fichier DemoController.php dans votre répertoire controller et ajouter le code ci-dessous :

class DemoController extends Zend_Controller_Action
{
    public function indexAction()
    {
    }
 
    public function userlistAction()
    {
    }
 
    public function getForm()
    {
    }
 
}

Comme vous pouvez le voir, il s’agit juste du squelette de notre controlleur. Nous y ajouterons le code dans un moment.

Nous construisons notre formulaire dans la fonction getForm(). Dans une application réelle vous pouvez créer le formulaire dans une classe et un fichier différent. Dans indexAction nous affichons le formulaire et traitons les données fournies par l’utilisateur. In userlistAction nous générons les données au format JSON qui est requis par l’élément filteringSelect.

Etape 3: Créer le formulaire et ses éléments. Placez le code suivant dans la
fonction getForm().

$form = new Zend_Form;
 
 $userId = new Zend_Dojo_Form_Element_FilteringSelect('userId');
 $userId->setLabel('Select a user')
            ->setAutoComplete(true)
            ->setStoreId('userStore')
            ->setStoreType('dojo.data.ItemFileReadStore')
            ->setStoreParams(array('url'=>'/demo/userlist'))
            ->setAttrib("searchAttr", "username")
            ->setRequired(true);
 
 $submit = $form->createElement('submit', 'submit');
 
 $form->addElements(array($userId, $submit));
 
 return $form;

$userId est l’élément de formulaire contenant le widget Dojo filteringSelect. Nous donnons le nom userStore à nos données. Nous précisons que les données seront fournies à partir de l’url /demo/userlist. Enfin, nous attribuons ‘username’ à ‘searchAttr’.

Etape 4: Préparer la base de données

CREATE TABLE `user` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 100 ) NOT NULL ,
) ENGINE = InnoDB
 
INSERT INTO `zf`.`user` (
`id` ,
`username`
)
VALUES (
NULL , 'jamey'
), (
NULL , 'hryan'
), (
NULL , 'jennyross'
), (
NULL , 'natebrg'
), (
NULL , 'deric'
);

Créez des données exemples et insérez les dans la base de données.

Etape 5: Récupérer les données de la base de données, les convertir au format JSON et les envoyer.

J’utilise la base de données MySQL « ZF » dans cet exemple. Insérez le code ci-dessous pour userlistAction(). Je me connecte à la base de données directement depuis l’action dans cet exemple. En pratique, vous pourriez vous connecter à la base de données depuis un point central tel que le bootstrap ou depuis un front controller plugin.

       $db = new Zend_Db_Adapter_Pdo_Mysql(array(
            'host'     => '127.0.0.1',
            'username' => 'zf',
            'password' => 'password',
            'dbname'   => 'zf'
        ));
 
        $result = $db->fetchAll("SELECT * FROM user");
        $data = new Zend_Dojo_Data('id', $result);
        $this->_helper->autoCompleteDojo($data);

Cela prend seulement trois lignes pour récupérer les données et lees envoyer au format que demande Dojo. Nous passons deux paramètres id and $result au constructeur de Zend_Dojo_Data. ‘id’ est l’identifiant unique de la table de notre base de données. Le helper d’action autoCompleteDojo est simple d’emploi. Il désactive le layout et le view renderer. Il met en place les données d’entête appropriées et envoi les données en utilisant l’objet Zend_Dojo_Data.

Faites pointer votre navigateur sur demo/userlist, vous devriez recevoir les données dans un fichier. Dojo se sert de ce fichier via dojo.data.ItemFileReadStore.

Etape 6: Configurer indexAction(). Ajouter le code ci-dessous à la fonction indexAction().

$form = $this->getForm();
 
        if ($this->_request->isPost()) {
 
            if ($form->isValid($_POST)) {
                /*
                 * Process data
                 */
                $userId = $this->_getParam('userId');
                //$userId contains the userId input by the user
            } else {
               $form->populate($_POST);
 
               $this->view->form = $form;
            }
 
        } else {
 
           $this->view->form = $form;
        }

Etape 7: Définir la vue et le layout
Dans le script de vue index.phtml, insérez le code suivant :

<h1>Demo</h1>
echo $this-&gt;form;

Dans le fichier de layout, afficher le contenu Dojo et configurez la classe de la balise body à ‘tundra‘. Lorsque vous utilisez echo $this->dojo(), les liens vers les fichiers JavaScript Dojo sont affichés. Cela imprime également le code JavaScript que le Zend Framework génère pour vous.

    dojo()->addStylesheetModule('dijit.themes.tundra');
    ?>
<div id="content">
        	    layout()-&gt;content ?&gt;</div>

A première vue, il apparait que l’on a écrit beaucoup de code pour obtenir ce résultat. Lorsque vous aurez compris l’ensemble du processus, vous verrez qu’il est vraiment très simple de construire des éléments de formulaire avec la fonctionnalité d’auto-complétion.

J’ai joint les fichiers à ce post pour que vous puissiez vous y référer.

Vous pouvez également jetter un oeil à :

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

L’archive des sources de ce tutoriel (tar.gz)

Related Posts:

• Zend Framework : Ajouter un sélecteur de date sympa dans vos formulaires sans écrire une seule ligne de JavaScript
• Zend framework : Utiliser Zend Framework et Doctrine (Auteur Ruben Vermeersch, Traduction Fred Blanc)
• Le Zend Framework passe en version 1.7.2
• Login et authentification avec le Zend Framework
• Zend Framework : Documentation Zend Framework version 1.5.3 en français au format PDF
• Powered by Contextual Related Posts