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 guillaume.poncon@openstates.com

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 !