Download - AJAX/RIA facile avec ZF et JQuery

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


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


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


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


Onglets JQuery

• Principe des onglets : Création des contenus (tabPanes) Affichage du jeu d'onglets (TabContainer) Exemple : affichage des news avec des onglets


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


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 !