Zend Framework et jQuery une équipe qui gagne

Posté par seiyar81 le 27 mars 2010 | Laisser un commentaire (1)

Si Zend a fait le choix d’intégrer Dojo à son Framework, il faut bien avouer qu’aujourd’hui jQuery a acquit une certaine popularité auprès des développeurs. Notamment grâce à sa modularité, qui est son principal atout, mais également par sa simplicité d’utilisation qui rend accessible à tous le développement d’applications évoluées en Javascript.

Et bien sachez qu’il est possible (i.e. déjà prévu) d’intégrer jQuery au Zend Framework. En effet un package existe et est fournit avec le framework dans le dossier “extras/library/ZendX”.

Mise en place

Pour pouvoir l’utiliser vous devez d’abord copier le dossier ZendX dans le même répertoire que le dossier Zend.

Vous obtenez ensuite l’architecture suivante : 

zendx

Ensuite il va nous falloir utiliser le “view helper” fournit par ZendX_JQuery. Plusieurs méthodes s’offrent à nous :

  • Dans les contrôleurs/vues où l’on souhaite utiliser JQuery on ajoute
    	$this->view->addHelperPath("ZendX/JQuery/View/Helper", "ZendX_JQuery_View_Helper"); 
    	// ou bien, et cela revient au même
    	ZendX_JQuery::enableView($this->view);
    	
  • Pour l’utiliser dans toute l’application on ajoute à notre fichier BootStrap
          $view = new Zend_View();
          $view->addHelperPath('ZendX/JQuery/View/Helper/', 'ZendX_JQuery_View_Helper');
    
          $viewRenderer = new Zend_Controller_Action_Helper_ViewRenderer();
          $viewRenderer->setView($view);
          Zend_Controller_Action_HelperBroker::addHelper($viewRenderer);
        

Je préfère personnellement choisir les vues auxquelles je souhaite appliquer le “view helper” plutôt que de l’utiliser dans toute l’application.

Vous pouvez tout d’abord choisir entre utiliser les fichiers de jQuery et jQuery UI du CDN de Google ou bien utiliser vos propres fichiers.

  • CDN de Google : utilisé par défaut, vous pouvez spécifier la version à charger avec
    		$view->jQuery->setVersion('1.4.2');
    		$view->jQuery->setUiVersion('1.8'); // pour jQuery UI
           
  • Vos fichiers :
    		
    	// Pour inclure vous-même les fichiers dans la balise head.
    	$view->jQuery()->setRenderMode(ZendX_JQuery::RENDER_JAVASCRIPT | ZendX_JQuery::RENDER_JQUERY_ON_LOAD);
    	// Pour indiquer le chemin de vos fichiers et laisser le framework gérer le tout
    	$view->jQuery()->
    	

Petite précision toutefois, les fichiers de thèmes de jQuery UI ne sont pas disponibles sur le CDN, vous devez donc les inclure vous-même avec par exemple la fonction jQuery->addStylesheet($pathToFile);

Utilisation

Tout ceci ne nous dit pas comment faire pour utiliser jQuery dans notre application, rassurez-vous c’est on ne peut plus simple.

Imaginons par exemple un simple lien pour charger une partie de la page en Ajax :

echo $this->ajaxLink("Get Index", "/index", 
                        array('update' => '#mydiv', 
                              'method' => 'POST',
                              'beforeSend' => 'aCallbackFunction()',
                              'complete' => 'alert(data)')); ?>

Rien de bien compliqué ici, #mydiv indiquant la div au sein de laquelle il faut insérer le contenu, /index l’url de la page à récupérer, beforeSend et complete les callback à utiliser.

Pas plus de code à écrire, le code généré sera inséré à l’appel de $this->jQuery();.

Mais on peut utiliser jQuery pour plus que des simples liens. Ainsi on peut dans des formulaires :

// Créé un input avec auto-complétion
echo $this->autoComplete("country", "", 
                             array('source' => array('France', 'United Kingdom', 'United States', 'Germany', 'Italy', 'Spain')));
// On peut donc facilement charger la source via une base de données

// Créé un input avec un calendrier
echo $this->datePicker("datePicker", '',
                        array('defaultDate' => date('d/m/Y', time()), 
                                'onClose' => new Zend_Json_Expr('myFunction')));

// Créé un slider
echo $this->slider("slider", "", 
                        array('min'=>'0', 'max'=>'100', 'step'=>'5'));

On peut également utiliser le framework pour créer des dialogs, tabContainer, accordionContainer.

Vous pouvez en apprendre plus avec la documentation, attention toutefois car des helpers sont toujours disponibles tels que ZendX_JQuery_View_Helper_ColorPicker ou ZendX_JQuery_View_Helper_Spinner alors que jQuery UI ne supporte plus les éléments.

Avec cette gestion de jQuery, ce dernier devient une bonne alternative à Dojo pour développer avec le Zend Framework.

Je l’ai personnellement adopté, et vous comptez-vous un jour passer à jQuery grâce à cette utilisation simplifiée ?

Catégorie: Développement Web, Javascript, PHP, Zend Framework | Laisser un commentaire (1)


Un commentaire pour “Zend Framework et jQuery une équipe qui gagne”

  • Simple, compréhensible et efficace !
    Merci !

    J’utilise Jquery dans mes projets ZendFramework, c’est clairement la lib JS la plus simple à utiliser mais aussi l’une des plus puissante… On regrette cependant la non intégration de la gestion de l’historique ( back, forward et bookmark ) l’utilisation d’un plugin est requis !

    Je me permet de linker un Webinard très simpa sur le sujet :
    http://www.zend.com/fr/resources/webinars/
    ( voir : AJAX/RIA facile avec ZF et JQuery )

    Ps: Dojo n’est pas franchement compliqué et fait très bien le boulot lui aussi

Laissez un commentaire