Cette démonstration montre comment utiliser JQuery avec Zend Framework et proposer des interfaces dynamiques, ainsi que des mécanismes AJAX simples. Cette base permettra de disposer de tous les outils pour développer une interface applicative fluide et dynamique. Composants principaux : ZendX_JQuery, Zend_View, Zend_Layout, Zend_Controller

1. RIA / AJAX
avec ZendX_JQuery
Février 2011 - Zend Technologies

2. Introduction

3. Introduction
Votre présentateur
• Guillaume Ponçon
 Consultant PHP / Zend Framework
 Auteur de "Best practices PHP5" et "Zend Framework"
(Eyrolles)
 Président de l'AFUP 2007/2008
 Initiateur de PHPTV (www.phptv.fr)
 Intervenant Zend France depuis 2005
 guillaume.poncon@openstates.com

4. Introduction
Zend Technologies
• Le leader des outils PHP / ZF
 Zend Studio
 Zend Server / Zend Server Cluster Manager
 Zend Framework
• Zend en France
 http://www.zend.fr

5. Introduction
OpenStates
• Expertise PHP / Zend Framework
 Architectures techniques
 Performances, scalabilité des projets critiques
 Renforcement et actualisation des compétences
 Développements spécialisés

6. JQuery et Zend Framework

7. JQuery et Zend Framework
Objectifs de la présentation
• Découvrir le composant ZendX_JQuery
 Création d'interfaces riches
 Création de liens AJAX simples
 Utilisation de thèmes JQuery UI
 Paramétrage courant de JQuery pour ZF
• Prérequis
 Bases de Zend Framework
 Aucune connaissance nécessaire en JavaScript
(ou presque)

8. Préparations

9. Préparations
Création d'une application ZF
• Avec Zend_Tool
zf create project . jquery jquery
zf create controller news
zf create action list news
zf create action form news

10. Préparations
Création d'une application ZF
• Nettoyages / mise en mode développement
• Accès aux composants ZendX (extras/library)
• Création d'un projet Zend Studio

11. Préparations
Paramétrage initial de ZendX_JQuery
• Intégration des helpers JQuery
• Intégration de JQuery au layout
• Création d'un layout

12. Utilisation de JQuery

13. Utilisation de JQuery
Un lien AJAX simple
• Préparation du terrain :
 Une page d'accueil news::index
 Une page cible news::list
 Implémentation de la page cible avec Zend_Feed
 Désactivation du layout dans la page cible
• Création de liens AJAX
 Dans la page d'accueil news::index
 Élément <div> qui va contenir la cible
 Cible du lien : news::list

14. Utilisation de JQuery
Paramétrage de JQuery UI
• Pour quoi faire ?
 Attacher un thème pour afficher les composants
 Utiliser en local la bonne version de JQuery
• Démarche
 Télécharger un thème sur le site de JQuery UI
 Paramétrer JQuery dans le bootstrap
• Attacher le thème CSS à Jquery (et non à la vue)
• Attacher les JS à Jquery (et non à la vue)
• Définir le render mode de jquery correctement

15. Utilisation de JQuery
Onglets JQuery
• Principe des onglets :
 Création des contenus (tabPanes)
 Affichage du jeu d'onglets (TabContainer)
 Exemple : affichage des news avec des onglets

16. Utilisation de JQuery
Date Picker
• Ajout du helper Date Picker
• Paramétrage du format de la date
• Paramétrage de la date par défaut
• Ajout d'un attribut "onchange"
• Faire fonctionner un lien AJAX dans une page
cible

17. JQuery et Zend Framework
Pour aller plus loin
• Étude du paramétrage des helpers
• Création de helpers (pour datagrid par
exemple)
• JavaScript évolué avec échanges JSON, XML
• Utilisation de JQuery dans les formulaires
• Création d'éléments de formulaires
dynamiques

18. Merci !