Click here to load reader
Upload
zend-technologies
View
1.892
Download
0
Embed Size (px)
DESCRIPTION
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
Citation preview
RIA / AJAXavec ZendX_JQuery
Février 2011 - Zend Technologies
Introduction
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 [email protected]
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
Introduction
OpenStates
• Expertise PHP / Zend Framework Architectures techniques Performances, scalabilité des projets critiques Renforcement et actualisation des compétences Développements spécialisés
JQuery et Zend Framework
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)
Préparations
Préparations
Création d'une application ZF
• Avec Zend_Tool
zf create project . jquery jqueryzf create controller newszf create action list newszf create action form news
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
Préparations
Paramétrage initial de ZendX_JQuery
• Intégration des helpers JQuery
• Intégration de JQuery au layout
• Création d'un layout
Utilisation de JQuery
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
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
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
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
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
Merci !