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
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
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)
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
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