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
)
);
?> |
<?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">
//... |
// ...
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);
//... |
//...
//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 |
<?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