[note]Zend Framework et dojo : auto-complétion

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

Similar Posts:

    None Found