Ceci est une note rapide … j’espère produire un article plus intéressant une autre fois …
Nous allons regarder les bases de l’auto-complétion avec ZF et Dojo. Dojo simplement parce qu’il est le mieux intégré des frameworks javascript. Sachant que pour l’instant seul jQuery et Dojo sont intégré
Le code
application/views/scripts/test/index.phtml
<?php $this->dojo()->enable(); //activation de dojo echo $this->comboBox( 'toto', //id html de l'élément '', //valeur par défaut array( 'autocomplete' => true, //activation de l'auto-complétion 'store' => 'stateStore', 'storeType' => 'dojo.data.ItemFileReadStore', 'storeParams' => array('url' => $this->baseUrl('/test/records')), //url où les données JSON sont récupérée 'searchAttr' => 'title', //donnée recherchée pour remplir le combobox ) ); ?> |
application/layoutes/scripts/layout.phtml
// ... if ($this->dojo()->isEnabled()) //Évite les chargement inutile .... { $this->dojo()->setDjConfigOption('isDebug', (APPLICATION_ENV == 'development')); //affiche une console de deboguage si on est en mode dev $this->dojo()->setDjConfigOption('usePlainJson', true); //utilise du json texte $this->dojo()->setLocalPath($this->baseUrl('/themes/js/dojo/dojo/dojo.js')); //chemin vers les fichier dojo $this->dojo()->addStyleSheetModule('dijit.themes.tundra'); //thème à chargé echo $this->dojo(); //affichage du tout ... } // viennent ensuite nos jabvascript, css, etc //... //</head> // ne pas oublier la class tundra dans le body <body class="tundra"> //... |
application/Bootstrap.php
//... //dans _initView() //dojo Zend_Dojo::enableView($view); //... |
application/controllers/TestController.php
<?php class TestController extends Zend_Controller_Action { public function indexAction() { } public function recordsAction() { // on désactive l'affichage $this->_helper->layout()->disableLayout(); //on va cherchée les données et les met dans un objet Zend_Dojo_Data $book = new Default_Model_DbTable_Book(); $dojo = new Zend_Dojo_Data('title', $book->fetchAll()); echo $dojo->toJson(); // on sort ... c'est pas joli mais en attendant cela fonctionne! exit(); } } # EOF |
Choses à retenir comprendre
Les choses à retenir :
- storeParams est l’url où les donnée au format JSON seront prise
- searchAttr est l’élément qui va servir pour recherchée les données dans la masse de donnée JSON
- ne pas oublier de mettre la class css ‘tundra’
- Dojo peut, via ses styles css modifier votre rendu …
Remarque
Version de ZF : 1.9.6
Version de Dojo (fourni avec zf dans extras) : 1.3